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)} />

Press Enter to start editing

Auto height with max height limit

You can set maximum height when using autoHeight to limit the height of the grid. To do so, use the useGridAutoHeight hook:

const maxHeight = 500;
function Component() {
  const apiRef = useGridApiRef();
  const autoHeight = useGridAutoHeight(apiRef, maxHeight);

  return (
    <div style={{ height: autoHeight ? 'auto' : maxHeight }}>
      <DataGrid apiRef={apiRef} autoHeight={autoHeight} />
    </div>
  );
}

In the demo below, the autoHeight is enabled, but when the grid height exceeds 500 pixels, the autoHeight is disabled and the grid height is limited to 500 pixels.

<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={{ height: autoHeight ? 'auto' : maxHeight }}>
  <DataGrid
    apiRef={apiRef}
    autoHeight={autoHeight}
    {...data}
    rows={data.rows.slice(0, nbRows)}
  />
</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={{ height: autoHeight ? 'auto' : maxHeight }}>
  <DataGrid
    apiRef={apiRef}
    autoHeight={autoHeight}
    {...data}
    rows={data.rows.slice(0, nbRows)}
  />
</div>

Press Enter to start editing

Data Grid - Layout

Percentage dimensions

Predefined dimensions

Auto height

Auto height with max height limit

API