如何在Shiny的左侧对齐数据表列标题？

Question

由于某种原因，我无法使数据表的列标题正确地向左对齐：

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)

亲自看

Answer 1

这应该做到。

使用#mytable1 .table th，我们可以访问表头。
使用#mytable1 .table td，我们可以访问表格单元。

使用text-align: 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)