Adding a colvis button

[trangdata]

Hi there, awesome package 💯 🚀 .

I know the CSV download button has just recently been implemented (#11), and I was wondering if reactable could also provide a colvis button similar to {DT} as well (which allows users to select the columns they want to be "visible"):

https://rstudio.github.io/DT/extensions.html#colvis-retired

[glin]

Hi, and yes, that's absolutely possible. There's actually an undocumented JavaScript API to do this today, which I didn't publicize earlier since I wasn't sure if it would be useful. So making that officially supported would be simple enough, and most of the effort would be coming up with useful examples.

Any thoughts on how you'd like users to select visible columns? Besides the ColVis style multi-select button popover thing, you could also use a checkbox group, or a single checkbox to toggle a fixed set of columns, or a button to toggle a fixed set of columns, etc.

There are so many different ways to do a column visibility UI, so like the CSV download button, reactable probably won't provide a ColVis button out of the box. But just provide a JavaScript API that makes it easy enough to make your own.

[trangdata]

Hi @glin thank you so much for the prompt response! I was thinking the ColVis style multi-select button popover may be the best option for allowing the user to select the columns they want to keep, but I'm not sure what a "checkbox group" would look like.

[mubashirqasim]

Hi Glin,

First of all, it's a great library. Thanks for all your good work to put this together! I would also like to have the capability to control Column visibility.

Here is a good example from https://coinmarketcap.com/ to control column visibility.

Cheers,

[mubashirqasim]

Here is another excellent example from https://www.tipranks.com/smart-portfolio/holdings using the Custom View button.

[ulyngs]

+1!

Having an easy way to let the user choose which columns they want to see, and reorder them (#270), are the only missing pieces that's causing me holding me back in reactable!

A simple colvis button similar to DT would suffice, alongside some sort of documented way to use crosstalk filters to do the same.

Can you point to the undocumented JavaScript API you mentioned?

[glin]

The JavaScript API methods to control column visibility are now in the development version:

• New Reactable.toggleHideColumn() and Reactable.setHiddenColumns() methods in the JavaScript API to toggle or set hidden columns. JavaScript render functions and style functions also receive a new state.hiddenColumns property for the hidden columns in the table. (#246)

There's a short demo of using this to create a column visibility toggle button at Column visibility toggle button example.

I didn't make an example of a ColVis-style multi-select button popover because it's much more complicated and would require custom JavaScript/CSS or another 3rd-party library, so left it out for now.

With native HTML inputs, you can create a group of checkbox inputs for individual column toggles, but opted for the simpler toggle button for the column visibility example. Here's the example I came up if you want to try checkboxes. I think it works ok but there's definitely room for improvement.

library(shiny)
library(htmltools)
library(reactable)

additionalColumns <- c("Passengers", "DriveTrain", "Cylinders", "EngineSize")

data <- MASS::Cars93[1:5, c("Manufacturer", "Model", "Type", "Price", additionalColumns)]

browsable(shiny::fluidRow(
  shiny::column(
    3,
    tags$fieldset(
      tags$legend("Show columns"),
      lapply(additionalColumns, function(name) {
        div(
          tags$label(
            tags$input(
              type = "checkbox",
              onclick = sprintf("Reactable.toggleHideColumn('cars-vis-table', '%s', !event.target.checked)", name)
            ),
            name
          )
        )
      })
    )
  ),
  shiny::column(
    9,
    reactable(
      data,
      columns = list(
        Passengers = colDef(show = FALSE),
        DriveTrain = colDef(show = FALSE),
        Cylinders = colDef(show = FALSE),
        EngineSize = colDef(show = FALSE)
      ),
      elementId = "cars-vis-table"
    )
  )
))