React Grid

for Bootstrap and Material-UIGetting Started Demos

DevExtreme Reactive Components - Maintenance Support Mode

DevExtreme Reactive component libraries are in maintenance support mode. No new features/capabilities will be added to DevExtreme Reactive component libraries in the future (end-of-life: December 2025).

Developing a React App? Check out our updated React UI Suite instead.
If you are considering React for an upcoming software project or have used DevExtreme Reactive components in the past, please visit js.devexpress.com/react and download a free trial version of DevExtreme React UI - over 70+ components designed to help you build your best, without limits or compromise.

Performance at its Best

100% Pure React

We've focused our energy on performance and leveraged best practice recommendations from the React team. Through immutability and pure functions, we apply ‘memoization’ and built-in React optimizations to achieve outstanding React Grid performance.

Virtual Scrolling

Virtual scrolling allows our React Grid component to display thousands of records on a single page. DevExtreme React Grid can render only those records visible to users and remove them from the DOM once the user scrolls past the visible range.

Shape and Analyze Data as You Need

Milti-Column Sorting

Allow a user to sort data within the Grid against multiple columns. You can apply and remove sort order column using the command keys on your keyboard. You can also execute sort operations on the server-side.

Multi-Column Grouping

Data grouping is a highly effective way to summarize/organize information for end-users. You can enable grouping against one or more columns programmatically or allow your end-users to group data via the mouse, keyboard or through touch gestures on mobile devices.

Summaries & Data Aggregates

Easily turn your data Grid into an analytics tool with our built-in data aggregation features. Implemented as a Summary Row plugin, our Grid can calculate sums, averages, minimums, maximums and custom summary values for both separate groups and the entire data set.

Multi-Column Filtering

Intuitive column-based search. With our Filter Row plugin, users can filter the contents of the React Grid by individual column values. Based on the data type associated with a column, you can control the search operators used (Contains, Equals, etc).

Search Panel

A simple and quick way to locate records. The Search Panel plugin removes all complexities associated with data filtering. Once enabled, the Search Panel allows users to enter a search string and initiate a search against all values displayed in the grid.

Manage Complex Data Structures

Tree View Mode

The Tree View plugin allows you to display hierarchical data sets within the React Grid. Our Tree View plugin integrates with other Grid plugins.

Detail Row

Extend each Grid data row with a collapsible detail view. This feature allows you to address a variety of business usage scenarios from Master-Detail collection management to in-place record-related data editing and visualization.

Data Editing at Your Full Control

Built-in Edit Action Column

From a read-only to a fully editable React Grid with a couple lines of code. Our React Grid ships with integrated data editing plugins. As a developer, you have full control over the data editing process via its straightforward API.

Customizable In-place Cell Editors

Our React Grid ships with a Data Type Provider plugin that allows you to display custom in-place cell editors (based upon data type). Use what you need in your app - from standard textboxes, to date pickers and everything in between.

Batch Editing

Batch modifications allow you to apply multiple record changes simultaneously and to improve data entry efficiency. When working with remote data, batch modifications can also help eliminate unnecessary remote data update requests.

Data Selection

End-users can select data via a row click/tap or by using the grid’s built-in checkbox selection column. You can activate our 'Select All' checkbox and configure it to select records on the current page or all records linked to the grid.

UI Customization for Your Users and You

Column Resizing/Reordering

End-users can resize and reorder columns as needed. Use our 'controlled state' mode to expose the current customization state to your application logic for persistence. Save and restore it when a user leaves and/or returns to your app.

Column Chooser

Our React Grid ships with an integrated column chooser UI. With it, users can display/hide desired grid columns at runtime. You can specify the set of visible columns and save/restore customizations made by end-users to the browser’s local storage or into a remote database.

Fixed Columns

Fixed Columns allow you to anchor columns to the left or rightmost edge of the Grid. These fixed columns are never scrolled horizontally and as such, allow you to create solutions that offer improved readability and visual clarity.

Column Bands

Improve usability/readability by grouping your column headers into bands. Multi-level column groups are supported via a corresponding plugin.

Custom UI Rendering

We done everything possible to simplify UI and behavior customization. With our React Grid, you can override, modify or extend built-in functionality to fully address business needs.

Native Support for the UI Library of Your Choice

Twitter Bootstrap React Grid

Use any existing theme or create a custom bootstrap theme as necessary. No need for any additional configuration.

Material-UI React Grid

Leverage both the user and developer experience of the Material-UI library.

It Doesn’t Stop There...

Customization

Comprehensive customization and extensibility options. From template React components to custom plugins.

Localization

Localize or globalize your react app with ease. Every text element within our React components is customizable.

TypeScript

Create easy-to-maintain and bug-free React applications with our autogenerated TypeScript definitions.

Docs & Examples

Improve your productivity using our straightforward documentation and live React demos/code examples.

Maintenance & Customer Support

We are here to help and to do everything possible to earn your trust. To learn more about our commitment to total customer satisfaction, please check out our support flow on GitHub.

Ready to learn more?Getting Started Demos