Material-UI: DataGrid scrollbar is not rendering

Question

I am using a DataGrid with at least 20 rows. What I wanted is to limit it's display within a certain height and the rest of the rows can be seen using the scrollbar of the component. The scroll for the DataGrid itself is not showing

<DataGrid
    columns={columns}
    rows={data}
    checkboxSelection
    hideFooter
    autoHeight
    disableSelectionOnClick
    disableColumnMenu
    disableColumnSelector
/>

Edit: pageSize is not allowed since it has been decided to not use it in the other pages as well, so I have no choice but to use scrollbar.

Answer 1

What I wanted is to limit it's display within a certain height

If you want to set the DataGrid height explicitly, you should remove the autoHeight props and add a wrapper with a height limit:

<div style={{ height: 300 }}>
  <DataGrid
    columns={columns}
    rows={rows}
    checkboxSelection
    hideFooter
    // autoHeight
    disableSelectionOnClick
    disableColumnMenu
    disableColumnSelector
  />
</div>

Bonus point: you can set the DataGrid height to display a certain number of rows instead of pixels by installing the @material-ui/x-grid and import the default rowHeight and headerHeight. The code below will display 4 rows in the viewport.

import { DEFAULT_GRID_OPTIONS } from "@material-ui/x-grid";

// ...

const { rowHeight, headerHeight } = DEFAULT_GRID_OPTIONS;

export default function DataGridDemo() {
  return (
    <div style={{ height: headerHeight + rowHeight * 4 }}>
      <DataGrid
        columns={columns}
        rows={rows}
        checkboxSelection
        hideFooter
        // autoHeight
        disableSelectionOnClick
        disableColumnMenu
        disableColumnSelector
      />
    </div>
  );
}

Live Demo