How to solve shiny mis-alignment issue in datatable?

问题

I am trying to

make all columns in the datatable the same width
align the datatable (both header and its content) to the left
enable horizontal scrolling once it reaches mainPanel width

but my datatable gets automatically centered to the mainPanel, its header and content are also misaligned.

Example:

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

ui <- fluidPage(

   titlePanel("Test Example"), 

   mainPanel(
     width = 10, 
     dataTableOutput("cars.table")
   )
)

server <- function(input, output) {
   output$cars.table <- renderDataTable({
      t(cars[1:10, ]) %>% 
       datatable(class = "compact small", 
                 options = list(columnDefs = list(list(width = "25px", targets = "_all")), scrollX = TRUE, autoWidth = TRUE, 
                                paging = FALSE, ordering = FALSE, searching = FALSE))
   })
}

shinyApp(ui = ui, server = server)

Update 2019/05/03:

I believe this question states that such issue was caused by autoWidth = TRUE, but there is no solution under the question, and if we want to adjust column width, we can't delete autoWidth = TRUE as well.

回答1:

For alignment you can use className = dt-left.

And I guess the argument `fillContainer = T' does the job for scrolling.

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

ui <- fluidPage(

  titlePanel("Test Example"), 

  mainPanel(
    width = 10, 
    dataTableOutput("cars.table")
  )
)

server <- function(input, output) {
  output$cars.table <- renderDataTable({
    t(cars[1:10, ]) %>% 
      datatable(class = "compact small", fillContainer = T, 
                options = list(columnDefs = list(list(className = 'dt-left', width = "25px", targets = "_all")), scrollX = TRUE, 
                               paging = FALSE, ordering = FALSE, searching = FALSE))
  })
}

shinyApp(ui = ui, server = server)

来源：https://stackoverflow.com/questions/55974761/how-to-solve-shiny-mis-alignment-issue-in-datatable

标签

jquery

css

datatable

Shiny