Skip to content
🚀 MUI X v6 is out! Discover what's new and get started now!
Edit this page

Data Grid

A fast and extendable react data table and react data grid. 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

Visit the installation guide to learn how to install the correct package version and dependencies.

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 two different versions:

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 '@mui/x-data-grid';

Commercial version

The commercial version is available in the form of two plans: Pro and Premium.

Pro Plan

The Pro version extends the features available in the MIT version, by allowing to sort and filter multiple columns at the same time. It also brings new features, e.g. column groups, column pinning, tree data, row, and column reordering, etc. Finally, the Pro version leverages virtualization to handle bigger datasets. The following grid displays 31 columns and 100,000 rows - over 3 million cells in total.

import { DataGridPro } from '@mui/x-data-grid-pro';

Premium Plan

The Premium version contains all features from Pro, as well as features for analyzing large datasets. The features available on the initial release are row grouping and the ability to export to Excel files. Aggregation is coming right next. In the following demo, the rows are grouped by commodity name, but you can experiment grouping other columns in the column menu. And since you're here, you may want to export the different views of your data to an Excel file.

import { DataGridPremium } from '@mui/x-data-grid-premium';

MIT vs. commercial

Please see the Licensing page for details.

Features

🚧 Upcoming features

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

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 data grid:

API