How can I fix the position of the header of data.table in shiny-app

Question

Let say I have below app -

library(shiny)
library(DT)
library(dplyr)

ui <- fluidPage(
  div(style = "height: 300px; width: 100%; overflow-y: scroll;", DTOutput("aaa", height = '400px'))
)

server <- function(input, output) {
  output$aaa = 
            DT::renderDT({
            df = 
            structure(list(Col__1 = c("A", "A", "A", "A", "B", "C", "C", 
"D", "G", "G", "H", "H", "J", "K", "K", "M", "M", "M", "M", "M", 
"O", "P", "P", "R", "T", "T", "T", "U", "U", "W"), Col__2 = c(1234, 
1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 
1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 
1234, 1234, 1234, 1234, 1234, 1234, 1234), Col__3 = c(1234, 1234, 
1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 
1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 
1234, 1234, 1234, 1234, 1234, 1234), Col__4 = c(NA, 36, NA, 1, 
4, 1, NA, 65, NA, 396, 7, 2, 3, 29, 4, 185, 651, NA, 1, NA, 2, 
NA, 27, 92, 35, 29, NA, 60, 1, 144), Col__5 = c(NA, 1012, NA, 
12, 350, 98, NA, 3925, NA, 4729, 327, 5, 87, 310, 30, 1854, 13013, 
NA, 1, NA, 122, NA, 1354, 1629, 3278, 450, NA, 1808, 21, 948), 
    Col__6 = c(1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 
    1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 
    1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 
    1234, 1234), Col__7 = c(1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 
    1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1), 
    Col__8 = c(2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 
    2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2), Col__9 = c("-", 
    " 36 (2%)", "-", "  1 (2%)", "  4 (1%)", "  1 (1%)", "-", 
    " 65 (1%)", "-", "396 (6%)", "  7 (1%)", "  2 (4%)", "  3 (2%)", 
    " 29 (4%)", "  4 (1%)", "185 (6%)", "651 (4%)", "-", "  1 (8%)", 
    "-", "  2 (1%)", "-", " 27 (2%)", " 92 (3%)", " 35 (1%)", 
    " 29 (3%)", "-", " 60 (2%)", "  1 (2%)", "144 (10%)"), Col__10 = c(2.5, 
    2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 
    2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 
    2.5, 2.5, 2.5, 2.5, 2.5)), row.names = c(NA, -30L), class = "data.frame")

{  ### Few Important Definitions
                    Render3 = JS(
                                "function(data, type, row, meta){",
                                "  if(type === 'sort' || type === 'type'){",
                                "    return row[4];",
                                "  } else {",
                                "    return data;",
                                "  }",
                                "}"
                            )
                }

datatable(df, 
          callback = JS("$('table.dataTable.no-footer').css('border-bottom', '1px solid #b7b7b7');"),
          options = list(pageLength = dim(df)[1], bLengthChange = FALSE, autoWidth = FALSE, bInfo = FALSE, searching = FALSE, info = FALSE, bPaginate = FALSE,
                          order = list(list(7, 'desc')),
                          columnDefs = 
                              list(
                                  list(width = '40%', targets = 1, className = 'dt-center dt-center1'), 

                                  list(width = '0%', targets = 2, className = 'dt-center dt-center1', visible = FALSE),
                                  list(width = '0%', targets = 3, className = 'dt-center dt-center1', visible = FALSE),
                                  list(width = '0%', targets = 4, className = 'dt-center dt-center1', visible = FALSE),
                                  list(width = '0%', targets = 5, className = 'dt-center dt-center1', visible = FALSE),
                                  list(width = '0%', targets = 6, className = 'dt-center dt-center1', visible = FALSE),


                                  list(width = '15%', targets = 9,  className = 'dt-center dt-center1', visible = TRUE, render = Render3),


                                  list(targets = 0, visible = FALSE)
                              ))) 
        })
}
shinyApp(ui, server)

As you see, if I scroll down of the container div, then I am losing the view of the header of the data.table. Is there any way to fix the position of the header in the current position?

Any pointer will be highly helpful.

Update after answer from Stéphane Laurent

Updated app with FixedHeader

library(shiny)
library(DT)
library(dplyr)

ui <- fluidPage(
  tags$link(rel = "stylesheet", type = "text/css", href = "https://cdn.datatables.net/v/dt/dt-1.10.21/datatables.min.css"),
  tags$script(src='https://cdn.datatables.net/v/dt/dt-1.10.21/fh-3.1.7/datatables.min.js'),
  div(style = "height: 300px; width: 100%; overflow-y: scroll;", DTOutput("aaa", height = '400px'))
)

