KendoReact

React Data Grid (Table) Component

  • 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+ components for any scenario, all working well together.
KendoReact Grid
logos_customers-2x

The React Data Grid That Makes Your Life Easier

Building a data grid for your React app is hard and can take a lot of time. Are you looking for a data table that’s ready to roll, meets your feature requirements and is straightforward, even pleasant, to use?

If you need a fast data grid that suits your needs, a grid that’s extensible, well maintained and documented, read on to learn about the KendoReact Data Grid (Table).

And if you’re still toying with the idea of doing it all on your own, consider these 5 Reasons Not to Create Your JavaScript Data Grid from Scratch.

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
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
Data Operations

Filtering

With the rich filtering UX of the KendoReact Grid, end-users can quickly slice and dice through data based on any filter expression. Filter options include a dedicated filter row, a column menu filter and using a custom component to handle filtering.
See React Grid Filtering demos 
angular-grid-filter-rows
Data Operations

Editing

The KendoReact data table provides many ways to edit a data item. These include in-cell editing of individual cells or of all cells at the same time, placing the entire row in edit mode by clicking on an Edit button or action item, and modifying data in a form hosted outside of the React Data Grid. 
See React Data Grid Editing demos
editing
Performance

Real-time Data Updates

Real-time data updates are important in many scenarios – from visualizing financial market data to providing live user analytics. The KendoReact Data Grid comes with built-in support for streaming updates and you can see data as soon as it changes without needing to explicitly refresh the view.
See React Data Grid with Real-time Updates demo
React-Data-Grid-component_Live-Data-Updating-770x
Performance

Virtual Scrolling (Row and Column)

For scenarios that require loading thousands or hundreds of thousands of data items all at once, the React Data Grid virtualization feature ensures you get buttery-smooth scrolling through rows and columns without breaking a sweat. 
See React Data Grid Row and Column Virtualization demos.
angular-grid-component---sticky-columns
Performance

Paging

Paging is the most popular method developers use to optimize table loading times, reducing the overall amount of data shown at once. You can enable paging through a single configuration option and completely customize the pager based on your design requirements.
See React Data Grid Paging demos
angular-grid-paging

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.

inverted-top-curve-blue

Why Developers Love Using the KendoReact Data Grid

Customizable and easy to style

Customizable and Easy to Style

Our React Data Table gives you ultimate flexibility whether it is applying themes, using row templates, embedding other components, and just about anything you can think of. It takes just a few lines of code.

typescript-maintenance-scalability

TypeScript for Maintenance and Scalability

KendoReact is written in Typescript: enjoy easy maintenance, scalability, and debugging with TS definitions. Find both TypeScript and JavaScript examples for each component.

React Data Grid accessibility

Full Accessibility

Create software for everybody and comply with regulations without worry. The KendoReact Data Grid is AAA rated with WCAG 2.0 and is compliant with Section 508 and WAI-ARIA standards.

See React Grid Accessibility Demo
typescript-maintenance-scalability

Documentation and Demos

We want to make sure your development experience is easy and enjoyable, and the docs are a key part of that. Every feature has been meticulously documented and illustrated with demos.

Visit KendoReact Grid Docs & Demos
typescript-maintenance-scalability

Localization and Globalization

Like the rest of KendoReact, the Data Grid includes packages to help with localization, translation, and RTL support. Just another tedious detail we have taken care of for you.

See React Grid Globalization Demo
typescript-maintenance-scalability

Themes and Design Systems

Whether you need an out-of-the box theme or want to implement a custom design system, the this Grid is there for you. Check out the KendoReact themes, customize them with our Theme builder.

Visit Grid Styling & Themes Docs
typescript-maintenance-scalability

Responsive Design

The KendoReact Data Table makes responsive design easy. For example, you can easily adjust the table size depending on the viewport and make it scrollable after a specified breakpoint.

Data Grid Responsive Design demo
typescript-maintenance-scalability

Integrate with Other Components

The React Grid is compatible with 100+ components in the KendoReact library. Enjoy powerful features, consistent API, app-wide theming, and more.

See KendoReact components in action
KendoReact grid kendoka
trust-radius-badge

Telerik and Kendo UI Earns Multiple TrustRadius Best of Development 2021 awards

Kendo UI has won Best Feature Set , Best Customer Support and Best Usability.

trust-radius-badge

Kendo UI Earned TrustRadius' Top Rated 2021 award

Progress Kendo UI has earned TrustRadius’ Top Rated Award for Software Components.

video-waves-bg

Take a Guided Tour of the KendoReact Data Grid

Join KendoReact Product Manager Carl Bergenhem to learn about the feature set of the KendoReact Data Grid and quickly get an idea whether it is right for you and your project. He will walk you through everything you need to know, from how our React table handles basic operations such as sorting, filtering and paging to more advanced features such as selection, custom editing and PDF & Excel export.

It’s Easy to Get Started with the KendoReact Grid

To make sure your experience with the React data grid is as successful and enjoyable as it can be, we are constantly publishing resources, refining our docs and demos, and even streaming on Twitch. Here are some of our most popular resources:

Frequently Asked Questions

  • What Makes the KendoReact Data Grid Better?
  • What are some common use cases for the KendoReact Data Grid?
  • Can I try the KendoReact Data Grid?

All KendoReact Components