diff --git a/grid-sdk/angular/data-grid/overview.md b/grid-sdk/angular/data-grid/overview.md new file mode 100644 index 000000000..974011fa8 --- /dev/null +++ b/grid-sdk/angular/data-grid/overview.md @@ -0,0 +1,214 @@ +--- +layout: post +title: Angular Data Grid Overview and Features | Syncfusion +description: Learn how to use Angular Data Grid for data management, CRUD operations, sorting, filtering, grouping, paging, and virtualization. +platform: grid-sdk +control: Overview +documentation: ug +domainurl: https://help.syncfusion.com/grid-sdk +--- + +# Angular Data Grid Overview + +The Angular Data Grid is a powerful and feature-rich UI component designed for displaying and managing tabular data with high performance and flexibility. It offers a comprehensive set of enterprise-grade capabilities, including advanced data operations, seamless integration with multiple data sources, and extensive customization options. + +## Common use cases + +The Angular Data Grid supports a wide range of data-intensive application scenarios. + +| Use case | Description | Relevant grid capabilities | +|----------|-------------|-----------------------| +| **Enterprise data management** | Manage customers, products, orders, suppliers, and operational records. | CRUD, filtering, sorting, grouping | +| **Financial applications** | Display and analyze transactions, portfolios, market data, and financial records. | Aggregates, formatting, virtualization, remote data | +| **Large-scale applications** | Work with large datasets while maintaining responsive interactions. | Virtualization, infinite scrolling, remote operations | +| **CRM applications** | Manage customer records, service requests, support tickets, and activities. | Searching, editing, selection, filtering | +| **Reporting applications** | Analyze and distribute business data in common document formats. | Aggregation, Excel export, PDF export, printing | + +## Data connectivity + +The Angular Data Grid integrates with modern application architectures, supporting local collections, REST APIs, GraphQL services, OData endpoints, ORM frameworks, and relational databases. + +### Data binding approaches + +- **[Local data](./data-binding/local-data)** - Bind grids to local collections and lists for fast data access without external dependencies. Ideal for small to medium datasets and rapid prototyping. + +- **[Remote data](./data-binding/remote-data)** - Connect to web services, REST APIs, and remote endpoints with automatic request handling and response parsing. Ideal for scalable applications with large or frequently updated datasets. + +- **[Custom API binding and Observable support](./data-binding/remote-data#binding-observable-data-using-async-pipe)** - Integrate custom APIs, data services, and Observable streams with complete control over data operations and support for reactive real-time updates. + +- **ORM integration** - Seamless integration with popular Object-Relational Mapping frameworks eliminates custom data mapping code and enables LINQ-based queries. + - **[Entity Framework](./connecting-to-orm/entityframework)** - Integrate with Entity Framework and EF Core-based applications. + - **[Dapper](./connecting-to-orm/dapper)** - Connect to applications that use lightweight SQL-based data access. + +**Database compatibility** + +The Data Grid integrates with major relational databases to provide seamless data access and management: + +| Database | Key Benefit | Best For | +|----------|---------------|----------| +| **[Microsoft SQL Server](./connecting-to-database/microsoft-sql-server)** | ADO.NET and Entity Framework integration | Enterprise applications, complex queries | +| **[MySQL Server](./connecting-to-database/mysql-server)** | Cross-platform connectivity | Web applications, open-source stacks | +| **[PostgreSQL](./connecting-to-database/postgresql-server)** | Advanced relational features | Large-scale applications, complex data structures | +| **[SQLite](./connecting-to-database/sqlite-server)** | Embedded database | Desktop apps, mobile apps, local storage | + +**API and service integration** + +API and service integration enables the Data Grid to connect seamlessly with GraphQL, Web API, OData, URL, and custom services for flexible server-side data access. + +| Integration approach | Best suited for | Key benefit | +|-----------------------|------------------|-------------| +| **[RESTful APIs](./connecting-to-adaptors/url-adaptor)** | Web applications and CRUD-based services | Standard HTTP-based data access | +| **[OData](./connecting-to-adaptors/odatav4-adaptor)** | Queryable enterprise data services | Standardized query and data operations | +| **[GraphQL](./connecting-to-adaptors/graphql-adaptor)** | Applications requiring flexible data queries | Declarative, field‑specific data retrieval | +| **[Custom APIs](./data-binding/remote-data)** | Connect applications with external APIs or services | Complete control over server-side data operations and request handling | + +## Data operations + +The Angular Data Grid includes key features that make it easier to work with and understand large sets of information. These capabilities support organizing records, locating information efficiently, and summarizing results to enable clear analysis of complex datasets. + +- **[Sorting](./sorting)** - Arrange records in ascending or descending order to quickly identify trends and patterns. +- **[Filter bar](./filtering/filter-bar)** - Apply inline text filters in column headers for immediate results without dialogs. +- **[Filter menu](./filtering/filter-menu)** - Use advanced filtering with complex conditions and multiple criteria for powerful expression‑based queries. +- **[Excel‑like filter](./excel-like-filter)** - Filter with a familiar checkbox interface, allowing multi‑select from available values. +- **[Searching](./searching)** - Perform rapid text‑based searches across one or multiple columns for global or column‑specific results. +- **[Grouping](./grouping/grouping)** - Organize records into categories with multi‑level hierarchical grouping for better comprehension. +- **[Aggregates](./aggregates/aggregates)** - Calculate and display summary values (sum, average, min, max, custom metrics) to gain real‑time insights. + +## Large-scale rendering performance + +The Angular Data Grid is designed for high performance, ensuring smooth interaction with large datasets. It uses built‑in DOM virtualization with paging or virtual scrolling to load data on demand. This approach minimizes memory usage and reduces rendering overhead by limiting the number of active DOM elements, delivering responsive navigation and seamless scrolling even with very large datasets. + +## Editing and CRUD operations + +The Angular Data Grid enables seamless Create, Read, Update, and Delete (CRUD) operations directly within the grid interface, eliminating the need for separate forms or pages. Data modification occurs inline with immediate visual feedback, improving productivity and reducing context switching. + +**Editing modes** + +Multiple editing modes support different workflow scenarios: + +| Mode | Description | Best for | Key benefit | +|------|-------------|----------|-------------| +| **[In-line editing](./editing/in-line-editing)** | Edit records directly within grid rows | Simple updates and streamlined workflows | Minimal context switching and faster editing | +| **[Dialog editing](./editing/dialog-editing)** | Edit records in a dedicated dialog form | Multi-field data entry | Structured form-based editing with additional space | +| **[Batch editing](./editing/batch-editing)** | Make multiple changes before saving them together | High-volume editing | Efficient commits with fewer server requests | +| **[Cell editing](./editing/cell-editing)** | Edit individual cells within the grid | Frequent data entry, precision-focused editing | Precise cell-level editing and rapid data updates | + +**[Data validation](./editing/validation)**: +Built‑in validation rules such as required fields, minimum and maximum values, and numeric‑only checks ensure consistent data accuracy. In addition, custom validation rules provide flexibility to define tailored logic for specific business requirements, validating input before changes are saved. + +## Columns + +The Angular Data Grid provides flexible column and layout customization with formatting, resizing, reordering, and visibility controls for professional displays. + +- **[Column formatting](./columns/columns)** - Apply predefined or custom formats (currency, dates, percentages) for professional number and date presentation. +- **[Column resizing](./columns/column-resizing)** - Adjust widths manually with auto‑fit and responsive options for optimal visibility. +- **[Column reordering](./columns/column-reorder)** - Drag headers to reorder columns for preferred arrangement. +- **[Frozen columns](./columns/frozen-column)** - Keep key columns visible during horizontal scrolling for critical information access. +- **[Column spanning](./columns/column-spanning)** - Extend cells across multiple columns to create grouped or summary layouts. +- **[Column menu](./columns/column-menu)** - Use dropdowns for visibility, filtering, sorting, grouping, and autofit for quick management. +- **[Column chooser](./columns/column-chooser)** - Show or hide columns dynamically with a dialog for configurable visibility. + +## Responsive design + +The Angular Data Grid provides [adaptive layouts](./adaptive) and mobile-friendly interactions for a consistent experience across desktop, tablet, and mobile devices. + +## User experience and interaction + +The Angular Data Grid delivers accessible, customizable data experiences with flexible interactions, templating, and standards-compliant accessibility support. + +**Templating and customization** + +- **[Header template](./columns/column-headers#header-template)** - Customize column headers with icons, tooltips, or complex formatting for professional design. +- **[Column template](./columns/column-template)** - Render cells with conditional styling and components for rich visualization. +- **[Row template](./row/row-template)** - Apply complete row customization for specialized layouts and unique presentations. +- **[Edit template](./editing/template-editing)** - Build custom edit forms with specialized controls and validation for complex data entry. + +**Selection** + +- **[Row selection](./selection/row-selection)** - Select single or multiple rows for flexible workflows +- **[Checkbox selection](./selection/check-box-selection)** - Use checkboxes with select‑all for bulk operations +- **[Cell selection](./selection/cell-selection)** - Choose individual cells or ranges with spreadsheet‑like interaction +- **[Persist selection](./selection/selection#persist-selection)** - Retain selections across sorting, filtering, and paging. + +**Accessibility and keyboard navigation** + +The Data Grid is fully accessible and compliant with Web Content Accessibility Guidelines (WCAG) standards: + +- **[WCAG compliance](./accessibility)** — Level AA accessibility standards +- **[Keyboard shortcuts](./accessibility#keyboard-interaction)** — Complete grid operation via keyboard + - Tab/Shift+Tab — Navigate between cells. + - Arrow Keys — Move between rows and columns. + - Enter — Update cells, confirm changes. + - Escape — Cancel editing. + - Ctrl+A — Select all rows. +- **[Screen reader support](./accessibility)** — Full compatibility with assistive technologies. +- **[Semantic HTML](./accessibility)** — Proper ARIA labels and semantic markup. + +## Export and print + +The Angular Data Grid provides comprehensive export and reporting capabilities, enabling extraction, analysis, and distribution of grid data in professional document formats. Built‑in Excel, PDF, and print functionality with customizable templates eliminates the need for external reporting tools. + +| Format | Key benefit | Best for | +|--------|-------------|----------| +| **[Excel export](./excel-export/excel-exporting)** | Export grid data to Excel while preserving formatting, styling, grouping, and summaries | Business reporting, spreadsheet workflows | +| **[PDF export](./pdf-export/pdf-export)** | Generate professional documents with customizable layouts and formatting | Reports, document distribution, archiving | +| **[CSV export](./excel-export/excel-exporting)** | Export raw tabular data in a lightweight format | Data exchange, system integration, bulk processing | +| **[Print](./print)** | Produce printer‑friendly output directly from the Data Grid | Hard‑copy operational documents, on‑demand printing | + +## Advanced features + +The Angular Data Grid includes sophisticated capabilities designed for complex enterprise data scenarios. These advanced features enable developers to build powerful, scalable data management solutions that handle demanding business requirements. + +- **[Master-detail grids](./hierarchy-grid)** - Implement master–detail relationships to display complex parent–child data structures. +- **[Row spanning](./row-spanning)** - Extend cells vertically across rows to create specialized layouts. +- **[Detail templates](./detail-template)** - Add expandable row sections for drill‑down exploration and richer data views. +- **[Foreign key columns](./columns/foreign-key-column)** - Automatically look up related data to show meaningful relationships. +- **[Global/Local formatting](./global-local)** - Apply consistent or column‑specific formatting for professional presentation of values. +- **[State persistence](./state-management)** — Saves and restores grid configurations such as sorting, filtering, grouping, paging, and column settings across sessions. + +**Enterprise patterns** + +For specific implementation patterns, refer to feature documentation: + +- **Large‑scale business applications** — Combine [State management](./state-management), [Hierarchical Grids](./hierarchy-grid), optimized performance techniques like [DOM Virtualization](./scrolling/dom-virtualization), and [Foreign key columns](./columns/foreign-key-column) to deliver responsive experiences across complex datasets. +- **Data‑intensive operations** — Leverage [Grouping](./grouping/grouping), [Aggregates](./aggregates/aggregates), and [Filtering](./filtering/filtering) to efficiently manage and analyze large volumes of business data. +- **Reporting and export solutions** — Combine [Aggregates](./aggregates/aggregates), [Excel export](./excel-export/excel-exporting), and [PDF export](./pdf-export/pdf-export) to generate professional business reports and shareable documents. + +## Themes and styling + +Match the Angular Data Grid to the application's visual design using built-in themes and customization options. Supported themes are: + +- Fluent 2 +- Material 3 +- Bootstrap 5 +- Tailwind CSS +- Fluent 2 High Contrast + +[Syncfusion Theme Studio](https://ej2.syncfusion.com/angular/documentation/appearance/theme-studio) allows customization of the Data Grid’s appearance by modifying theme variables such as primary, accent, and background colors, enabling consistent styling, lightweight CSS generation, and seamless integration while ensuring the grid aligns with application design requirements + +[Explore themes and styling](../appearance-and-styling/appearance-styling) + +## Quick links + +**Getting started:** +- [Angular Data Grid Guide](./getting-started) + +**Popular features:** +- [Filtering](./filtering/filtering) +- [Sorting](./sorting) +- [Editing and CRUD](./editing) +- [Export and reporting](./excel-export/excel-exporting) +- [Data validation](./editing/validation) + +**Advanced features** +- [DOM Virtualization](./scrolling/dom-virtualization) +- [State management](./state-management) +- [Hierarchical Grid](./hierarchy-grid) + +## Support and resources + +- **Questions?** Visit the [Syncfusion support portal](https://www.syncfusion.com/support) +- **Code examples?** Browse [Data Grid demos](https://ej2.syncfusion.com/angular/demos/#/tailwind3/grid/over-view) and samples +- **API details?** See [Data Grid API reference](https://ej2.syncfusion.com/angular/documentation/api/grid/index-default) +- **Community?** Join the [Syncfusion community forum](https://www.syncfusion.com/forums/angular-js2) +- **What's new?** Check [Release notes](../../Release-Notes) \ No newline at end of file diff --git a/grid-sdk/asp-net-core/data-grid/overview.md b/grid-sdk/asp-net-core/data-grid/overview.md index 7107b12ec..b12d1f026 100644 --- a/grid-sdk/asp-net-core/data-grid/overview.md +++ b/grid-sdk/asp-net-core/data-grid/overview.md @@ -1,40 +1,213 @@ --- layout: post -title: Overview in Syncfusion ASP.NET Core DataGrid Component -description: Learn here all about Overview in Syncfusion ASP.NET Core DataGrid component of Syncfusion Essential JS 2 and more. +title: ASP.NET Core Grid Overview | Syncfusion +description: Learn how to use ASP.NET Core Data Grid to display and manage tabular data with data binding, paging, sorting, filtering, editing, and templates. platform: grid-sdk -control: Index -publishingplatform: grid-sdk +control: Overview documentation: ug --- +# ASP.NET Core Data Grid Overview -# Overview in ASP.NET Core DataGrid Component - -The DataGrid component is used to display and manipulate tabular data with configuration options to control the way the data is presented. It can pull data from data sources such as array of JavaScript objects, `OData web services`, or `DataManager` and binding data fields to columns. It also displays the column header to identify the field with support for grouped records. - -The most important features available in the DataGrid component are paging, sorting, filtering, searching, and grouping. - -## Key Features - -* [**Data Sources**](./data-binding): Binds the DataGrid component with an array of JavaScript objects or DataManager. -* [**Sorting**](./sorting) and [**Grouping**](./grouping): Supports **n** level of sorting and grouping. -* [**Filtering**](./filtering): Offers filter bar in each column to filter data. -* [**Paging**](./paging): Allows easy switching between pages using the pager bar. -* [**Editing**](./edit): provides the options for create, read, update, and delete operations. -* [**Columns**](./columns): The column definitions are used as the dataSource schema in the DataGrid. This plays a vital role in rendering column values in the required format. -* [**Reordering**](./columns#reorder): Allows drag and drop of any column anywhere in the DataGrid’s column header row, thus allowing repositioning of columns. -* [**Column Chooser**](./columns#column-chooser): The column chooser provides a list of column names paired with check boxes that allow the visibility to be toggled on the fly. -* [**Resizing**](./columns#column-resizing): Resizing allows changing column width on the fly by simply dragging the right corner of the column header. -* [**Freeze**](./scrolling#frozen-rows-and-columns): Columns and rows can be frozen to allow scrolling and comparing cell values. -* [**Cell Spanning**](./columns#column-spanning): DataGrid cells can be spanned based on the preferred criteria. -* [**Foreign Data Source**](./columns#foreign-key-column): This provides the option to show values from external or lookup data sources in a column based on foreign key/value mapping. -* [**Cell Styling**](./how-to#customize-column-styles): DataGrid cell styles can be customized either by using CSS or programmatically. -* [**Selection**](./selection): Rows or cells can be selected in the DataGrid. One or more rows or cells can also be selected by holding Ctrl or Command, or programmatically. -* [**Templates**](./columns#column-template): Templates can be used to create custom user experiences in the DataGrid. -* [**Aggregation**](./aggregates): Provides the option to easily visualized the Aggregates for column values. -* [**Context Menu**](./context-menu): The context menu provides a list of actions to be performed in the DataGrid. It appears when a cell, header, or the pager is right-clicked. -* [**Clipboard**](./clipboard): Selected rows and cells can be copied from the DataGrid. -* [**Export**](./pdf-export): Provides the options to Export the DataGrid data to Excel, PDF, and CSV formats. -* [**RTL Support**](./global-local#right-to-left-rtl): Provides right-to-left mode that aligns the DataGrid content from right to left. -* [**Localization**](./global-local#localization): Provides an inherent support to localize the UI. +The ASP.NET Core Data Grid is a powerful and feature-rich UI component designed for displaying and managing tabular data with high performance and flexibility. It offers a comprehensive set of enterprise-grade capabilities, including advanced data operations, seamless integration with multiple data sources, and extensive customization options. + +## Common use cases + +The ASP.NET Core Data Grid supports a wide range of data-intensive application scenarios. + +| Use case | Description | Relevant grid capabilities | +|----------|-------------|-----------------------| +| **Enterprise data management** | Manage customers, products, orders, suppliers, and operational records. | CRUD, filtering, sorting, grouping | +| **Financial applications** | Display and analyze transactions, portfolios, market data, and financial records. | Aggregates, formatting, virtualization, remote data | +| **Large-scale applications** | Work with large datasets while maintaining responsive interactions. | Virtualization, infinite scrolling, remote operations | +| **CRM applications** | Manage customer records, service requests, support tickets, and activities. | Searching, editing, selection, filtering | +| **Reporting applications** | Analyze and distribute business data in common document formats. | Aggregation, Excel export, PDF export, printing | + +## Data connectivity + +The ASP.NET Core Data Grid integrates with modern application architectures, supporting local collections, REST APIs, GraphQL services, OData endpoints, ORM frameworks, and relational databases. + +### Data binding approaches + +- **[Local data](./data-binding/local-data)** - Bind grids to local collections and lists for fast data access without external dependencies. Ideal for small to medium datasets and rapid prototyping. + +- **[Remote data](./data-binding/remote-data)** - Connect to web services, REST APIs, and remote endpoints with automatic request handling and response parsing. Ideal for scalable applications with large or frequently updated datasets. + +- **[Custom API binding](./data-binding/remote-data#binding-observable-data-using-async-pipe)** - Connect the Data Grid to external APIs and data services with full control over request handling, response parsing, and data operations. + +- **ORM integration** - Seamless integration with popular Object-Relational Mapping frameworks eliminates custom data mapping code and enables LINQ-based queries. + - **[Entity Framework](./connecting-to-orm/entityframework)** - Integrate with Entity Framework and EF Core-based applications. + - **[Dapper](./connecting-to-orm/dapper)** - Connect to applications that use lightweight SQL-based data access. + +**Database compatibility** + +The Data Grid integrates with major relational databases to provide seamless data access and management: + +| Database | Key Benefit | Best For | +|----------|---------------|----------| +| **[Microsoft SQL Server](./connecting-to-database/microsoft-sql-server)** | ADO.NET and Entity Framework integration | Enterprise applications, complex queries | +| **[MySQL Server](./connecting-to-database/mysql-server)** | Cross-platform connectivity | Web applications, open-source stacks | +| **[PostgreSQL](./connecting-to-database/postgresql-server)** | Advanced relational features | Large-scale applications, complex data structures | +| **[SQLite](./connecting-to-database/sqlite-server)** | Embedded database | Desktop apps, mobile apps, local storage | + +**API and service integration** + +API and service integration enables the Data Grid to connect seamlessly with GraphQL, Web API, OData, URL, and custom services for flexible server-side data access. + +| Integration approach | Best suited for | Key benefit | +|-----------------------|------------------|-------------| +| **[RESTful APIs](./connecting-to-adaptors/url-adaptor)** | Web applications and CRUD-based services | Standard HTTP-based data access | +| **[OData](./connecting-to-adaptors/odatav4-adaptor)** | Queryable enterprise data services | Standardized query and data operations | +| **[GraphQL](./connecting-to-adaptors/graphql-adaptor)** | Applications requiring flexible data queries | Declarative, field-specific data retrieval | +| **[Custom APIs](./data-binding/remote-data)** | Connect applications with external APIs or services | Complete control over server-side data operations and request handling | + +## Data operations + +The ASP.NET Core Data Grid includes key features that make it easier to work with and understand large sets of information. These capabilities support organizing records, locating information efficiently, and summarizing results to enable clear analysis of complex datasets. + +- **[Sorting](./sorting)** - Arrange records in ascending or descending order to quickly identify trends and patterns. +- **[Filter bar](./filtering/filter-bar)** - Apply inline text filters in column headers for immediate results without dialogs. +- **[Filter menu](./filtering/filter-menu)** - Use advanced filtering with complex conditions and multiple criteria for powerful expression-based queries. +- **[Excel-like filter](./excel-like-filter)** - Filter with a familiar checkbox interface, allowing multi-select from available values. +- **[Searching](./searching)** - Perform rapid text-based searches across one or multiple columns for global or column-specific results. +- **[Grouping](./grouping/grouping)** - Organize records into categories with multi-level hierarchical grouping for better comprehension. +- **[Aggregates](./aggregates/aggregates)** - Calculate and display summary values (sum, average, min, max, custom metrics) to gain real-time insights. + +## Large-scale rendering performance + +The ASP.NET Core Data Grid is designed for high performance, ensuring smooth interaction with large datasets. It uses built-in DOM virtualization with paging or virtual scrolling to load data on demand. This approach minimizes memory usage and reduces rendering overhead by limiting the number of active DOM elements, delivering responsive navigation and seamless scrolling even with very large datasets. + +## Editing and CRUD operations + +The ASP.NET Core Data Grid enables seamless Create, Read, Update, and Delete (CRUD) operations directly within the grid interface, eliminating the need for separate forms or pages. Data modification occurs inline with immediate visual feedback, improving productivity and reducing context switching. + +**Editing modes** + +Multiple editing modes support different workflow scenarios: + +| Mode | Description | Best for | Key benefit | +|------|-------------|----------|-------------| +| **[In-line editing](./editing/in-line-editing)** | Edit records directly within grid rows | Simple updates and streamlined workflows | Minimal context switching and faster editing | +| **[Dialog editing](./editing/dialog-editing)** | Edit records in a dedicated dialog form | Multi-field data entry | Structured form-based editing with additional space | +| **[Batch editing](./editing/batch-editing)** | Make multiple changes before saving them together | High-volume editing | Efficient commits with fewer server requests | +| **[Cell editing](./editing/cell-editing)** | Edit individual cells within the grid | Frequent data entry, precision-focused editing | Precise cell-level editing and rapid data updates | + +**[Data validation](./editing/validation)**: +Built-in validation rules such as required fields, minimum and maximum values, and numeric-only checks ensure consistent data accuracy. In addition, custom validation rules provide flexibility to define tailored logic for specific business requirements, validating input before changes are saved. + +## Columns + +The ASP.NET Core Data Grid provides flexible column and layout customization with formatting, resizing, reordering, and visibility controls for professional displays. + +- **[Column formatting](./columns/columns)** - Apply predefined or custom formats (currency, dates, percentages) for professional number and date presentation. +- **[Column resizing](./columns/column-resizing)** - Adjust widths manually with auto-fit and responsive options for optimal visibility. +- **[Column reordering](./columns/column-reorder)** - Drag headers to reorder columns for preferred arrangement. +- **[Frozen columns](./columns/frozen-column)** - Keep key columns visible during horizontal scrolling for critical information access. +- **[Column spanning](./columns/column-spanning)** - Extend cells across multiple columns to create grouped or summary layouts. +- **[Column menu](./columns/column-menu)** - Use dropdowns for visibility, filtering, sorting, grouping, and autofit for quick management. +- **[Column chooser](./columns/column-chooser)** - Show or hide columns dynamically with a dialog for configurable visibility. + +## Responsive design + +The ASP.NET Core Data Grid provides [adaptive layouts](./adaptive) and mobile-friendly interactions for a consistent experience across desktop, tablet, and mobile devices. + +## User experience and interaction + +The ASP.NET Core Data Grid delivers accessible, customizable data experiences with flexible interactions, templating, and standards-compliant accessibility support. + +**Templating and customization** + +- **[Header template](./columns/column-headers#header-template)** - Customize column headers with icons, tooltips, or complex formatting for professional design. +- **[Column template](./columns/column-template)** - Render cells with conditional styling and components for rich visualization. +- **[Row template](./row/row-template)** - Apply complete row customization for specialized layouts and unique presentations. +- **[Edit template](./editing/template-editing)** - Build custom edit forms with specialized controls and validation for complex data entry. + +**Selection** + +- **[Row selection](./selection/row-selection)** - Select single or multiple rows for flexible workflows +- **[Checkbox selection](./selection/check-box-selection)** - Use checkboxes with select-all for bulk operations +- **[Cell selection](./selection/cell-selection)** - Choose individual cells or ranges with spreadsheet-like interaction +- **[Persist selection](./selection/selection#persist-selection)** - Retain selections across sorting, filtering, and paging. + +**Accessibility and keyboard navigation** + +The Data Grid is fully accessible and compliant with Web Content Accessibility Guidelines (WCAG) standards: + +- **[WCAG compliance](./accessibility)** - Level AA accessibility standards +- **[Keyboard shortcuts](./accessibility#keyboard-interaction)** - Complete grid operation via keyboard + - Tab/Shift+Tab - Navigate between cells. + - Arrow Keys - Move between rows and columns. + - Enter - Update cells, confirm changes. + - Escape - Cancel editing. + - Ctrl+A - Select all rows. +- **[Screen reader support](./accessibility)** - Full compatibility with assistive technologies. +- **[Semantic HTML](./accessibility)** - Proper ARIA labels and semantic markup. + +## Export and print + +The ASP.NET Core Data Grid provides comprehensive export and reporting capabilities, enabling extraction, analysis, and distribution of grid data in professional document formats. Built-in Excel, PDF, and print functionality with customizable templates eliminates the need for external reporting tools. + +| Format | Key benefit | Best for | +|--------|-------------|----------| +| **[Excel export](./excel-export/excel-exporting)** | Export grid data to Excel while preserving formatting, styling, grouping, and summaries | Business reporting, spreadsheet workflows | +| **[PDF export](./pdf-export/pdf-export)** | Generate professional documents with customizable layouts and formatting | Reports, document distribution, archiving | +| **[CSV export](./excel-export/excel-exporting)** | Export raw tabular data in a lightweight format | Data exchange, system integration, bulk processing | +| **[Print](./print)** | Produce printer-friendly output directly from the Data Grid | Hard-copy operational documents, on-demand printing | + +## Advanced features + +The ASP.NET Core Data Grid includes sophisticated capabilities designed for complex enterprise data scenarios. These advanced features enable developers to build powerful, scalable data management solutions that handle demanding business requirements. + +- **[Master-detail grids](./hierarchy-grid)** - Implement master-detail relationships to display complex parent-child data structures. +- **[Row spanning](./row-spanning)** - Extend cells vertically across rows to create specialized layouts. +- **[Detail templates](./detail-template)** - Add expandable row sections for drill-down exploration and richer data views. +- **[Foreign key columns](./columns/foreign-key-column)** - Automatically look up related data to show meaningful relationships. +- **[Global/Local formatting](./global-local)** - Apply consistent or column-specific formatting for professional presentation of values. +- **[State persistence](./state-management)** - Saves and restores grid configurations such as sorting, filtering, grouping, paging, and column settings across sessions. + +**Enterprise patterns** + +For specific implementation patterns, refer to feature documentation: + +- **Large-scale business applications** - Combine [State management](./state-management), [Hierarchical Grids](./hierarchy-grid), optimized performance techniques like [DOM Virtualization](./scrolling/dom-virtualization), and [Foreign key columns](./columns/foreign-key-column) to deliver responsive experiences across complex datasets. +- **Data-intensive operations** - Leverage [Grouping](./grouping/grouping), [Aggregates](./aggregates/aggregates), and [Filtering](./filtering/filtering) to efficiently manage and analyze large volumes of business data. +- **Reporting and export solutions** - Combine [Aggregates](./aggregates/aggregates), [Excel export](./excel-export/excel-exporting), and [PDF export](./pdf-export/pdf-export) to generate professional business reports and shareable documents. + +## Themes and styling + +Match the ASP.NET Core Data Grid to the application's visual design using built-in themes and customization options. Supported themes are: + +- Fluent 2 +- Material 3 +- Bootstrap 5 +- Tailwind CSS +- Fluent 2 High Contrast + +[Syncfusion Theme Studio](https://ej2.syncfusion.com/aspnetcore/documentation/appearance/theme-studio) allows customization of the Data Grid's appearance by modifying theme variables such as primary, accent, and background colors, enabling consistent styling, lightweight CSS generation, and seamless integration while ensuring the grid aligns with application design requirements. + +[Explore themes and styling](../appearance-and-styling/appearance-styling) + +## Quick links + +**Getting started:** +- [ASP.NET Core Data Grid Guide](./getting-started) + +**Popular features:** +- [Filtering](./filtering/filtering) +- [Sorting](./sorting) +- [Editing and CRUD](./editing) +- [Export and reporting](./excel-export/excel-exporting) +- [Data validation](./editing/validation) + +**Advanced features** +- [DOM Virtualization](./scrolling/dom-virtualization) +- [State management](./state-management) +- [Hierarchical Grid](./hierarchy-grid) + +## Support and resources + +- **Questions?** Visit the [Syncfusion support portal](https://www.syncfusion.com/support) +- **Code Examples?** Browse [Data Grid demos](https://ej2.syncfusion.com/aspnetcore/grid/gridoverview#/fluent2) and samples +- **API Details?** See [Data Grid API reference](https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.grids.grid.html) +- **Community?** Join the [Syncfusion community forum](https://www.syncfusion.com/forums/aspnetcore-js2) +- **What's new?** Check [Release notes](../../Release-Notes) \ No newline at end of file diff --git a/grid-sdk/asp-net-mvc/data-grid/overview.md b/grid-sdk/asp-net-mvc/data-grid/overview.md index f20414008..8c074db60 100644 --- a/grid-sdk/asp-net-mvc/data-grid/overview.md +++ b/grid-sdk/asp-net-mvc/data-grid/overview.md @@ -1,40 +1,213 @@ --- layout: post -title: Overview in Syncfusion ASP.NET MVC DataGrid Component -description: Learn here all about Overview in Syncfusion ASP.NET MVC DataGrid component of Syncfusion Essential JS 2 and more. +title: ASP.NET MVC Grid Overview | Syncfusion +description: Learn how to use ASP.NET MVC Data Grid to display and manage tabular data with data binding, paging, sorting, filtering, editing, and templates. platform: grid-sdk -control: Index -publishingplatform: grid-sdk +control: Overview documentation: ug --- +# ASP.NET MVC Data Grid Overview -# Overview in ASP.NET MVC DataGrid Component - -The DataGrid component is used to display and manipulate tabular data with configuration options to control the way the data is presented. It can pull data from data sources such as array of JavaScript objects, `OData web services`, or `DataManager` and binding data fields to columns. It also displays the column header to identify the field with support for grouped records. - -The most important features available in the DataGrid component are paging, sorting, filtering, searching, and grouping. - -## Key Features - -* [**Data Sources**](./data-binding): Binds the DataGrid component with an array of JavaScript objects or DataManager. -* [**Sorting**](./sorting) and [**Grouping**](./grouping): Supports **n** level of sorting and grouping. -* [**Filtering**](./filtering): Offers filter bar in each column to filter data. -* [**Paging**](./paging): Allows easy switching between pages using the pager bar. -* [**Editing**](./edit): provides the options for create, read, update, and delete operations. -* [**Columns**](./columns): The column definitions are used as the dataSource schema in the DataGrid. This plays a vital role in rendering column values in the required format. -* [**Reordering**](./columns#reorder): Allows drag and drop of any column anywhere in the DataGrid’s column header row, thus allowing repositioning of columns. -* [**Column Chooser**](./columns#column-chooser): The column chooser provides a list of column names paired with check boxes that allow the visibility to be toggled on the fly. -* [**Resizing**](./columns#column-resizing): Resizing allows changing column width on the fly by simply dragging the right corner of the column header. -* [**Freeze**](./scrolling#frozen-rows-and-columns): Columns and rows can be frozen to allow scrolling and comparing cell values. -* [**Cell Spanning**](./columns#column-spanning): DataGrid cells can be spanned based on the preferred criteria. -* [**Foreign Data Source**](./columns#foreign-key-column): This provides the option to show values from external or lookup data sources in a column based on foreign key/value mapping. -* [**Cell Styling**](./how-to#customize-column-styles): DataGrid cell styles can be customized either by using CSS or programmatically. -* [**Selection**](./selection): Rows or cells can be selected in the DataGrid. One or more rows or cells can also be selected by holding Ctrl or Command, or programmatically. -* [**Templates**](./columns#column-template): Templates can be used to create custom user experiences in the DataGrid. -* [**Aggregation**](./aggregates): Provides the option to easily visualized the Aggregates for column values. -* [**Context Menu**](./context-menu): The context menu provides a list of actions to be performed in the DataGrid. It appears when a cell, header, or the pager is right-clicked. -* [**Clipboard**](./clipboard): Selected rows and cells can be copied from the DataGrid. -* [**Export**](./pdf-export): Provides the options to Export the DataGrid data to Excel, PDF, and CSV formats. -* [**RTL Support**](./global-local#right-to-left-rtl): Provides right-to-left mode that aligns the DataGrid content from right to left. -* [**Localization**](./global-local#localization): Provides an inherent support to localize the UI. +The ASP.NET MVC Data Grid is a powerful and feature-rich UI component designed for displaying and managing tabular data with high performance and flexibility. It offers a comprehensive set of enterprise-grade capabilities, including advanced data operations, seamless integration with multiple data sources, and extensive customization options. + +## Common use cases + +The ASP.NET MVC Data Grid supports a wide range of data-intensive application scenarios. + +| Use case | Description | Relevant grid capabilities | +|----------|-------------|-----------------------| +| **Enterprise data management** | Manage customers, products, orders, suppliers, and operational records. | CRUD, filtering, sorting, grouping | +| **Financial applications** | Display and analyze transactions, portfolios, market data, and financial records. | Aggregates, formatting, virtualization, remote data | +| **Large-scale applications** | Work with large datasets while maintaining responsive interactions. | Virtualization, infinite scrolling, remote operations | +| **CRM applications** | Manage customer records, service requests, support tickets, and activities. | Searching, editing, selection, filtering | +| **Reporting applications** | Analyze and distribute business data in common document formats. | Aggregation, Excel export, PDF export, printing | + +## Data connectivity + +The ASP.NET MVC Data Grid integrates with modern application architectures, supporting local collections, REST APIs, GraphQL services, OData endpoints, ORM frameworks, and relational databases. + +### Data binding approaches + +- **[Local data](./data-binding/local-data)** - Bind grids to local collections and lists for fast data access without external dependencies. Ideal for small to medium datasets and rapid prototyping. + +- **[Remote data](./data-binding/remote-data)** - Connect to web services, REST APIs, and remote endpoints with automatic request handling and response parsing. Ideal for scalable applications with large or frequently updated datasets. + +- **[Custom API binding](./data-binding/remote-data#binding-observable-data-using-async-pipe)** - Connect the Data Grid to external APIs and data services with full control over request handling, response parsing, and data operations. + +- **ORM integration** - Seamless integration with popular Object-Relational Mapping frameworks eliminates custom data mapping code and enables LINQ-based queries. + - **[Entity Framework](./connecting-to-orm/entityframework)** - Integrate with Entity Framework and EF Core-based applications. + - **[Dapper](./connecting-to-orm/dapper)** - Connect to applications that use lightweight SQL-based data access. + +**Database compatibility** + +The Data Grid integrates with major relational databases to provide seamless data access and management: + +| Database | Key Benefit | Best For | +|----------|---------------|----------| +| **[Microsoft SQL Server](./connecting-to-database/microsoft-sql-server)** | ADO.NET and Entity Framework integration | Enterprise applications, complex queries | +| **[MySQL Server](./connecting-to-database/mysql-server)** | Cross-platform connectivity | Web applications, open-source stacks | +| **[PostgreSQL](./connecting-to-database/postgresql-server)** | Advanced relational features | Large-scale applications, complex data structures | +| **[SQLite](./connecting-to-database/sqlite-server)** | Embedded database | Desktop apps, mobile apps, local storage | + +**API and service integration** + +API and service integration enables the Data Grid to connect seamlessly with GraphQL, Web API, OData, URL, and custom services for flexible server-side data access. + +| Integration approach | Best suited for | Key benefit | +|-----------------------|------------------|-------------| +| **[RESTful APIs](./connecting-to-adaptors/url-adaptor)** | Web applications and CRUD-based services | Standard HTTP-based data access | +| **[OData](./connecting-to-adaptors/odatav4-adaptor)** | Queryable enterprise data services | Standardized query and data operations | +| **[GraphQL](./connecting-to-adaptors/graphql-adaptor)** | Applications requiring flexible data queries | Declarative, field-specific data retrieval | +| **[Custom APIs](./data-binding/remote-data)** | Connect applications with external APIs or services | Complete control over server-side data operations and request handling | + +## Data operations + +The ASP.NET MVC Data Grid includes key features that make it easier to work with and understand large sets of information. These capabilities support organizing records, locating information efficiently, and summarizing results to enable clear analysis of complex datasets. + +- **[Sorting](./sorting)** - Arrange records in ascending or descending order to quickly identify trends and patterns. +- **[Filter bar](./filtering/filter-bar)** - Apply inline text filters in column headers for immediate results without dialogs. +- **[Filter menu](./filtering/filter-menu)** - Use advanced filtering with complex conditions and multiple criteria for powerful expression-based queries. +- **[Excel-like filter](./excel-like-filter)** - Filter with a familiar checkbox interface, allowing multi-select from available values. +- **[Searching](./searching)** - Perform rapid text-based searches across one or multiple columns for global or column-specific results. +- **[Grouping](./grouping/grouping)** - Organize records into categories with multi-level hierarchical grouping for better comprehension. +- **[Aggregates](./aggregates/aggregates)** - Calculate and display summary values (sum, average, min, max, custom metrics) to gain real-time insights. + +## Large-scale rendering performance + +The ASP.NET MVC Data Grid is designed for high performance, ensuring smooth interaction with large datasets. It uses built-in DOM virtualization with paging or virtual scrolling to load data on demand. This approach minimizes memory usage and reduces rendering overhead by limiting the number of active DOM elements, delivering responsive navigation and seamless scrolling even with very large datasets. + +## Editing and CRUD operations + +The ASP.NET MVC Data Grid enables seamless Create, Read, Update, and Delete (CRUD) operations directly within the grid interface, eliminating the need for separate forms or pages. Data modification occurs inline with immediate visual feedback, improving productivity and reducing context switching. + +**Editing modes** + +Multiple editing modes support different workflow scenarios: + +| Mode | Description | Best for | Key benefit | +|------|-------------|----------|-------------| +| **[In-line editing](./editing/in-line-editing)** | Edit records directly within grid rows | Simple updates and streamlined workflows | Minimal context switching and faster editing | +| **[Dialog editing](./editing/dialog-editing)** | Edit records in a dedicated dialog form | Multi-field data entry | Structured form-based editing with additional space | +| **[Batch editing](./editing/batch-editing)** | Make multiple changes before saving them together | High-volume editing | Efficient commits with fewer server requests | +| **[Cell editing](./editing/cell-editing)** | Edit individual cells within the grid | Frequent data entry, precision-focused editing | Precise cell-level editing and rapid data updates | + +**[Data validation](./editing/validation)**: +Built-in validation rules such as required fields, minimum and maximum values, and numeric-only checks ensure consistent data accuracy. In addition, custom validation rules provide flexibility to define tailored logic for specific business requirements, validating input before changes are saved. + +## Columns + +The ASP.NET MVC Data Grid provides flexible column and layout customization with formatting, resizing, reordering, and visibility controls for professional displays. + +- **[Column formatting](./columns/columns)** - Apply predefined or custom formats (currency, dates, percentages) for professional number and date presentation. +- **[Column resizing](./columns/column-resizing)** - Adjust widths manually with auto-fit and responsive options for optimal visibility. +- **[Column reordering](./columns/column-reorder)** - Drag headers to reorder columns for preferred arrangement. +- **[Frozen columns](./columns/frozen-column)** - Keep key columns visible during horizontal scrolling for critical information access. +- **[Column spanning](./columns/column-spanning)** - Extend cells across multiple columns to create grouped or summary layouts. +- **[Column menu](./columns/column-menu)** - Use dropdowns for visibility, filtering, sorting, grouping, and autofit for quick management. +- **[Column chooser](./columns/column-chooser)** - Show or hide columns dynamically with a dialog for configurable visibility. + +## Responsive design + +The ASP.NET MVC Data Grid provides [adaptive layouts](./adaptive) and mobile-friendly interactions for a consistent experience across desktop, tablet, and mobile devices. + +## User experience and interaction + +The ASP.NET MVC Data Grid delivers accessible, customizable data experiences with flexible interactions, templating, and standards-compliant accessibility support. + +**Templating and customization** + +- **[Header template](./columns/column-headers#header-template)** - Customize column headers with icons, tooltips, or complex formatting for professional design. +- **[Column template](./columns/column-template)** - Render cells with conditional styling and components for rich visualization. +- **[Row template](./row/row-template)** - Apply complete row customization for specialized layouts and unique presentations. +- **[Edit template](./editing/template-editing)** - Build custom edit forms with specialized controls and validation for complex data entry. + +**Selection** + +- **[Row selection](./selection/row-selection)** - Select single or multiple rows for flexible workflows +- **[Checkbox selection](./selection/check-box-selection)** - Use checkboxes with select-all for bulk operations +- **[Cell selection](./selection/cell-selection)** - Choose individual cells or ranges with spreadsheet-like interaction +- **[Persist selection](./selection/selection#persist-selection)** - Retain selections across sorting, filtering, and paging. + +**Accessibility and keyboard navigation** + +The Data Grid is fully accessible and compliant with Web Content Accessibility Guidelines (WCAG) standards: + +- **[WCAG compliance](./accessibility)** - Level AA accessibility standards +- **[Keyboard shortcuts](./accessibility#keyboard-interaction)** - Complete grid operation via keyboard + - Tab/Shift+Tab - Navigate between cells. + - Arrow Keys - Move between rows and columns. + - Enter - Update cells, confirm changes. + - Escape - Cancel editing. + - Ctrl+A - Select all rows. +- **[Screen reader support](./accessibility)** - Full compatibility with assistive technologies. +- **[Semantic HTML](./accessibility)** - Proper ARIA labels and semantic markup. + +## Export and print + +The ASP.NET MVC Data Grid provides comprehensive export and reporting capabilities, enabling extraction, analysis, and distribution of grid data in professional document formats. Built-in Excel, PDF, and print functionality with customizable templates eliminates the need for external reporting tools. + +| Format | Key benefit | Best for | +|--------|-------------|----------| +| **[Excel export](./excel-export/excel-exporting)** | Export grid data to Excel while preserving formatting, styling, grouping, and summaries | Business reporting, spreadsheet workflows | +| **[PDF export](./pdf-export/pdf-export)** | Generate professional documents with customizable layouts and formatting | Reports, document distribution, archiving | +| **[CSV export](./excel-export/excel-exporting)** | Export raw tabular data in a lightweight format | Data exchange, system integration, bulk processing | +| **[Print](./print)** | Produce printer-friendly output directly from the Data Grid | Hard-copy operational documents, on-demand printing | + +## Advanced features + +The ASP.NET MVC Data Grid includes sophisticated capabilities designed for complex enterprise data scenarios. These advanced features enable developers to build powerful, scalable data management solutions that handle demanding business requirements. + +- **[Master-detail grids](./hierarchy-grid)** - Implement master-detail relationships to display complex parent-child data structures. +- **[Row spanning](./row-spanning)** - Extend cells vertically across rows to create specialized layouts. +- **[Detail templates](./detail-template)** - Add expandable row sections for drill-down exploration and richer data views. +- **[Foreign key columns](./columns/foreign-key-column)** - Automatically look up related data to show meaningful relationships. +- **[Global/Local formatting](./global-local)** - Apply consistent or column-specific formatting for professional presentation of values. +- **[State persistence](./state-management)** - Saves and restores grid configurations such as sorting, filtering, grouping, paging, and column settings across sessions. + +**Enterprise patterns** + +For specific implementation patterns, refer to feature documentation: + +- **Large-scale business applications** - Combine [State management](./state-management), [Hierarchical Grids](./hierarchy-grid), optimized performance techniques like [DOM Virtualization](./scrolling/dom-virtualization), and [Foreign key columns](./columns/foreign-key-column) to deliver responsive experiences across complex datasets. +- **Data-intensive operations** - Leverage [Grouping](./grouping/grouping), [Aggregates](./aggregates/aggregates), and [Filtering](./filtering/filtering) to efficiently manage and analyze large volumes of business data. +- **Reporting and export solutions** - Combine [Aggregates](./aggregates/aggregates), [Excel export](./excel-export/excel-exporting), and [PDF export](./pdf-export/pdf-export) to generate professional business reports and shareable documents. + +## Themes and styling + +Match the ASP.NET MVC Data Grid to the application's visual design using built-in themes and customization options. Supported themes are: + +- Fluent 2 +- Material 3 +- Bootstrap 5 +- Tailwind CSS +- Fluent 2 High Contrast + +[Syncfusion Theme Studio](https://ej2.syncfusion.com/aspnetmvc/documentation/appearance/theme-studio) allows customization of the Data Grid's appearance by modifying theme variables such as primary, accent, and background colors, enabling consistent styling, lightweight CSS generation, and seamless integration while ensuring the grid aligns with application design requirements. + +[Explore themes and styling](../appearance-and-styling/appearance-styling) + +## Quick links + +**Getting started:** +- [ASP.NET MVC Data Grid Guide](./getting-started) + +**Popular features:** +- [Filtering](./filtering/filtering) +- [Sorting](./sorting) +- [Editing and CRUD](./editing) +- [Export and reporting](./excel-export/excel-exporting) +- [Data validation](./editing/validation) + +**Advanced features** +- [DOM Virtualization](./scrolling/dom-virtualization) +- [State management](./state-management) +- [Hierarchical Grid](./hierarchy-grid) + +## Support and resources + +- **Questions?** Visit the [Syncfusion support portal](https://www.syncfusion.com/support) +- **Code Examples?** Browse [Data Grid demos](https://ej2.syncfusion.com/aspnetmvc/grid/gridoverview#/fluent2) and samples +- **API Details?** See [Data Grid API reference](https://help.syncfusion.com/cr/aspnetmvc-js2/syncfusion.ej2.grids.grid.html) +- **Community?** Join the [Syncfusion community forum](https://www.syncfusion.com/forums/aspnetmvc-js2) +- **What's new?** Check [Release notes](../../Release-Notes) \ No newline at end of file diff --git a/grid-sdk/javascript/data-grid/overview.md b/grid-sdk/javascript/data-grid/overview.md new file mode 100644 index 000000000..bc87ea9d2 --- /dev/null +++ b/grid-sdk/javascript/data-grid/overview.md @@ -0,0 +1,214 @@ +--- +layout: post +title: JavaScript Data Grid Overview and Features | Syncfusion +description: Learn how to use JavaScript Data Grid for data management, CRUD operations, sorting, filtering, grouping, paging, and virtualization. +platform: grid-sdk +control: Overview +documentation: ug +domainurl: https://help.syncfusion.com/grid-sdk +--- + +# JavaScript Data Grid Overview + +The JavaScript Data Grid is a powerful and feature-rich UI component designed for displaying and managing tabular data with high performance and flexibility. It offers a comprehensive set of enterprise-grade capabilities, including advanced data operations, seamless integration with multiple data sources, and extensive customization options. + +## Common use cases + +The JavaScript Data Grid supports a wide range of data-intensive application scenarios. + +| Use case | Description | Relevant grid capabilities | +|----------|-------------|-----------------------| +| **Enterprise data management** | Manage customers, products, orders, suppliers, and operational records. | CRUD, filtering, sorting, grouping | +| **Financial applications** | Display and analyze transactions, portfolios, market data, and financial records. | Aggregates, formatting, virtualization, remote data | +| **Large-scale applications** | Work with large datasets while maintaining responsive interactions. | Virtualization, infinite scrolling, remote operations | +| **CRM applications** | Manage customer records, service requests, support tickets, and activities. | Searching, editing, selection, filtering | +| **Reporting applications** | Analyze and distribute business data in common document formats. | Aggregation, Excel export, PDF export, printing | + +## Data connectivity + +The JavaScript Data Grid integrates with modern application architectures, supporting local collections, REST APIs, GraphQL services, OData endpoints, ORM frameworks, and relational databases. + +### Data binding approaches + +- **[Local data](./data-binding/local-data)** - Bind grids to local collections and lists for fast data access without external dependencies. Ideal for small to medium datasets and rapid prototyping. + +- **[Remote data](./data-binding/remote-data)** - Connect to web services, REST APIs, and remote endpoints with automatic request handling and response parsing. Ideal for scalable applications with large or frequently updated datasets. + +- **[Custom API binding](./data-binding/remote-data)** - Connect the Data Grid to external APIs and data services with full control over request handling, response parsing, and data operations. + +- **ORM integration** - Seamless integration with popular Object-Relational Mapping frameworks eliminates custom data mapping code and enables LINQ-based queries. + - **[Entity Framework](./connecting-to-orm/entityframework)** - Integrate with Entity Framework and EF Core-based applications. + - **[Dapper](./connecting-to-orm/dapper)** - Connect to applications that use lightweight SQL-based data access. + +**Database compatibility** + +The Data Grid integrates with major relational databases to provide seamless data access and management: + +| Database | Key Benefit | Best For | +|----------|---------------|----------| +| **[Microsoft SQL Server](./connecting-to-database/microsoft-sql-server)** | ADO.NET and Entity Framework integration | Enterprise applications, complex queries | +| **[MySQL Server](./connecting-to-database/mysql-server)** | Cross-platform connectivity | Web applications, open-source stacks | +| **[PostgreSQL](./connecting-to-database/postgresql-server)** | Advanced relational features | Large-scale applications, complex data structures | +| **[SQLite](./connecting-to-database/sqlite-server)** | Embedded database | Desktop apps, mobile apps, local storage | + +**API and service integration** + +API and service integration enables the Data Grid to connect seamlessly with GraphQL, Web API, OData, URL, and custom services for flexible server-side data access. + +| Integration approach | Best suited for | Key benefit | +|-----------------------|------------------|-------------| +| **[RESTful APIs](./connecting-to-adaptors/url-adaptor)** | Web applications and CRUD-based services | Standard HTTP-based data access | +| **[OData](./connecting-to-adaptors/odatav4-adaptor)** | Queryable enterprise data services | Standardized query and data operations | +| **[GraphQL](./connecting-to-adaptors/graphql-adaptor)** | Applications requiring flexible data queries | Declarative, field-specific data retrieval | +| **[Custom APIs](./data-binding/remote-data)** | Connect applications with external APIs or services | Complete control over server-side data operations and request handling | + +## Data operations + +The JavaScript Data Grid includes key features that make it easier to work with and understand large sets of information. These capabilities support organizing records, locating information efficiently, and summarizing results to enable clear analysis of complex datasets. + +- **[Sorting](./sorting)** - Arrange records in ascending or descending order to quickly identify trends and patterns. +- **[Filter bar](./filtering/filter-bar)** - Apply inline text filters in column headers for immediate results without dialogs. +- **[Filter menu](./filtering/filter-menu)** - Use advanced filtering with complex conditions and multiple criteria for powerful expression-based queries. +- **[Excel-like filter](./excel-like-filter)** - Filter with a familiar checkbox interface, allowing multi-select from available values. +- **[Searching](./searching)** - Perform rapid text-based searches across one or multiple columns for global or column-specific results. +- **[Grouping](./grouping/grouping)** - Organize records into categories with multi-level hierarchical grouping for better comprehension. +- **[Aggregates](./aggregates/aggregates)** - Calculate and display summary values (sum, average, min, max, custom metrics) to gain real-time insights. + +## Large-scale rendering performance + +The JavaScript Data Grid is designed for high performance, ensuring smooth interaction with large datasets. It uses built-in DOM virtualization with paging or virtual scrolling to load data on demand. This approach minimizes memory usage and reduces rendering overhead by limiting the number of active DOM elements, delivering responsive navigation and seamless scrolling even with very large datasets. + +## Editing and CRUD operations + +The JavaScript Data Grid enables seamless Create, Read, Update, and Delete (CRUD) operations directly within the grid interface, eliminating the need for separate forms or pages. Data modification occurs inline with immediate visual feedback, improving productivity and reducing context switching. + +**Editing modes** + +Multiple editing modes support different workflow scenarios: + +| Mode | Description | Best for | Key benefit | +|------|-------------|----------|-------------| +| **[In-line editing](./editing/in-line-editing)** | Edit records directly within grid rows | Simple updates and streamlined workflows | Minimal context switching and faster editing | +| **[Dialog editing](./editing/dialog-editing)** | Edit records in a dedicated dialog form | Multi-field data entry | Structured form-based editing with additional space | +| **[Batch editing](./editing/batch-editing)** | Make multiple changes before saving them together | High-volume editing | Efficient commits with fewer server requests | +| **[Cell editing](./editing/cell-editing)** | Edit individual cells within the grid | Frequent data entry, precision-focused editing | Precise cell-level editing and rapid data updates | + +**[Data validation](./editing/validation)**: +Built-in validation rules such as required fields, minimum and maximum values, and numeric-only checks ensure consistent data accuracy. In addition, custom validation rules provide flexibility to define tailored logic for specific business requirements, validating input before changes are saved. + +## Columns + +The JavaScript Data Grid provides flexible column and layout customization with formatting, resizing, reordering, and visibility controls for professional displays. + +- **[Column formatting](./columns/columns)** - Apply predefined or custom formats (currency, dates, percentages) for professional number and date presentation. +- **[Column resizing](./columns/column-resizing)** - Adjust widths manually with auto-fit and responsive options for optimal visibility. +- **[Column reordering](./columns/column-reorder)** - Drag headers to reorder columns for preferred arrangement. +- **[Frozen columns](./columns/frozen-column)** - Keep key columns visible during horizontal scrolling for critical information access. +- **[Column spanning](./columns/column-spanning)** - Extend cells across multiple columns to create grouped or summary layouts. +- **[Column menu](./columns/column-menu)** - Use dropdowns for visibility, filtering, sorting, grouping, and autofit for quick management. +- **[Column chooser](./columns/column-chooser)** - Show or hide columns dynamically with a dialog for configurable visibility. + +## Responsive design + +The JavaScript Data Grid provides [adaptive layouts](./adaptive) and mobile-friendly interactions for a consistent experience across desktop, tablet, and mobile devices. + +## User experience and interaction + +The JavaScript Data Grid delivers accessible, customizable data experiences with flexible interactions, templating, and standards-compliant accessibility support. + +**Templating and customization** + +- **[Header template](./columns/column-headers#header-template)** - Customize column headers with icons, tooltips, or complex formatting for professional design. +- **[Column template](./columns/column-template)** - Render cells with conditional styling and components for rich visualization. +- **[Row template](./row/row-template)** - Apply complete row customization for specialized layouts and unique presentations. +- **[Edit template](./editing/template-editing)** - Build custom edit forms with specialized controls and validation for complex data entry. + +**Selection** + +- **[Row selection](./selection/row-selection)** - Select single or multiple rows for flexible workflows +- **[Checkbox selection](./selection/check-box-selection)** - Use checkboxes with select-all for bulk operations +- **[Cell selection](./selection/cell-selection)** - Choose individual cells or ranges with spreadsheet-like interaction +- **[Persist selection](./selection/selection#persist-selection)** - Retain selections across sorting, filtering, and paging. + +**Accessibility and keyboard navigation** + +The Data Grid is fully accessible and compliant with Web Content Accessibility Guidelines (WCAG) standards: + +- **[WCAG compliance](./accessibility)** - Level AA accessibility standards +- **[Keyboard shortcuts](./accessibility#keyboard-interaction)** - Complete grid operation via keyboard + - Tab/Shift+Tab - Navigate between cells. + - Arrow Keys - Move between rows and columns. + - Enter - Update cells, confirm changes. + - Escape - Cancel editing. + - Ctrl+A - Select all rows. +- **[Screen reader support](./accessibility)** - Full compatibility with assistive technologies. +- **[Semantic HTML](./accessibility)** - Proper ARIA labels and semantic markup. + +## Export and print + +The JavaScript Data Grid provides comprehensive export and reporting capabilities, enabling extraction, analysis, and distribution of grid data in professional document formats. Built-in Excel, PDF, and print functionality with customizable templates eliminates the need for external reporting tools. + +| Format | Key benefit | Best for | +|--------|-------------|----------| +| **[Excel export](./excel-export/excel-exporting)** | Export grid data to Excel while preserving formatting, styling, grouping, and summaries | Business reporting, spreadsheet workflows | +| **[PDF export](./pdf-export/pdf-export)** | Generate professional documents with customizable layouts and formatting | Reports, document distribution, archiving | +| **[CSV export](./excel-export/excel-exporting)** | Export raw tabular data in a lightweight format | Data exchange, system integration, bulk processing | +| **[Print](./print)** | Produce printer-friendly output directly from the Data Grid | Hard-copy operational documents, on-demand printing | + +## Advanced features + +The JavaScript Data Grid includes sophisticated capabilities designed for complex enterprise data scenarios. These advanced features enable developers to build powerful, scalable data management solutions that handle demanding business requirements. + +- **[Master-detail grids](./hierarchy-grid)** - Implement master-detail relationships to display complex parent-child data structures. +- **[Row spanning](./row-spanning)** - Extend cells vertically across rows to create specialized layouts. +- **[Detail templates](./detail-template)** - Add expandable row sections for drill-down exploration and richer data views. +- **[Foreign key columns](./columns/foreign-key-column)** - Automatically look up related data to show meaningful relationships. +- **[Global/Local formatting](./global-local)** - Apply consistent or column-specific formatting for professional presentation of values. +- **[State persistence](./state-management)** - Saves and restores grid configurations such as sorting, filtering, grouping, paging, and column settings across sessions. + +**Enterprise patterns** + +For specific implementation patterns, refer to feature documentation: + +- **Large-scale business applications** - Combine [State management](./state-management), [Hierarchical Grids](./hierarchy-grid), optimized performance techniques like [DOM Virtualization](./scrolling/dom-virtualization), and [Foreign key columns](./columns/foreign-key-column) to deliver responsive experiences across complex datasets. +- **Data-intensive operations** - Leverage [Grouping](./grouping/grouping), [Aggregates](./aggregates/aggregates), and [Filtering](./filtering/filtering) to efficiently manage and analyze large volumes of business data. +- **Reporting and export solutions** - Combine [Aggregates](./aggregates/aggregates), [Excel export](./excel-export/excel-exporting), and [PDF export](./pdf-export/pdf-export) to generate professional business reports and shareable documents. + +## Themes and styling + +Match the JavaScript Data Grid to the application's visual design using built-in themes and customization options. Supported themes are: + +- Fluent 2 +- Material 3 +- Bootstrap 5 +- Tailwind CSS +- Fluent 2 High Contrast + +[Syncfusion Theme Studio](https://ej2.syncfusion.com/javascript/documentation/appearance/theme-studio) allows customization of the Data Grid's appearance by modifying theme variables such as primary, accent, and background colors, enabling consistent styling, lightweight CSS generation, and seamless integration while ensuring the grid aligns with application design requirements. + +[Explore themes and styling](../appearance-and-styling/appearance-styling) + +## Quick links + +**Getting started:** +- [JavaScript Data Grid Guide](./getting-started) + +**Popular features:** +- [Filtering](./filtering/filtering) +- [Sorting](./sorting) +- [Editing and CRUD](./editing) +- [Export and reporting](./excel-export/excel-exporting) +- [Data validation](./editing/validation) + +**Advanced features** +- [DOM Virtualization](./scrolling/dom-virtualization) +- [State management](./state-management) +- [Hierarchical Grid](./hierarchy-grid) + +## Support and resources + +- **Questions?** Visit the [Syncfusion support portal](https://www.syncfusion.com/support) +- **Code Examples?** Browse [Data Grid demos](https://ej2.syncfusion.com/javascript/demos/#/tailwind3/grid/grid-overview.html) and samples +- **API Details?** See [Data Grid API reference](https://ej2.syncfusion.com/javascript/documentation/api/grid/index-default) +- **Community?** Join the [Syncfusion community forum](https://www.syncfusion.com/forums/essential-js2) +- **What's New?** Check [Release notes](../../Release-Notes) \ No newline at end of file diff --git a/grid-sdk/react/data-grid/overview.md b/grid-sdk/react/data-grid/overview.md new file mode 100644 index 000000000..4651de67f --- /dev/null +++ b/grid-sdk/react/data-grid/overview.md @@ -0,0 +1,214 @@ +--- +layout: post +title: React Data Grid Overview and Features | Syncfusion +description: Learn how to use React Data Grid for data management, CRUD operations, sorting, filtering, grouping, paging, and virtualization. +control: Overview +platform: grid-sdk +documentation: ug +domainurl: https://help.syncfusion.com/grid-sdk +--- + +# React Data Grid Overview + +The React Data Grid is a powerful and feature-rich UI component designed for displaying and managing tabular data with high performance and flexibility. It offers a comprehensive set of enterprise-grade capabilities, including advanced data operations, seamless integration with multiple data sources, and extensive customization options. + +## Common use cases + +The React Data Grid supports a wide range of data-intensive application scenarios. + +| Use case | Description | Relevant grid capabilities | +|----------|-------------|-----------------------| +| **Enterprise data management** | Manage customers, products, orders, suppliers, and operational records. | CRUD, filtering, sorting, grouping | +| **Financial applications** | Display and analyze transactions, portfolios, market data, and financial records. | Aggregates, formatting, virtualization, remote data | +| **Large-scale applications** | Work with large datasets while maintaining responsive interactions. | Virtualization, infinite scrolling, remote operations | +| **CRM applications** | Manage customer records, service requests, support tickets, and activities. | Searching, editing, selection, filtering | +| **Reporting applications** | Analyze and distribute business data in common document formats. | Aggregation, Excel export, PDF export, printing | + +## Data connectivity + +The React Data Grid integrates with modern application architectures, supporting local collections, REST APIs, GraphQL services, OData endpoints, ORM frameworks, and relational databases. + +### Data binding approaches + +- **[Local data](./data-binding/local-data)** - Bind grids to local collections and lists for fast data access without external dependencies. Ideal for small to medium datasets and rapid prototyping. + +- **[Remote data](./data-binding/remote-data)** - Connect to web services, REST APIs, and remote endpoints with automatic request handling and response parsing. Ideal for scalable applications with large or frequently updated datasets. + +- **[Custom API binding and Redux service](./data-binding/remote-data)** - Connect the Data Grid to custom APIs and data services using custom binding, while managing application state through Redux. + +- **ORM integration** - Seamless integration with popular Object-Relational Mapping frameworks eliminates custom data mapping code and enables LINQ-based queries. + - **[Entity Framework](./connecting-to-orm/entityframework)** - Integrate with Entity Framework and EF Core-based applications. + - **[Dapper](./connecting-to-orm/dapper)** - Connect to applications that use lightweight SQL-based data access. + +**Database compatibility** + +The Data Grid integrates with major relational databases to provide seamless data access and management: + +| Database | Key benefit | Best for | +|----------|---------------|----------| +| **[Microsoft SQL Server](./connecting-to-database/microsoft-sql-server)** | ADO.NET and Entity Framework integration | Enterprise applications, complex queries | +| **[MySQL Server](./connecting-to-database/mysql-server)** | Cross-platform connectivity | Web applications, open-source stacks | +| **[PostgreSQL](./connecting-to-database/postgresql-server)** | Advanced relational features | Large-scale applications, complex data structures | +| **[SQLite](./connecting-to-database/sqlite-server)** | Embedded database | Desktop apps, mobile apps, local storage | + +**API and service integration** + +API and service integration enables the Data Grid to connect seamlessly with GraphQL, Web API, OData, URL, and custom services for flexible server-side data access. + +| Integration approach | Best suited for | Key benefit | +|-----------------------|------------------|-------------| +| **[RESTful APIs](./connecting-to-adaptors/url-adaptor)** | Web applications and CRUD-based services | Standard HTTP-based data access | +| **[OData](./connecting-to-adaptors/odatav4-adaptor)** | Queryable enterprise data services | Standardized query and data operations | +| **[GraphQL](./connecting-to-adaptors/graphql-adaptor)** | Applications requiring flexible data queries | Declarative, field-specific data retrieval | +| **[Custom APIs](./data-binding/remote-data)** | Connect applications with external APIs or services | Complete control over server-side data operations and request handling | + +## Data operations + +The React Data Grid includes key features that make it easier to work with and understand large sets of information. These capabilities support organizing records, locating information efficiently, and summarizing results to enable clear analysis of complex datasets. + +- **[Sorting](./sorting)** - Arrange records in ascending or descending order to quickly identify trends and patterns. +- **[Filter bar](./filtering/filter-bar)** - Apply inline text filters in column headers for immediate results without dialogs. +- **[Filter menu](./filtering/filter-menu)** - Use advanced filtering with complex conditions and multiple criteria for powerful expression-based queries. +- **[Excel-like filter](./excel-like-filter)** - Filter with a familiar checkbox interface, allowing multi-select from available values. +- **[Searching](./searching)** - Perform rapid text-based searches across one or multiple columns for global or column-specific results. +- **[Grouping](./grouping/grouping)** - Organize records into categories with multi-level hierarchical grouping for better comprehension. +- **[Aggregates](./aggregates/aggregates)** - Calculate and display summary values (sum, average, min, max, custom metrics) to gain real-time insights. + +## Large-scale rendering performance + +The React Data Grid is designed for high performance, ensuring smooth interaction with large datasets. It uses built-in DOM virtualization with paging or virtual scrolling to load data on demand. This approach minimizes memory usage and reduces rendering overhead by limiting the number of active DOM elements, delivering responsive navigation and seamless scrolling even with very large datasets. + +## Editing and CRUD operations + +The React Data Grid enables seamless Create, Read, Update, and Delete (CRUD) operations directly within the grid interface, eliminating the need for separate forms or pages. Data modification occurs inline with immediate visual feedback, improving productivity and reducing context switching. + +**Editing modes** + +Multiple editing modes support different workflow scenarios: + +| Mode | Description | Best for | Key benefit | +|------|-------------|----------|-------------| +| **[In-line editing](./editing/in-line-editing)** | Edit records directly within grid rows | Simple updates and streamlined workflows | Minimal context switching and faster editing | +| **[Dialog editing](./editing/dialog-editing)** | Edit records in a dedicated dialog form | Multi-field data entry | Structured form-based editing with additional space | +| **[Batch editing](./editing/batch-editing)** | Make multiple changes before saving them together | High-volume editing | Efficient commits with fewer server requests | +| **[Cell editing](./editing/cell-editing)** | Edit individual cells within the grid | Frequent data entry, precision-focused editing | Precise cell-level editing and rapid data updates | + +**[Data validation](./editing/validation)**: +Built-in validation rules such as required fields, minimum and maximum values, and numeric-only checks ensure consistent data accuracy. In addition, custom validation rules provide flexibility to define tailored logic for specific business requirements, validating input before changes are saved. + +## Columns + +The React Data Grid provides flexible column and layout customization with formatting, resizing, reordering, and visibility controls for professional displays. + +- **[Column formatting](./columns/columns)** - Apply predefined or custom formats (currency, dates, percentages) for professional number and date presentation. +- **[Column resizing](./columns/column-resizing)** - Adjust widths manually with auto-fit and responsive options for optimal visibility. +- **[Column reordering](./columns/column-reorder)** - Drag headers to reorder columns for preferred arrangement. +- **[Frozen columns](./columns/frozen-column)** - Keep key columns visible during horizontal scrolling for critical information access. +- **[Column spanning](./columns/column-spanning)** - Extend cells across multiple columns to create grouped or summary layouts. +- **[Column menu](./columns/column-menu)** - Use dropdowns for visibility, filtering, sorting, grouping, and autofit for quick management. +- **[Column chooser](./columns/column-chooser)** - Show or hide columns dynamically with a dialog for configurable visibility. + +## Responsive design + +The React Data Grid provides [adaptive layouts](./adaptive) and mobile-friendly interactions for a consistent experience across desktop, tablet, and mobile devices. + +## User experience and interaction + +The React Data Grid delivers accessible, customizable data experiences with flexible interactions, templating, and standards-compliant accessibility support. + +**Templating and customization** + +- **[Header template](./columns/column-headers#header-template)** - Customize column headers with icons, tooltips, or complex formatting for professional design. +- **[Column template](./columns/column-template)** - Render cells with conditional styling and components for rich visualization. +- **[Row template](./row/row-template)** - Apply complete row customization for specialized layouts and unique presentations. +- **[Edit template](./editing/template-editing)** - Build custom edit forms with specialized controls and validation for complex data entry. + +**Selection** + +- **[Row selection](./selection/row-selection)** - Select single or multiple rows for flexible workflows +- **[Checkbox selection](./selection/check-box-selection)** - Use checkboxes with select-all for bulk operations +- **[Cell selection](./selection/cell-selection)** - Choose individual cells or ranges with spreadsheet-like interaction +- **[Persist selection](./selection/selection#persist-selection)** - Retain selections across sorting, filtering, and paging. + +**Accessibility and keyboard navigation** + +The Data Grid is fully accessible and compliant with Web Content Accessibility Guidelines (WCAG) standards: + +- **[WCAG compliance](./accessibility)** - Level AA accessibility standards +- **[Keyboard shortcuts](./accessibility#keyboard-interaction)** - Complete grid operation via keyboard + - Tab/Shift+Tab - Navigate between cells. + - Arrow Keys - Move between rows and columns. + - Enter - Update cells, confirm changes. + - Escape - Cancel editing. + - Ctrl+A - Select all rows. +- **[Screen reader support](./accessibility)** - Full compatibility with assistive technologies. +- **[Semantic HTML](./accessibility)** - Proper ARIA labels and semantic markup. + +## Export and print + +The React Data Grid provides comprehensive export and reporting capabilities, enabling extraction, analysis, and distribution of grid data in professional document formats. Built-in Excel, PDF, and print functionality with customizable templates eliminates the need for external reporting tools. + +| Format | Key benefit | Best for | +|--------|-------------|----------| +| **[Excel export](./excel-export/excel-exporting)** | Export grid data to Excel while preserving formatting, styling, grouping, and summaries | Business reporting, spreadsheet workflows | +| **[PDF export](./pdf-export/pdf-export)** | Generate professional documents with customizable layouts and formatting | Reports, document distribution, archiving | +| **[CSV export](./excel-export/excel-exporting)** | Export raw tabular data in a lightweight format | Data exchange, system integration, bulk processing | +| **[Print](./print)** | Produce printer-friendly output directly from the Data Grid | Hard-copy operational documents, on-demand printing | + +## Advanced features + +The React Data Grid includes sophisticated capabilities designed for complex enterprise data scenarios. These advanced features enable developers to build powerful, scalable data management solutions that handle demanding business requirements. + +- **[Master-detail grids](./hierarchy-grid)** - Implement maste-detail relationships to display complex parent-child data structures. +- **[Row spanning](./row-spanning)** - Extend cells vertically across rows to create specialized layouts. +- **[Detail templates](./detail-template)** - Add expandable row sections for drill-down exploration and richer data views. +- **[Foreign key columns](./columns/foreign-key-column)** - Automatically look up related data to show meaningful relationships. +- **[Global/Local formatting](./global-local)** - Apply consistent or column-specific formatting for professional presentation of values. +- **[State persistence](./state-management)** - Saves and restores grid configurations such as sorting, filtering, grouping, paging, and column settings across sessions. + +**Enterprise patterns** + +For specific implementation patterns, refer to feature documentation: + +- **Large-scale business applications** - Combine [State management](./state-management), [Hierarchical Grids](./hierarchy-grid), optimized performance techniques like [DOM Virtualization](./scrolling/dom-virtualization), and [Foreign key columns](./columns/foreign-key-column) to deliver responsive experiences across complex datasets. +- **Data-intensive operations** - Leverage [Grouping](./grouping/grouping), [Aggregates](./aggregates/aggregates), and [Filtering](./filtering/filtering) to efficiently manage and analyze large volumes of business data. +- **Reporting and export solutions** - Combine [Aggregates](./aggregates/aggregates), [Excel export](./excel-export/excel-exporting), and [PDF export](./pdf-export/pdf-export) to generate professional business reports and shareable documents. + +## Themes and styling + +Match the React Data Grid to the application's visual design using built-in themes and customization options. Supported themes are: + +- Fluent 2 +- Material 3 +- Bootstrap 5 +- Tailwind CSS +- Fluent 2 High Contrast + +[Syncfusion Theme Studio](https://ej2.syncfusion.com/react/documentation/appearance/theme-studio) allows customization of the Data Grid’s appearance by modifying theme variables such as primary, accent, and background colors, enabling consistent styling, lightweight CSS generation, and seamless integration while ensuring the grid aligns with application design requirements + +[Explore themes and styling](../appearance-and-styling/appearance-styling) + +## Quick links + +**Getting started:** +- [React Data Grid Guide](./getting-started) + +**Popular features:** +- [Filtering](./filtering/filtering) +- [Sorting](./sorting) +- [Editing and CRUD](./editing) +- [Export and reporting](./excel-export/excel-exporting) +- [Data validation](./editing/validation) + +**Advanced features** +- [DOM Virtualization](./scrolling/dom-virtualization) +- [State management](./state-management) +- [Hierarchical Grid](./hierarchy-grid) + +## Support and resources + +- **Questions?** Visit the [Syncfusion support portal](https://www.syncfusion.com/support) +- **Code examples?** Browse [Data Grid demos](https://ej2.syncfusion.com/react/demos/#/tailwind3/grid/over-view) and samples +- **API details?** See [Data Grid API reference](https://ej2.syncfusion.com/react/documentation/api/grid/index-default) +- **Community?** Join the [Syncfusion community forum](https://www.syncfusion.com/forums/react-js2) +- **What's new?** Check [Release notes](../../Release-Notes) \ No newline at end of file diff --git a/grid-sdk/typescript/data-grid/overview.md b/grid-sdk/typescript/data-grid/overview.md new file mode 100644 index 000000000..31f9a7f4e --- /dev/null +++ b/grid-sdk/typescript/data-grid/overview.md @@ -0,0 +1,214 @@ +--- +layout: post +title: TypeScript Data Grid Overview and Features | Syncfusion +description: Learn how to use TypeScript Data Grid for data management, CRUD operations, sorting, filtering, grouping, paging, and virtualization. +platform: grid-sdk +control: Overview +documentation: ug +domainurl: https://help.syncfusion.com/grid-sdk +--- + +# TypeScript Data Grid Overview + +The TypeScript Data Grid is a powerful and feature-rich UI component designed for displaying and managing tabular data with high performance and flexibility. It offers a comprehensive set of enterprise-grade capabilities, including advanced data operations, seamless integration with multiple data sources, and extensive customization options. + +## Common use cases + +The TypeScript Data Grid supports a wide range of data-intensive application scenarios. + +| Use case | Description | Relevant grid capabilities | +|----------|-------------|-----------------------| +| **Enterprise data management** | Manage customers, products, orders, suppliers, and operational records. | CRUD, filtering, sorting, grouping | +| **Financial applications** | Display and analyze transactions, portfolios, market data, and financial records. | Aggregates, formatting, virtualization, remote data | +| **Large-scale applications** | Work with large datasets while maintaining responsive interactions. | Virtualization, infinite scrolling, remote operations | +| **CRM applications** | Manage customer records, service requests, support tickets, and activities. | Searching, editing, selection, filtering | +| **Reporting applications** | Analyze and distribute business data in common document formats. | Aggregation, Excel export, PDF export, printing | + +## Data connectivity + +The TypeScript Data Grid integrates with modern application architectures, supporting local collections, REST APIs, GraphQL services, OData endpoints, ORM frameworks, and relational databases. + +### Data binding approaches + +- **[Local data](./data-binding/local-data)** - Bind grids to local collections and lists for fast data access without external dependencies. Ideal for small to medium datasets and rapid prototyping. + +- **[Remote data](./data-binding/remote-data)** - Connect to web services, REST APIs, and remote endpoints with automatic request handling and response parsing. Ideal for scalable applications with large or frequently updated datasets. + +- **[Custom API binding](./data-binding/remote-data)** - Connect the Data Grid to external APIs and data services with full control over request handling, response parsing, and data operations. + +- **ORM integration** - Seamless integration with popular Object-Relational Mapping frameworks eliminates custom data mapping code and enables LINQ-based queries. + - **[Entity Framework](./connecting-to-orm/entityframework)** - Integrate with Entity Framework and EF Core-based applications. + - **[Dapper](./connecting-to-orm/dapper)** - Connect to applications that use lightweight SQL-based data access. + +**Database compatibility** + +The Data Grid integrates with major relational databases to provide seamless data access and management: + +| Database | Key Benefit | Best For | +|----------|---------------|----------| +| **[Microsoft SQL Server](./connecting-to-database/microsoft-sql-server)** | ADO.NET and Entity Framework integration | Enterprise applications, complex queries | +| **[MySQL Server](./connecting-to-database/mysql-server)** | Cross-platform connectivity | Web applications, open-source stacks | +| **[PostgreSQL](./connecting-to-database/postgresql-server)** | Advanced relational features | Large-scale applications, complex data structures | +| **[SQLite](./connecting-to-database/sqlite-server)** | Embedded database | Desktop apps, mobile apps, local storage | + +**API and service integration** + +API and service integration enables the Data Grid to connect seamlessly with GraphQL, Web API, OData, URL, and custom services for flexible server-side data access. + +| Integration approach | Best suited for | Key benefit | +|-----------------------|------------------|-------------| +| **[RESTful APIs](./connecting-to-adaptors/url-adaptor)** | Web applications and CRUD-based services | Standard HTTP-based data access | +| **[OData](./connecting-to-adaptors/odatav4-adaptor)** | Queryable enterprise data services | Standardized query and data operations | +| **[GraphQL](./connecting-to-adaptors/graphql-adaptor)** | Applications requiring flexible data queries | Declarative, field-specific data retrieval | +| **[Custom APIs](./data-binding/remote-data)** | Connect applications with external APIs or services | Complete control over server-side data operations and request handling | + +## Data operations + +The TypeScript Data Grid includes key features that make it easier to work with and understand large sets of information. These capabilities support organizing records, locating information efficiently, and summarizing results to enable clear analysis of complex datasets. + +- **[Sorting](./sorting)** - Arrange records in ascending or descending order to quickly identify trends and patterns. +- **[Filter bar](./filtering/filter-bar)** - Apply inline text filters in column headers for immediate results without dialogs. +- **[Filter menu](./filtering/filter-menu)** - Use advanced filtering with complex conditions and multiple criteria for powerful expression-based queries. +- **[Excel-like filter](./excel-like-filter)** - Filter with a familiar checkbox interface, allowing multi-select from available values. +- **[Searching](./searching)** - Perform rapid text-based searches across one or multiple columns for global or column-specific results. +- **[Grouping](./grouping/grouping)** - Organize records into categories with multi-level hierarchical grouping for better comprehension. +- **[Aggregates](./aggregates/aggregates)** - Calculate and display summary values (sum, average, min, max, custom metrics) to gain real-time insights. + +## Large-scale rendering performance + +The TypeScript Data Grid is designed for high performance, ensuring smooth interaction with large datasets. It uses built-in DOM virtualization with paging or virtual scrolling to load data on demand. This approach minimizes memory usage and reduces rendering overhead by limiting the number of active DOM elements, delivering responsive navigation and seamless scrolling even with very large datasets. + +## Editing and CRUD operations + +The TypeScript Data Grid enables seamless Create, Read, Update, and Delete (CRUD) operations directly within the grid interface, eliminating the need for separate forms or pages. Data modification occurs inline with immediate visual feedback, improving productivity and reducing context switching. + +**Editing modes** + +Multiple editing modes support different workflow scenarios: + +| Mode | Description | Best for | Key benefit | +|------|-------------|----------|-------------| +| **[In-line editing](./editing/in-line-editing)** | Edit records directly within grid rows | Simple updates and streamlined workflows | Minimal context switching and faster editing | +| **[Dialog editing](./editing/dialog-editing)** | Edit records in a dedicated dialog form | Multi-field data entry | Structured form-based editing with additional space | +| **[Batch editing](./editing/batch-editing)** | Make multiple changes before saving them together | High-volume editing | Efficient commits with fewer server requests | +| **[Cell editing](./editing/cell-editing)** | Edit individual cells within the grid | Frequent data entry, precision-focused editing | Precise cell-level editing and rapid data updates | + +**[Data validation](./editing/validation)**: +Built-in validation rules such as required fields, minimum and maximum values, and numeric-only checks ensure consistent data accuracy. In addition, custom validation rules provide flexibility to define tailored logic for specific business requirements, validating input before changes are saved. + +## Columns + +The TypeScript Data Grid provides flexible column and layout customization with formatting, resizing, reordering, and visibility controls for professional displays. + +- **[Column formatting](./columns/columns)** - Apply predefined or custom formats (currency, dates, percentages) for professional number and date presentation. +- **[Column resizing](./columns/column-resizing)** - Adjust widths manually with auto-fit and responsive options for optimal visibility. +- **[Column reordering](./columns/column-reorder)** - Drag headers to reorder columns for preferred arrangement. +- **[Frozen columns](./columns/frozen-column)** - Keep key columns visible during horizontal scrolling for critical information access. +- **[Column spanning](./columns/column-spanning)** - Extend cells across multiple columns to create grouped or summary layouts. +- **[Column menu](./columns/column-menu)** - Use dropdowns for visibility, filtering, sorting, grouping, and autofit for quick management. +- **[Column chooser](./columns/column-chooser)** - Show or hide columns dynamically with a dialog for configurable visibility. + +## Responsive design + +The TypeScript Data Grid provides [adaptive layouts](./adaptive) and mobile-friendly interactions for a consistent experience across desktop, tablet, and mobile devices. + +## User experience and interaction + +The TypeScript Data Grid delivers accessible, customizable data experiences with flexible interactions, templating, and standards-compliant accessibility support. + +**Templating and customization** + +- **[Header template](./columns/column-headers#header-template)** - Customize column headers with icons, tooltips, or complex formatting for professional design. +- **[Column template](./columns/column-template)** - Render cells with conditional styling and components for rich visualization. +- **[Row template](./row/row-template)** - Apply complete row customization for specialized layouts and unique presentations. +- **[Edit template](./editing/template-editing)** - Build custom edit forms with specialized controls and validation for complex data entry. + +**Selection** + +- **[Row selection](./selection/row-selection)** - Select single or multiple rows for flexible workflows +- **[Checkbox selection](./selection/check-box-selection)** - Use checkboxes with select-all for bulk operations +- **[Cell selection](./selection/cell-selection)** - Choose individual cells or ranges with spreadsheet-like interaction +- **[Persist selection](./selection/selection#persist-selection)** - Retain selections across sorting, filtering, and paging. + +**Accessibility and keyboard navigation** + +The Data Grid is fully accessible and compliant with Web Content Accessibility Guidelines (WCAG) standards: + +- **[WCAG compliance](./accessibility)** - Level AA accessibility standards +- **[Keyboard shortcuts](./accessibility#keyboard-interaction)** - Complete grid operation via keyboard + - Tab/Shift+Tab - Navigate between cells. + - Arrow Keys - Move between rows and columns. + - Enter - Update cells, confirm changes. + - Escape - Cancel editing. + - Ctrl+A - Select all rows. +- **[Screen reader support](./accessibility)** - Full compatibility with assistive technologies. +- **[Semantic HTML](./accessibility)** - Proper ARIA labels and semantic markup. + +## Export and print + +The TypeScript Data Grid provides comprehensive export and reporting capabilities, enabling extraction, analysis, and distribution of grid data in professional document formats. Built-in Excel, PDF, and print functionality with customizable templates eliminates the need for external reporting tools. + +| Format | Key benefit | Best for | +|--------|-------------|----------| +| **[Excel export](./excel-export/excel-exporting)** | Export grid data to Excel while preserving formatting, styling, grouping, and summaries | Business reporting, spreadsheet workflows | +| **[PDF export](./pdf-export/pdf-export)** | Generate professional documents with customizable layouts and formatting | Reports, document distribution, archiving | +| **[CSV export](./excel-export/excel-exporting)** | Export raw tabular data in a lightweight format | Data exchange, system integration, bulk processing | +| **[Print](./print)** | Produce printer-friendly output directly from the Data Grid | Hard-copy operational documents, on-demand printing | + +## Advanced features + +The TypeScript Data Grid includes sophisticated capabilities designed for complex enterprise data scenarios. These advanced features enable developers to build powerful, scalable data management solutions that handle demanding business requirements. + +- **[Master-detail grids](./hierarchy-grid)** - Implement master-detail relationships to display complex parent-child data structures. +- **[Row spanning](./row-spanning)** - Extend cells vertically across rows to create specialized layouts. +- **[Detail templates](./detail-template)** - Add expandable row sections for drill-down exploration and richer data views. +- **[Foreign key columns](./columns/foreign-key-column)** - Automatically look up related data to show meaningful relationships. +- **[Global/Local formatting](./global-local)** - Apply consistent or column-specific formatting for professional presentation of values. +- **[State persistence](./state-management)** - Saves and restores grid configurations such as sorting, filtering, grouping, paging, and column settings across sessions. + +**Enterprise patterns** + +For specific implementation patterns, refer to feature documentation: + +- **Large-scale business applications** - Combine [State management](./state-management), [Hierarchical Grids](./hierarchy-grid), optimized performance techniques like [DOM Virtualization](./scrolling/dom-virtualization), and [Foreign key columns](./columns/foreign-key-column) to deliver responsive experiences across complex datasets. +- **Data-intensive operations** - Leverage [Grouping](./grouping/grouping), [Aggregates](./aggregates/aggregates), and [Filtering](./filtering/filtering) to efficiently manage and analyze large volumes of business data. +- **Reporting and export solutions** - Combine [Aggregates](./aggregates/aggregates), [Excel export](./excel-export/excel-exporting), and [PDF export](./pdf-export/pdf-export) to generate professional business reports and shareable documents. + +## Themes and styling + +Match the TypeScript Data Grid to the application's visual design using built-in themes and customization options. Supported themes are: + +- Fluent 2 +- Material 3 +- Bootstrap 5 +- Tailwind CSS +- Fluent 2 High Contrast + +[Syncfusion Theme Studio](https://ej2.syncfusion.com/documentation/appearance/theme-studio) allows customization of the Data Grid's appearance by modifying theme variables such as primary, accent, and background colors, enabling consistent styling, lightweight CSS generation, and seamless integration while ensuring the grid aligns with application design requirements. + +[Explore themes and styling](../appearance-and-styling/appearance-styling) + +## Quick links + +**Getting started:** +- [TypeScript Data Grid Guide](./getting-started) + +**Popular features:** +- [Filtering](./filtering/filtering) +- [Sorting](./sorting) +- [Editing and CRUD](./editing) +- [Export and reporting](./excel-export/excel-exporting) +- [Data validation](./editing/validation) + +**Advanced features** +- [DOM Virtualization](./scrolling/dom-virtualization) +- [State management](./state-management) +- [Hierarchical Grid](./hierarchy-grid) + +## Support and resources + +- **Questions?** Visit the [Syncfusion support portal](https://www.syncfusion.com/support) +- **Code Examples?** Browse [Data Grid demos](https://ej2.syncfusion.com/demos/#/tailwind3/grid/grid-overview.html) and samples +- **API Details?** See [Data Grid API reference](https://ej2.syncfusion.com/documentation/api/grid/index-default) +- **Community?** Join the [Syncfusion community forum](https://www.syncfusion.com/forums/essential-js2) +- **What's New?** Check [Release notes](../../Release-Notes) \ No newline at end of file diff --git a/grid-sdk/vue/data-grid/overview.md b/grid-sdk/vue/data-grid/overview.md new file mode 100644 index 000000000..7450b5a63 --- /dev/null +++ b/grid-sdk/vue/data-grid/overview.md @@ -0,0 +1,214 @@ +--- +layout: post +title: Vue Data Grid Overview and Features | Syncfusion +description: Learn how to use Vue Data Grid for data management, CRUD operations, sorting, filtering, grouping, paging, and virtualization. +control: Overview +platform: grid-sdk +documentation: ug +domainurl: https://help.syncfusion.com/grid-sdk +--- + +# Vue Data Grid Overview + +The Vue Data Grid is a powerful and feature-rich UI component designed for displaying and managing tabular data with high performance and flexibility. It offers a comprehensive set of enterprise-grade capabilities, including advanced data operations, seamless integration with multiple data sources, and extensive customization options. + +## Common use cases + +The Vue Data Grid supports a wide range of data-intensive application scenarios. + +| Use case | Description | Relevant grid capabilities | +|----------|-------------|-----------------------| +| **Enterprise data management** | Manage customers, products, orders, suppliers, and operational records. | CRUD, filtering, sorting, grouping | +| **Financial applications** | Display and analyze transactions, portfolios, market data, and financial records. | Aggregates, formatting, virtualization, remote data | +| **Large-scale applications** | Work with large datasets while maintaining responsive interactions. | Virtualization, infinite scrolling, remote operations | +| **CRM applications** | Manage customer records, service requests, support tickets, and activities. | Searching, editing, selection, filtering | +| **Reporting applications** | Analyze and distribute business data in common document formats. | Aggregation, Excel export, PDF export, printing | + +## Data connectivity + +The Vue Data Grid integrates with modern application architectures, supporting local collections, REST APIs, GraphQL services, OData endpoints, ORM frameworks, and relational databases. + +### Data binding approaches + +- **[Local data](./data-binding/local-data)** - Bind grids to local collections and lists for fast data access without external dependencies. Ideal for small to medium datasets and rapid prototyping. + +- **[Remote data](./data-binding/remote-data)** - Connect to web services, REST APIs, and remote endpoints with automatic request handling and response parsing. Ideal for scalable applications with large or frequently updated datasets. + +- **[Custom API binding](./data-binding/remote-data)** - Connect the Data Grid to external APIs and data services with full control over request handling, response parsing, and data operations. + +- **ORM integration** - Seamless integration with popular Object-Relational Mapping frameworks eliminates custom data mapping code and enables LINQ-based queries. + - **[Entity Framework](./connecting-to-orm/entityframework)** - Integrate with Entity Framework and EF Core-based applications. + - **[Dapper](./connecting-to-orm/dapper)** - Connect to applications that use lightweight SQL-based data access. + +**Database compatibility** + +The Data Grid integrates with major relational databases to provide seamless data access and management: + +| Database | Key benefit | Best for | +|----------|---------------|----------| +| **[Microsoft SQL Server](./connecting-to-database/microsoft-sql-server)** | ADO.NET and Entity Framework integration | Enterprise applications, complex queries | +| **[MySQL Server](./connecting-to-database/mysql-server)** | Cross-platform connectivity | Web applications, open-source stacks | +| **[PostgreSQL](./connecting-to-database/postgresql-server)** | Advanced relational features | Large-scale applications, complex data structures | +| **[SQLite](./connecting-to-database/sqlite-server)** | Embedded database | Desktop apps, mobile apps, local storage | + +**API and service integration** + +API and service integration enables the Data Grid to connect seamlessly with GraphQL, Web API, OData, URL, and custom services for flexible server-side data access. + +| Integration approach | Best suited for | Key benefit | +|-----------------------|------------------|-------------| +| **[RESTful APIs](./connecting-to-adaptors/url-adaptor)** | Web applications and CRUD-based services | Standard HTTP-based data access | +| **[OData](./connecting-to-adaptors/odatav4-adaptor)** | Queryable enterprise data services | Standardized query and data operations | +| **[GraphQL](./connecting-to-adaptors/graphql-adaptor)** | Applications requiring flexible data queries | Declarative, field-specific data retrieval | +| **[Custom APIs](./data-binding/remote-data)** | Connect applications with external APIs or services | Complete control over server-side data operations and request handling | + +## Data operations + +The Vue Data Grid includes key features that make it easier to work with and understand large sets of information. These capabilities support organizing records, locating information efficiently, and summarizing results to enable clear analysis of complex datasets. + +- **[Sorting](./sorting)** - Arrange records in ascending or descending order to quickly identify trends and patterns. +- **[Filter bar](./filtering/filter-bar)** - Apply inline text filters in column headers for immediate results without dialogs. +- **[Filter menu](./filtering/filter-menu)** - Use advanced filtering with complex conditions and multiple criteria for powerful expression-based queries. +- **[Excel-like filter](./excel-like-filter)** - Filter with a familiar checkbox interface, allowing multi-select from available values. +- **[Searching](./searching)** - Perform rapid text-based searches across one or multiple columns for global or column-specific results. +- **[Grouping](./grouping/grouping)** - Organize records into categories with multi-level hierarchical grouping for better comprehension. +- **[Aggregates](./aggregates/aggregates)** - Calculate and display summary values (sum, average, min, max, custom metrics) to gain real-time insights. + +## Large-scale rendering performance + +The Vue Data Grid is designed for high performance, ensuring smooth interaction with large datasets. It uses built-in DOM virtualization with paging or virtual scrolling to load data on demand. This approach minimizes memory usage and reduces rendering overhead by limiting the number of active DOM elements, delivering responsive navigation and seamless scrolling even with very large datasets. + +## Editing and CRUD operations + +The Vue Data Grid enables seamless Create, Read, Update, and Delete (CRUD) operations directly within the grid interface, eliminating the need for separate forms or pages. Data modification occurs inline with immediate visual feedback, improving productivity and reducing context switching. + +**Editing modes** + +Multiple editing modes support different workflow scenarios: + +| Mode | Description | Best for | Key benefit | +|------|-------------|----------|-------------| +| **[In-line editing](./editing/in-line-editing)** | Edit records directly within grid rows | Simple updates and streamlined workflows | Minimal context switching and faster editing | +| **[Dialog editing](./editing/dialog-editing)** | Edit records in a dedicated dialog form | Multi-field data entry | Structured form-based editing with additional space | +| **[Batch editing](./editing/batch-editing)** | Make multiple changes before saving them together | High-volume editing | Efficient commits with fewer server requests | +| **[Cell editing](./editing/cell-editing)** | Edit individual cells within the grid | Frequent data entry, precision-focused editing | Precise cell-level editing and rapid data updates | + +**[Data validation](./editing/validation)**: +Built-in validation rules such as required fields, minimum and maximum values, and numeric-only checks ensure consistent data accuracy. In addition, custom validation rules provide flexibility to define tailored logic for specific business requirements, validating input before changes are saved. + +## Columns + +The Vue Data Grid provides flexible column and layout customization with formatting, resizing, reordering, and visibility controls for professional displays. + +- **[Column formatting](./columns/columns)** - Apply predefined or custom formats (currency, dates, percentages) for professional number and date presentation. +- **[Column resizing](./columns/column-resizing)** - Adjust widths manually with auto-fit and responsive options for optimal visibility. +- **[Column reordering](./columns/column-reorder)** - Drag headers to reorder columns for preferred arrangement. +- **[Frozen columns](./columns/frozen-column)** - Keep key columns visible during horizontal scrolling for critical information access. +- **[Column spanning](./columns/column-spanning)** - Extend cells across multiple columns to create grouped or summary layouts. +- **[Column menu](./columns/column-menu)** - Use dropdowns for visibility, filtering, sorting, grouping, and autofit for quick management. +- **[Column chooser](./columns/column-chooser)** - Show or hide columns dynamically with a dialog for configurable visibility. + +## Responsive design + +The Vue Data Grid provides [adaptive layouts](./adaptive) and mobile-friendly interactions for a consistent experience across desktop, tablet, and mobile devices. + +## User experience and interaction + +The Vue Data Grid delivers accessible, customizable data experiences with flexible interactions, templating, and standards-compliant accessibility support. + +**Templating and customization** + +- **[Header template](./columns/column-headers#header-template)** - Customize column headers with icons, tooltips, or complex formatting for professional design. +- **[Column template](./columns/column-template)** - Render cells with conditional styling and components for rich visualization. +- **[Row template](./row/row-template)** - Apply complete row customization for specialized layouts and unique presentations. +- **[Edit template](./editing/template-editing)** - Build custom edit forms with specialized controls and validation for complex data entry. + +**Selection** + +- **[Row selection](./selection/row-selection)** - Select single or multiple rows for flexible workflows +- **[Checkbox selection](./selection/check-box-selection)** - Use checkboxes with select-all for bulk operations +- **[Cell selection](./selection/cell-selection)** - Choose individual cells or ranges with spreadsheet-like interaction +- **[Persist selection](./selection/selection#persist-selection)** - Retain selections across sorting, filtering, and paging. + +**Accessibility and keyboard navigation** + +The Data Grid is fully accessible and compliant with Web Content Accessibility Guidelines (WCAG) standards: + +- **[WCAG compliance](./accessibility)** - Level AA accessibility standards +- **[Keyboard shortcuts](./accessibility#keyboard-interaction)** - Complete grid operation via keyboard + - Tab/Shift+Tab - Navigate between cells. + - Arrow Keys - Move between rows and columns. + - Enter - Update cells, confirm changes. + - Escape - Cancel editing. + - Ctrl+A - Select all rows. +- **[Screen reader support](./accessibility)** - Full compatibility with assistive technologies. +- **[Semantic HTML](./accessibility)** - Proper ARIA labels and semantic markup. + +## Export and print + +The Vue Data Grid provides comprehensive export and reporting capabilities, enabling extraction, analysis, and distribution of grid data in professional document formats. Built-in Excel, PDF, and print functionality with customizable templates eliminates the need for external reporting tools. + +| Format | Key benefit | Best for | +|--------|-------------|----------| +| **[Excel export](./excel-export/excel-exporting)** | Export grid data to Excel while preserving formatting, styling, grouping, and summaries | Business reporting, spreadsheet workflows | +| **[PDF export](./pdf-export/pdf-export)** | Generate professional documents with customizable layouts and formatting | Reports, document distribution, archiving | +| **[CSV export](./excel-export/excel-exporting)** | Export raw tabular data in a lightweight format | Data exchange, system integration, bulk processing | +| **[Print](./print)** | Produce printer-friendly output directly from the Data Grid | Hard-copy operational documents, on-demand printing | + +## Advanced features + +The Vue Data Grid includes sophisticated capabilities designed for complex enterprise data scenarios. These advanced features enable developers to build powerful, scalable data management solutions that handle demanding business requirements. + +- **[Master-detail grids](./hierarchy-grid)** - Implement maste-detail relationships to display complex parent-child data structures. +- **[Row spanning](./row-spanning)** - Extend cells vertically across rows to create specialized layouts. +- **[Detail templates](./detail-template)** - Add expandable row sections for drill-down exploration and richer data views. +- **[Foreign key columns](./columns/foreign-key-column)** - Automatically look up related data to show meaningful relationships. +- **[Global/Local formatting](./global-local)** - Apply consistent or column-specific formatting for professional presentation of values. +- **[State persistence](./state-management)** - Saves and restores grid configurations such as sorting, filtering, grouping, paging, and column settings across sessions. + +**Enterprise patterns** + +For specific implementation patterns, refer to feature documentation: + +- **Large-scale business applications** - Combine [State management](./state-management), [Hierarchical Grids](./hierarchy-grid), optimized performance techniques like [DOM Virtualization](./scrolling/dom-virtualization), and [Foreign key columns](./columns/foreign-key-column) to deliver responsive experiences across complex datasets. +- **Data-intensive operations** - Leverage [Grouping](./grouping/grouping), [Aggregates](./aggregates/aggregates), and [Filtering](./filtering/filtering) to efficiently manage and analyze large volumes of business data. +- **Reporting and export solutions** - Combine [Aggregates](./aggregates/aggregates), [Excel export](./excel-export/excel-exporting), and [PDF export](./pdf-export/pdf-export) to generate professional business reports and shareable documents. + +## Themes and styling + +Match the Vue Data Grid to the application's visual design using built-in themes and customization options. Supported themes are: + +- Fluent 2 +- Material 3 +- Bootstrap 5 +- Tailwind CSS +- Fluent 2 High Contrast + +[Syncfusion Theme Studio](https://ej2.syncfusion.com/vue/documentation/appearance/theme-studio) allows customization of the Data Grid’s appearance by modifying theme variables such as primary, accent, and background colors, enabling consistent styling, lightweight CSS generation, and seamless integration while ensuring the grid aligns with application design requirements + +[Explore themes and styling](../appearance-and-styling/appearance-styling) + +## Quick links + +**Getting started:** +- [Vue Data Grid Guide](./getting-started) + +**Popular features:** +- [Filtering](./filtering/filtering) +- [Sorting](./sorting) +- [Editing and CRUD](./editing) +- [Export and reporting](./excel-export/excel-exporting) +- [Data validation](./editing/validation) + +**Advanced features** +- [DOM Virtualization](./scrolling/dom-virtualization) +- [State management](./state-management) +- [Hierarchical Grid](./hierarchy-grid) + +## Support and resources + +- **Questions?** Visit the [Syncfusion support portal](https://www.syncfusion.com/support) +- **Code Examples?** Browse [Data Grid demos](https://ej2.syncfusion.com/vue/demos/#/tailwind3/grid/grid-overview) and samples +- **API Details?** See [Data Grid API reference](https://ej2.syncfusion.com/vue/documentation/api/grid/index-default) +- **Community?** Join the [Syncfusion community forum](https://www.syncfusion.com/forums/vue) +- **What's New?** Check [Release Notes](../../Release-Notes) \ No newline at end of file diff --git a/grid-toc.html b/grid-toc.html index f05f2c237..3539721a0 100644 --- a/grid-toc.html +++ b/grid-toc.html @@ -49,6 +49,7 @@
  • Preact
  • +
  • Overview
  • Feature Modules
  • Assistive Grid