跳转到内容

🎉 v5 is out! Head to the documentation to get started.

编辑此页面

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

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, both in Material-UI X:

The data grid comes with two different licenses:

  • DataGrid, it's MIT licensed and available on npm as @mui/x-data-grid.

  • DataGridPro, it's Commercially licensed and available on npm as @mui/x-data-grid-pro. The features only available in the commercial version are suffixed with a icon for the Pro plan or a icon for the Premium plan.

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

Commercial version

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

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

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

MIT vs. commercial

How do we decide if a feature is MIT or commercial?

We have been building MIT React components since 2014, and have learned much about the strengths and weaknesses of the MIT license model. The health of this model is improving every day. As the community grows, it increases the probability that developers contribute improvements to the project. However, we believe that we have reached the sustainability limits of what the model can support for advancing our mission forward. We have seen too many MIT licensed components moving slowly or getting abandoned. The community isn't contributing improvements as fast as the problems deserved to be solved.

We are using a commercial license to forward the development of the most advanced features, where the MIT model can't sustain it. A solution to a problem should only be commercial if it has no MIT alternatives.

We provide three options:

  • Community. This plan contains the MIT components that are sustainable by the contributions of the open-source community. Free forever.
  • Pro. This plan contains the features that are at the limit of what the open-source model can sustain. For instance, providing a very comprehensive set of components. From a price perspective, the plan is designed to be accessible to most professionals.
  • Premium. This plan contains the most advanced features.

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

API