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

Quickstart

First, you have to import the component as below. To avoid name conflicts the component is named Data Grid Pro for the full-featured enterprise grid, and Data Grid 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.

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 Data Grid and enterprise Data Grid Pro 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 autosizing
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