KendoReact Data Grid (Table) Overview

The KendoReact Data Grid (Table) provides 100+ ready-to-use features covering everything from paging, sorting, filtering, editing, and grouping to row and column virtualization, export to PDF and Excel, and accessibility.

It is built on React from the ground up, with zero dependencies, by a company with 19+ years of experience in making enterprise-ready Grids. This results in a React data grid that delivers lightning-fast performance and is highly customizable.

The KendoReact library is distributed through npm packages, and the Data Grid is available as @progress/kendo-react-grid.


The following example demonstrates the React Data Grid component in action.

Example
View Source
Edit In Stackblitz  
Change Theme:

React Data Grid Key Features

The KendoReact Data Grid provides a wide and always growing range of built-in features that isn't limited by the list in this section. This developer-friendly feature set allows you to create beautiful and functional applications faster. At the same time, the KendoReact development team works constantly to improve the performance of the components and their capabilities.

Data Grid Filtering

End users can easily display only the data they need with the help of the built-in filtering, which you can customize further by using the supplied configuration options. Read more about the React Data Grid filtering...

Data Grid Paging

The React Data Grid also allows you to split the data records into pages and add a pager for easier navigation. Read more about the React Data Grid paging...

Table Sorting

The React Data Grid allows you not only to sort and un-sort multiple columns but also to pre-sort the data records in the Data Grid. Read more about the React Data Grid sorting...

Export from React to PDF and Excel

When you implement the export to PDF, you can set the fonts, the exact portion and layout of the exported content, customize the columns, and other specifics of the output. When exporting to Excel, you can export specific data and customize the exported columns. Read more about the React Data Grid export to PDF and the React Data Grid export to Excel...

Data Grid Grouping

You can apply dynamic grouping to the data records, set grouping by aggregate values, and pre-group the data for the users. Read more about the React Data Grid grouping...

Data Grid Editing

Depending on your users' requirements, you can opt for the inline or the in-cell edit modes, provide editing from an external form or Redux Form, and also further customize the React Data Grid. Read more about the React Data Grid editing...

Detail Rows

The detail rows of the Data Grid reveal additional information about a particular row of table data. Users can expand or collapse the additional content. Read more about the React Data Grid detail rows...

Row Selection

You can additionally configure the row selection by enabling or disabling the checkbox and row selection options. Read more about the React Data Grid selection...

Custom Renderer

Based on a value, you can also use conditional formatting to highlight a data table cell. By using the custom-cell approach, you can include icons, buttons, links, or any other HTML elements in the cell. In a similar manner, you can style the rows and other individual elements of the React Data Grid. Read more about the React Data Grid styling...

Column Locking and Reordering

When your React Data Grid has to display large amounts of data, the frozen columns feature enables you to lock any of the Data Grid columns by just setting the locked column property. The frozen columns are easily integrated with the column reordering, which allows users to rearrange them by dragging and dropping. Read more about the React Data Grid column locking and the React Data Grid reordering...

Virtualization

The React Data Grid supports virtualization of both column and row data. This feature boosts the performance of the component when displaying large data tables as it dynamically renders only a portion of the rows and the columns. Read more about the React Data Grid virtualization...

Column Resizing

End-users can resize the columns by simply dragging the edges of the header cells or by activating the auto-resize feature by double-clicking the resize handle. Resizing takes place in real-time but you can also control it programmatically. Read more about the React Data Grid column resizing...

Globalization

By using the globalization options in KendoReact, you can translate the React Data Grid messages and adapt them to specific culture locales. This built-in feature allows you to create applications that can be used all over the world. Read more about the React Data Grid globalization...

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

KendoReact Trial Version and Commercial License

The React Data Grid component is part of KendoReact, a commercial UI library. You are welcome to explore its full functionality and get technical support from the team when you register for a free 30-day trial. To use it commercially, you need to purchase a license. Feel free to review the KendoReact License Agreement to get acquainted with the full terms of use.

Using any of the UI components in the KendoReact library requires either a commercial license key or an active trial license key. Follow the instructions on the KendoReact My License page to activate your license.

Support Options

For any questions about the use of the KendoReact Data Grid, or any other KendoReact components, there are several support options available:

  • KendoReact license holders and anyone in an active trial can take advantage of the outstanding KendoReact customer support delivered by the developers who built the library. To submit a support ticket, use the Telerik support system.
  • The KendoReact Forums are part of the free support you can get from the community and from the KendoReact team on all kinds of general issues.
  • KendoReact Feedback Portal and KendoReact Roadmap provide information on the features in discussion and also those planned for release.
  • KendoReact uses GitHub Issues as its bug tracker, and you can submit any related reports there. Also, check out the closed list.
  • Need something unique that is tailor-made for your project? Progress offers its Progress Services group that can work with you to create any customized solution that you might need.