如何在 Shiny 中将数据表列 headers 左对齐？

Question

出于某种原因，我无法让数据表的第 headers 列正确左对齐：

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 我们可以访问 table header.
使用 #mytable1 .table td 我们可以访问 table-cells。

在 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)

如何在 Shiny 中将数据表列 headers 左对齐？

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

r

shiny

dt

leftalign