Legendary Support with Over 95% Customer Satisfaction
Our award-winning support team consistently maintains a 95% or higher customer satisfaction rate. KendoReact engineers resolve more than 55% of customer queries with the first reply.
275K+ customers
3.4M+ developers
400+awards
Check Out the KendoReact Data Grid
Play with the demo to see KendoReact in action!
Seamlessly integrates with all 100+ KendoReact UI components
Why Developers Love Using the KendoReact Data Grid
A data table that’s ready to roll, meets your feature requirements and is straightforward, even pleasant to use.
Customizable and Easy to Style
Our React Data Table gives you ultimate flexibility to customize its interface—whether it’s through applying themes, using row templates, embedding other components, and just about anything you can think of.
TypeScript for Maintenance and Scalability
KendoReact is written in Typescript so you can enjoy easy maintenance, scalability, and debugging with TS definitions. Find both TypeScript and JavaScript examples for each demo.
Full Accessibility
Like all KendoReact components, the Data Grid includes packages to help with localization, translation and RTL support. Just another tedious detail we have taken care of for you.
Like all KendoReact components, the Data Grid includes packages to help with localization, translation and RTL support. Just another tedious detail we have taken care of for you.
Explore the KendoReact Data Grid Features
Page, Sort, Filter and Group Data
Your familiar Excel-like UI to apply paging, single or multi-column sorting, filtering, or grouping.
Effortlessly Export to Excel and PDF
Easily export the current data in view or the entire data set in your Grid to Excel or PDF.
A variety of Row and Cell Selection
Enjoy a variety of cell & row selection modes, including checkbox and row-click selection.
Inline, In-cell and Custom Editing
It’s easy to create, update and delete Grid data records inline (inline editing) and in-cell.
Column Interactions and Sticky Columns
Out-of-the box support for reordering, resizing and frozen (locked) columns, plus additional column interactions.
Row and Column Virtualization
Work with large datasets without any slowdowns and offer the smooth user experience you’re after.
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.
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.
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.
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.
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.
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
Accessibility
Keyboard Navigation
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
Export
Export to Excel and PDF
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 React Grid Export to Excel & PDF demo
Complex Data Tables
Tree View
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. Learn about the React TreeView component
Complex Data Tables
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 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
Complex Data Tables
Hierarchy (Master-Detail Tables)
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
Data Operations
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 you to take full control over what is displayed within the Data Grid. See React Data Grid Custom Cells demo
Data Operations
Selection
The KendoReact Grid supports multiple selection modes. You can enable users to select an individual row through clicking on it, select multiple rows by CTRL-clicking them or through a column of dedicated checkboxes. The selection can be programmatically set and the KendoReact data table provides methods for extracting and interacting with the selected rows. See React Data Grid Selection demo
Data Operations
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 you full control over what to display in this area. See React Data Grid Detail Rows demo
Data Operations
Row Pinning (Sticky Rows)
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
Data Operations
Locked (Frozen) Columns
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
Data Operations
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 in the entire data table or defined on a column-by-column basis. See React Data Grid Column Interactions demo
Data Operations
Persist Grouping
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
Data Operations
Grouping and Aggregates
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
Data Operations
Sorting
With sorting enabled in the KendoReact Grid, clicking on the header of any column will cycle the sorting rule through ascending, descending, or unsorted. Other handy built-in features are the ability to
sort over multiple columns and presorting (defining which columns to sort and in what order ahead of time). See React Data Grid Sorting demo
This React Data Grid is part of the KendoReact UI library. Whether you need to customize components to match specific needs, meet accessibility requirements, or integrate with other components and tools in your stack, KendoReact is there for you.
Master The Art of React UI
The only React component library you need. KendoReact is a professional UI kit on a mission to help you design and develop business apps with React much faster.
This React Data Grid is part of the KendoReact UI library. Whether you need to customize
components to match specific needs, meet accessibility requirements or integrate with other components and tools in your stack, KendoReact is there for you.
Working with KendoReact has made it easier to develop high-value solutions. This allows me to focus on business needs vs. building the components.
This is a very mature product and an excellent addition to any React development toolkit.
We evaluated different component libraries for use in our fairly large React-based web application we have been building for a couple of years.
Integrating Kendo was a breeze – in just about a day I was able to pull of a new view that pulls data from our backend, providing optional sorting, filtering and paging.
The core abstractions are very well thought out at least for our use case. Many of the competitors were much more all-in-type of approach that needs to know everything about the data and the domain to become useful. KendoReact on the other hand just needs data to be passed in and it tells the surrounding world what the user wants to do and request modifications to the data. Just the way we want it!
KendoReact was quick and easy to setup! No tinkering required.
I imported my packages and BOOM! It works!
KendoReact Pricing and Licensing In a Nutshell
The value for money is strong in this one! When you buy a license, you get access to:
KendoReact
The value for money is strong in this one! When you buy a license, you immediately get access to:
100+ professionally built components and three design themes
Comprehensive documentation and editable demos
Legendary technical support
Sample applications with source code
Kendo UI kits for Figma for smooth design-to-development collaboration
Free video training and a variety of other learning resources