In glin/reactable: Interactive Data Tables for R

knitr::opts_chunk$set(echo = TRUE)

library(reactable)

Using inline styles

reactable(
  MASS::Cars93,
  selection = "multiple",
  columns = list(
    .selection = colDef(
      style = list(position = "sticky", left = 0, background = "#fff", zIndex = 1),
      headerStyle = list(position = "sticky", left = 0, background = "#fff", zIndex = 1),
      width = 45
    ),
    Manufacturer = colDef(
      style = list(position = "sticky", left = 45, background = "#fff", zIndex = 1),
      headerStyle = list(position = "sticky", left = 45, background = "#fff", zIndex = 1)
    )
  ),
  onClick = "select",
  wrap = FALSE
)

Using CSS

reactable(
  MASS::Cars93,
  selection = "multiple",
  columns = list(
    .selection = colDef(
      class = "sticky left-col-1",
      headerClass = "sticky left-col-1",
      width = 45
    ),
    Manufacturer = colDef(
      class = "sticky left-col-2",
      headerClass = "sticky left-col-2"
    ),
    Model = colDef(
      class = "sticky left-col-3",
      headerClass = "sticky left-col-3"
    )
  ),
  onClick = "select",
  wrap = FALSE
)

.sticky {
  position: sticky !important;
  background: #fff;
  z-index: 1;
}

.left-col-1 {
  left: 0;
}

.left-col-2 {
  left: 45px;
}

.left-col-3 {
  left: 145px;
  border-right: 1px solid #eee !important;
}

```{css echo=FALSE} / rmarkdown html documents / .main-container { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }

.main-container blockquote { font-size: inherit; } ```

glin/reactable documentation built on Jan. 25, 2025, 7:41 p.m.