Skip to content
Influence MUI X's 2024 roadmap! Participate in the latest Developer Survey
+

MUI X 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

The Data Grid presents information in a structured format of rows and columns. The data is displayed in a user-friendly, quick-to-scan and interactive way, enabling users to efficiently identify patterns, edit data, and gather insights.

The component comes in three different versions, one available under MIT license and two available under commercial license.

MIT version (free forever)

The first version is meant as a stronger alternative to data tables. It's a clean abstraction with basic features like editing, pagination, sorting and filtering single columns, and column groups.

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

Commercial versions

The commercial versions are available in the form of two plans: Pro and Premium.

Pro plan

The Pro version includes and extends the features available in the MIT version to support more complex use cases. It adds new features like advanced filtering, column pinning, column and row reordering, support for tree data, and 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 includes everything from Pro, as well as advanced features for data analysis and large dataset management, like row grouping with aggregation functions (for example "Sum") and the ability to export to Excel files.

You can visit the showcase page for a comprehensible overview of all features exclusive to this plan.

The demo below groups rows by commodity name, and uses an aggregation function to calculate the sum of quantities for each group and in total (displayed on a summary row). You can experiment with grouping other columns in the columns' header menus.

And since you're here, try exporting to Excel and copying and pasting data from-to Excel tables.

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

MIT vs. commercial

Please see the Licensing page for details.

Features

Upcoming features 🚧

While the 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