The grid for React is a feature-rich control 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. It is designed and optimized for high performance. A high volume of data can be loaded without performance degradation by using row and column virtualization.
Binding the grid with RESTful services allows data from services to be consumed using the Essential JS 2 data manager. It supports various data adaptors such as JSON, OData, ODataV4, URL, and Web API for working with a particular data service.
Data handling is extensible in the grid. The appropriate events are raised with the grid state when data needs to be processed. Preferred data processing logic can be provided.
The grid can be configured to show one-to-many relationship data using hierarchical binding. An n-level hierarchy grid can be built with minimal configuration that helps users to visualize data in parent and child relationships.
The grid is highly optimized to work on mobile devices.
All grid features will 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 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 the grid is rendered in a smaller screen, the pager UI will be rendered without a page number list, making it suitable for smaller devices.
The grid provides full support for create, read, update, and delete operations. Editing can be enabled and customized with simple property settings.
The grid supports various edit modes such as inline, dialog, and batch edit. These provide an interactive UI to add and edit records. In addition, editing can be performed programmatically.
Bulk changes allow saving added, edited, and deleted records in a single request. This feature can be used in a grid through batch editing mode, which provides an Excel-like editing experience and saves the changes in bulk.
An editor for a grid cell can be specified by providing the edit type. The preferred editor can also be defined for specific columns.
Aggregates for column values can be easily visualized using the aggregate feature. Aggregates can be customized to display their value in individual summary rows, individual group summary rows, or in group caption rows.
The grid relies on the Essential JS 2 data manager to aggregate column values. Default aggregate types such as sum, max, min, average, and count can be used. Aggregate values can be formatted before being displayed in the cell.
Custom aggregate logic can be provided for a column. This requires a custom aggregate function that holds custom logic to calculate the aggregate value.
Through paging, a segment of data can be viewed from the assigned data source.
The pager UI of the grid can be used to request on-demand data based on page details. Using simple properties, the pager can be customized.
The page size can be changed on the fly using the page size drop-down in the pager. The page size values in the drop-down can be customized.
The pager UI can be customized using a pager template.
Filtering allows data compaction. The 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. Options to customize filter operators, case sensitivity, and diacritics are also available.
The Excel-like filter helps create complex filter criteria for a column by allowing users to select possible filter values from a check box list. Additionally, the advanced filter can be used to build complex filter criteria.
Filter UI and logic for a column will be applied based on the column type. It is possible to use a preferred filter UI and filtering logic for a column.
Grid rows can be searched either by using the built-in search box available in the toolbar or programmatically. The search options can be customized.
Grid rows can be sorted against a column simply by clicking the desired column header. The data can be sorted either in ascending or descending order.
Sort grid rows using multiple columns by clicking the desired column headers and holding Ctrl or Command.
Sorting logic for a column can be user-defined. The custom sort comparer can use the preferred sorting logic.
The grid supports grouping to visualize data in an organized way. Data can be grouped in ascending or descending order. Rows can be grouped by dragging and dropping the desired columns in the interactive drop area.
N-level grouping can be performed without any restrictions. Hiding or showing grouped columns can also be defined.
By default, grouping will be done based on the field value. A column can be grouped by the formatted value instead of the raw value to make viewing formatted date columns easier.
Rows or cells can be selected in the grid. One or more rows or cells can also be selected by holding Ctrl or Command, or programmatically.
A range of cells can be selected by dragging the pointer over cells. This helps in selecting rows or cells to be copied to the clipboard.
Check box selection allows the selection of rows using a check box column. This selection can persist even after other grid actions are performed. All the rows can also be selected by using the header Select All check box.
Templates can be used to create custom user experiences in the grid. The grid provides various template options, including templates for headers, columns, rows, detail rows, and toolbars.
The column chooser provides a list of column names paired with check boxes that allow the visibility to be toggled on the fly. This helps users control the column visibility through an interactive UI.
In the grid, columns can be reordered either through user interaction or programmatically. Simply dragging and dropping a column header into the desired column position will reorder the columns.
Resizing allows changing column width on the fly by simply dragging the right corner of the column header. The scroll bar will appear when the grid content width exceeds the element width.
Various column-based actions can be performed with the help of the column menu. The menu items can also be customized to list only preferred actions.
Columns and rows can be frozen to allow scrolling and comparing cell values.
Grid cells can be spanned based on the preferred criteria.
It is possible to show values from external or lookup data sources in a column based on foreign key/value mapping. Sorting, filtering, editing, grouping, and other operations can be performed in the foreign data column.
The value accessors specifies how the cell value is to be retrieved from the data. The preferred value accessors can be used when the row data is not just a simple object.
Grid cell styles can be customized either by using CSS or programmatically.
The context menu provides a list of actions to be performed in the grid. It appears when a cell, header, or the pager is right-clicked. The context menu items can be customized according to user preference.
Selected rows and cells can be copied from the grid. Use the Ctrl+C and Ctrl+Shift+H keyboard combinations to copy grid 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 grouped. The data columns can still be grouped, sorted, and filtered.
Row heights can be adjusted to visualize more rows in the view port. It is also possible to set row height conditionally.
Export grid data to Excel, PDF, and CSV formats. The exported document can also be customized programmatically. This allows data from the grid to be used in other applications.
Print grid data either by using the print option from the toolbar or programmatically. All the rows in the grid will be printed regardless of paging. It is also possible to print the current view page only. The scroll bar will be removed before printing.
The 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 the grid component.
All grid cells are added with ARIA attributes to help them be recognized when using a screen reader.
The grid enables users from different locales to use it by formatting the date, currency, and numbering to suit locale preferences. The grid uses the Essential JS 2 internalization library for handling value formatting.
The grid supports right-to-left rendering, allowing the text direction and layout of the grid to be displayed from right to left. This improves the user experience and accessibility RTL languages.
All the grid strings in the user interface can be localized as needed. The grid uses the Essential JS 2 localization library to localize UI strings.