material UI datagrid vertical scroll bar

Question

I want to render a material UI datagrid without any vertical scroll bar. this is the code for the grid:

return <div style={{height: 400, width: '100%', } }>
        <DataGrid className={classes.root} rows={closedPositions} columns={columns} rowHeight={20} 
headerHeight={25} disableSelectionOnClick pageSize={20} autoPageSize={true} scrollbarSize={1}
                  components={{
                      pagination: CustomPagination,
                  }}
        />

The documentation for autopageSize is: If true, the pageSize is calculated according to the container size and the max number of rows to avoid rendering a vertical scroll bar.

I am very confused therefore as to why I have a scroll bar. even if i set the div to height 10,000 with no rows in the table, Ill still get a scroll bar.

Furthermore, there is no difference between scrollbarSize of 15 and 1 (for the horizontal scroll bar, which I want).

Does anyone know what is going wrong?

Answer 1

Do you try below code?

autoHeight={true}

It's works fine to me.

Example.

<div style={{ width: "100%" }}>
  <DataGrid
    rows={rows}
    columns={columns}
    autoHeight={true}
  />
</div>