CODEWITHSUNDEEP
cssrdatatablesdt
Student
Student

Reputation: 23

header direction in shiny data table

I've been using DT in my shiny apps for a while. I'm wondering if there is any option (easy way) to change a table header direction when the text is long (like rotate all colnames by 45 degree or something), This is a problem when you have many columns in a table. Thanks, Here is a short example:

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)

Upvotes: 2

Views: 2121

Answers (2)

Graeme Diack
Graeme Diack

Reputation: 83

I had the same question as OP but didn't want to use accepted answer as I wanted to minimise code as much as possible in my use case (and I didn't understand how it worked!) Using the answer by Stéphane Laurent plus some information from here and here I was able to use this method to rotate my headers from columns 2 onwards:

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) applies the css to all columns greater than 0, so not the first column, see here.

The CSS can also be packed away in a source .css file and you can replace .css(...) with .addClass('your-new'class') which makes it even neater.

I'm not sure if my approach can do everything that Stephane's can do, but it works for me and I think covers the original Q.

Upvotes: 0

St&#233;phane Laurent
St&#233;phane Laurent

Reputation: 84519

Here is a way to rotate the headers by 90 degrees.

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

Upvotes: 5

Related Questions