[DataGrid] Dynamic row height

[ronnyroeller]

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

I want to show text in one of the cells. Text can have different length and might span multiple lines. Today, data-grid seem to allow only a fixed rowHeight. I'd like to set this to dynamic - so the row is as high as the content requires. Alternatively, for my use case also something like maxRowHeight would work: I would define the maximal height of a row and the grid uses up to the maxRowHeight - but less if there is less content.

Examples 🌈

Motivation 🔦

I want to show in one of the columns text that the user entered (or a snippet of it).

[oliviertassinari]

@ronnyroeller thanks for the feature request. It's definitely something we were expecting. We are happy to see it surface :). For the virtualization to work, the grid needs to know the size of all the rows.

Benchmark

• https://github.com/tannerlinsley/react-virtual/blob/d64056ba176ce6b7fe47a7956da78d1189f0ea73/examples/dynamic/src/index.js#L71 measureRef.
• https://www.ag-grid.com/javascript-grid-row-height/#auto-row-height autoRowHeight.
• https://bvaughn.github.io/react-virtualized/#/components/CellMeasurer

[ronnyroeller]

Thanks a lot for the quick reply, @oliviertassinari Very helpful!

Virtualization is indeed a good point. I was wondering if setting the maximal row height could help with this. For example, if one knows that a row can be max twice the "normal height" -> it might still be possible to do the required calculations (although with a bit more slack).

Background:
We're currently exploring if we should move from <Table> to <XGrid> because the API feels so much nicer and it comes with great (upcoming) features. Hence, I'd really appreciate your guidance where you expect to move with this, considering that dynamic row height is a hard requirement for us.
Hence, is your stance more that dynamic row height isn't going to come - or more that it's coming but we might not be able to use virtualization then (or might pay a heavy performance penalty when using virtualization with dynamic row height).

[oliviertassinari]

@ronnyroeller We will definitely implement variable and dynamic row heights. There are two standard use cases (probably not even advanced). A max-height could work with dynamic row height.

We have no plans to implement a data grid without virtualization.

[balihoo-wwilkins]

We managed to implement this with css and it works for us. No need to set row height on the react datagrid element after this:

".MuiDataGrid-row, .MuiDataGrid-root .MuiDataGrid-cell, .rendering-zone": { "max-height": "none !important", }, ".MuiDataGrid-root .MuiDataGrid-window": { position: "relative !important", }, ".MuiDataGrid-root .MuiDataGrid-viewport": { "max-height": "none !important", }, ".MuiDataGrid-root": { height: "auto !important", },

Issue was positioning and max-height. After this, everything is dynamic for row height

[BrentFarese]

I have used react-virtuoso for virtualization with dynamic row heights. It supports dynamic row heights out-of-the-box. It is a less-popular package than react-virtualized or react-window, which as far as I know don't support dynamic heights. It does the job pretty well.

[oliviertassinari]

cc @petyosi 🙃

[ronnyroeller]

@balihoo-wwilkins Thanks a lot for sharing your workaround! I tried it out but it seems to confuse the scrolling. If there are items that are higher than rowHeight, it's no longer possible to scroll to the last items on the page.
We will migrate back to <Table> for now and then try again <XGrid>/<DataGrid> once there is progress on this ticket.

[ludvigeriksson]

For the virtualization to work, the grid needs to know the size of all the rows.

@oliviertassinari You could use the approach Apple does with UIKit, and provide an estimated row height. Then you can continuously update the estimated full height of the table to a more correct value as the user scrolls to reveal more rows (which then report their actual heights). That way you don't need to know the size of all rows up front.

[oliviertassinari]

A possible workaround, a popup shown on hover: https://codesandbox.io/s/expandcelldemo-forked-2owvu?file=/src/renderCellExpand.tsx

I have tried to improve the first version built by @dtassone

[mouadovic22]

the only workaround found is that:
https://stackoverflow.com/questions/63761910/material-ui-tablecell-cant-force-a-string-to-display-in-a-new-line-like-list-it

[jitendrasaroj93]

i found the workaround with CSS as

MuiDataGrid-viewport,.MuiDataGrid-row,.MuiDataGrid-renderingZone{
max-height: fit-content!important;
}
.MuiDataGrid-cell{
max-height:fit-content!important;
overflow:auto;
max-height: inherit;
white-space: initial!important;
line-height:16px!important;
display:flex!important;
align-items: center;
padding-top: 10px!important;
padding-bottom: 10px!important;
>div{ //this is for renderCell component wrapped in div
max-height: inherit;
width: 100%;
white-space: initial;
line-height:16px;
}
}

And virtualization works as well as usual.

[hmaack]

A possible workaround, a popup shown on hover: https://codesandbox.io/s/expandcelldemo-forked-2owvu?file=/src/renderCellExpand.tsx

I have tried to improve the first version built by @dtassone

Thanks @oliviertassinari - I forked your approach for another UX - https://codesandbox.io/s/expandcelldemo-forked-rs0hx?file=/src/renderCellExpand.tsx - maybe it's helping someone ( https://rs0hx.csb.app/# )

[JacobMGEvans]

