React Grid | DevExtreme Reactive (2024)

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.

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.

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.

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.

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.

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.

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.