The React Data Grid, or DataTable, is a feature-rich component used to display data in a tabular format. Its wide range of functionalities includes data binding, editing, filtering, grouping, paging, freezing rows and columns, aggregation of rows, and exporting to Excel, CSV, and PDF formats.
Data Grid is designed and optimized for high performance. A high volume of data can be loaded without performance degradation by using row and column virtualization.
Data Grid is highly optimized to work on touch devices.
All Data Grid features work on touch devices with zero configuration. This enables features such as sorting, grouping, and selection to be used without any customization.
Responsive features allow the Data Grid layout to be viewed on various devices. It is also possible to hide specific columns for particular screen sizes using column-based media query support.
The pager UI is adaptable in mobile views. When Data Grid is rendered in a smaller screen, the pager UI will be rendered without a page number list, making it suitable for smaller devices.
Data Grid supports all modern browsers. It supports IE11 with the help of polyfills.
Aggregates for column values can be easily displayed using the aggregate feature. Aggregates can be customized to show their value in individual summary rows, individual group summary rows, or in group caption rows.
Through paging, a segment of data can be viewed from the assigned data source. Data Grid offers built-in pager UI with options to customize its entire UI. it also has an on-demand paging mode for effective data retrieval from remote web services.
Filtering allows users to view the required data in the Data Grid. The Data Grid supports various filter types such as filter bar, menu, check box, and Excel-like filter. The appropriate filter type can be chosen based on the application. These filter types support number filter, string filter, date filter, and Boolean filter. Options to customize filter operators, case sensitivity, and diacritics are also available.
Supports row grouping to display data in an organized way. Data can be grouped in the ascending or descending order. Rows can be grouped by dragging and dropping the desired columns in the interactive drop area.
Data Grid allows selecting rows or cells. One or more rows or cells can also be selected by holding Ctrl or Command, or programmatically.
Templates can be used to create custom user experiences. Data Grid provides various template options to create custom headers, custom cell contents, custom rows, detail rows, and toolbars.
Allows changing the Data Grid size by setting the width and height properties. The horizontal and vertical scrollbars will appear when the content overflows the Data Grid element. You can make Data Grid to fill its parent container by simply setting the height and width as 100%.
Overlays will automatically appear for all asynchronous action of the Data Grid to clearly communicate its busy state. You can also show or hide overlays programmatically.
Columns define the schema of data source in Data Grid. It supports formatting, auto generating columns, column definitions, freezing rows and columns, column spanning, text wrapping, column chooser, column menu, and other important features.
The Data Grid Context Menu provides a list of actions to be performed. It appears when a cell, header, or pager is right-clicked. The context menu items can be customized according to user preference.
Selected rows and cells can be copied from the Data Grid to the clipboard. Use Ctrl+C and Ctrl+Shift+H keyboard combinations to copy data with and without headers, respectively.
Stacked headers allow grouping and visualizing column headers in a stacked manner. There is no limit to the number of columns that can be stacked. The data columns can still be grouped, sorted, and filtered.
Row heights can be adjusted to display more rows in a view port. It is also possible to set row height conditionally.
Export the React Data Grid data to Excel, PDF, and CSV formats. The exported document can also be customized programmatically.
Print the React Data Grid data either by using the print option from the toolbar or programmatically. All the rows in the Data Grid will be printed regardless of paging. It is also possible to print the current view page only.
Data Grid is shipped with several built-in themes such as material, bootstrap, fabric (Office 365), and high contrast. Users can easily customize any one of these built-in themes or create new themes to achieve their own desired look and feel either by simply overriding SASS variables or using our Theme Studio application.
React Data Grid ensures that every cell is accessible using the keyboard. Major features like sorting, selection, and editing can be performed using keyboard commands alone; no mouse interaction required. This helps in creating highly accessible applications using this component.
All Data Grid cells are added with ARIA attributes to be recognized when using a screen reader..
React Data Grid enables users from different locales to use it by formatting the date, currency, and numbering to suit locale preferences. React Data Grid uses the internalization (i18n) library to handle value formatting.
Data Grid supports right-to-left rendering, allowing the text direction and layout to be displayed from right to left. This improves the user experience with RTL languages.
All the React Data Grid strings in the user interface can be localized as needed. Data Grid uses the localization (l10n) library to localize UI strings.