How to freeze columns in reactable

[sabhcy]

if we need to freeze 5 left most column and provide a horizontal scroll bar afterwards, how do we do that with reactable?

[glin]

You can freeze columns using the position: sticky CSS property, but it's not the easiest to use right now. Making a single left or right column sticky is pretty straightforward, but making multiple columns sticky requires you to know the widths of columns.

I think it'd be nice to build this into reactable in the future, but for now, you'll have to add some likely-messy CSS yourself. I've created some examples of single/multiple sticky columns here:
https://glin.github.io/reactable/articles/sticky-columns.html

Also note IE11 doesn't support position: sticky, if that's important. I think it's possible to freeze columns without position: sticky, but it'd be much harder.

[analytichealth]

Is there a way to freeze the checkbox column too? As a simple example, when using a selectionId you will see the checkbox column does not stick:

library(reactable)

reactable(MASS::Cars93, 
	selection = "multiple", selectionId = "table_rows_selected", onClick = "select",
	columns = list(
  Manufacturer = colDef(minWidth = 150, 
    style = list(position = "sticky", left = 0, background = "#fff", zIndex = 1),
    headerStyle = list(position = "sticky", left = 0, background = "#fff", zIndex = 1)
  )
))

[glin]

@analytichealth I just added the ability to customize the row selection column to make that easier: https://glin.github.io/reactable/articles/examples.html#customize-the-selection-column

You can now add inline styles or classes to the selection column like this:

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)
    )
  )
)

Here are some examples of freezing the selection column: https://glin.github.io/reactable/articles/sticky-columns-selection.html. The only other tricky part is that selection columns have a different, undocumented default width (36px), so I'd recommend setting the width explicitly, in case the default ever changes.

[glin]

Sticky columns are now built into reactable in the dev version:

• Sticky columns are now supported using a new sticky argument in colDef() and colGroup() (#19, #72, #141).

It should be much easier to do now, as you don't have to worry about the column widths, z-index, or background anymore:

reactable(
  MASS::Cars93,
  columns = list(
    Manufacturer = colDef(sticky = "left"),
    Make = colDef(sticky = "right")
  )
)

There are a couple examples here: https://glin.github.io/reactable/articles/examples.html#sticky-columns

And an example of a sticky selection column here: https://glin.github.io/reactable/articles/examples.html#customize-the-selection-column