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.

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.

npm install @mui/x-data-grid

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

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

Please note that react and react-dom are peer dependencies too:

"peerDependencies": {
  "react": "^17.0.0 || ^18.0.0",
  "react-dom": "^17.0.0 || ^18.0.0"
},

Style engine

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

npm install @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 โŒ โœ… โœ…
Header 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 copy โœ… โœ… โœ…
Clipboard paste โŒ โŒ โœ…
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