The Fastest React Data Grid
A React data grid or data table is a component used to display tabular data in a series of rows and columns. Data grids, also known as tables, are well known in the desktop world with popular software such as Microsoft Excel. While grids have been available on desktop platforms for a long time, they have only recently become part of web app UIs, such as React UI. Modern grids and tables can be complex and may include a range of features and functionality, including data binding, editing, Excel-like filtering, custom sorting, grouping, row reordering, row and column freezing, row aggregation, exporting to Excel, CSV, and pdf formats.
React Grid Example
In this React grid example, you can see how users can customize their view of the data by using features and functionality of the grid, such as search and filtering, columns sorting, resizing, pinning and hiding, row grouping, grid summaries, horizontal and vertical, and cell styling which includes embedded in the cell linear progress bar indicator component and sparkline component.
Like this sample? Get access to our complete React toolkit and start building your own apps in minutes. Download it for free.
Why Use a React Data Grid?
React data grids are essential in use cases where high volumes of data must be stored and sorted through quickly. This can include industries such as financial services, banking and insurance, which often use high-volume, high-velocity data. The success of these companies is dependent upon the features, functionality and performance of these data grids. When stock decisions need to be made in microseconds, for example, it’s imperative that the data grid performs with no lag time or flicker.
React Data Grid Features
The Ignite UI for React Data Grid is not just for high-volume and real-time data. It is a feature-rich React grid that gives you capabilities that you would never be able to accomplish with so little code on your own. This example demonstrates a few of the data grid’s key features:
- [Virtualized Rows and Columns](data-grid/live-data.md) so you can load millions of records
- [Inline Editing](data-grid/cell-editing.md) with Cell, Row, and Batch Update options
- [Excel-style Filtering](data-grid/column-filtering.md) and full [Excel Keyboard Navigation](data-grid/cell-activation.md) capability
- Interactive [Outlook-style Grouping](data-grid/row-grouping.md)
- [Column Summaries](data-grid/column-summaries.md) based on any data in a grid cell or column
- Export to Excel, including [Data Visualization](..\excel-library-working-with-charts.md)
- [Cell and Row Selection](data-grid/cell-selection.md) for Single and Multi-Select
- Full touch support for mobile app development
The Fastest React Data Grid Example
Demo
Data Virtualization and Performance
Data Virtualization and Performance
Seamlessly scroll through unlimited rows and columns in your React grid, with the data grid’s column and row level virtualization. With support for local or remote data sources, you get the best performance no matter where your data lives. Your users will experience Excel-like scrolling, with enterprise speed — no lag, screen flicker, or visual delay — giving you the best user experience (UX) without compromising performance.
Quick and Easy to Customize, Build and Implement React Tables
The Ignite UI for React Data Grid can handle unlimited rows and columns of data, while providing access to custom templates and real-time data updates. Featuring an intuitive API for easy theming and branding, you can quickly bind to data with minimal code.
React Grid Cell and Row Selection

React Grid Filtering

React Grid Column Moving

React Grid Column Pinning

React Grid Column Resizing

React Grid Column Sorting

React Grid Column Summaries

React Grid Column Types

React Grid Column Animations

React Grid Column Options Dialog

React Grid Column and Row Outlook Style Grouping

React Grid Paging

React Grid Row Pinning

The React Data Grid allows you to [pin rows](data-grid/row-pinning.md) to the top of the Data Grid. When a row is pinned, it will be duplicated at the top of the Data Grid and remain fixed there with a light gray background and its actual (or original) row in the Data Grid will be rendered with low opacity, making it clear to the user this is a special row.
React Grid Keyboard Navigation

The React Data Grid supports extensive Excel-like [keyboard navigation](data-grid/cell-activation.md). Ensure accessibility compliance and improve usability, enabling Excel-like keyboard navigation in the React Data Grid, using the up, down, right, left, tab, and Enter keys. You can toggle single or multiple row selection using the mouse or keyboard to select or de-select full rows.
React Grid Features
- [Grid Editing](data-grid/cell-editing.md)
- [Cell Selection](data-grid/cell-selection.md)
- [Cell Templates](data-grid/column-types.md#template-column)
- [Column Filtering](data-grid/column-filtering.md)
- [Column Hiding](data-grid/column-chooser.md)
- [Column Moving](data-grid/column-moving.md)
- [Column Summaries](data-grid/column-summaries.md)
- [Custom Grid Toolbar](data-grid/column-chooser.md#toolbars-column-chooser-ui)
- [Fixed/Pinned Columns](data-grid/column-pinning.md)
- [Grid Paging](data-grid/row-paging.md)
- [Grid Sorting](data-grid/column-sorting.md)
- [Real-time/Live Data](data-grid/live-data.md)
- [Remote Data Load on Demand](data-grid/remote-data.md)
- [Resizable Columns](data-grid/column-resizing.md)
- [Row Grouping](data-grid/row-grouping.md)
- [Row Selection](data-grid/cell-selection.md)
- [Virtualization and Performance](data-grid/performance.md)
Ignite UI for React Supported Browsers
- Chrome
- Edge / Edge Chromium
- Firefox
- Safari
- Internet Explorer 11 with polyfills
Ignite UI for React Support Options
- Start at the React Support home page
- Read the React [Documentation](..\general-getting-started.md) and experiment with React Samples
- Read the React Blogs to stay up to date
- Submit a Support Case after signing into your account
- Learn from the React Reference Applications
Ignite UI for React Trial License and Commercial
Ignite UI for React is a commercially licensed product available via a subscription model. You can try the Ignite UI for React product for free when you register for a 30-day trial. When you are done with your Trial Period, you can purchase a license from our web site or by calling sales in your region.
Frequently Asked Questions
- [Virtualized Rows and Columns](data-grid/live-data.md) so you can load millions of records
- [Inline Editing](data-grid/cell-editing.md) with Cell, Row, and Batch Update options
- [Excel-style Filtering](data-grid/column-filtering.md) and full [Excel Keyboard Navigation](data-grid/cell-activation.md) capability
- Interactive [Outlook-style Grouping](data-grid/row-grouping.md)
- [Column Summaries](data-grid/column-summaries.md) based on any data in a grid cell or column
- Export to Excel, including [Data Visualization](..\excel-library-working-with-charts.md)
- [Cell and Row Selection](data-grid/cell-selection.md) for Single and Multi-Select
- Full touch support for mobile app development