Data Grid - Quickstart

Install the MUI X Data Grid package and start building your React data table.

Installation

Install the Data Grid package that best suits your needs—Community, Pro, or Premium:

Peer dependencies

Material UI

The Data Grid packages have a peer dependency on @mui/material. If you're not already using it, install it now:

React

react and react-dom are also peer dependencies:

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

Rendering a Data Grid

Import the component

Import the Data Grid component that corresponds to the version you're using, along with the GridRowsProp and GridColDef utilities:

// choose one
import { DataGrid, GridRowsProp, GridColDef } from '@mui/x-data-grid';
import { DataGridPro, GridRowsProp, GridColDef } from '@mui/x-data-grid-pro';
import { DataGridPremium, GridRowsProp, GridColDef } from '@mui/x-data-grid-premium';

Define rows

Each row in the Data Grid is an object with key-value pairs that correspond to the column and its value, respectively. You should provide an id property for delta updates and improved performance.

The code snippet below defines three rows with values assigned to the name and description columns for each:

const rows: GridRowsProp = [
  { id: 1, name: 'Data Grid', description: 'the Community version' },
  { id: 2, name: 'Data Grid Pro', description: 'the Pro version' },
  { id: 3, name: 'Data Grid Premium', description: 'the Premium version' },
];

Define columns

Each column in the Data Grid is an object with attributes defined in the GridColDef interface—you can import this interface to see all available properties. The headerName property sets the name of the column, and the field property maps the column to its corresponding row values.

The snippet below builds on the code from the previous section to define the name and description columns referenced in the row definitions:

const columns: GridColDef[] = [
  { field: 'name', headerName: 'Product Name', width: 200 },
  { field: 'description', headerName: 'Description', width: 300 },
];

Render the component

With the component and utilites imported, and rows and columns defined, you're now ready to render the Data Grid as shown below:

TypeScript

Theme augmentation

To benefit from CSS overrides and default prop customization with the theme, TypeScript users must import the following types. These types use module augmentation to extend the default theme structure.

// Pro and Premium users: add `-pro` or `-premium` suffix to package name
import type {} from '@mui/x-data-grid/themeAugmentation';

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

Using this documentation

@mui/x-data-grid-generator

The @mui/x-data-grid-generator is a development-only package and should not be used in production. You can use it to create a reproduction of a bug or generate demo data in your development environment. You should not rely on its API—it doesn't follow semver.

useDemoData hook

The useDemoData hook is a utility hook from the @mui/x-data-grid-generator package, used in demos throughout this documentation to provide realistic data without polluting the code with data generation logic. It contains column definitions and generates random data for the Data Grid. For more details on these definitions and the custom cell renderers available, see the custom columns demo where you can copy them from the demo source code.

Here's how it's used:

import * as React from 'react';
import { DataGrid } from '@mui/x-data-grid';
import { useDemoData } from '@mui/x-data-grid-generator';

export default function Demo() {
  const { data } = useDemoData({ dataSet: 'Commodity', rowLength: 100 });

  return <DataGrid {...data} />;
}

It comes with two datasets: Commodity and Employee. You can customize the data generation by passing the custom options of type UseDemoDataOptions.

Bundling

The Data Grid requires a bundler that can handle CSS imports. If you're using a setup that doesn't support CSS imports out of the box, follow the instructions below for your specific environment.

Webpack

Update your config to add the style-loader and css-loader.

export default {
  // other webpack config
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

Vite

CSS imports should work with no additional configuration when using Vite.

Vitest

Add the Data Grid packages to test.deps.inline.

export default defineConfig({
  test: {
    deps: {
      inline: [
        '@mui/x-data-grid',
        '@mui/x-data-grid-pro',
        '@mui/x-data-grid-premium',
      ],
    },
  },
});

Next.js

If you're using the App Router, CSS imports should work out of the box.

If you're using the Pages Router, you need to add the Data Grid packages to transpilePackages.

export default {
  transpilePackages: [
    '@mui/x-data-grid',
    '@mui/x-data-grid-pro',
    '@mui/x-data-grid-premium',
  ],
};

Node.js

If you're importing the packages inside Node.js, you can make CSS imports a no-op like this:

Using require():

require.extensions['.css'] = () => null;

Using import:

// node-ignore-css.js
// Needs to be loaded before your code runs:
//   node --import ./node-ignore-css.js ./index.js
import { registerHooks } from 'node:module';
registerHooks({
  load(url, context, nextLoad) {
    if (url.endsWith('.css')) {
      return { url, format: 'module', source: '', shortCircuit: true };
    }
    return nextLoad(url, context);
  },
});

Jest

If you're using Jest, add the identity-obj-proxy package to mock CSS imports.

moduleNameMapper: {
  '\\.(css|less|scss|sass)$': 'identity-obj-proxy'',
},

API

• DataGrid
• DataGridPro
• DataGridPremium