Skip to content

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
@avab
39
2
@tow
41
3
@fu
24
4
@zucuc
19
5
@jukvec
32

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 data 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
@dohutej
23
Vestibulum commodo et odio a laoreet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et ultrices dui. Fusce facilisis egestas massa, et eleifend magna imperdiet et.
1
@ofo
55
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ac metus velit.
2
@ehuvi
66
Nulla venenatis justo non felis vulputate, eu mollis metus ornare. Vestibulum pulvinar aliquam turpis, ac faucibus risus varius a. Nam ullamcorper ligula id consectetur auctor. Vestibulum pulvinar aliquam turpis, ac faucibus risus varius a.
3
@sowiut
78
Nulla venenatis justo non felis vulputate, eu mollis metus ornare.
4
@veafewi
52
Nullam cursus tincidunt auctor. Maecenas non felis venenatis, porta velit quis, consectetur elit. Vestibulum commodo et odio a laoreet. Fusce facilisis egestas massa, et eleifend magna imperdiet et.
5
@cih
51
Fusce facilisis egestas massa, et eleifend magna imperdiet et. Aliquam dapibus, lorem vel mattis aliquet, purus lorem tincidunt mauris, in blandit quam risus sed ipsum. Pellentesque ac metus velit.
6
@rowajre
78
Aliquam dapibus, lorem vel mattis aliquet, purus lorem tincidunt mauris, in blandit quam risus sed ipsum. Vestibulum commodo et odio a laoreet. Sed feugiat venenatis nulla, sit amet dictum nulla convallis sit amet.
7
@mijbiwic
69
Phasellus et ultrices dui. Nam ullamcorper ligula id consectetur auctor.
8
@ehiva
47
Nam ullamcorper ligula id consectetur auctor. Fusce facilisis egestas massa, et eleifend magna imperdiet et. Phasellus et ultrices dui. Vestibulum commodo et odio a laoreet.

Rows per page:

1–100 of 200

The dynamic row height implementation 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
@cuil
36
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum commodo et odio a laoreet. Nam ullamcorper ligula id consectetur auctor. Nulla venenatis justo non felis vulputate, eu mollis metus  
1
@wuriha
25
Vestibulum commodo et odio a laoreet. Vestibulum commodo et odio a laoreet. Fusce facilisis egestas massa, et eleifend magna imperdiet et. Aliquam dapibus, lorem vel mattis aliquet, purus lorem tincid 
2
@vovke
39
Maecenas non felis venenatis, porta velit quis, consectetur elit. Sed feugiat venenatis nulla, sit amet dictum nulla convallis sit amet. Vestibulum commodo et odio a laoreet. Vestibulum in massa nibh. 
3
@ijedan
20
Aliquam dapibus, lorem vel mattis aliquet, purus lorem tincidunt mauris, in blandit quam risus sed ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas non felis venenatis, porta v 
4
@rib
27
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ullamcorper ligula id consectetur auctor. Nulla venenatis justo non felis vulputate, eu mollis metus ornare. Fusce facilisis egestas massa, 
5
@minij
49
Sed feugiat venenatis nulla, sit amet dictum nulla convallis sit amet. Nulla venenatis justo non felis vulputate, eu mollis metus ornare. Fusce facilisis egestas massa, et eleifend magna imperdiet et. 

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 columnHeaderHeight 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