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鈥檚 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
- Built with and exclusively for React 鈿涳笍
- High performance 馃殌
- Filtering and multi-filtering
- Pagination
- Row & Cell editing
- Sorting and multi-sort
- Selection
- Column virtualization and rows virtualization
- Resizable columns
- 100% customizable
- Server-side data
- Column hiding
- Accessible
- Localization
馃毀 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:
- Headless (hooks only)
- Column pinning
- Tree data
- Excel export
- Range selection
- Group, Pivot, Aggregation
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:
- The storybook used for internal development
- The source on GitHub
- The Material Design specification specification
- The accessibility WAI-ARIA authoring practices
- The Sketch and Figma design assets