• What is KendoReact
  • Getting Started
  • Unstyled Mode
  • Server Components
  • Components
    • Animation
    • Barcodes
    • Buttons
    • Chart Wizardnew
    • Chartsupdated
    • Common Utilities
    • Conversational UIupdated
    • Data Gridupdated
    • Data Query
    • Data Toolsupdated
    • Date Inputs
    • Date Math
    • Dialogsupdated
    • Drawing
    • Dropdowns
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gantt
    • Gauges
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBoxupdated
    • ListView
    • Map
    • Notification
    • OrgChart
    • PDF Processing
    • PDF Viewer
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • Spreadsheet
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Upload
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting

React Data Grid (Table) Overview

The KendoReact Data Grid is a powerful tool for creating responsive, accessible, and customizable applications that require the displaying and management of large datasets.

What is the KendoReact Data Grid?

The KendoReact Data Grid is a React grid component that lets you build business applications that manage and display large sets of data efficiently. With it, you can structure and present your data in rows and columns, paired with a user-friendly interface for editing and analysis.

The built-in paging, sorting, and filtering enable you to meet your business requirements for data navigation and analysis. For more advanced data analysis, the KendoReact Data Grid offers grouping and aggregation to categorize and summarize data.

The grid’s editing capabilities support in-cell and inline editing, allowing your end users to modify data directly within the data table. The options to export to PDF or Excel help with reporting and data sharing.

With the row and column virtualization, you can render only the visible data. This lets you optimize performance and boost efficiency and responsiveness.

Anatomy

A fully featured KendoReact Data Grid might have the following elements inside your app:

"Anatomy and elements of a KendoReact Data Grid component"

  1. Toolbar
  2. Grouping header
  3. Grid
  4. Status bar
  5. Pager
  6. Sorted column
  7. Column menu
  8. Grid header
  9. Filter row
  10. Group header
  11. Grid row
  12. Grid alternate row
  13. Group aggregate footer
  14. Group with selected rows
  15. Checkbox row selection

How Does the KendoReact Data Grid Work?

Using the KendoReact Data Grid requires either a commercial license key or an active trial license key. Follow the instructions on the KendoReact My License page to activate your license.

The KendoReact Data Grid is built natively for React, with no dependencies. It leverages key React concepts such as a component-based architecture, props and state management, and conditional rendering.

Every KendoReact Data Grid is defined as a set of <GridColumn>s. You have complete control over your React grid and you can extend or override its default behaviors and appearance via props, templates, and event handlers.

Choosing Between the React Data Grid and the React Server Data Grid

KendoReact also provides a Server Data Grid.

Choosing between the regular KendoReact Data Grid and the Server Data Grid depends largely on the requirements and goals of your application.

You might find the KendoReact Data 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 KendoReact Server Data 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.
  • Next.js 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.

React Data Grid with Other KendoReact Components

Combine multiple KendoReact components with the React grid in the same application to extend its data management and visualization capabilities:

  • Add custom filtering and editing with KendoReact Inputs, [Dropdowns]({% slug %}), and Date Inputs.
  • Create buttons within your grid header or grid rows using KendoReact Buttons.
  • Prompt users for confirmation or show additional information with KendoReact Dialogs.
  • Show success and error messages with KendoReact Notification.
  • Add custom forms with KendoReact Form.
  • Extend the Data Grid with appointment scheduling and timeline views using the KendoReact Scheduler.
  • Represent hierarchical data with the KendoReact TreeView.
  • Visualize data trends next to your data with KendoReact Charts.

React Data Grid with Other Telerik Components

Combining UI components from different Telerik and Progress suites is not supported.

KendoReact Data Grid in Action

The React Grid component provides 100+ ready-to-use features, covering paging, sorting, filtering, editing, grouping, row and column virtualization, export to PDF and Excel, and accessibility.

Demo

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

Example
View Source
Change Theme:

Key Features

The KendoReact Data Grid provides the following key features. Note that this is not an exhaustive list.

Frequently Asked Questions

What is KendoReact Data Grid?

The KendoReact Data Grid is a high-performance, native React component designed to display tabular data. It provides features like data binding, editing, sorting, filtering, grouping, paging, row reordering, and exporting to PDF and Excel. Built with accessibility in mind, the Data Grid ensures all users can interact effectively.

How to Create a Grid in React?

To create a Grid in React, you need to install the KendoReact Grid package and then import the Grid component in your application. After that, you can use the grid component in your React application. For more information, refer to the Getting Started with the KendoReact Grid article.