Layout

library(muiDataGrid)
library(dplyr)

The Data Grid offers multiple options to control its layout.

Height

Fixed Height

You can specify a fixed height using CSS or the sx prop:

DataGrid(
  rows = starwars |> select(name, height, mass) |> head(10),
  sx = list(height = 300)
)

Auto Height

The Data Grid can automatically adjust its height to fit the content by using the autoHeight prop:

DataGrid(
  rows = starwars |> select(name, height, mass) |> head(10),
  autoHeight = TRUE
)

Width

Fluid Width

By default, the Data Grid takes the full width of its container. The columns flex to fill the available space.

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

Fixed Width

You can specify a fixed width using CSS or the sx prop:

DataGrid(
  rows = starwars |> select(name, height, mass) |> head(10),
  sx = list(width = 600)
)

Pagination

You can add pagination and adjust the page size using initialState (here 5 rows per page):

library(dplyr)

DataGrid(
  rows = starwars |> select(name, height, mass) |> head(10),
  initialState = list(
    pagination = list(
      paginationModel = list(pageSize = 5)
    )
  )
)