我在我的闪亮应用程序中使用 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)
这里有一种将标题旋转 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)
我有与OP相同的问题,但不想使用接受的答案,因为我想在我的用例中尽可能地减少代码(而且我不明白它是如何工作的!) 使用 Stéphane Laurent 的答案以及来自here和here的一些信息,我可以使用此方法从第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) {",
"$('#scenario_param_compare thead tr th:gt(0)').css({'writing-mode':'vertical-rl','text-align':'right'})",
"}")
))
})
}
shinyApp(ui, server)
gt(0)
将 css 应用到所有大于 0 的列,因此不是第一列,请参阅 here。
CSS 也可以打包在源 .css 文件中,您可以将
.css(...)
替换为 .addClass('your-new'class')
,这会使其更加整洁。
我不确定我的方法是否可以做斯蒂芬能做的一切,但它对我有用,我认为涵盖了最初的问题。