1

In my shiny app I'm creating a datatable using the DT package. I have column filters enabled, however, I want to hide the row of filter boxes. I have separate shiny widgets outside of the datatable which will act as the filters and pass them to the datatable through the searchCols option. Disabling column filters would hide the row of filter boxes but then the searchCols option doesn't work.

When I run the app and inspect the elements, I see that the row I want to delete is called < tr role="row">...< /tr>. If I right click it and click "Delete element", the row disappears and the datatable looks like I want it to, with the outside filters working as intended. I can also accomplish that by adding "display:none" to the element.style css. My question is how do I tell the app to delete this row when the datatable is rendered?

I'm not sure what kind of reproducible code I could provide, but here are some screenshots to make it clearer what I want to do.

I want to remove all the filter boxes and the row they are in so that the data is right below the column headers, as if filters were not enabled. enter image description here

If I inspect the app and delete the highlighted element or add "display:none", the row gets hidden. How can I make this happen automatically when the datatable is rendered? enter image description here

mosk915
  • 696
  • 1
  • 7
  • 16
  • I do not understand, adding `display:none` does not work as you wish? – kluu Jul 01 '18 at 14:05
  • It does work when I put it in manually when inspecting the element after running the app. What I don't know how to do is make it so that that the css is there when the datatable is rendered, since modifying the element by inspecting it is obviously not a permanent solution. – mosk915 Jul 01 '18 at 15:28

1 Answers1

1

I don't know if this will work with your widgets, but you can try this to set the display property in the styling sheet, using an id selector and a child selector:

library(shiny)
library(DT)

ui <- fluidPage(
  tags$style("#mydatatable thead > tr:nth-child(2) {display:none;}"),
  mainPanel(
    dataTableOutput("mydatatable")
  )
)

server <- function(input, output) {

  output$mydatatable <- DT::renderDataTable(
    datatable(iris, filter = 'top', options = list(
              pageLength = 5, autoWidth = TRUE)
    )
  )

}

shinyApp(ui = ui, server = server)
kluu
  • 2,848
  • 3
  • 15
  • 35
  • As I'm working with it more, I noticed that this also has the effect of hiding the second row of data in the table. Is there a way to specify that it should just apply to the second row of the tag, but not the tag? – mosk915 Jul 01 '18 at 22:44
  • Yes u're right, I didn't see that! I updated my answer accordingly. – kluu Jul 01 '18 at 22:52
  • Actually I figured it out. It didn't like the ">" symbol so I needed to wrap everything in the style div in the HTML function. – mosk915 Jul 01 '18 at 23:39