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.

view samples

---

React Grid Cell and Row Selection

React Grid Cell and Row Selection

The React Data Grid includes every option for mouse and [touch-driven selection](data-grid/cell-selection.md) by cell and row level, including modes like SingleCell, SingleRow, MultipleCell, MultipleRow, RangeCell and more.

React Grid Filtering

React Grid Filtering

The React Data Grid includes [column filtering](data-grid/column-filtering.md) based on the data type of the column being filtered. For example, if your column is a DateTime field you can use filters like Last Month, This Quarter, Next Week, etc.

React Grid Column Moving

React Grid Column Moving

Rearranging [column order](data-grid/column-moving.md) is as easy as Click and Drag in the React Data Grid. We’ve also included a complete animation engine, giving you control over the UX of this interaction.

React Grid Column Pinning

React Grid Column Pinning

With Right and Left [column pinning](data-grid/column-pinning.md) in the React Data Grid, users can lock a single column or multiple columns in any order, so that the column maintains position, while scrolling horizontally.

React Grid Column Resizing

React Grid Column Resizing

The React Data Grid supports the ability to [resize columns](data-grid/column-resizing.md), giving your customers flexibility over how they display the Data Grid columns, with respect to the other columns in the table.

React Grid Column Sorting

React Grid Column Sorting

The React Data Grid supports ascending and descending [column sorting](data-grid/column-sorting.md) with a Single, Multi or Tri-State Column Sorting configuration. Sorting is triggered on header click or using the Column Options dropdown.

React Grid Column Summaries

React Grid Column Summaries

The React Data Grid supports [column summaries](data-grid/column-summaries.md) in the footer area of the Data Grid, or in the Group Headers. This is great for showing values like Count, Sum, Min, Max, Avg, etc.

React Grid Column Types

React Grid Column Types

The React Data Grid supports a variety of [column types](data-grid/column-types.md), plus a Template Column type and a Sparkline Template type, giving you complete flexibility over the way your data is displayed in the Grid.

React Grid Column Animations

React Grid Column Animations

The React Data Grid supports [column animation](data-grid/column-animation.md) during events like Column Hiding or Column Moving. When Column Animation on the React Data Grid is set, the corresponding animation will fire for all of the cells in that column.

React Grid Column Options Dialog

React Grid Column Options Dialog

The React Data Grid supports the ability to group, hide, move, pin, filter, and sort columns directly from a UI exposed on each column header. The [column options](data-grid/column-options.md) are on by default for every column, via the Kebab menu on column hover.

React Grid Column and Row Outlook Style Grouping

React Grid Column and Row Outlook Style Grouping

The React Data Grid lets you [group rows](data-grid/row-grouping.md) into a ‘sticky header’ Row Group. Like the Group By feature in Microsoft Outlook, your users have an easy way to visually group data based on their own criteria.

React Grid Paging

React Grid Paging

The React Data Grid [Paging component](data-grid/row-paging.md) is designed to take in an array of data and output portions of that data as a page, with a simple navigation UI.

React Grid Row Pinning

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

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)

---

Download the Fastest React Grid Today!

download now
30 days free trial. No credit card required.

---

Ignite UI for React Supported Browsers

The React Data Grid is supported on all modern web browsers, including:

• Chrome
• Edge / Edge Chromium
• Firefox
• Safari
• Internet Explorer 11 with polyfills

Ignite UI for React Support Options

There are multiple options to get access to our award-winning support at Infragistics for the React product.

• 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

Why should I choose the Infragistics Ignite UI for React Data Grid?

• [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

What is the Pricing for the Infragistics Ignite UI for React Data Grid?

Our Ignite UI for React components are included as a part of our Ignite UI bundle. A single developer license starts at $1,295 USD for a one-year subscription, including one year of standard support and updates.

Ignite UI for React is a commercially licensed product available via a subscription model. This subscription includes the React Grid, plus React Charts and dozens on other React UI Controls.

We also offer discounts for multi-year licenses. Please refer to our Pricing page for more information on pricing.

If you are developing applications on multiple platforms, consider our complete app development package, Infragistics Ultimate, which include desktop platforms like WPF and Windows Forms, plus all modern web toolsets for Angular, React, Web Components, ASP.NET MVC and ASP.NET Core.

Can I purchase the Infragistics Ignite UI for React Data Grid control separately?

No, you cannot purchase the React Data Grid separately. It is part of a the Ignite UI for React product, which includes dozens of UI controls and components, plus over 60 charts, including React Financial Charting. If you are interested in other modern web platforms like Angular, React, ASP.NET MVC, Web Components or ASP.NET Blazor, check out our Ignite UI product bundle, which gives you every web platform for only $100 more on your subscription. That is hundreds of controls, components, and data visualizations for a very low price.

Can I purchase the Infragistics Ignite UI for React Data Grid control separately?

To get started with the React Data Grid, follow the steps in the [getting started guide](..\general-getting-started.md). We also maintain a library of sample applications, which are designed to not only inspire but are best practices guides for React development.