Cannot completely remove reactable column with CSS class

Question

I've created a table using reactable with Quarto Markdown in RStudio and I'm attempting to use a CSS class to remove one column (Twitter) when the screen width is 700px or less (mobile devices). I'm using "visibility: hidden" in my CSS to remove the column, however this is only removing the column contents and not the column header nor the column itself. I'm left with an empty column with the column title displayed. I need the column completely removed.

Here is my R code to create the table:

library(reactable)
library(crosstalk)
library(htmltools)

note_taking <- read.csv("data.csv")

tbl <- reactable(
  data,
  defaultPageSize = 15,
  showPageSizeOptions = TRUE,
  wrap = TRUE,
  defaultColDef = colDef(headerClass = "header",
  ),
  rowStyle = list(cursor = "pointer"),
  theme = reactableTheme(
      borderColor = "#e9f3fd",
      highlightColor = "rgba(233, 243, 253, .8)",
  ),
  columns = list(
    Twitter = colDef(html=TRUE, cell = function(value) {
        url <- paste0("https://twitter.com/", value)
        tags$a(href = url, target = "_blank", paste0("@", value))
      },
       class = "twitter-col", width = 150
    ),
))
tbl

Here is my CSS class:

@media only screen and (max-width: 700px) {
.twitter-col {
    visibility: hidden;
}}

I've tried changing the column width to 0 but it has no effect. Any help is appreciated.

Answer 1

Based on reactable docs. You can apply additional CSS classes to the header using headerClass. Add twitter-col-header class into Twitter column header. Then instead of using visibility: hidden, use the display: none instead on all the columns (including column header and column cells)

• Add headerClass = "twitter-col-header" to colDef function
• Add Css rule for both for the header and the cell columns

library(reactable)
library(crosstalk)
library(htmltools)

note_taking <- read.csv("data.csv")

tbl <- reactable(
  data,
  defaultPageSize = 15,
  showPageSizeOptions = TRUE,
  wrap = TRUE,
  defaultColDef = colDef(headerClass = "header",
  ),
  rowStyle = list(cursor = "pointer"),
  theme = reactableTheme(
      borderColor = "#e9f3fd",
      highlightColor = "rgba(233, 243, 253, .8)",
  ),
  columns = list(
    Twitter = colDef(html=TRUE, cell = function(value) {
        url <- paste0("https://twitter.com/", value)
        tags$a(href = url, target = "_blank", paste0("@", value))
      },
       class = "twitter-col", width = 150, 
       headerClass = "twitter-col-header"
    ),
))
tbl

    @media only screen and (max-width: 700px) {
      .twitter-col,
      .twitter-col-header {
        display: none;
      }
    }