Layout

library(muiDataGrid)
library(dplyr)

Layout

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),
  pageSizeOptions = c(5, 10, 25),
  initialState = list(
    pagination = list(
      paginationModel = list(pageSize = 5)
    )
  )
)

Toolbar and CSV export

Set showToolbar = TRUE to display the toolbar, which includes column, filter, density, and export controls. The Export button can download the current data as a CSV file.

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

See the Localization vignette to fix accented characters (ä becomes ä, è becomes è) in CSV exports for Excel.