Freeze Header and Footer in Datatable - shiny

Question

I want to freeze header and footer of the datatable in shiny app. I have researched and found this link https://datatables.net/examples/basic_init/scroll_xy.html . But when i include the script from above link, the datatable is not getting freezed. Please help me solve this issue.

library(shiny)
library(shinydashboard)

ui <- dashboardPage(skin = "black",
                    dashboardHeader(title = "test"),
                    dashboardSidebar(
                      sidebarMenu(
                        menuItem("Complete", tabName = "comp"))),
                    dashboardBody(useShinyjs(),
                      tabItems(
                        tabItem(tabName = "comp",
                                  fluidRow(
                                    box(title = "data", width = 12, solidHeader = TRUE, status = "primary", 
                                        collapsible = TRUE, dataTableOutput("tbe")))))))

server <- function(input, output, session) { 

  output$tbe <- renderDataTable(mtcars)

  observe({
    runjs("
          $(document).ready(function() {
          $('#DataTables_Table_0').DataTable( {
          \"scrollY\": 200,
          \"scrollX\": true
          } );
          } );

          ")

          })

}
shinyApp(ui, server)

Thanks, SJB.

Answer 1

There is no need to include the jquery, instead use the options argument:

• scrollX: a boolean (TRUE or FALSE)
• scrollY: the number of pixels or any other valid CSS units.

Code:

output$tbe <- renderDataTable(mtcars, options = list(scrollX = TRUE, scrollY = "200px"))

Output: