闪亮数据表中的标题方向

header direction in shiny data table

提问人：Student 提问时间：6/26/2017 最后编辑：Stéphane LaurentStudent 更新时间：11/20/2023 访问量：1775

问：

我已经在我闪亮的应用程序中使用 DT 一段时间了。我想知道是否有任何选项（简单的方法）可以在文本较长时更改表标题方向（例如将所有列名旋转 45 度或其他东西），当您在表格中有很多列时，这是一个问题。 谢谢 下面是一个简短的示例：

library(shiny)
library(DT)
ui <- fluidPage(
  mainPanel(
    tabsetPanel(
      tabPanel("Table", br(),
               dataTableOutput("myTable"))
    ), width = 9
  )
)

server <- function(input, output) {
  output$myTable <- renderDataTable({
  test <- data.frame(1:20, letters[1:20], stringsAsFactors = FALSE)
  colnames(test) <- c("This is a long name", "This column name is much more longer!")
  datatable(test, rownames = FALSE, options = list(autoWidth = TRUE, searching = TRUE, lengthMenu = list(c(5, 10, 25, 50, -1), c('5', '10', '25', '50', 'All')), pageLength = 10)) # %>% formatStyle(names(test))
  })
}

shinyApp(ui, server)
CSS R 数据表 DT

评论

0赞 s.brunel 6/26/2017
嗨，Mayeb，您可以像这样在多行上断开名称 stackoverflow.com/questions/25157139/......
0赞 Student 6/30/2017
谢谢，但实际上我已经尝试过了，它不适合我的情况。首先，我无法控制它在哪里破坏了列名，其次，我需要列名是统一的，这种解决方案使它们令人不快。

答：

5赞 Stéphane Laurent 6/22/2019 #1

这是一种将标题旋转 90 度的方法。

library(DT)
library(shiny)

headerCallback <- c(
  "function(thead, data, start, end, display){",
  "  var $ths = $(thead).find('th');",
  "  $ths.css({'vertical-align': 'bottom', 'white-space': 'nowrap'});",
  "  var betterCells = [];",
  "  $ths.each(function(){",
  "    var cell = $(this);",
  "    var newDiv = $('<div>', {height: 'auto', width: cell.height()});",
  "    var newInnerDiv = $('<div>', {text: cell.text()});",
  "    newDiv.css({margin: 'auto'});",
  "    newInnerDiv.css({",
  "      transform: 'rotate(180deg)',",
  "      'writing-mode': 'tb-rl',",
  "      'white-space': 'nowrap'",
  "    });",
  "    newDiv.append(newInnerDiv);",
  "    betterCells.push(newDiv);",
  "  });",
  "  $ths.each(function(i){",
  "    $(this).html(betterCells[i]);",
  "  });",
  "}"
)

ui <- fluidPage(
  DTOutput("table")
)

server <- function(input, output){
  output[["table"]] <- renderDT({
    datatable(iris,  
              options = list(
                headerCallback = JS(headerCallback),
                columnDefs = list(
                  list(targets = "_all", className = "dt-center")
                )
              ))
  })
}

shinyApp(ui, server)

enter image description here

评论

2赞 user3022875 9/13/2019
Laurent：有没有办法只指定一些要旋转的列，而不是让它们全部旋转？
0赞 Graeme Diack 11/18/2023 #2

我有和 OP 相同的问题，但不想使用公认的答案，因为我想在我的用例中尽可能减少代码（我不明白它是如何工作的！ 使用 Stéphane Laurent 的答案以及来自此处和此处的一些信息，我能够使用此方法从第 2 列开始旋转标题：

library(DT)
library(shiny)

ui <- fluidPage(
  DTOutput("table")
)

server <- function(input, output){
  output[["table"]] <- renderDT({
    datatable(iris,  
              options = list(
              initComplete = JS(# JS to modify the table headers
                 "function(settings, json) {",
                 "$('#table thead tr th:gt(0)').css({'writing-mode':'vertical-rl','text-align':'right'})",
                 "}")
          ))
  })
}

shinyApp(ui, server)

gt(0)将 CSS 应用于所有大于 0 的列，因此不是第一列，请参阅此处。

CSS 也可以打包在源 .css 文件中，您可以将其替换，使其更加整洁。.css(...).addClass('your-new'class')

我不确定我的方法是否可以做斯蒂芬能做的所有事情，但它对我有用，我认为涵盖了最初的 Q。

上一个：Bootstrap 5 折叠式按钮中心对齐和换行

下一个：闪亮数据表中的标题方向