DT SearchPanes Custom Filter

Question

I'm trying to do something like is seen here, but I'm having trouble figuring out how to do it in Shiny. As an example, it would be great to have a filter for mtcars of "efficient" (cars with at least 15 mpg) or "inefficient" (cars with less than 15 mpg).

Here is some code:

library(shiny)
library(DT)

ui <- shinyUI(
  fluidPage(DT::dataTableOutput("mtcars_table"))
)

server <- shinyServer(function(input, output, session) {
  output$mtcars_table <- 
    DT::renderDT({
      DT::datatable(
        mtcars,
        options = list(dom = 'Pfrtip', 
                       columnDefs = list(
                         list(
                           searchPanes = list(show = TRUE), targets = 1
                         ),
                         list(
                           searchPanes = list(show = FALSE), targets = 2:11
                         ))),
        extensions = c('Select', 'SearchPanes'),
        selection = 'none'
      )
      
    }, server = FALSE)
})

shinyApp(ui = ui, server = server)

Ben · Accepted Answer · 2020-11-21T00:07:41.020

1

Here is something to try based on the DataTables example with custom filtering options.

For the additional list options, I included a label like "Efficient", as well as a javascript function for value (rowData[1] should reference the first column, mpg).

library(shiny)
library(DT)

ui <- shinyUI(
  fluidPage(DT::dataTableOutput("mtcars_table"))
)

server <- shinyServer(function(input, output, session) {
  output$mtcars_table <- 
    DT::renderDT({
      DT::datatable(
        mtcars,
        options = list(
          dom = 'Pfrtip', 
          columnDefs = list(
            list(
              searchPanes = list(
                show = TRUE,
                options = list(
                  list(
                    label = "Efficient",
                    value = JS(
                      "function(rowData, rowIdx) { return rowData[1] >= 15; }"
                    )
                  ),
                  list(
                    label = "Inefficient",
                    value = JS(
                      "function(rowData, rowIdx) { return rowData[1] < 15; }"
                    )
                  )
                )
              ),
              targets = 1
            ),
            list(
              searchPanes = list(show = FALSE), targets = 2:11
            )
          )
        ),
        extensions = c('Select', 'SearchPanes'),
        selection = 'none'
      )
    }, server = FALSE)
})

shinyApp(ui = ui, server = server)

edited Nov 21 '20 at 00:07

answered Nov 20 '20 at 22:21

Ben

28,684
5
23
45

I like this example thank you. Would you happen to know how to control the height of the searchPane? Mine is so big and it forces the DT to be small! Thanks - JJ – kraggle May 13 '22 at 20:05
1

@user2863275 Try adding some custom css in the `ui` for example: `ui <- fluidPage(tags$style(HTML('div.dtsp-searchPane div.dataTables_scrollBody {height: 80px !important;}')), mainPanel(DT::dataTableOutput('mtcars_table')))` – Ben May 13 '22 at 23:54
That did the trick. I had thought of using the same tags after reading this https://datatables.net/forums/discussion/67406/searchpanes-height if you look at the last post on the page. I guess I don't understand when to use tags$style(HTML()) and DT::JS() because I thought it needed some special DT::JS() to implement those commands on the searchPane(). Any good references to learn how to implement these styles? – kraggle May 14 '22 at 11:40
1

I did see that entry too on the forum which was helpful. For inline use of css in shiny apps see [this](https://shiny.rstudio.com/articles/css.html) or [this](https://unleash-shiny.rinterface.com/beautify-css.html) or maybe [this](https://www.r-bloggers.com/2019/08/how-to-use-css-to-style-your-r-shiny-projects/)...hope they may be helpful and good luck! – Ben May 14 '22 at 11:58
1

Good sources! But much simpler than accessing DT elements. Will have to work on the interpretation and usage. Thank you – kraggle May 14 '22 at 17:51

DT SearchPanes Custom Filter

1 Answers1

Linked