React Grid

for Bootstrap and Material-UIGetting Started Demos

Product Overview

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.
100% Pure React
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.
Virtual Scrolling

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.
Milti-Column Sorting
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.
Multi-Column Grouping
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.
Summaries & Data Aggregates
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).
Multi-Column Filtering
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.
Search Panel

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.
Tree View Mode
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.
Detail Row

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.
Built-in Edit Action Column
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.
Customizable In-place Cell Editors
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.
Batch Editing
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.
Data Selection

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 Resizing/Reordering
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.
Column Chooser
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.
Fixed Columns
Column Bands
Improve usability/readability by grouping your column headers into bands. Multi-level column groups are supported via a corresponding plugin.
Column Bands
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.
Custom UI Rendering
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.
Twitter Bootstrap React Grid
Material-UI React Grid
Leverage both the user and developer experience of the Material-UI library.
Material-UI React Grid
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 StartedDemos