DataGrid is designed and optimized for high performance. A high volume of data can be loaded without performance degradation by using row and column virtualization.
DataGrid is highly optimized to work on touch devices.
All DataGrid 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 DataGrid 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 DataGrid is rendered in a smaller screen, the pager UI will be rendered without a page number list, making it suitable for smaller devices.
DataGrid 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. DataGrid 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 DataGrid. The DataGrid 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.
DataGrid 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. DataGrid provides various template options to create custom headers, custom cell contents, custom rows, detail rows, and toolbars.
Allows changing the DataGrid size by setting the width and height properties. The horizontal and vertical scrollbars will appear when the content overflows the datagrid element. You can make DataGrid to fill its parent container by simply setting the height and width as 100%.
Overlays will automatically appear for all asynchronous action of the DataGrid to clearly communicate its busy state. You can also show or hide overlays programmatically.
Columns define the schema of data source in DataGrid. 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 DataGrid 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 DataGrid 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.
DataGrid 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.
All DataGrid cells are added with ARIA attributes to be recognized when using a screen reader.
DataGrid 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.