KendoReact

The React Data Grid That Makes Your Life Easier

100% React, Written in TypeScript

Take full advantage of the flexibility and performance capabilities of the React framework. No  compromises or workarounds. 

Fast by Design

Every decision, from how we handle data operations to theming, aims to ensure the fastest rendering time and snappy interactions.

More Than a Grid

The KendoReact Data Grid is part of the KendoReact UI library: 100+ feature-rich components for any scenario, all working well together.

Start Your Free 30-Day Trial

*Technical support available during your trial

20
waves-narrow-lightblue

Legendary Support with Over 95% Customer Satisfaction

asp-award-2019
asp-award-2020

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

Easy to customize

Fully accessible (WCAG 2.0, Section 508, WAI-ARIA)

Nasa, Visa, Microsoft Fox, Samsung, IBM World Bank Group, Volvo
waves-narrow-blue

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

react-components-bg

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.

Data Operations

Column Menu

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 

Data Operations

Selection Aggregates

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 

Data Grid Selection Aggregates
Data Operations

GridHelper

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

Data Operations

Context Menu

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 

Complex Data Tables

Locked Group Headers

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

Accessibility

Accessibility

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
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
Keyboard-Image-White-BC
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
Kendo UI for Angular Excel Export - UI Component Integration
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
angular-treeview-overview
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
Grid multi column headers
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
angular-grid-hierarchy
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
Grid – Custom Cells
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
angular-grid-selection
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
Grid – Detail Rows
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
angular-grid-component---sticky-columns
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
angular-grid-frozen-columns
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
angular-grid-reordering
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
React-Data-Grid-Component-Persist-Grouping-during-paging
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
angular-grid-grouping
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
angular-grid-sorting

React framework logo

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.

Start Your Free 30-Day Trial

*Technical support available during your trial

kendo-react-looking-down

What Developers Say

Working with KendoReact has made it easier to develop high-value solutions. This allows me to focus on business needs vs. building the components.

Thor Kornbrek Software Engineer, Pizza Pro Software, LLC

This is a very mature product and an excellent addition to any React development toolkit.

Terence Wight Engineering Manager, Lightbox

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!

Mikko Harju CTO, Taiste Oy

KendoReact was quick and easy to setup! No tinkering required. I imported my packages and BOOM! It works!

Steven Chorkawy Solution Analyst, Corporation of The Municipality of Clarington
waves-pricing-background

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
  • Access to the source code

Start Your Free 30-Day Trial

from $ 899per developer after trial

kendoka-bubble
  • KendoReact is a commercial library that can be purchased either as an individual product or as part of a bundle.
  • Individual KendoReact licenses start at $899 per developer (with Lite support).
  • Each license is perpetual and royalty free and comes with 1 year of maintenance and support.
Not finding the information you need? Feel free to contact us via contact form or phone.
  • USA: +1 888 365 2779
  • UK: +44 13 4436 0444
  • India: +91 124 4300987
  • Bulgaria: +359 2 8099850
  • Australia: +61 3 9805 8670