Search code examples
rshinydt

R shiny datatable scrollX impacts table width

please I have the following example to show a layout issue I'm facing with my R shiny app. Example should be entirely reproducible:

ui <- dashboardPage(  
  title = "Dashboard test",  # this is the name of the tab in Chrome browserr
  dashboardHeader(title = "Web Portal"),
  
  dashboardSidebar(   
    sidebarMenu(

      menuItem('Retail', tabName = "retail", icon = icon("th"),
               menuItem('Dashboard', tabName = 'retail_dashboard'))
    )
  ),

  dashboardBody( 
      tabItem(tabName = "retail_dashboard",
              tabsetPanel(type = "tabs",
                          tabPanel("Dashboard",
                                   h3("Test."),
                                   
                                   fluidRow(column(3,
                                                   dataTableOutput("table_test1", width = '100%')),
                                            column(3,
                                                   dataTableOutput("table_test2", width = '100%'))
                                            )
                                     )
                                  )
              )
              )
)


server <- function(input, output, session) {    
  
  output$table_test1 <- renderDataTable({
    df <- data.frame(BUCKET=c("1","2"), ITEM=c(48,53), VALUE = c(7.88, 5.12), stringsAsFactors = F)
    datatable(df, 
              rownames= F,
              #colnames = colnames_var,
              filter = 'none',
              extensions = 'Buttons', 
              caption = NULL,
              options = list(scrollX = T
                             #, headerCallback = js_col_header   # this is to show/hide column headers
                             , lengthChange = T
                             #, pagingType = "numbers"  # this hides the Next and Previous buttons -->  https://datatables.net/reference/option/pagingType
                             , paging = T    # this completely hides  the Next, Previous and Page number at the bottom of the table
                             , autoWidth = T
                             , pageLength = 5 # this determines how many rows we want to see per page
                             , dom = 'Blfrtip'
                             , buttons = NULL
                             , info = T #  this will hide the "Showing 1 of 2..." at the bottom of the table -->  https://stackoverflow.com/questions/51730816/remove-showing-1-to-n-of-n-entries-shiny-dt
                             , searching = T  # this removes the search box  ->  https://stackoverflow.com/questions/35624413/remove-search-option-but-leave-search-columns-option
                             , ordering = F # https://stackoverflow.com/questions/54318475/hide-the-column-names-in-dtdatatable    useful especially when we want to hide column names
              ))
  })
  
  output$table_test2 <- renderDataTable({
    df <- data.frame(BUCKET=c("1","2"), ITEM=c(48,53), VALUE = c(7.88, 5.12), stringsAsFactors = F)
    datatable(df, 
              rownames= F,
              #colnames = colnames_var,
              filter = 'none',
              extensions = 'Buttons', 
              caption = NULL,
              options = list(scrollX = F
                             #, headerCallback = js_col_header   # this is to show/hide column headers
                             , lengthChange = T
                             #, pagingType = "numbers"  # this hides the Next and Previous buttons -->  https://datatables.net/reference/option/pagingType
                             , paging = T    # this completely hides  the Next, Previous and Page number at the bottom of the table
                             , autoWidth = T
                             , pageLength = 5 # this determines how many rows we want to see per page
                             , dom = 'Blfrtip'
                             , buttons = NULL
                             , info = T #  this will hide the "Showing 1 of 2..." at the bottom of the table -->  https://stackoverflow.com/questions/51730816/remove-showing-1-to-n-of-n-entries-shiny-dt
                             , searching = T  # this removes the search box  ->  https://stackoverflow.com/questions/35624413/remove-search-option-but-leave-search-columns-option
                             , ordering = F # https://stackoverflow.com/questions/54318475/hide-the-column-names-in-dtdatatable    useful especially when we want to hide column names
              ))
  })
}

cat("\nLaunching   'shinyApp' ....")
shinyApp(ui, server)

Problem 1: if I open this app on a large screen, table_test2 is nicely taking all the expected real estate of the screen, ranging entirely within 3 columns. However, table_test1 does not (see my screenshot). Main difference is that table_test1 has scrollX =T vs table_test2 that has scrollX =F. How can I keep scrollX = T and visualize table_test1 the same way I visualize table_test2 (meaning, with no empty side spaces)? (see red color in attached screenshot)

Problem 2: How come the alignment of table_test1 is a bit messed up and column names are not aligned to table columns? (see blue color in attached screenshot)

Changing scrollX is not an option since some users have a smaller screen and with scrollX =F tables would not show up properly on some users' monitors. Thanksenter image description here

Solution

  • Take out the autoWidth option from datatable

    datatable(
  data       = df,
  rownames   = FALSE,
  filter     = "none",
  extensions = "Buttons",
  caption    = NULL,
  options    = list(
    scrollX      = TRUE,
    lengthChange = TRUE,
    paging       = TRUE,
    pageLength   = 5,
    dom          = "Blfrtip",
    buttons      = NULL,
    info         = TRUE,
    searching    = TRUE,
    ordering     = FALSE 
  )
)