Change the width of a formattable table in Shiny - r

Question

I have the following Shiny Application:
library(shiny)
list1 <- c(0.2,0.8,0.5)
list2 <- c("element1", "element2", "element3")
df <- data.frame(list1, list2)
UI <- fluidPage(
formattableOutput("table1")
)
Server <- function(input, output) {
output$table1 <- renderFormattable({
formattable(df, list(
list1 = color_tile("green", "red")
))
})
}
shinyApp(ui = UI, server = Server)
This works fine. However, I am looking for a way to set the column widths. I might be overlooking it in the documentation but I cant find a way to adjust the widths.
Any feedback on how I should change it?

Answer 1

Shiny renders it's code into HTML, so you can actually use CSS to adjust any aesthetic you'd like to change post render. Here's an easy fix using CSS.
First create a directory, www in the app directory, and create a file called styles.css which will serve as your CSS file. Add the following lines to styles.css:
table {
width: 400px !important;
}
This adjusts the width of all tables displayed in your app to be 400px, you can change this value as needed. Next, add includeCSS("www/styles.css") to the UI portion of your app like so:
library(shiny)
list1 <- c(0.2,0.8,0.5)
list2 <- c("element1", "element2", "element3")
df <- data.frame(list1, list2)
UI <- fluidPage(
includeCSS("www/styles.css"),
formattableOutput("table1")
)
Server <- function(input, output) {
output$table1 <- renderFormattable({
formattable(df, list(
list1 = color_tile("green", "red")
))
})
}
shinyApp(ui = UI, server = Server)
This will let Shiny know to use the CSS in the file we just created when rendering the page.