React Data Grid

Building a data grid for your React app is hard and can take a lot of time. Are you looking for a data table that’s ready to roll, meets your feature requirements and is straightforward, even pleasant, to use? If you need a fast data grid that suits your needs, a grid that’s extensible, well maintained and documented, read on to learn about the KendoReact Data Grid (Table).

See the React Grid Overview Demo

The React Grid features integration with the Excel and PDF Export libraries in the KendoReact library. This integration allows for all content found within the Data Grid to be exported to either Excel or PDF with a single click. With a large set of configuration options available, developers can decide if only the current data set displayed should be exported or if the entire data set should be included in the export, and every exported file can be customized on-the-fly. 

See the React Grid Export to Excel & PDF demo

The KendoReact Grid supports multiple selection modes. It allows for selection of single or multiple cells and rows, plus checkbox and row-click selection, which can be applied to single or multiple records. The selection can be programmatically set and the KendoReact data table provides methods for extracting and interacting with the selected rows.

See the React DataGrid Selection demo

It’s easy to create, update, and delete Grid data records inline (inline editing) and in-cell. You can also use other components as custom editors, for example a React DropDownList or Calendar.

See the React DataGrid Editing demo

With column and row virtualization and virtual scrolling, the KendoReact Grid can work with large data sets without slowing down, offering the smooth user experience you’re after.

See the React DataGrid Virtual Scrolling demo

Accessibility is one of the main pillars of the KendoReact library and this can be seen across all available React UI components. The KendoReact Grid is AAA rated with WCAG 2.0 and compliant with Section 508 and WAI-ARIA standards.

See React Data Grid Accessibility demo

Navigating through the data table with just a keyboard is a breeze thanks to the KendoReact Data Grid built-in keyboard navigation feature. This feature allows end-users to interact with any part of the table using just their keyboard.

See React Data Grid Keyboard Navigation demo

The column menu provides a convenient way to apply data processing features to the specified columns. The user can sort and filter the grid data, toggle the locked and sticky state of the columns, or change their visibility. You can customize the order of the menu items and create custom controls as necessary. 

See the React Grid Column Menu demo 

The Selection Aggregates feature enables you to select single or multiple cells or rows withing the grid and calculate different metrics based on the selected data, allowing you to get a quick snapshot of key aggregates. You can utilize the built-in approach and display the metrics at the bottom of the Grid or create your own elements to present the data as needed.  

See the React Grid Selection Aggregates demo 

Let users slice and dice their data by providing the familiar Excel-like UI to do paging, single or multi-column sorting, filtering, or grouping, all through quick configuration options.

See the React Data Grid Paging demo as an example

The React Data Grid supports a print layout enabling you to print all grid columns and rows with the corresponding content. You can print both scrollable and pageable grids.  

See the React Grid Printing demo 
 

The component enables you to easily integrate a chart within the grid to get a visual representation of data, trends, patterns, and outliers in a much more convenient and easier- to- grasp format compared to raw table data. Simply use the KendoReact Chart Wizard component to quickly create the desired chart using the grid data. 
 

See the React Data Grid Chart Integration demo  

The GridHelper enhances the capabilities of KendoReact Data Grid by providing a built-in feature for data operations, common functionalities, and extensive customization options for end-users, such as column hiding and PDF/Excel export and more.

See the React GridHelper demo

The KendoReact Data Grid enables you to perform all standard clipboard operations from and to the Grid by using the system clipboard. 
The grid clipboard supports the following keyboard options:

• Copy selected or focused content
• Cut selected or focused content
• Paste the clipboard content 

See the React Data Grid Clipboard demo

Leverage the seamless integration between the KendoReact Grid and Context Menu components to elevate the user experience and expose the available options for follow-up actions. With a simple right-click on any of the grid rows, users can see all the actions they can perform from the menu. 

See the KendoReact Grid Integrated ContextMenu demo 

The KendoReact Grid has built-in default elements for displaying information in cells or UI components that can be used while editing data items, such as a React DatePicker for any field that is bound to a date. In cases where more customization is needed, any cell within the React data table can use a custom renderer in both read and edit modes, enabling you to take full control over what is displayed within the Data Grid.

See React Data Grid Custom Cells demo

Some rows within the React Grid may need to display additional information when expanded and this is where the Detail Rows feature of the KendoReact data table shines. This feature allows for a custom renderer to be attached to the content area presented when a row is expanded, giving you full control over what to display in this area.

See React Data Grid Detail Rows demo

Rows within the KendoReact Data Grid can be pinned, or locked, at the top and bottom of the table. When a row is pinned, it will remain in place as the user scrolls through the rest of the content of the React Data Grid. Row pinning can be done programmatically or exposed as an interactive UI element within each data row.

See React Data Grid Row Pinning demo

The KendoReact Data Grid allows for frozen (also called locked or sticky) columns to be added to the left- and right-hand sides of the table. These can be defined ahead of time, dynamically added by the user or applied externally. The React Data Grid allows interactions through a menu that can appear when users interact with the header of a column. Users can use this column menu to easily lock (pin) columns.

See React Data Grid Locked Columns demo

The KendoReact Grid allows for any column to be resized, reordered, dragged to be grouped, locked, and toggled between being show or hidden. Each option can be applied across all columns in the entire data table or defined on a column-by-column basis.

See React Data Grid Column Interactions demo

Through the persist grouping feature, the state of the KendoReact Data Grid groups will persist throughout data operations. This means the expanded or collapsed state will remain when users page, filter or sort data.

See React Data Grid Persist Grouping demo

With grouping enabled, end-users can group data by any column they choose, with no limit to the number of groups they can create. You can choose to display aggregate information in the header or footer areas. Each group can be sorted, expanded, and collapsed individually, and there are methods to expand/collapse all groups.

See React Data Grid Grouping & Aggregates demo

To help satisfy requirements and provide great UX, the React Data Grid allows you to combine the use of grouping headers and frozen columns. In this scenario, you can display collapsible grouping headers and frozen grouping columns.

See the React Locked Group Headers demo

Many competing data grid libraries have a TreeView mode for displaying hierarchical data, but KendoReact includes a dedicated component for this. The KendoReact TreeView component uses the same performance, data binding flexibility, and customizability found in the Data Grid, and delivers features specific to a TreeView scenario. The best part? Both components are included in KendoReact.

See the React TreeView demo

Column headers are tied to data fields based on the underlying data model bound to the Data Grid. As some fields may not make sense on their own, it can become useful for end- users to group these columns into a category, which is where the Multi-Header Columns feature of the React Grid comes into play. This allows for column headers to span across several sub-columns, organizing the data in the table and allowing for column interactions to be applied to this group of columns all at once.

See React Data Grid Multi-Header Columns demo

With the built-in Hierarchy feature, the KendoReact Grid can feature an unlimited depth of parent and child tables. Each level of the hierarchy can be displayed as a React data table with the same features as the parent table (like sorting and paging), or can be customized to highlight a limited set of features based on the requirements for that level of the hierarchy. 

See React Grid Hierarchy (Master-Detail Grid) demo

Small screens are a primary channel for app delivery and developers are challenged with presenting data grid views in ways that device users can understand. To help solve this need, the React Data Grid now has a compact rendering mode. In this mode, cell padding will automatically be decreased regardless of the built-in theme used (Kendo Default, Material, Fluent, Bootstrap).

See the React Data Grid Sizing Demo