Search does not work for hidden columns

[shahreyar-abeer]

Searching does not include columns with colDef(show = FALSE)

library(reactable)
library(magrittr)

iris %>%
  reactable::reactable(searchable = TRUE, columns = list(Species = colDef(show = T)))

Yields the following:

And

library(reactable)
library(magrittr)

iris %>%
  reactable::reactable(searchable = TRUE, columns = list(Species = colDef(show = F)))

Yields:

[daeyoonlee]

I think it is correct that invisible columns are not searched. Allowing this can confuse users.

[shahreyar-abeer]

I understand that this may not be standard, I'm looking for a way to implement this actually.

[lukr90]

one workaround would be to render empty cells:

    iris %>% reactable(searchable = TRUE, 
                       columns = list(Species = colDef(name = "", sortable = F, cell = function(){""})))

[glin]

Hi, this is intentional and won't be changed, but I get that it can be useful in some cases. I implemented some custom filters that work on hidden columns in the Popular Movies demo. It uses Crosstalk to do the custom filtering completely outside reactable. There's no specific example of a search field that works on hidden columns, but there are similar filters that could be used as a starting point.

Besides Crosstalk, the Reactable.setFilter() method in the new JavaScript API could be used to filter a hidden column:

library(reactable)
library(magrittr)

htmltools::browsable(
  tagList(
    div(
      style = "margin-bottom: 12px",
      tags$input(
        type = "text",
        placeholder = "Search by species",
        style = "padding: 4px 8px; width: 100%",
        oninput = "Reactable.setFilter('iris-table', 'Species', this.value)"
      )
    ),
    
    iris %>%
      reactable::reactable(
        columns = list(Species = colDef(show = F)),
        elementId = "iris-table"
      )
  )
)

The drawback is that it only filters a single column, however.

If there's enough demand for searching to work on hidden columns, it could possibly be added to reactable as a toggleable option (maybe in the JavaScript API). But I'm not a huge fan of enabling it by default because of the UX issues. If a search filter applies to a hidden column, I think that information should be visible somewhere in the table, like the genre column in the Popular Movies example.

[shahreyar-abeer]

Thanks a lot for your comment!
This should work for now I guess.

[glin]

If there's enough demand for searching to work on hidden columns, it could possibly be added to reactable as a toggleable option

Following up on this, it's now possible to enable searching on hidden columns using a new colDef(searchable = TRUE) argument in the dev version (ab5b55b). The main reason for adding the searchable arg was to disable searching on certain columns, but it was a natural extension to also have it enable searching on hidden columns.

• colDef() gains a searchable argument to enable or disable global table searching. Columns can be excluded from searching using colDef(searchable = FALSE), and hidden columns can be included in searching using colDef(searchable = TRUE) (#217).

Here's an example of this:

library(reactable)

reactable(
  iris,
  searchable = TRUE,
  columns = list(Species = colDef(show = FALSE, searchable = TRUE))
)