rshinydtleftalign

How can I align datatable column headers to the left in Shiny?


For some reason I cannot have column headers of a datatable properly aligned left:

library(shiny)
library(DT)
library(ggplot2)

ui <- fluidPage(
  title = "Examples of DataTables",
  sidebarLayout(mainPanel = 
                  mainPanel(
                    tabsetPanel(
                      id = 'dataset',
                      tabPanel("diamonds", DT::dataTableOutput("mytable1"))
                    )
                  ),sidebarPanel = sidebarPanel()
  )
)

server <- function(input, output) {

  # choose columns to display
  diamonds2 = ggplot2::diamonds[sample(nrow(ggplot2::diamonds), 1000), ]
  output$mytable1 <- DT::renderDataTable({
    DT::datatable(diamonds2,
                  extensions = c('Buttons', 
                                 #'Autofill', 
                                 'ColReorder',
                                 'Responsive',
                                 'Scroller'),
                  style = 'bootstrap',
                  class = 'table-bordered stripe table-condensed',
                  filter = list(position = 'top', clear = FALSE),
                  rownames = FALSE,
                  options = list( dom = 'Bfrtip',
                                  buttons = list(list(extend = 'csv',
                                                      buttons = c('csv'),
                                                      exportOptions = list(modifiers = list(page = "current"))
                                                      )
                                                 ),
                                  search = list(regex = TRUE, caseInsensitive = FALSE),
                                  #autofill = TRUE,
                                  colReorder = TRUE,
                                  deferRender = TRUE,
                                  scrollY = 200,
                                  scroller = TRUE,
                                  columnDefs = list(list(className = 'dt-left', targets = '_all'))
                                  )
                  )
  })

}

shinyApp(ui, server)

See by yourself enter image description here


Solution

  • This should do it.

    With #mytable1 .table th we can access the table header.
    With #mytable1 .table td we can access the table-cells.

    With text-align: left; we align the text to the left.

    library(shiny)
    library(shinyjs)
    library(DT)
    library(ggplot2)
    
    ui <- fluidPage(
      title = "Examples of DataTables",
    
      ## CSS-Code ###############
      inlineCSS("
                #mytable1 .table th {
                 text-align: left;
                }
    
                #mytable1 .table td {
                 text-align: left;
                }
                "
      ),
       #####################
      sidebarLayout(mainPanel = 
                      mainPanel(
                        tabsetPanel(
                          id = 'dataset',
                          tabPanel("diamonds", DT::dataTableOutput("mytable1"))
                        )
                      ),sidebarPanel = sidebarPanel()
      )
    )
    
    server <- function(input, output) {
    
      # choose columns to display
      diamonds2 = ggplot2::diamonds[sample(nrow(ggplot2::diamonds), 1000), ]
      output$mytable1 <- DT::renderDataTable({
        DT::datatable(diamonds2,
                      extensions = c('Buttons', 
                                     #'Autofill', 
                                     'ColReorder',
                                     'Responsive',
                                     'Scroller'),
                      style = 'bootstrap',
                      class = 'table-bordered stripe table-condensed',
                      filter = list(position = 'top', clear = FALSE),
                      rownames = FALSE,
                      options = list( dom = 'Bfrtip',
                                      buttons = list(list(extend = 'csv',
                                                          buttons = c('csv'),
                                                          exportOptions = list(modifiers = list(page = "current"))
                                      )
                                      ),
                                      search = list(regex = TRUE, caseInsensitive = FALSE),
                                      #autofill = TRUE,
                                      colReorder = TRUE,
                                      deferRender = TRUE,
                                      scrollY = 200,
                                      scroller = TRUE,
                                      columnDefs = list(list(className = 'dt-left', targets = '_all'))
                      )
        )
      })
    
    }
    
    shinyApp(ui, server)