How do I get reactable table columns to auto expand?

1.2k views Asked by At

I'm using a table with the package reactable and I'd like the columns to auto expand.

Right now, the rows will get bigger when the text is too big for the column.

I want to switch that logic, so the columns will get bigger instead.

library(fpp)
library(reactable)

credit$a <- c("long value with lots of text")
reactable(credit,
    defaultColDef = colDef(
          header = function(value)
              str_to_title(gsub(".", " ",
                   gsub("_", " ", value, fixed = T),
                   fixed = T)),
          headerStyle = list(background = "#f7f7f8")),
    highlight = T,
    height = 1000,
    searchable = TRUE,
    defaultPageSize = 100)

Right now the row expands and credit$a is on long rows.

I want the column to expand instead

I'll note that I can use css styling like this

sticky_style <- function(left = TRUE) {
    style <- list(position = "sticky", 
                  fontWeight = "bold",
                  background = "#f7f7f8", 
                  zIndex = 1)
    if (left) {
      style <- c(style, list(left = 0, borderRight = "1px solid #eee"))
    } else {
      style <- c(style, list(right = 0, borderLeft = "1px solid #eee"))
    }
    style
}

reactable(credit,
          columns = list(
            a = colDef(
              style = sticky_style(),
              headerStyle = sticky_style(),
              minWidth = 200
            )),
    defaultColDef = colDef(
          header = function(value)
              str_to_title(gsub(".", " ",
                   gsub("_", " ", value, fixed = T),
                   fixed = T)),
          headerStyle = list(background = "#f7f7f8")),
    highlight = T,
    height = 1000,
    searchable = TRUE,
    defaultPageSize = 100)
0

There are 0 answers