React Grid

Overview

The React Grid, part of KendoReact, is one of the most powerful data 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 like 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.

See React 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 DataGrid 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 Grid Paging 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 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 that they desire. 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 DataGrid can also be extended to provide a custom component to handle filtering.

See React 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! When grouped, each group can be expanded and collapsed individually and provides 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 Grid Grouping & Aggregates 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 in to individual cells and edit the value of once 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 DataGrid.

See React 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 Grid Column Interactions demo

Multi-Header Columns

Column headers are tied to data fields based on the underlying data model bound to the 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 Grid Multi-Header Columns demo

Frozen Columns

The KendoReact Grid allows for frozen, or locked, 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 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.

Row and Column Virtualization

For scenarios that require loading thousands or hundreds of thousands of data items all at once the React DataGrid 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 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 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 to ensure a unique look and feel for any generated document.

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 KendoReact 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.

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 Grid Detail Rows 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 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, like 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 utilize a custom renderer in both read and edit modes, letting developers take full control over what is displayed within the KendoReact Grid.

See React 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 DataGrid. This feature allows end users to interact with any part of the data table using just their keyboard.

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 Grid Accessibility demo