Skip to content
Edit this page

Data Grid - Row height

Customize the height of your rows.

Static row height

By default, the rows have a height of 52 pixels. This matches the normal height in the Material Design guidelines.

Use the rowHeight prop to change this default value, as shown below:

Desk
Commodity
Trader Name
Trader Email
Quantity
No rows

Rows per page:

0–0 of 0

Press Enter to start editing

Variable row height

If you need some rows to have different row heights this can be achieved using the getRowHeight prop. This function is called for each visible row and if the return value is a number then that number will be set as that row's rowHeight. If the return value is null or undefined, then the rowHeight prop will take effect for the given row.

id
username
age
1
@ado
16
2
@uf
18
3
@toecuvu
41
4
@duopejar
78
5
@opemab
70

Rows per page:

1–5 of 5

Press Enter to start editing
const getRowHeight = React.useCallback(() => { ... }, []);

<DataGridPro getRowHeight={getRowHeight} />

Dynamic row height

Instead of a fixed row height, you can let the grid calculate the height of each row based on its content. To do so, return "auto" on the function passed to the getRowHeight prop.

<DataGrid getRowHeight={() => 'auto'} />

The following demo shows this feature in action:

id
username
age
bio
0
@datad
42
Sed feugiat venenatis nulla, sit amet dictum nulla convallis sit amet. Vestibulum commodo et odio a laoreet. Vestibulum pulvinar aliquam turpis, ac faucibus risus varius a.
1
@fe
25
Sed feugiat venenatis nulla, sit amet dictum nulla convallis sit amet.
2
@wum
71
Pellentesque ac metus velit. Vestibulum in massa nibh. Vestibulum commodo et odio a laoreet.
3
@opijor
13
Vestibulum commodo et odio a laoreet.
4
@lezsug
61
Maecenas non felis venenatis, porta velit quis, consectetur elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat venenatis nulla, sit amet dictum nulla convallis sit amet. Vestibulum pulvinar aliquam turpis, ac faucibus risus varius a. Pellentesque ac metus velit.
5
@pe
12
Sed feugiat venenatis nulla, sit amet dictum nulla convallis sit amet. Vestibulum in massa nibh.
6
@totul
62
Maecenas non felis venenatis, porta velit quis, consectetur elit. Nam ullamcorper ligula id consectetur auctor.
7
@ipopa
64
Fusce facilisis egestas massa, et eleifend magna imperdiet et. Nullam cursus tincidunt auctor.
8
@hujgitju
17
Sed feugiat venenatis nulla, sit amet dictum nulla convallis sit amet. Nulla venenatis justo non felis vulputate, eu mollis metus ornare.

Rows per page:

1–100 of 200

The dynamic row height implementaion is based on a lazy approach, which means that the rows are measured as they are rendered. Because of this, you may see the size of the scrollbar thumb changing during scroll. This side effect happens because a row height estimation is used while a row is not rendered, then this value is replaced once the true measurement is obtained. You can configure the estimated value used by passing a function to the getEstimatedRowHeight prop. If not provided, the default row height of 52px is used as estimation. It's recommended to pass this prop if the content deviates too much from the default value. Note that, due to the implementation adopted, the virtualization of the columns is also disabled to force all columns to be rendered at the same time.

<DataGrid getRowHeight={() => 'auto'} getEstimatedRowHeight={() => 200} />
id
username
age
bio
0
@kolmulji
73
Vestibulum commodo et odio a laoreet. Nullam cursus tincidunt auctor. Sed feugiat venenatis nulla, sit amet dictum nulla convallis sit amet. Nulla venenatis justo non felis vulputate, eu mollis metus  
1
@dawaug
54
Sed feugiat venenatis nulla, sit amet dictum nulla convallis sit amet. Pellentesque ac metus velit. Nulla venenatis justo non felis vulputate, eu mollis metus ornare. Maecenas non felis venenatis, por 
2
@cenebbat
58
Nulla venenatis justo non felis vulputate, eu mollis metus ornare. Vestibulum pulvinar aliquam turpis, ac faucibus risus varius a. Vestibulum pulvinar aliquam turpis, ac faucibus risus varius a. Phase 
3
@itsanfo
61
Maecenas non felis venenatis, porta velit quis, consectetur elit. Phasellus et ultrices dui. Aliquam dapibus, lorem vel mattis aliquet, purus lorem tincidunt mauris, in blandit quam risus sed ipsum. F 
4
@dizul
63
Fusce facilisis egestas massa, et eleifend magna imperdiet et. Nulla venenatis justo non felis vulputate, eu mollis metus ornare. Sed feugiat venenatis nulla, sit amet dictum nulla convallis sit amet. 
5
@agabi
58
Sed feugiat venenatis nulla, sit amet dictum nulla convallis sit amet. Phasellus et ultrices dui. Maecenas non felis venenatis, porta velit quis, consectetur elit. Nullam cursus tincidunt auctor. Fusc 

Rows per page:

1–10 of 10

Row density

Give your users the option to change the default row density to match their preferences—compact, standard, or comfortable. Density is calculated based on the rowHeight and/or headerHeight props, when present. See Density for details.

Row spacing

You can use the getRowSpacing prop to increase the spacing between rows. This prop is called with a GridRowSpacingParams object.

const getRowSpacing = React.useCallback((params: GridRowSpacingParams) => {
  return {
    top: params.isFirstVisible ? 0 : 5,
    bottom: params.isLastVisible ? 0 : 5,
  };
}, []);
Desk
Commodity
Trader Name
Trader Email
Quantity
No rows

Rows per page:

0–0 of 0

By default, setting getRowSpacing will change the marginXXX CSS properties of each row. To add a border instead, set rowSpacingType to "border" and customize the color and style.

<DataGrid
  getRowSpacing={...}
  rowSpacingType="border"
  sx={{ '& .MuiDataGrid-row': { borderTopColor: 'yellow', borderTopStyle: 'solid' } }}
/>

API