Row Height

library(muiDataGrid)
library(dplyr)

The Data Grid provides flexible options for controlling row height, from static heights to dynamic sizing based on content.

Static Row Height

Using rowHeight Prop

Set a uniform height for all rows:

DataGrid(
  rows = starwars |> select(name, height, mass) |> head(),
  rowHeight = 80
)

Default Height

The default row height is 52 pixels:

DataGrid(
  rows = starwars |> select(name, height, mass) |> head()
  # Default rowHeight = 52
)

Column Header Height

Customize the height of the column header using the columnHeaderHeight prop:

DataGrid(
  rows = starwars |> select(name, height, mass, species) |> head(),
  columnHeaderHeight = 80
)

Variable Row Height

Using getRowHeight

Set different heights for different rows using a function:

DataGrid(
  rows = starwars |> select(name, height, mass) |> head(),
  getRowHeight = JS("
    function(params) {
      // Make every third row taller
      return params.id % 3 === 0 ? 80 : 52;
    }
  ")
)

Dynamic Row Height

Auto Height

Use ‘auto’ to let rows expand to fit their content:

DataGrid(
  rows = starwars |> select(name, films) |> head(),
  columns = list(
    list(field = "name", width = 180),
    list(field = "films", width = 400)
  ),
  getRowHeight = JS("function() { return 'auto'; }")
)

With Estimated Height

Provide an estimated height for better scrolling performance:

DataGrid(
  rows = starwars |> select(name, films) |> head(10),
  columns = list(
    list(field = "name", width = 180),
    list(field = "films", width = 400)
  ),
  getRowHeight = JS("function() { return 'auto'; }"),
  getEstimatedRowHeight = JS("function() { return 80; }")
)

Row Density

Density Presets

Use predefined density settings to quickly adjust row height:

# Compact density
DataGrid(
  rows = starwars |> select(name, height, mass, species) |> head(),
  density = "compact"
)

# Standard density (default)
DataGrid(
  rows = starwars |> select(name, height, mass, species) |> head(),
  density = "standard"
)

# Comfortable density
DataGrid(
  rows = starwars |> select(name, height, mass, species) |> head(),
  density = "comfortable"
)

Density values affect row height: - “compact”: ~36px - “standard”: ~52px (default) - “comfortable”: ~65px

Row Spacing

Using getRowSpacing

Add vertical spacing between rows:

DataGrid(
  rows = starwars |> select(name, height, mass, species) |> head(),
  getRowSpacing = JS("
    function(params) {
      return {
        top: params.isFirstVisible ? 0 : 5,
        bottom: params.isLastVisible ? 0 : 5
      };
    }
  ")
)

Border-Based Spacing

Using Borders for Visual Separation

DataGrid(
  rows = starwars |> select(name, height, mass, species) |> head(10),
  sx = list(
    "& .MuiDataGrid-row" = list(
      borderBottom = "2px solid #e0e0e0",
      marginBottom = "4px"
    )
  )
)