Data Grid - Layout

The data grid offers multiple layout mode.

By default, the grid has no intrinsic dimensions. It occupies the space its parent leaves.

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>

Predefined dimensions

You can predefine dimensions for the parent of the grid.

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

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.

<Button variant="outlined" onClick={removeRow}>
  Remove a row
</Button>
<Button variant="outlined" onClick={addRow}>
  Add a row
</Button>
<DataGrid autoHeight {...data} rows={data.rows.slice(0, nbRows)} />