Skip to content

Data Grid

A fast and extendable data table and data grid for React. It's a feature-rich component available in MIT or Commercial versions.

The component leverages the power of React and TypeScript, to provide the best UX, while manipulating an unlimited set of data. It comes with an intuitive API for real-time updates, accessibility, as well as theming and custom templates, all with blazing fast performance.

Overview

Data tables display information in a grid-like format of rows and columns. They organize information in a way that’s easy to scan, so that users can look for patterns and insights. The data grid comes in 2 versions:

  • DataGrid MIT licensed as part of the community edition. It's an extension of @material-ui/core.
  • XGrid Commercially licensed as part of the X product line offering.

The features only available in the commercial version are suffixed with a ⚡️ icon. You can check the feature comparison for more details. See Pricing for details on purchasing licenses.

MIT version

The first version is meant to simplify the Table demo with a clean abstraction. This abstraction also set constraints that allow the component to implement new features.

import { DataGrid } from '@material-ui/data-grid';

Commercial version ⚡️

The following grid displays 31 columns and 100,000 rows - over 3 million cells in total.

import { XGrid } from '@material-ui/x-grid';

You can check the feature comparison for more details. See Pricing for details on purchasing licenses.

Features

🚧 Upcoming features

While development of the data grid component is moving fast, there are still many additional features that we plan to implement:

You can find more details on, the feature comparison, our living quarterly roadmap as well as on the open GitHub issues.

Resources

Here are some resources you might be interested in to learn more about the grid: