Data Grid - Quickstart
Install the MUI X Data Grid package and start building your React data table.
Installation
Run one of the following commands to install the MUI X Data Grid package that best suits your needs—the free Community version or the paid Pro or Premium version:
Plan
npm install @mui/x-data-grid@next
The Data Grid packages have a peer dependency on @mui/material
.
If you're not already using it, install it with the following command:
npm install @mui/material @emotion/react @emotion/styled
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"
},
Quickstart
Import the component that corresponds to the version you're using, along with the GridRowsProp
and GridColDef
utilities:
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 Data Grid
With the component and utilites imported, and rows and columns defined, you're now ready to render the Data Grid as shown below:
import * as React from 'react';
import { DataGrid, GridRowsProp, GridColDef } from '@mui/x-data-grid';
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' },
];
const columns: GridColDef[] = [
{ field: 'name', headerName: 'Product Name', width: 200 },
{ field: 'description', headerName: 'Description', width: 300 },
];
export default function App() {
return (
<div style={{ height: 300, width: '100%' }}>
<DataGrid rows={rows} columns={columns} />
</div>
);
}
TypeScript
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
The useDemoData hook
The useDemoData
hook is a utility hook from the @mui/x-data-grid-generator
package.
It contains columns definitions and generates random data for the Data Grid.
It is often used in our demos to provide realistic data without polluting the code with data generation logic.
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
.