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 so you can load millions of records
- Inline Editing with Cell, Row, and Batch Update options
- Excel-style Filtering and full Excel Keyboard Navigation capability
- Interactive Outlook-style Grouping
- Column Summaries based on any data in a grid cell or column
- Export to Excel, including Data Visualization
- Cell and Row Selection 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
The React Data Grid includes every option for mouse and touch-driven selection by cell and row level, including modes like SingleCell, SingleRow, MultipleCell, MultipleRow, RangeCell and more.
React Grid Filtering
The React Data Grid includes column filtering 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
Rearranging column order 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
With Right and Left column pinning 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
The React Data Grid supports the ability to resize columns, 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
The React Data Grid supports ascending and descending column sorting 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
The React Data Grid supports column summaries 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
The React Data Grid supports a variety of column types, 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
The React Data Grid supports column animation 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
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 are on by default for every column, via the Kebab menu on column hover.
React Grid Column and Row Outlook Style Grouping
The React Data Grid lets you group rows 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
The React Data Grid Paging component 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
The React Data Grid allows you to pin rows 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. 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
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 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 so you can load millions of records
- Inline Editing with Cell, Row, and Batch Update options
- Excel-style Filtering and full Excel Keyboard Navigation capability
- Interactive Outlook-style Grouping
- Column Summaries based on any data in a grid cell or column
- Export to Excel, including Data Visualization
- Cell and Row Selection for Single and Multi-Select
- Full touch support for mobile app development