# 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.

> tip **Jumpstart Your Grid** <br/><br/> 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. <br/><br/>[Try the Agentic UI Generator](https://www.telerik.com/kendo-react-ui-develop/components/ai-tools/agentic-ui-generator/getting-started)



## React Grid Example

The following example demonstrates the React Grid component and its key features in action.

[Demo Source](https://demos.telerik.com/kendo-react-ui/grid/overview/func/source.txt)

## 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](https://www.telerik.com/kendo-react-ui-develop/components/grid/data-operations/binding-to-streaming-data) sources and [remote data](https://www.telerik.com/kendo-react-ui-develop/components/grid/data-operations/binding-to-remote-data) endpoints, enabling you to work with data of any origin and size.

### Filtering, Sorting, and Grouping

The Grid provides built-in [filtering](https://www.telerik.com/kendo-react-ui-develop/components/grid/filtering), [sorting](https://www.telerik.com/kendo-react-ui-develop/components/grid/sorting), and [grouping](https://www.telerik.com/kendo-react-ui-develop/components/grid/grouping) capabilities that let users analyze and review data records efficiently.

### Exporting

The Grid lets you export its data to [PDF](https://www.telerik.com/kendo-react-ui-develop/components/grid/export/pdf-export) and [Excel](https://www.telerik.com/kendo-react-ui-develop/components/grid/export/excel-export) files, so users can share and archive the displayed information outside the application.

### Scrolling and Paging

The Grid supports [virtual and normal scrolling](https://www.telerik.com/kendo-react-ui-develop/components/grid/scroll-modes) and [paging](https://www.telerik.com/kendo-react-ui-develop/components/grid/paging), letting you choose the data visualization approach that best fits your application requirements.

### Editing

The Grid supports [inline](https://www.telerik.com/kendo-react-ui-develop/components/grid/editing/editing-inline) and [in-cell](https://www.telerik.com/kendo-react-ui-develop/components/grid/editing/editing-in-cell) editing modes together with built-in [validation](https://www.telerik.com/kendo-react-ui-develop/components/grid/editing/editing-validation), so users can modify data records directly within the table.

### Prompt-Controlled Grid

The [Prompt-Controlled Grid](https://www.telerik.com/kendo-react-ui-develop/components/grid/smart) 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](https://www.telerik.com/kendo-react-ui-develop/components/grid/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](https://www.telerik.com/kendo-react-ui-develop/components/grid/columns/locked)—Keeps specific columns visible while the user scrolls horizontally.
* [Resizing columns](https://www.telerik.com/kendo-react-ui-develop/components/grid/columns/resizing)—Lets users resize columns by dragging the edges of the column headers.
* [Spanning columns](https://www.telerik.com/kendo-react-ui-develop/components/grid/columns/spanned) and [rows](https://www.telerik.com/kendo-react-ui-develop/components/grid/rows/row-span)—Spans cell content over multiple columns or rows.
* [Reordering columns](https://www.telerik.com/kendo-react-ui-develop/components/grid/columns/reordering) and [rows](https://www.telerik.com/kendo-react-ui-develop/components/grid/rows/row-reordering)—Lets users reorder columns and rows by dragging and dropping them.
* [Pinning rows](https://www.telerik.com/kendo-react-ui-develop/components/grid/rows/row-pinning)—Keeps specific rows visible while the user scrolls vertically.
* [Virtualization](https://www.telerik.com/kendo-react-ui-develop/components/grid/optimization/column-virtualization)—Renders only the columns currently in the viewport to improve performance with large datasets.
* [Master-detail layout](https://www.telerik.com/kendo-react-ui-develop/components/grid/hierarchy)—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](https://www.telerik.com/kendo-react-ui-develop/components/grid/selection)—Lets users select single or multiple rows and cells.
* [Toolbar tools](https://www.telerik.com/kendo-react-ui-develop/components/grid/toolbar-tools)—Adds predefined or custom actions above the Grid data.
* [Selection aggregates](https://www.telerik.com/kendo-react-ui-develop/components/grid/selection/selection-aggregates)—Displays aggregate values for the currently selected cells or rows.
* [Context menu](https://www.telerik.com/kendo-react-ui-develop/components/grid/interactivity/context-menu) and [column menu](https://www.telerik.com/kendo-react-ui-develop/components/grid/columns/column-menu)—Provides quick access to common Grid actions.
* [Clipboard](https://www.telerik.com/kendo-react-ui-develop/components/grid/interactivity/clipboard)—Lets users copy and paste data between the Grid and other applications.
* [Keyboard navigation](https://www.telerik.com/kendo-react-ui-develop/components/grid/accessibility/keyboard-navigation)—Lets users navigate and operate the Grid entirely through the keyboard.

### Styling

The Grid supports [customizations and default themes](https://www.telerik.com/kendo-react-ui-develop/components/grid/styling/basics) that let you match the component appearance to your application design.

### Accessibility and Globalization

The Grid meets [accessibility](https://www.telerik.com/kendo-react-ui-develop/components/grid/accessibility) standards and provides [globalization](https://www.telerik.com/kendo-react-ui-develop/components/grid/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)](https://react.dev/reference/rsc/server-components) 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...](https://www.telerik.com/kendo-react-ui-develop/components/grid/rsc-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](https://www.telerik.com/try/kendo-react-ui) 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](https://www.telerik.com/try/kendo-react-ui) 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](https://www.telerik.com/kendo-react-ui/components/), there are [several support options available](https://www.telerik.com/kendo-react-ui/support):

* 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](https://www.telerik.com/account/support-tickets).
* The [KendoReact forums](https://www.telerik.com/forums/kendo-ui-react) 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](https://feedback.telerik.com/kendo-react-ui) and [KendoReact Roadmap](https://www.telerik.com/support/whats-new/kendo-react-ui/roadmap) provide information on the features in discussion and also those planned for release.
* KendoReact uses [GitHub Issues](https://github.com/telerik/kendo-react) as its bug tracker, and you can submit any related reports there. Also, check out the [closed list](https://github.com/telerik/kendo-react/issues?q=is%3Aissue+is%3Aclosed).
* Need something unique that is tailor-made for your project? Progress offers its [Progress Services](https://www.progress.com/services) group that can work with you to create any customized solution that you might need.

## Learning Resources

* [Getting Started with KendoReact](https://www.telerik.com/kendo-react-ui-develop/components/getting-started)
* [Getting Started with the KendoReact Grid](https://www.telerik.com/kendo-react-ui-develop/components/grid/getting-started/get-started)
* [RSC mode of KendoReact Grid](https://www.telerik.com/kendo-react-ui-develop/components/grid/rsc-mode)
* [API Reference of the KendoReact Grid](https://www.telerik.com/kendo-react-ui-develop/components/grid/api/gridprops)
* [KendoReact Free vs. Premium](https://www.telerik.com/kendo-react-ui-develop/components/getting-started/free-vs-premium)
* [Prompt Library for the Grid](https://www.telerik.com/kendo-react-ui-develop/components/ai-tools/agentic-ui-generator/prompt-library#component-assistant)
* [Control the Grid with natural language prompts](https://www.telerik.com/kendo-react-ui-develop/components/grid/smart)
* [Video Courses](https://www.telerik.com/kendo-react-ui-develop/components/getting-started/video-onboarding)
* [Before You Start: All Things React (Telerik Blog Post)](https://www.telerik.com/blogs/all-things-react)
* [Knowledge Base](https://www.telerik.com/kendo-react-ui/components/knowledge-base)