shiny reactable column header forced to foreground

[eikeschott]

Hi everyone, I'm trying to use reactable inside a shinydashboardPlus::box() Box, but when using the sidebar feature of shinydashboardPlus::box() the column header of reactable is drawn above the sidebar instead of below.

When using shiny::renderTable everything works as expected, which is why I'm opening this issue here and not over at shinydashboardPlus.

Here is an example that shows what I mean:

shiny::shinyApp(
  ui = shinydashboardPlus::dashboardPage(
    header = shinydashboardPlus::dashboardHeader(),
    body = shinydashboard::dashboardBody(
      shinydashboardPlus::box(
        title = "Box with sidebar", 
        width = 12,
        sidebar = shinydashboardPlus::boxSidebar(
          id = "mycardsidebar", 
          icon = shiny::icon("sliders-h"),
          width = 30,
          shiny::p("Sidebar Content"),
          shiny::br(),
          shiny::h4("New Headline"),
          shiny::p("Some more Text!")
        ),
        # shiny::tableOutput(outputId = "table")
        reactable::reactableOutput(outputId = "table")
      )
    ),
    sidebar = shinydashboardPlus::dashboardSidebar(collapsed = TRUE)
  ),
  server = function(input, output, session) {
    tab <- data.frame(x = 1:10, y = 1:10)
    # output$table <- shiny::renderTable(tab, width = "100%")
    output$table <- reactable::renderReactable(expr = reactable::reactable(data = tab))
  }
)

Clicking on the sliders at the box header will bring up the box sidebar.

Edit: Here is an image:

[glin]

This is a conflict in CSS between the two libraries, the z-index property in particular. reactable's table head uses a z-index of 2, while shinydashboardPlus's sidebar menu uses a z-index of 1 (lower, so shows behind the table head). This is tough because it's not really a bug, but more like an unintended interaction. The shinydashboardPlus box doesn't appear to have a way to customize the z-index at all, so the workaround would probably have to be in reactable.

You can add this CSS to your app as a temporary workaround:

.ReactTable .rt-thead {
    z-index: 1;
}

These are internal class names that aren't guaranteed to remain in the future, but I don't see a better way around this.

I'll double check whether reactable really needs the z-index of 2 on its table head or if it can be lowered to prevent conflicts.

I think most ideally, shinydashboardPlus could use a higher z-index on the sidebar to prevent conflicts with reactable and other libraries. Other UI libraries I've seen typically use a really high z-index like 1000+ for things that always show on top, like collapsible menus and tooltips.

[eikeschott]

Thanks, this works for now!