React Data Grid

Overview

The React Data Grid, part of KendoReact, is one of the most powerful grid components available to React developers, containing must-have features like paging, sorting, filtering, grouping, and editing, along with the ability to handle thousands and hundreds of thousands of data items. Beyond this the React data table provides interactive features such as displaying hierarchical data, reordering and resizing columns, column and context menus to provide additional functionality based on currently selected rows or columns, options for custom rendering and much, much more. Explore its full feature set below!

See React Data Grid Overview demo

Paging

Paging offers end-users the ability to page through data with a specific page size, which can be changed on the fly, with intuitive controls to help navigate through next and previous pages, as well as pick a specific page based on a page number. The React Data Grid can enable paging through a single configuration option. Paging helps reduce the overall amount of data shown at once, helping with page performance as well as keeping users focused on the displayed data set.

See React Data Grid Paging demo

Customizable Pager

Whether a React developer uses the built-in user experience for paging across data within the KendoReact Data Grid or if design requirements call for a completely custom user experience when paging—anything is possible with the React Data Table. The UI elements responsible for paging can be completely overridden using a custom renderer to ensure that the paging mechanism of the KendoReact Data Table fits all requirements.

See React Data Grid Custom Pager demo

Sorting

With sorting enabled in the KendoReact Grid, any column can be sorted in an ascending or descending fashion by clicking on the header of any column. Clicking multiple times with cycle through ascending, descending, or unsorted. The KendoReact data table can be presorted, defining which columns to sort and in which order ahead of time, and also offers the ability to sort over multiple columns.

See React Data Grid Sorting demo

Filtering

With the rich filtering user experience of the KendoReact Grid end-users can quickly slice and dice through data based on any filter expression. Featuring multiple filter options like a dedicated filter row or a filter menu that appears upon clicking a filter icon in a column header, the React Data Grid can also be extended to provide a custom component to handle filtering.

See React Data Grid Filtering demo

Grouping & Aggregates

With grouping enabled end-users can drag any column within the KendoReact Grid to a common grouping header to group by that particular field – and there is no limit to how many groups they can create! Each group can be expanded and collapsed individually and provide aggregate information in the header of the group as well as an option for aggregates in a footer element. Each group can be sorted in an ascending or descending order.

See React Data Grid Grouping & Aggregates demo

Expand and Collapse All Groups

The KendoReact Data Table provides different methods to expand or collapse all available groups, allowing developers to either programmatically control the expansion state of the Data Grid’s groups or provide a custom user experience.

See React Data Grid Expand and Collapse All Groups demo

Persist Grouping

Through the persist grouping feature, the state of the KendoReact Data Grid’s 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

Editing

A common use case of the KendoReact Grid is to allow users to edit data items, which is why the React data table provides several ways to edit a data item. These range from being able to click into individual cells and edit the value of one cell, placing the entire row in edit mode by clicking on an Edit button or action item, as well as modifying data in a form hosted outside of the React Data Grid.

See React Data Grid Editing demo

Column Interactions

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

See React Data Grid Column Interactions demo

Multi-Header Columns

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 to end users to group these columns into a category, which is where the Multi-Header Columns feature of the React Grid comes in to play. This allows for column headers that can span across several sub-columns, organizing the data found in the data table as well as allowing for column interactions to be applied to this group of columns all at once.

See React Data Grid Multi-Header Columns demo

Locked (Frozen) Columns

The KendoReact Grid allows for frozen (also called locked or sticky) columns to be added to both the left-hand and right-hand sides of the table. These can be defined ahead of time or dynamically added by the user within the Data Grid or applied externally. Additionally, the React data table allows for sticky columns that will be added to the frozen columns list as they are scrolled in to view and can be removed when scrolling back over their original position.

See React Data Grid Locked Columns demo

Pin Columns Through Column Menu

With a focus on the end-user experience, the KendoReact Data Grid allows several interactions through a menu that can appear when users interact with the header of any available columns. Through this menu users can easily pin columns to be locked, or frozen, either on the left-hand or right-hand side of the React Data Table.

See React Data Grid Locked Columns with Column Menu demo

Row and Column Virtualization

For scenarios that require loading thousands or hundreds of thousands of data items all at once, the React Data Grid Virtualization feature is a must-have. By recycling elements on the page as users scroll horizontally or vertically, the KendoReact Data Grid will feature buttery-smooth scrolling through rows and columns without breaking a sweat.

See React Data Grid Row and Column Virtualization demo

Export to Excel & PDF

The React Grid features integration with the Excel and PDF Export libraries found 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 button 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 React Grid Export to Excel & PDF demo

Hierarchy

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, featuring all the same features as sorting and paging as the parent table, 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

Detail Rows

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 developers full control over what to display in this area.

See React Data Grid Detail Rows demo

Row Pinning

Rows within the KendoReact Data Grid can be pinned, or locked, at the top and bottom of the Data 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 and can also be exposed as an interactive UI element within each data row.

See React Data Grid Row Pinning demo

Selection

The KendoReact Grid features selection in multiple forms like being able to select rows and provide a unique highlighted look or add a selection column with checkboxes which gives an intuitive way to interact with selecting and deselecting a row. The selection can be programmatically set and the KendoReact data table provides methods for extracting and interacting with selected rows.

See React Data Grid Selection demo

Custom Cells

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 developers to take full control over what is displayed within the KendoReact Grid.

See React Data Grid Custom Cells demo

Keyboard Navigation

While the KendoReact Grid is an extremely powerful component with a large set of features, navigating through the data table with just a keyboard is a breeze thanks to the built-in keyboard navigation feature of the KendoReact Data Grid. This feature allows end users to interact with any part of the data table using just their keyboard.

See React Data Grid Keyboard Navigation demo

Accessibility

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

See React Data Grid Accessibility demo

React Data Grid Video Demos

Guided Tour of the KendoReact Data Grid

Learn all about the KendoReact Data Grid feature set in this guided video tour by KendoReact Product Manager Carl Bergenhem.

How to Implement the KendReact Data Grid

In this video tutorial, you will see how to implement the KendoReact Grid and how to work the following grid features: Theming and styling, Paging and Filtering.