- \n
- Header Template<\/a><\/li>\n\n\n\n
- Cell Template<\/a><\/li>\n\n\n\n
- Data Binding<\/a><\/li>\n\n\n\n
- Complex Data Binding<\/a><\/li>\n\n\n\n
- Collapsible Column Groups<\/a><\/li>\n\n\n\n
- Column Hiding<\/a><\/li>\n\n\n\n
- Column Reordering & Moving<\/a><\/li>\n\n\n\n
- Column Pinning<\/a><\/li>\n\n\n\n
- Column Resizing<\/a><\/li>\n\n\n\n
- Column Types<\/a><\/li>\n\n\n\n
- Conditional Styling<\/a><\/li>\n\n\n\n
- Display Density<\/a><\/li>\n\n\n\n
- Editing<\/a><\/li>\n\n\n\n
- React Grid Cell Editing<\/a><\/li>\n\n\n\n
- Cascading Combos<\/a><\/li>\n\n\n\n
- Row Adding<\/a><\/li>\n\n\n\n
- Row Editing<\/a><\/li>\n\n\n\n
- Export to Excel Service<\/a><\/li>\n\n\n\n
- Filtering<\/a><\/li>\n\n\n\n
- React Grid Advanced Filtering<\/a><\/li>\n\n\n\n
- Excel Style Filtering<\/a><\/li>\n\n\n\n
- Group By<\/a><\/li>\n\n\n\n
- Live Data \/ Real-Time Updates<\/a><\/li>\n\n\n\n
- Master-Detail<\/a><\/li>\n\n\n\n
- Keyboard Navigation<\/a><\/li>\n\n\n\n
- Multi-Column Headers Overview<\/a><\/li>\n\n\n\n
- Multi-row Layout<\/a><\/li>\n\n\n\n
- Pagination<\/a><\/li>\n\n\n\n
- Remote Data Operations<\/a><\/li>\n\n\n\n
- Row Actions<\/a><\/li>\n\n\n\n
- Row Dragging<\/a><\/li>\n\n\n\n
- Row Pinning<\/a><\/li>\n\n\n\n
- Search Filter<\/a><\/li>\n\n\n\n
- Selection<\/a><\/li>\n\n\n\n
- Cell Selection<\/a><\/li>\n\n\n\n
- Column Selection<\/a><\/li>\n\n\n\n
- Row Selection<\/a><\/li>\n\n\n\n
- Sizing<\/a><\/li>\n\n\n\n
- Sorting<\/a><\/li>\n\n\n\n
- Summaries<\/a><\/li>\n\n\n\n
- Virtualization and Performance<\/a><\/li>\n\n\n\n
- Toolbar<\/a><\/li>\n\n\n\n
- Theming<\/a><\/li>\n<\/ul>\n\n\n\n
The React Data Grid<\/h2>\n\n\n\n
The new React Data Grid<\/a> component is used for displaying data in a tabular format quickly and easily. The Data Grid is a modern grid component packed with features such as data editing, selection, filtering, sorting, grouping, pinning, paging, templating, column moving, exporting, and more. Compared to the previous grid we shipped in Ignite UI for React, the new Data Grid has significantly more features, a richer API, and built-in theming.<\/p>\n\n\n\n
![\"Ignite](\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/Example-of-React-Grid.gif\")
<\/figure>\n\n\n\n<\/p>\n\n\n\n
Header Template<\/a><\/h3>\n\n\n\n
The Header Template allows you to customize the appearance and behavior of column headers in Ignite UI for React
IgrGrid<\/code><\/a>.<\/p>\n\n\n\nCell Template<\/a><\/h3>\n\n\n\n
The Cell Template enables you to customize the appearance and behavior of cells in Ignite UI for React
IgrGrid<\/code><\/a>.<\/p>\n\n\n\nCollapsible Column Groups<\/a><\/strong><\/h3>\n\n\n\n
The React Grid Collapsible Column Groups feature in Ignite UI allows you to organize and manage multiple levels of nested columns and column groups in the React Grid by grouping them together and providing the option to collapse or expand these groups for improved data visualization and navigation.<\/p>\n\n\n\n
Column Hiding<\/a><\/h3>\n\n\n\n
The Ignite UI for React has a built-in column hiding UI, which can be used through the React Grid toolbar to change the visible state of the columns. Developers have the flexibility to define the Column Hiding UI anywhere within the page as needed. The React Grid Column Hiding feature is especially useful when one wants to decrease the size of the grid and eliminate the need for tabbing through redundant fields.<\/p>\n\n\n\n
Column Reordering & Moving<\/a><\/h3>\n\n\n\n
The React Grid Column Moving feature in Ignite UI allows quick and easy column reordering. This can be done through the Column Moving API or by dragging and dropping the headers to another position via mouse or touch gestures. In the React Grid, you can enable Column Moving for pinned and unpinned columns and for Multi-Column Headers<\/a> as well.<\/p>\n\n\n\n
Column Pinning<\/a><\/h3>\n\n\n\n
Column Pinning in Ignite UI for React allows end users to lock a column in a particular column order. As a result, this will allow them to see it while horizontally scrolling the
IgrGrid<\/code><\/a>. The React Grid has a built-in column pinning UI, which can be used through theIgrGrid<\/code><\/a>‘s toolbar to change the pin state of the columns. In addition, you can define a custom UI and change the pin state of the columns via the Column Pinning feature.<\/p>\n\n\n\nColumn Resizing<\/a><\/h3>\n\n\n\n
The React Grid Column Resizing feature in Ignite UI allows users to adjust the width of the columns of the Grid easily. By default, they will see a temporary resize indicator while the drag resizing operation is in effect. Several resizing options are available – Resizing Columns in Pixels\/Percentages, Restrict Column Resizing, Auto-Size Columns on Double Click, and Auto-Size Columns on Initialization.<\/p>\n\n\n\n
Column Types<\/a><\/h3>\n\n\n\n
Ignite UI for React
IgrGrid<\/code><\/a> provides a default handling of column data types, based on which the appearance of the default and editing templates will be present. Supported column data types:<\/p>\n\n\n\n- \n
- Number<\/em><\/li>\n\n\n\n
- Siring<\/i><\/li>\n\n\n\n
- Date<\/em><\/li>\n\n\n\n
- Boolean<\/i><\/li>\n\n\n\n
- Currency<\/em><\/li>\n\n\n\n
- Percent<\/em> <\/li>\n<\/ul>\n\n\n\n
Conditional Styling<\/a><\/h3>\n\n\n\n
The React Grid component in Ignite UI allows custom styling on a row or cell level. The Grid Conditional Styling functionality visually emphasizes or highlights data that meets certain criteria, making it easier for users to identify important information or trends within the grid.<\/p>\n\n\n\n
Display Density<\/a><\/h3>\n\n\n\n
The React Grid Display Density in Ignite UI allows users to control the spacing and layout of data within the Grid. By changing density<\/a>, you can significantly improve the user experience when interacting with large amounts of content. They can choose from three display density options:<\/p>\n\n\n\n
- \n
- Cozy<\/li>\n\n\n\n
- Comfortable<\/li>\n\n\n\n
- Compact<\/li>\n<\/ul>\n\n\n\n
Editing<\/a><\/h3>\n\n\n\n
The React Grid Cell editing feature in Ignite UI provides an easy way to perform data manipulation operations like creating, updating, and deleting records. The React Grid provides a powerful public API that allows you to customize how these operations are performed. The data manipulation phases are:<\/p>\n\n\n\n
- \n
React Grid Cell Editing<\/a><\/h3><\/li>\n<\/ul>\n\n\n\n
The React Grid Cell Editing feature in Ignite UI provides a great data manipulation capability of the content of individual cells within the React Grid component and comes with a powerful API for React CRUD operations. It is a fundamental feature in apps like spreadsheets, data tables, and data grids, allowing users to add, edit, or update data within specific cells. By default, the Grid in Ignite UI for React is used in cell editing. Due to the default cell editing template<\/strong>, there will be different editors based on the column data type Top of Form. In addition, you can define your own custom templates for update-data actions and override the default behavior for committing and discarding any changes.<\/p>\n\n\n\n
![\"Example](\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/8883.Example-React-Grid-Cell-Editing.gif\")
<\/figure>\n\n\n\n- \n
Cascading Combos<\/a><\/h3><\/li>\n<\/ul>\n\n\n\n
The Editing feature in Ignite UI provides with the opportunity to use Cascading Combobox components. By selecting the value in any preceding Combobox, the users will receive only the data that is relevant to their selection within the next React Combobox component.<\/p>\n\n\n\n
- \n
Row Adding<\/a><\/h3><\/li>\n<\/ul>\n\n\n\n
The
IgrGrid<\/code><\/a> provides a convenient way to perform data manipulations through inline row adding and a powerful API for React CRUD operations. Add anIgrActionStrip<\/code><\/a> component with editing actions enabled in the grid’s template, hover a row and use the provided button, press “ALT\"<\/kbd> + “+\"<\/kbd> to spawn the row adding UI.<\/p>\n\n\n\n- \n
Row Editing<\/a><\/h3><\/li>\n<\/ul>\n\n\n\n
The
IgrGrid<\/code><\/a> provides a convenient way to perform data manipulations through inline editing and a powerful API for React CRUD operations. Click on a row and press Enter key,<\/strong> or simply double-click with the mouse on the row that needs to be modified.<\/p>\n\n\n\n![\"Example](\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/6082.React-Grid-Row-Adding-and-Editing.gif\")
<\/figure>\n\n\n\n- \n
- Batch Editing (Coming Soon)<\/li>\n<\/ul>\n\n\n\n
Export to Excel Service<\/a><\/h3>\n\n\n\n
The React Grid Excel Exporter service in Ignite UI can export data to Excel. The data export functionality is encapsulated in the
ExcelExporterService<\/code> class and the data is exported in MS Excel table format. This format enables features like filtering, sorting, etc. To do this, you need to invoke theExport<\/code> method ofExcelExporterService<\/code> and pass the Grid component as the first argument to export the grid easily.<\/p>\n\n\n\nFiltering<\/a><\/h3>\n\n\n\n
The React Grid Filtering in Ignite UI is a feature that allows for selectively displaying or hiding data based on specific criteria or conditions. There is a bound data container through which the
IgrGrid<\/code><\/a> Component provides rich filtering API and all the filtering capabilities. The available filtering types here are three:<\/p>\n\n\n\n- \n
React Grid Advanced Filtering<\/a><\/h3><\/li>\n<\/ul>\n\n\n\n
The React Grid Advanced Filtering in Ignite UI allows you to manipulate data by providing a dialog where you can create different groups with filtering conditions across all columns in the React Grid.<\/p>\n\n\n\n
![\"Example](\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/8407.Example-of-React-Grid-Advanced-Filtering.gif\")
<\/figure>\n\n\n\n- \n
Excel Style Filtering<\/a><\/h3><\/li>\n<\/ul>\n\n\n\n
The React Grid exposes an Excel-style filtering feature that provides an Excel-like filtering UI. It simplifies the process of working with large datasets. The main idea is to help them filter the most relevant data while eliminating irrelevant entries.<\/p>\n\n\n\n
![\"Example](\"http:\/\/static.infragistics.com\/marketing\/Blogs\/Migration\/00\/00\/00\/09\/43\/7142.Example-of-React-Filter-Excel-Style-Filtering.gif\")
<\/figure>\n\n\n\nGroup By<\/a><\/strong><\/h3>\n\n\n\n
The Ignite UI for React Group By behavior in React Grid creates grouped data rows based on the column values. The Group By in the
IgrGrid<\/code><\/a> allows for visualizing the groups in a hierarchical structure. The grouped data rows can be expanded or collapsed and the order of grouping may be changed through the UI or API. When Row Selection is enabled, a Group By row selector is rendered in the left-most area of the group row. In case therowSelection<\/code><\/a> property is set to single, checkboxes are disabled and only serve as an indication for the group where selection is placed. If therowSelection<\/code><\/a> property is set to multiple, clicking over the Group By row selector selects all records belonging to this group.<\/p>\n\n\n\nLive Data \/ Real-Time Updates<\/a><\/h3>\n\n\n\n
The Ignite UI for React Live Data Updates feature in the Grid is used for enabling real-time or near-real-time updates of data displayed within the grid. This is extremely useful in apps where data is constantly changing, like stock market trackers, live sports scores, or IoT (Internet of Things) dashboards. The
IgrGrid<\/code><\/a> can handle thousands of updates per second, while staying responsive for user interactions.<\/p>\n\n\n\nMaster-Detail<\/a><\/strong><\/h3>\n\n\n\n
The
IgrGrid<\/code><\/a> component supports specifying a detail template that displays additional details for a particular row by expanding\/collapsing its content. When specified each record acts as a master, which, upon expansion, shows a customizable details template with contextual data for the current record.<\/p>\n\n\n\nThis mode is useful when you need to display master-detail style data in a hierarchical structure.<\/p>\n\n\n\n
Keyboard Navigation<\/a><\/h3>\n\n\n\n
The React Grid Keyboard Navigation feature in Ignite UI provides a rich variety of keyboard interactions for the user. It enhances the accessibility of the
IgrGrid<\/code><\/a> and allows the user to navigate through any type of elements inside (cell, row, column header, toolbar, footer, etc.). This functionality is enabled by default, and the developer has the option to override any of the default behaviors in an easy way.<\/p>\n\n\n\nThe tabulations of the
IgrGrid<\/code><\/a> has been reduced so that the navigation is compliant with W3C accessibility standards and convenient to use.<\/p>\n\n\n\nCurrently, the
IgrGrid<\/code><\/a> introduces the following tab stops:<\/p>\n\n\n\n- \n
- GroupBy or Toolbar area<\/strong> (if enabled).<\/li>\n\n\n\n
- Grid header<\/strong>.<\/li>\n\n\n\n
- Grid body<\/strong>.<\/li>\n\n\n\n
- Column summaries<\/strong> (if enabled).<\/li>\n\n\n\n
- Grid paginator<\/strong> (if enabled).<\/li>\n<\/ul>\n\n\n\n
Multi-Column Headers Overview<\/a><\/h3>\n\n\n\n
The React Grid Multi-Column Headers feature in Ignite UI allows you to group columns by placing them under a common multi-header. Each multi-column headers group in the
IgrGrid<\/code><\/a> could be a representation of combinations between other groups or columns. This feature is particularly useful when dealing with large datasets where scrolling horizontally might be cumbersome<\/p>\n\n\n\n - Grid header<\/strong>.<\/li>\n\n\n\n
- GroupBy or Toolbar area<\/strong> (if enabled).<\/li>\n\n\n\n
- Batch Editing (Coming Soon)<\/li>\n<\/ul>\n\n\n\n
- Siring<\/i><\/li>\n\n\n\n
- Cell Template<\/a><\/li>\n\n\n\n