Направление заголовка в блестящей таблице данных

Question

Я давно пользуюсь 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)

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

Answer 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')что делает его еще аккуратнее.

Я не уверен, что мой подход может делать все то же, что и Стефан, но у меня он работает, и я думаю, что он охватывает исходный вопрос.