Data Grid - Layout

The data grid offers multiple layout modes.

Flex parent container

The Data Grid can be placed inside a flex container with flex-direction: column. Without setting the minimum and maximum height, the Data Grid takes as much space as it needs to display all rows.

<Stack direction="row" spacing={1} sx={{ mb: 1 }}>
  <Button size="small" onClick={removeRow}>
    Remove a row
  </Button>
  <Button size="small" onClick={addRow}>
    Add a row
  </Button>
</Stack>
<div style={{ display: 'flex', flexDirection: 'column' }}>
  <DataGrid {...data} rows={data.rows.slice(0, nbRows)} loading={loading} />
</div>

<Stack direction="row" spacing={1} sx={{ mb: 1 }}>
  <Button size="small" onClick={removeRow}>
    Remove a row
  </Button>
  <Button size="small" onClick={addRow}>
    Add a row
  </Button>
</Stack>
<div style={{ display: 'flex', flexDirection: 'column' }}>
  <DataGrid {...data} rows={data.rows.slice(0, nbRows)} loading={loading} />
</div>

Press Enter to start editing

Minimum and maximum height

In the demo below, the Data Grid is placed inside a flex container with a minimum height of 200px and a maximum height of 400px and adapts its height when the number of rows changes.

When using percentages (%) for height or width, make sure that the Data Grid's parent container has intrinsic dimensions. Browsers adjust the element based on a percentage of its parent's size. If the parent has no size, the percentage will be zero.

Predefined dimensions

You can predefine dimensions for the parent of the data grid.

<div style={{ height: 350, width: '100%' }}>
  <DataGrid {...data} />
</div>

<div style={{ height: 350, width: '100%' }}>
  <DataGrid {...data} />
</div>

Press Enter to start editing

Auto height

The autoHeight prop enables the Data Grid to adjust its size based on its content. This means that the Data Grid's height will be determined by the number of rows, ensuring that all rows will be visible to the user simultaneously.

<Stack direction="row" spacing={1} sx={{ mb: 1 }}>
  <Button size="small" onClick={removeRow}>
    Remove a row
  </Button>
  <Button size="small" onClick={addRow}>
    Add a row
  </Button>
</Stack>
<DataGrid autoHeight {...data} rows={data.rows.slice(0, nbRows)} />

<Stack direction="row" spacing={1} sx={{ mb: 1 }}>
  <Button size="small" onClick={removeRow}>
    Remove a row
  </Button>
  <Button size="small" onClick={addRow}>
    Add a row
  </Button>
</Stack>
<DataGrid autoHeight {...data} rows={data.rows.slice(0, nbRows)} />

Press Enter to start editing

Overlay height

When autoHeight is enabled, grid overlays (such as "Loading" or "No rows") take the height of two rows by default.

To customize the overlay height, use the --DataGrid-overlayHeight CSS variable.

<DataGrid
  autoHeight
  columns={[{ field: 'ID' }, { field: 'First name' }, { field: 'Last name' }]}
  rows={[]}
  slots={{ noRowsOverlay: CustomNoRowsOverlay }}
  sx={{ '--DataGrid-overlayHeight': '300px' }}
/>

<DataGrid
  autoHeight
  columns={[{ field: 'ID' }, { field: 'First name' }, { field: 'Last name' }]}
  rows={[]}
  slots={{ noRowsOverlay: CustomNoRowsOverlay }}
  sx={{ '--DataGrid-overlayHeight': '300px' }}
/>

Press Enter to start editing

Data Grid - Layout

Flex parent container

Minimum and maximum height

Percentage dimensions

Predefined dimensions

Auto height

Overlay height

API