[DataGrid] Autoheight with maxHeight or limit for displayed rows

[venik2007]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

For my current development i need to have a DataGrid embeded into the some Summary Page content (for ex.).
So before and after DataGrid component i have some data. DataGrid should be flexible (empty DataGrid looks not good enough in my case) and for 1 row should be small (like it already happens when autosize is switched on). But for more than 5 rows (for ex.) i need to prevent further DataGrid stretching to keep rest content visible.
See raw example below.

Examples 🌈

Here is example https://codesandbox.io/s/autoheightgrid-material-demo-forked-r48po?file=/demo.tsx .
In that example i've met really close implementation to what i want, but unfortunately datagrid header and footer stay unpinned and dissapear on scrolling. But i need behaviour like DataGrid without autoheight with specified height.
Is it possible to solve my problem somehow with current functionality?

Motivation 🔦

I'm totally ok with:

• displayed rows quantity limit (maxRowsDisplayed or something like that)
• pinned DataGrid's header/footer (through MuiThemes, if it will not brake anything in DataGrid virtualization)
• etc.

Order ID 💳 (optional)

No response

[m4theushw]

Setting a maxHeight currently has no effect on the grid, so you need to use height. To avoid showing an empty space when there's no row or only a few rows, you can programmatically change the container height to auto and enable autoHeight. There're two scenarios to cover:

The number of rows will exceed the available space:

<div style={{ height: 300, overflow: "auto" }}>
  <DataGrid autoHeight={false} />
</div>

The number of rows will not exceed the available space:

<div style={{ height: 'auto', overflow: "auto" }}>
  <DataGrid autoHeight={true} />
</div>

Does it solve your case?

[venik2007]

Thank you for your answer @m4theushw , but no, unfortunately it doesn't cover my case.
Let me describe my case in that way:
I have a div with specific maxHeight and maxWidth values and i need from table to fill this div, but don't leave this div's boundaries.
So for autosize === true i want to see that grid header will reach out (pin) top border of parent div, and grid footer (pagination, rows quantity etc.) will reach out (pin) bottom border of parent div, without any cuttings and only rows will be scrolled in that grid (but not header/footer). Exactly like it works for parent with defined height when autoHeight === false.

Let me provide some examples which looks bad in my project (when autoHeight === true and wrapped with specific parent's height):

or

[oliviertassinari]

What I would recommend is to not use the autoHeight feature. It was not introduced to cover your use case. Instead, you can set the height of the data grid's parent based on the size of your data set.

[matintrenta]

Try this:

rows per page
const rpp = 8

and on parent container
style={{height: 108 + (rpp * 52) + 'px'}}

and Datagrid prop
pageSize={rpp}

[nickraphael]

Not so good if there are less than rpp rows in your dataset.

Try this...
style={{ height: 108 + Math.min(rpp, items.length) * 52 + 'px' }}

[GuilhermeMelati]

Mine was like this
height: 'calc(100vh - 280px)'
(In this case, the 280px is my header)

[ahmed-zhran]

=> afterstruggling for a while finally this works for me like a magic:

<Box id="DataGridContainer" sx={{height: '52vw', width: '94vw'}}>
<Box sx={{height: '100% !important', width: "100% !important"}}>

<DataGrid disableSelectionOnClick sx={{height: 'inherit !important', width: "inherit"}} rows={rows} columns={cols} />

</Box>
</Box>

now I have complete control over the width and height through the top level box #DataGridContainer

note: Box are from Mui elements
MUI version used:
"@mui/material": "^5.11.8",
"@mui/x-data-grid": "^5.11.0",

[tomhalley]

I managed to get this working, though I had to use some pretty hacky css selectors in the SX. Height is controlled by the parent Box

<Box sx={{ maxHeight: 'calc(100vh - 360px)' }}>
  <DataGrid
    autoHeight={true}
    sx={{
      overflow: 'auto',
      '.MuiDataGrid-virtualScroller': {
        height: 'auto',
        overflow: 'hidden',
      },
      '.MuiDataGrid-main > div:nth-child(2)': {
        overflowY: 'auto !important',
        flex: 'unset !important',
      },
    }}
    treeData
  />
</Box>

[jpodpro]

am i the only one who finds these "styling" solutions abysmal?

[szymonnowak-st]

Hi! Is there a solution that works with tree data as well? In this case the number of visible rows can change, so it's not enough to simply count all rows. Is there a way to get the number of visible (parent / child) rows before they are rendered?

It would be great if MUI DataGrid had a maxHeight option, which would work like autoHeight only up to a specific height (e.g. height of the viewport) to be able to use row virtualization when number of rows is high.

EDIT: Veeery early version of an experiment to make it work with tree data and fixed row height:

const useAutoMaxHeight = ({
  api,
  rowHeight,
}: {
  api: GridApiPro
  rowHeight: number
}) => {
  const [isAutoHeightEnabled, setIsAutoHeightEnabled] = React.useState(true)

  useEffect(() => {
    if (api.subscribeEvent && api.state && api.instanceId) {
      return api.subscribeEvent('stateChange', () => {
        const visibleRowIds = gridExpandedSortedRowIdsSelector(
          api.state,
          api.instanceId,
        )

        // Table height without header and pinned rows
        const tableHeight = rowHeight * visibleRowIds.length
        const viewportHeight = window.innerHeight

        setIsAutoHeightEnabled(tableHeight < viewportHeight)
      })
    }
  }, [api, rowHeight])

  return isAutoHeightEnabled
}

export const MyDataGrid = (props) => {
  const apiRef = useGridApiRef()

  const isAutoHeightEnabled = useAutoMaxHeight({
    api: apiRef.current,
    rowHeight: props.rowHeight,
  })

  return (
    <div
      style={{
        height: isAutoHeightEnabled ? 'auto' : '100vh',
        overflow: 'auto',
      }}
    >
      <DataGridPro
        apiRef={apiRef}
        autoHeight={isAutoHeightEnabled}
        ...
      />
    </div>
  )
}

[ezequielgalardi]

Other workaround can be:

<DataGrid
          autoHeight={true}
          sx={{
            '.MuiDataGrid-virtualScroller': {
              overflowY: 'auto !important',
              // example of maxHeight
              maxHeight: 'calc(100vh - 100px) !important',
            },
          }}
    ...otherProps
/>