renderTable rotate.colnames

Will · January 3, 2019, 9:24pm

I've created a web app that displays a table of summarized data. To save space, I'd like to rotate the column names 90 degrees, but when I set:

rotate.colnames = getOption("xtable.rotate.colnames", TRUE)

in renderTable, the column names are not rotated, but literally become:

\begin{sideways} col1 \end{sideways}

I found this question but I'm not clear on how to adapt the answer to my situation (the example discusses ui.r and server.r, but in my code these are objects, not separate files).

Thanks for any help.

barret · January 4, 2019, 4:18pm

When making your xtable, make sure to include type = "html". I believe the default is latex and the \begin \end tags seems to say that.

If this does not solve your issue, please post little code as necessary to reproduce your issue, so that I can dig further into it on my end.

- Barret

Will · January 8, 2019, 7:51pm

Where would the xtable be made? I've added type = "html" to the respective renderTable call, but I get the same output. Was that correct?

I'll try to create a toy example that represents what I'm doing shortly. Thanks for your help.

Will · January 8, 2019, 8:03pm

I just tweaked the demo app to display a table of the faithful data and used that to recreate my code:

library(shiny)

ui <- fluidPage(
  
  titlePanel("Old Faithful Geyser Data"),
  
  sidebarLayout(
    sidebarPanel(
      sliderInput("bins",
                  "Number of bins:",
                  min = 1,
                  max = 50,
                  value = 30)
    ),
    
    mainPanel(
      tableOutput("faithful_data")
    )
  )
)

server <- function(input, output) {
  
  output$faithful_data <- renderTable({
    faithful
  },
type = "html",
rotate.colnames = getOption("xtable.rotate.colnames", TRUE)
  )
}

shinyApp(ui = ui, server = server)

That produces the same issue with the column names, e.g., \begin{sideways} eruptions \end{sideways}.

Will · January 8, 2019, 8:21pm

I also tried again to adapt the solution provided in the StackOverflow link from above with the toy example, but it still creates the same borked column names:

library(shiny)

ui <- fluidPage(
  
  titlePanel("Old Faithful Geyser Data"),
  
  sidebarLayout(
    sidebarPanel(
      sliderInput("bins",
                  "Number of bins:",
                  min = 1,
                  max = 50,
                  value = 30)
    ),
    
    mainPanel(
      tags$head(tags$style(HTML('#faithful_data {border-collapse; }
                      #faithful_data table th { transform: rotate(-45deg)}'))),
        column(6,tableOutput("faithful_data"))
      )
    )
  )


server <- function(input, output) {
  
  output$faithful_data <- renderTable({
    faithful
  },type = "html",
  rotate.colnames = getOption("xtable.rotate.colnames", TRUE)
  )
}

shinyApp(ui = ui, server = server)

This code, aiming to use the SO example more directly, produces normally formatted headers (no rotation, and no ancillary formatting text):

library(shiny)

ui <- fluidPage(
    tags$head(tags$style(HTML('#faithful_data {border-collapse; }
                      #faithful_data table th { transform: rotate(-45deg)}'))),
    column(6,tableOutput("faithful_data"))
    )

server <- function(input, output) {
  
  output$faithful_data <- renderTable({faithful}, type = 'html')
}

shinyApp(ui = ui, server = server)

lemairev · January 8, 2019, 9:51pm

hi

following your example and the post on SO it works for me but it's rotating only when opening in the browser (not in the viewer)! It tooks me a lot of time to figure out but it's written here as well, not supported on every browser: https://css-tricks.com/rotated-table-column-headers/

library(shiny)

ui <- fluidPage(
  tags$head(tags$style(HTML('#faith table {border-collapse:collapse; } 
                             #faith table th {transform: rotate(315deg)}'))),
  
  titlePanel("Old Faithful Geyser Data"),
  tableOutput("faith")
)

server <- function(input, output, session) {
  
  output$faith <- renderTable({
    faithful
  }, type = "html")
}

shinyApp(ui = ui, server = server)

cheers

Will · January 9, 2019, 5:01pm

Okay, I think that answers a big question I had about how code in ui.R compares to code in the ui object/argument in the shinyApp function: Lines in ui.R can be mostly treated as arguments in the fluidPage function.

Am I getting that right?

Back to the task at hand, that code does work for me to rotate the column titles (also only in the browser), and I was able to adapt it into my current project.

However, the output now looks like this:

ABG%20appshot

I'm not terribly familiar with html and know nothing about css. Is there a way to adjust the positions of the column headers and the height of the header row?

Thanks so much for all the help so far!

lemairev · January 9, 2019, 5:31pm

hi,

good that you can adapt it to your problem!

not sure to understand what you mean by "can mostly been treated as arguments" (it may come from my poor english!

to customize a little bit more i guess you have to play with the css, following the previous link you can try these lines:

  tags$head(tags$style(HTML('#faith table {border-collapse:collapse; } 
                             #faith table th {
                               height: 100px;
                               transform: 
                                 translate(10px, -5px)
                                 rotate(315deg);
                             }')))

height: to set the height of the table-header (th) so that it doesn't overlap
translate allow you to shift following x, y axis
rotate: you already know it

you can play a little bit with that to adjust it as you wish! Maybe @barret could provide a better solution!
cheers

Will · January 9, 2019, 6:00pm

Holy cow! THANK YOU!!!

That is quite possibly the best, cleanest explanation I've ever gotten from an internet forum.

is there a similar approach for defining the table's column widths?

lemairev · January 9, 2019, 6:30pm

ahah thank you but i wouldn't say that!

anyway, you can find all the property of the table here! and you can test it and see the effect directly!

good luck to find the combination that suits you the best!

Will · January 9, 2019, 6:45pm

Unfortunately, that site gives seems to give the same answer as every other site: It gives an example of setting the width of the the entire table, but I need to control the width of each column.

This page Addresses how to fix the width of the columns, but it only defines a single width. Further, when I modify the code above to include:

 tags$head(tags$style(HTML('#faith table {
                        border-collapse:collapse; 
                        column_width: 100px;
                        } )))

Nothing changes. I've tried widths of 10px, 50px, 100px, and 500px, and nothing changes in the output either in the preview or the browser.

Replies to this question are best placed here: Controlling renderTable column width