React Grid Overview
The KendoReact Grid is a native React component for displaying and managing tabular data. Its capabilities include local and remote data operations, row and column virtualization, editing, PDF and Excel export, accessibility, and AI-powered tools for natural-language interactions.
Jumpstart Your Grid
With the Agentic UI Generator, you can build components and layouts using natural language prompts — directly inside AI-powered IDEs like VS Code and Cursor. Get intelligent assistance with component implementation, styling, layout design, and iconography powered by our documentation and APIs.
Try the Agentic UI Generator
React Grid Example
The following example demonstrates the React Grid component and its key features in action.
React Grid Key Features
Explore the following Grid capabilities and select a guide for implementation details.
Data Binding
The Grid supports binding to streaming data sources and remote data endpoints, enabling you to work with data of any origin and size.
Filtering, Sorting, and Grouping
The Grid provides built-in filtering, sorting, and grouping capabilities that let users analyze and review data records efficiently.
Exporting
The Grid lets you export its data to PDF and Excel files, so users can share and archive the displayed information outside the application.
Scrolling and Paging
The Grid supports virtual and normal scrolling and paging, letting you choose the data visualization approach that best fits your application requirements.
Editing
The Grid supports inline and in-cell editing modes together with built-in validation, so users can modify data records directly within the table.
Prompt-Controlled Grid
The Prompt-Controlled Grid lets users perform data operations such as filtering, sorting, and grouping through natural language prompts powered by AI.
Custom Cells
The Grid lets you render custom cells with your own components and templates to display data in a way that matches your application needs.
Columns and Rows
The Grid provides an extensive collection of column and row configuration options, including:
- Locking columns—Keeps specific columns visible while the user scrolls horizontally.
- Resizing columns—Lets users resize columns by dragging the edges of the column headers.
- Spanning columns and rows—Spans cell content over multiple columns or rows.
- Reordering columns and rows—Lets users reorder columns and rows by dragging and dropping them.
- Pinning rows—Keeps specific rows visible while the user scrolls vertically.
- Virtualization—Renders only the columns currently in the viewport to improve performance with large datasets.
- Master-detail layout—Displays hierarchical data by nesting a detail Grid or template within each row.
User Interactivity
The Grid supports a wide range of interactive features, including:
- Selection—Lets users select single or multiple rows and cells.
- Toolbar tools—Adds predefined or custom actions above the Grid data.
- Selection aggregates—Displays aggregate values for the currently selected cells or rows.
- Context menu and column menu—Provides quick access to common Grid actions.
- Clipboard—Lets users copy and paste data between the Grid and other applications.
- Keyboard navigation—Lets users navigate and operate the Grid entirely through the keyboard.
Styling
The Grid supports customizations and default themes that let you match the component appearance to your application design.
Accessibility and Globalization
The Grid meets accessibility standards and provides globalization support, including localization and right-to-left rendering, for building inclusive applications for a global audience.
RSC Mode
The Grid’s RSC mode is built on the React Server Components (RSC) architecture and supports server-side and hybrid rendering and operations.
KendoReact Grid supports RSC mode, executing data operations on the server to reduce client-side JavaScript, improve performance, and enhance scalability for content-heavy or SEO-critical applications.
You can also consider a hybrid approach where you use server-side rendering for critical or sensitive content and logic, and client-side rendering for user interactions.
Read more about the KendoReact Grid RSC mode, and when to use it over the Native mode...
Licensing
The KendoReact Grid provides both free and premium features. The free features can be used without any license or registration, while the premium features require a commercial license key or an active trial license key. The Grid is part of the KendoReact library, which offers a 30-day trial with a full-featured version of the library—no restrictions! Sign up for a free trial of KendoReact.
Frequently Asked Questions
Is the KendoReact Grid Free to Use?
The KendoReact Grid component provides both free and premium features.
Premium features require a commercial license key or an active trial license key. Free features can be used without any license or registration.
When Should I Use Native or RSC Mode?
You might find the Native mode of KendoReact Grid helpful for:
- Highly interactive applications where most of the user interactions happen after the initial load.
- Applications where the initial load can be optimized by code splitting and lazy loading.
- Scenarios where SEO is less critical or handled through other means (for example, pre-rendering).
You might find the RSC mode of the Grid helpful for:
- Content-heavy applications where initial content needs to be quickly visible to the user.
- Improving performance on slower devices and networks by offloading initial rendering to the server.
- Applications where SEO is crucial since the content is available in the initial HTML.
- Applications where privacy and security need to be handled on the server.
- Applications that need bundle size optimization.
How to Upgrade to the Premium Grid
If you want to use any of the premium Grid features, you need a valid commercial license or an active trial license. A free trial is available, if you want to try out the premium features before purchase.
Support Options
For any questions about the use of the KendoReact 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 Kendo UI 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.
Learning Resources
- Getting Started with KendoReact
- Getting Started with the KendoReact Grid
- RSC mode of KendoReact Grid
- API Reference of the KendoReact Grid
- KendoReact Free vs. Premium
- Prompt Library for the Grid
- Control the Grid with natural language prompts
- Video Courses
- Before You Start: All Things React (Telerik Blog Post)
- Knowledge Base