server <- function(input, output) {
  output$aaa = 
            DT::renderDT({
            df = 
            structure(list(Col__1 = c("A", "A", "A", "A", "B", "C", "C", 
"D", "G", "G", "H", "H", "J", "K", "K", "M", "M", "M", "M", "M", 
"O", "P", "P", "R", "T", "T", "T", "U", "U", "W"), Col__2 = c(1234, 
1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 
1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 
1234, 1234, 1234, 1234, 1234, 1234, 1234), Col__3 = c(1234, 1234, 
1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 
1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 
1234, 1234, 1234, 1234, 1234, 1234), Col__4 = c(NA, 36, NA, 1, 
4, 1, NA, 65, NA, 396, 7, 2, 3, 29, 4, 185, 651, NA, 1, NA, 2, 
NA, 27, 92, 35, 29, NA, 60, 1, 144), Col__5 = c(NA, 1012, NA, 
12, 350, 98, NA, 3925, NA, 4729, 327, 5, 87, 310, 30, 1854, 13013, 
NA, 1, NA, 122, NA, 1354, 1629, 3278, 450, NA, 1808, 21, 948), 
    Col__6 = c(1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 
    1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 
    1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 1234, 
    1234, 1234), Col__7 = c(1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 
    1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1), 
    Col__8 = c(2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 
    2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2), Col__9 = c("-", 
    " 36 (2%)", "-", "  1 (2%)", "  4 (1%)", "  1 (1%)", "-", 
    " 65 (1%)", "-", "396 (6%)", "  7 (1%)", "  2 (4%)", "  3 (2%)", 
    " 29 (4%)", "  4 (1%)", "185 (6%)", "651 (4%)", "-", "  1 (8%)", 
    "-", "  2 (1%)", "-", " 27 (2%)", " 92 (3%)", " 35 (1%)", 
    " 29 (3%)", "-", " 60 (2%)", "  1 (2%)", "144 (10%)"), Col__10 = c(2.5, 
    2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 
    2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 2.5, 
    2.5, 2.5, 2.5, 2.5, 2.5)), row.names = c(NA, -30L), class = "data.frame")

{  ### Few Important Definitions
                    Render3 = JS(
                                "function(data, type, row, meta){",
                                "  if(type === 'sort' || type === 'type'){",
                                "    return row[4];",
                                "  } else {",
                                "    return data;",
                                "  }",
                                "}"
                            )
                }

datatable(df, extensions = "FixedHeader", 
          callback = JS("$('table.dataTable.no-footer').css('border-bottom', '1px solid #b7b7b7');"),
          options = list(fixedHeader = TRUE,pageLength = dim(df)[1], bLengthChange = FALSE, autoWidth = FALSE, bInfo = FALSE, searching = FALSE, info = FALSE, bPaginate = FALSE,
                          order = list(list(7, 'desc')),
                          columnDefs = 
                              list(
                                  list(width = '40%', targets = 1, className = 'dt-center dt-center1'), 

                                  list(width = '0%', targets = 2, className = 'dt-center dt-center1', visible = FALSE),
                                  list(width = '0%', targets = 3, className = 'dt-center dt-center1', visible = FALSE),
                                  list(width = '0%', targets = 4, className = 'dt-center dt-center1', visible = FALSE),
                                  list(width = '0%', targets = 5, className = 'dt-center dt-center1', visible = FALSE),
                                  list(width = '0%', targets = 6, className = 'dt-center dt-center1', visible = FALSE),


                                  list(width = '15%', targets = 9,  className = 'dt-center dt-center1', visible = TRUE, render = Render3),


                                  list(targets = 0, visible = FALSE)
                              ))) 
        })
}
shinyApp(ui, server)

I still dont see the header remained at fixed position under the current setup. However if I remove the styling overflow-y: scroll then it is working. Is there any workaround?

score 1 · Answer 1 · answered May 11 '20 at 17:27

1

Does the FixedHeader extension suits your need?

library(DT)

datatable(iris, extensions = "FixedHeader", 
          options = list(
            fixedHeader = TRUE
          )
)

answered May 11 '20 at 17:27

Stéphane Laurent

75,186
15
119
225

I have used the library 'FixedHeader' but still dont see any change. However if I remove the styling overflow-y: scroll then it is working. Updated my original post with this finding. Is there any workaround? – Bogaso May 11 '20 at 19:19

How can I fix the position of the header of data.table in shiny-app

1 Answers1