A possible workaround, a popup shown on hover: https://codesandbox.io/s/expandcelldemo-forked-2owvu?file=/src/renderCellExpand.tsx

I have tried to improve the first version built by @dtassone

I feel like this should be part of the API for the DataGrid

[rafacepsa]

A possible workaround, a popup shown on hover: https://codesandbox.io/s/expandcelldemo-forked-2owvu?file=/src/renderCellExpand.tsx

I have tried to improve the first version built by @dtassone

Is there a way to edit that component the same way you edit a normal string cell? Currently you can't edit the cell once it reaches the popup state.

[porkupan]

.MuiDataGrid-viewport,
.MuiDataGrid-row,
.MuiDataGrid-renderingZone {
    max-height: fit-content !important;
}

The CSS fix doesn't seem to work on Safari (iPhone or Mac). The rows end up broken, with different cells somehow getting different height. Works well for Chrome and Firefox... max-heght: none seems to work on Chrome, Firefox and Safari.

.MuiDataGrid-viewport,
.MuiDataGrid-row,
.MuiDataGrid-renderingZone {
  max-height: none !important;
}

.MuiDataGrid-cell {
  max-height: none !important;
  overflow: auto;
  white-space: initial !important;
  line-height: 16px !important;
  display: flex !important;
  align-items: center;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

[blazinaj]

Just wanted to mention that this CSS from above *mostly works for me. But doesn't work with Column Pinning. The cells in the Pinned Column take on their own height which breaks the whole grid

/* Allows the MUI grid rows to expand to child height */
.MuiDataGrid-viewport,
.MuiDataGrid-row,
.MuiDataGrid-renderingZone {
  max-height: fit-content !important;
}

/* Allows the MUI grid rows to expand to child height */
.MuiDataGrid-cell {
  max-height: fit-content !important;
  overflow: auto;
  white-space: initial !important;
  line-height: 16px !important;
  display: flex !important;
  align-items: center;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

[roman-kuleshov]

@blazinaj Did you find any workaround for pinned columns?

[m4theushw]

Hey all, we're working in adding support for row height based on the content in #4859. We would love to have feedback from the community on how to make this feature perfect.

Documentation: https://deploy-preview-4859--material-ui-x.netlify.app/x/react-data-grid/rows/#dynamic-row-height

[d-s-i]

I am getting this error Type '() => string' is not assignable to type '(params: GridRowHeightParams) => GridRowHeightReturnValue'. Type 'string' is not assignable to type 'GridRowHeightReturnValue'. with my code and the default code.

My code :

import * as React from "react";
import { DataGrid, GridColDef } from "@mui/x-data-grid";
import { TypographyColor } from "../../utils/constants";

interface CustomizedDataGridProps {
rows: { id: number, name: string, to: string, calldata: any }[];
columns: GridColDef[]
rowHeight: number
}

export function CustomizedDataGrid(props: CustomizedDataGridProps) {

return (
  <span onClick={(event: any) => event.stopPropagation()} style={{ width: "100%" }}>
    <DataGrid
      rows={props.rows}
      columns={props.columns}
      disableSelectionOnClick
      sx={{ color: TypographyColor }}
      autoHeight
      hideFooter
      rowHeight={props.rowHeight}
      getRowHeight={() => 'auto'}
    />
  </span>
);
}

Default code: https://deploy-preview-4859--material-ui-x.netlify.app/x/react-data-grid/rows/#dynamic-row-height

[flaviendelangle]

@d-s-i are you able to reproduce it in a codesandbox with your TS config ?

The following should work, but I would have expected TS to work without the explicit casting

      getRowHeight={() => 'auto' as const}

[AhenkEU]

I'm trying to use the new dynamic row height functionality in Material UI. When I add the line "getRowHeight={() => 'auto'}" as mentioned here, I get the warning in the console and grid is not displayed properly. There are missing rows and dynamic row height does not work. I understand that I'm passing a string where there should be a number but I can't find where or how. If I comment the line "getRowHeight={() => 'auto'}", no warnings and works normally but no dynamic row height of course. My code and warnings are below.

Failed prop type: Invalid prop rowHeight of type string supplied to GridRow, expected number.
Failed prop type: Invalid prop height of type string supplied to GridCell, expected number.
NaN is an invalid value for the height css style property.

My code is:

`import {useState} from 'react'
import React from 'react'
import { DataGrid, GridToolbarExport, GridToolbarContainer } from '@mui/x-data-grid'


    function ExportButton() { //CSV Export button 
        return (
          <GridToolbarContainer>
            <GridToolbarExport />
          </GridToolbarContainer>
        );
      }
      

export default function projectsPage() {

    const [projects, setProjects] = useState([])
  
        const fetchProjects = async () =>{
        const response = await fetch('/api/projects')
        const data = await response.json()
        setProjects(data)
        // console.log(data) just to check we receive the data correctly.
    }

    const columns = [
        {field: "id", headerName: "Project ID", width:100},
        {field: "owner", headerName:"Owner ID", width: 100},
        {field: "projectname", headerName:"Project Name", width: 100}
       

    ];

    const rows = projects.map((project)=>({
        id: project._id,
        owner: project.owner,
        projectname: project.projectname
    }))

    

    return (
        <>
      <button onClick={fetchProjects}> Load Projects </button>
        {    
             <div style={{ height:400, width: 900}}>
                    <DataGrid   // Creating datagrid.
                    rows={rows}
                    columns={columns}
                    getRowHeight={() => "auto"}
            
                    sx={{
                    '& .MuiDataGrid-cell': {
                    py: '8px',
                    },
                    }}
                    

                   components={{
                        Toolbar: GridToolbarExport}}
                    options={{  //Adding filtering features
                        filtering:true}}
                                              
                    />

            </div>
            
        }
         </>
    )
    }`

My test data is very basic like this https://i.stack.imgur.com/R6HC3.jpg

[m4theushw]

@AhenkEU The dynamic row height was not released in the NPM package yet. To experiment with it, you need to use the preview package available by clicking the "Open in CodeSandbox" button in any demo in https://deploy-preview-4859--material-ui-x.netlify.app/x/react-data-grid/rows/#dynamic-row-height

[AhenkEU]

@AhenkEU The dynamic row height was not released in the NPM package yet. To experiment with it, you need to use the preview package available by clicking the "Open in CodeSandbox" button in any demo in https://deploy-preview-4859--material-ui-x.netlify.app/x/react-data-grid/rows/#dynamic-row-height

Oh, I thought it is live and useable already. Thank you :)

[krishnagupta21]

Is it possible to maintain the dynamic row height when editable is enabled on the column. Right now, it compresses to single line input field.

[m4theushw]

@krishnagupta21 By default, no. The dynamic row height always uses the row content so it will reduce the height to the height of the <input>. You can try to create a custom edit component using a textarea and add rows=5 to make it taller. However, if you want a built-in solution please upvote #2851

[masull]

Will this support a tree view with pinned columns? Scrolling on expanded grouped rows is a bit janky. The mouse is not always positioned over the scroll bar and it studders a bit when dragging the scroll bar up.
<DataGridPro treeData disableColumnMenu getRowId={(row) => row.Id} rows={rows} columns={columns} getRowHeight={() => "auto"} getTreeDataPath={getTreeDataPath} initialState={{ pinnedColumns: { left: ["__tree_data_group__"] } }} />

Here is another example using the premium grid and grouping. Try expanding a few nodes and scroll down and up.
https://codesandbox.io/s/dynamicrowheightgrid-material-demo-forked-tctdic

[flaviendelangle]

Indeed there is something wrong with the scrolling there, it stops scrolling from time to time ...

[m4theushw]

@masull The dynamic row height uses a lazy approach, so it only knows the true height after rendering the row. To calculate the size of the scrollbar, before a row is rendered, we use an estimation. The inconsistency might be explained because the true height is too different from the estimation. You can try to tweak the getEstimatedRowHeight prop to be closer to the final content. The studders is from #5006

[masull]

@masull The dynamic row height uses a lazy approach, so it only knows the true height after rendering the row. To calculate the size of the scrollbar, before a row is rendered, we use an estimation. The inconsistency might be explained because the true height is too different from the estimation. You can try to tweak the getEstimatedRowHeight prop to be closer to the final content. The studders is from #5006

Okay, thanks, I'll give it a try.

[masull]

I have tried various methods, the new, getRowHeight={() => 'auto'} works with pinned columns, but there is a performance penalty when vertically scrolling on say, 30+ treeData rows. The css posted above is promising (performance is fine) except it does not work for pinned columns.

[AkshayG-accruon]

I have applied this solution, and It worked for me:

You need to set rowHeight to show the sroll bar:

Fixed . Thanks man

[nozma-knows]

You can now easily set the row height to dynamically fit the content by adding:

getRowHeight={() => 'auto'}

as a prop to the DataGrid component

Heres a link to the documentation explaining this - https://mui.com/x/react-data-grid/rows/#dynamic-row-height

[namespace-irhad]

If I am using DataGrid pagination together with autoheight feature is there a way I can prefetch the next page and set the correct height and avoid calling estimatedRowHeight. Right now I can go back to the previous page and there is no flickering since the size is already calculated, I was wondering if the similar case is possible by prefetching the next page with swr for example.

[hassaans208]

So, for me it worked by using both `getRowHeight` and `rowHeight`, where `getRowHeight `can only be a **string** and `rowHeight `can only be a **number**

When getRowHeight, for some reason, returns null, rowHeight param takes precedence and is used instead!

Read This Document to get have more insight on this issue.

 <DataGrid
                                    getRowId={(obj) => { return obj?._id }}
                                    rows={obj?.tableData?.rows}
                                    columns={obj?.tableData?.columns}
                                    pageSize={obj?.tableData?.pageSize}
                                    rowsPerPageOptions={[obj?.tableData?.rowsPerPageOptions]}
                                    checkboxSelection={props.showCheckbox}
                                    disableSelectionOnClick
                                    getRowHeight={(params) => (props.auto ? 'auto' : null)}
                                    rowHeight={128}
                                    getRowClassName={(params) => `${props.auto ? '' : 'border  border-gray-200 items-center'} py-4 `}
                                />