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).
Let users slice and dice their data by providing the familiar Excel-like UI to do paging, single or multi-column sorting, filtering, or grouping, all through quick configuration options.
Visit Data Grid docsUsing the KendoReact Excel and PDF export libraries, the React Data Grid can easily be exported. Configure whether you need to export the current data in view, or the entire data set.
More about PDF ExportThis React Table allows for selection of single or multiple cells and rows, plus checkbox and row-click selection, which can be applied to single or multiple records.
More about Grid selectionIt’s easy to create, update, and delete Grid data records inline (inline editing) and in-cell. You can also use other components as custom editors, for example a React DropDownList or Calendar.
More about Grid editingUsers can easily reorder, resize, and freeze (lock) columns. Additional column interactions are available with column menus and spanning (multi-column) headers.
More about locked columnsWith column and row virtualization and virtual scrolling, the KendoReact Grid can work with large data sets without slowing down, offering the smooth user experience you’re after.
More about Grid virtualizationAnd 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.
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.
Small screens are a primary channel for app delivery and developers are challenged with presenting data grid views in ways that device users can understand. To help solve this need, the React Data Grid now has a compact rendering mode. In this mode, cell padding will automatically be decreased regardless of the built-in theme used (Kendo Default, Material, Fluent, Bootstrap).
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.
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.
KendoReact is written in Typescript: enjoy easy maintenance, scalability, and debugging with TS definitions. Find both TypeScript and JavaScript examples for each component.
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
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
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
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
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
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
Kendo UI has won Best Feature Set , Best Customer Support and Best Usability.
Progress Kendo UI has earned TrustRadius’ Top Rated Award for Software Components.
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.
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:
