Data Grid - Layout

The data grid offers multiple layout modes.

Percentage dimensions

When using % (percentage) for your height or width, you need to make sure the container you are putting the data 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.

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 allows the data grid to size according to its content. This means that the number of rows will drive the height of the data 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)} />