Data grid - Layout

The data grid offers multiple layout mode.

Percentage dimensions

When using % (percentage) for your height or width, you need to make sure the container you are putting the grid into also has an intrinsic dimension. The browsers fit the element according to a percentage of the parent dimension. If the parent has no dimensions, then the % will be zero.

Flex layout

It's recommended to use a flex container to render the grid. This allows a flexible layout, resizes well, and works on all devices.

<div style={{ display: 'flex', height: '100%' }}>
  <div style={{ flexGrow: 1 }}>
    <DataGrid {...data} />
  </div>
</div>

<div style={{ display: 'flex', height: '100%' }}>
  <div style={{ flexGrow: 1 }}>
    <DataGrid {...data} />
  </div>
</div>

Press Enter to start editing

Predefined dimensions

You can predefine dimensions for the parent of the 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 allows the grid to size according to its content. This means that the number of rows will drive the height of the grid and consequently, they will all be rendered and visible to the user at the same time.

<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

Data grid - Layout

Percentage dimensions

Flex layout

Predefined dimensions

Auto height

API