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:

No rows
Desk
Commodity
Trader Name
Trader Email
Quantity

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
@udoaho
68
2
@wigeti
55
3
@sersib
55
4
@wok
52
5
@cicuvet
44

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
@boveseni
55
Nulla venenatis justo non felis vulputate, eu mollis metus ornare. Nam ullamcorper ligula id consectetur auctor. Pellentesque ac metus velit. Vestibulum commodo et odio a laoreet.
1
@zuhge
37
Pellentesque ac metus velit.
2
@ceeba
38
Nam ullamcorper ligula id consectetur auctor.
3
@bob
18
Sed feugiat venenatis nulla, sit amet dictum nulla convallis sit amet. Vestibulum pulvinar aliquam turpis, ac faucibus risus varius a.
4
@wuveb
69
Pellentesque ac metus velit.
5
@curosoon
41
Vestibulum in massa nibh. Maecenas non felis venenatis, porta velit quis, consectetur elit. Aliquam dapibus, lorem vel mattis aliquet, purus lorem tincidunt mauris, in blandit quam risus sed ipsum.
6
@bur
72
Phasellus et ultrices dui.
7
@no
12
Vestibulum in massa nibh. Vestibulum pulvinar aliquam turpis, ac faucibus risus varius a.
8
@oh
27
Nam ullamcorper ligula id consectetur auctor. Vestibulum commodo et odio a laoreet. Aliquam dapibus, lorem vel mattis aliquet, purus lorem tincidunt mauris, in blandit quam risus sed ipsum.

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
@dut
14
Nam ullamcorper ligula id consectetur auctor. Phasellus et ultrices dui. Pellentesque ac metus velit. Fusce facilisis egestas massa, et eleifend magna imperdiet et. 
1
@okopaw
27
Sed feugiat venenatis nulla, sit amet dictum nulla convallis sit amet. Nulla venenatis justo non felis vulputate, eu mollis metus ornare. Vestibulum commodo et odio a laoreet. Vestibulum commodo et od 
2
@liore
44
Vestibulum in massa nibh. Vestibulum commodo et odio a laoreet. Vestibulum commodo et odio a laoreet. Nulla venenatis justo non felis vulputate, eu mollis metus ornare. 
3
@utag
23
Sed feugiat venenatis nulla, sit amet dictum nulla convallis sit amet. Vestibulum commodo et odio a laoreet. Nullam cursus tincidunt auctor. Vestibulum in massa nibh. 
4
@secdenu
50
Vestibulum pulvinar aliquam turpis, ac faucibus risus varius a. Vestibulum in massa nibh. Vestibulum in massa nibh. Nam ullamcorper ligula id consectetur auctor. Maecenas non felis venenatis, porta ve 
5
@wu
77
Fusce facilisis egestas massa, et eleifend magna imperdiet et. Sed feugiat venenatis nulla, sit amet dictum nulla convallis sit amet. Vestibulum in massa nibh. Sed feugiat venenatis nulla, sit amet di 

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,
  };
}, []);
No rows
Desk
Commodity
Trader Name
Trader Email
Quantity

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