Skip to content

Data grid - Getting started

Get started with the last React data grid you will need. Install the package, configure the columns, provide rows, and you are set.themesPremium Themes. Kickstart your application development with a ready-made theme.ad by MUI

Installation

Using your favorite package manager, install @mui/x-data-grid-pro or @mui/x-data-grid-premium for the commercial version, or @mui/x-data-grid for the free community version.

// with npm
npm install @mui/x-data-grid

// with yarn
yarn add @mui/x-data-grid

The grid package has a peer dependency on @mui/material. If you are not already using it in your project, you can install it with:

// with npm
npm install @mui/material @emotion/react @emotion/styled

// with yarn
yarn add @mui/material @emotion/react @emotion/styled

Please note that react >= 17.0.0 and react-dom >= 17.0.0 are peer dependencies.

MUI is using emotion as a styling engine by default. If you want to use styled-components instead, run:

// with npm
npm install @mui/material @mui/styled-engine-sc styled-components

// with yarn
yarn add @mui/material @mui/styled-engine-sc styled-components

πŸ’‘ Take a look at the Styled Engine guide for more information about how to configure styled-components as the style engine.

Quickstart

First, you have to import the component as below. To avoid name conflicts the component is named DataGridPro for the full-featured enterprise grid, and DataGrid for the free community version.

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

Define rows

Rows are key-value pair objects, mapping column names as keys with their values. You should also provide an id property on each row to allow delta updates and better performance.

Here is an example

const rows: GridRowsProp = [
  { id: 1, col1: 'Hello', col2: 'World' },
  { id: 2, col1: 'DataGridPro', col2: 'is Awesome' },
  { id: 3, col1: 'MUI', col2: 'is Amazing' },
];

Define columns

Comparable to rows, columns are objects defined with a set of attributes of the GridColDef interface. They are mapped to the rows through their field property.

const columns: GridColDef[] = [
  { field: 'col1', headerName: 'Column 1', width: 150 },
  { field: 'col2', headerName: 'Column 2', width: 150 },
];

You can import GridColDef to see all column properties.

Demo

Putting it together, this is all you need to get started, as you can see in this live and interactive demo:

import * as React from 'react';
import { DataGrid, GridRowsProp, GridColDef } from '@mui/x-data-grid';

const rows: GridRowsProp = [
  { id: 1, col1: 'Hello', col2: 'World' },
  { id: 2, col1: 'DataGridPro', col2: 'is Awesome' },
  { id: 3, col1: 'MUI', col2: 'is Amazing' },
];

const columns: GridColDef[] = [
  { field: 'col1', headerName: 'Column 1', width: 150 },
  { field: 'col2', headerName: 'Column 2', width: 150 },
];

export default function App() {
  return (
    <div style={{ height: 300, width: '100%' }}>
      <DataGrid rows={rows} columns={columns} />
    </div>
  );
}

TypeScript

In order to benefit from the CSS overrides and default prop customization with the theme, TypeScript users need to import the following types. Internally, it uses module augmentation to extend the default theme structure.

// When using TypeScript 4.x and above
import type {} from '@mui/x-data-grid/themeAugmentation';
import type {} from '@mui/x-data-grid-pro/themeAugmentation';
import type {} from '@mui/x-data-grid-premium/themeAugmentation';

const theme = createTheme({
  components: {
    // Use `MuiDataGrid` on DataGrid, DataGridPro and DataGridPremium
    MuiDataGrid: {
      styleOverrides: {
        root: {
          backgroundColor: 'red',
        },
      },
    },
  },
});

Licenses

While MUI Core is entirely licensed under MIT, MUI X serves a part of its components under a commercial license. Please pay attention to the license.

Plans

The component comes in different plans:

You can find more information about the plans in the Licensing page.

Feature comparison

The following table summarizes the features available in the community DataGrid and enterprise DataGridPro components. All the features of the community version are available in the enterprise one. The enterprise components come in two plans: Pro and Premium.

Features Community Pro Premium
Column
Column groups βœ… βœ… βœ…
Column spanning βœ… βœ… βœ…
Column resizing ❌ βœ… βœ…
Column reorder ❌ βœ… βœ…
Column pinning ❌ βœ… βœ…
Row
Row height βœ… βœ… βœ…
Row spanning 🚧 🚧 🚧
Row reordering ❌ βœ… βœ…
Row pinning ❌ βœ… βœ…
Selection
Single row selection βœ… βœ… βœ…
Checkbox selection βœ… βœ… βœ…
Multiple row selection ❌ βœ… βœ…
Cell range selection ❌ ❌ 🚧
Filtering
Quick filter βœ… βœ… βœ…
Column filters βœ… βœ… βœ…
Multi-column filtering ❌ βœ… βœ…
Sorting
Column sorting βœ… βœ… βœ…
Multi-column sorting ❌ βœ… βœ…
Pagination
Pagination βœ… βœ… βœ…
Pagination > 100 rows per page ❌ βœ… βœ…
Editing
Row editing βœ… βœ… βœ…
Cell editing βœ… βœ… βœ…
Import & export
CSV export βœ… βœ… βœ…
Print βœ… βœ… βœ…
Clipboard ❌ 🚧 🚧
Excel export ❌ ❌ βœ…
Rendering
Customizable components βœ… βœ… βœ…
Column virtualization βœ… βœ… βœ…
Row virtualization > 100 rows ❌ βœ… βœ…
Group & Pivot
Tree data ❌ βœ… βœ…
Master detail ❌ βœ… βœ…
Row grouping ❌ ❌ βœ…
Aggregation ❌ ❌ βœ…
Pivoting ❌ ❌ 🚧
Misc
Accessibility βœ… βœ… βœ…
Keyboard navigation βœ… βœ… βœ…
Localization βœ… βœ… βœ…

API