R Shiny renderTable - how to change borders width and color
I probably have a simple question but since I'm not very familiar with CSS/htlm I'm having a hard time to figure out the following problem. In my ui I have the following simple table:
tableOutput("retail_dashboard_ratios_table")
in the server, I have this very simple code:
output$retail_dashboard_ratios_table <- renderTable({ #
df <- head(mtcars)
})
All I would need to do is to set the borders width and borders color (to blue). I'm obliged to use the R 3.4 version. Since I have a static tableOutput, I cannot (apparently) use solution mentioned in Add Cell Borders in an R Datatable because I cannot return a datatable object.
I also read R shiny renderTable change cell colors that has a very interesting solution, but given my R version, it seems library(tableHTML) is not compatible.
I wonder if anybody has a simple solution simply to fix the borders. Thanks
Thanks to @Patrick Altmeyer this is the final working solution!
source("global.R")
today <- as.character()
ui <- dashboardPage(
title = "Dashboard of the Municipal Market", # this is the name of the tab in Chrome browserr
dashboardHeader(title = "Web Portal"),
dashboardSidebar(
sidebarMenu(
menuItem('Retail', tabName = "retail", icon = icon("th"),
menuItem('Dashboard', tabName = 'retail_dashboard'))
)
),
dashboardBody(
tabItem(tabName = "retail_dashboard",
tabsetPanel(type = "tabs",
tabPanel("Dashboard",
h3("Test."),
tags$head(
tags$style(HTML("
.my_table_aa01 .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
border-collapse: collapse;
}
.my_table_aa01 th {
border: 1px solid black !important;
text-align: center !important;
vertical-align: middle !important;
color: white !important;
background-color: #615858 !important;
white-space: nowrap;
border-bottom: none}
.my_table_aa01 td {padding: 1rem;
border: 1px solid black;}
.my_table_aa01 tr:first-child {
border : 1px solid black;
border-top: 1px solid black;}
.my_table_aa01 tr:nth-child(even){
background-color: #afd19d;
color: black;
font-size:16px;}
.my_table_aa01 tr:nth-child(odd){
background-color: white;
color: black;
font-size:16px;
}
"))),
fluidRow(column(2,
actionButton(inputId = "retail_dashboard_load_data_btn", label = "Load / Refresh Data")),
column(2,
downloadButton("download_dashboard_data","Download Data"))),
fluidRow(
column(2,
dateInput("retail_dashboard_start_dt", label = ("Start Date"), value = glob_date_1yr_ago)),
column(2,
dateInput("retail_dashboard_end_dt", label = ("End Date"), value = glob_previous_to_most_recent_date_with_quant_model_regression_data))
),
br(),
fluidRow(column(6,
div(textOutput(outputId = "retail_dashboard_error_log")))),
br(),
fluidRow(column(3,
plotlyOutput(outputId = "retail_dashboard_plot1", width = '350', height = '350px')),
column(3,
offset = 0,
tags$div(
class="my_table_aa01", # set to custom class
tableOutput("retail_dashboard_ratios_table") )
)),
fluidRow(column(3,
tableOutput("retail_dashboard_table2")))
)
)
)
)
)
server <- function(input, output, session) {
source("Page_retail_dash.R", local=T)
}
cat("\nLaunching 'shinyApp' ....")
shinyApp(ui, server)
A more elegant solution would probably work with a style sheet, but if it's just one table you are trying to style you could simply add CSS to the HTML header as below. More info on this can be found here. I find that the tricky part is often to know what class to overwrite as in this case .table>tbody>tr>td, .... But a simple way to find what you're looking for is to inspect the HTML at runtime, e.g. in Google Chrome you would right-click + "Inspect" anywhere in the browser window (preferably close to the element you want to style). You can then edit the style in the browser at runtime to preview how your changes to the CSS would affect the appearance off your app. I'm not very familiar with CSS either, but this is approach usually gets me a long way.
Hope this helps!
shinyApp(
# --- User Interface --- #
ui = fluidPage(
# The below overwrites the default styling for the top border of table cells.
# I've changed the colour to blue from grey and the width to 3px from 1px.
tags$head(
tags$style(HTML("
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
padding: 8px;
line-height: 1.42857143;
vertical-align: top;
border-top: 3px solid blue;
}
"))
),
mainPanel(
tableOutput("retail_dashboard_ratios_table")
)
),
# --- Server logic --- #
server = function(input, output) {
output$retail_dashboard_ratios_table <- renderTable({ #
df <- head(mtcars)
})
}
)
Edit
In case you want to set the style for one table only, rather than all tables in you app, you need to create your own CSS class for it. You can provide a name four class rather easily by simply writing e.g .my_table or #my_table in front of the existing CSS code above. So to complete the above example, but now with individual styling:
shinyApp(
# --- User Interface --- #
ui = fluidPage(
# The below now creates a custum css class.
tags$head(
tags$style(HTML("
.my_table .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
padding: 8px;
line-height: 1.42857143;
vertical-align: top;
border-top: 3px solid blue;
}
"))
),
mainPanel(
h3("Custom style table:"),
tags$div(
class="my_table", # set to custom class
tableOutput("custom_table")
),
h3("Default style table:"),
tableOutput("default_table"), # No class assigned
h3("Another default style table:"),
tableOutput("another_default_table") # No class assigned
)
),
# --- Server logic --- #
server = function(input, output) {
output$custom_table <- renderTable({ #
df <- head(mtcars)
})
output$default_table <- renderTable({ #
df <- head(iris)
})
output$another_default_table <- renderTable({ #
df <- head(cars)
})
}
)
Below is the output the code produces:
- Determining as to whether the function call is stored in a variable
- How to increase resolution of ggplots without using ggsave in officer?
- How to apply a function within a for loop for a set of existing variables of a predifined structure in R?
- How to change the number of decimal places of the mean in a data frame
- Forestplot in R superscript in tabletext matrix
- Converting colnames from character to numeric when extracting them from a dataframe
- With different seeds can Random States repeat in R
- How to Stack Painted Phylogenetic Trees in R Like ggdensitree but with Colored Regimes
- How to import/rbind multiple files with different indexed columns?
- Pivot wider in R return list instead of data frame
- R workspace doesn't load anything in Visual Studio Code
- Search for multiple occurrences of substring within string
- Looking for faster way to implement logSumExp across multidimensional array
- How to get \bm{} to work in an R markdown (to HTML) file?
- Leaving a space in geom_bar with stat='bin', position='dodge' and zeroes
- Where are the 1st stage F statistics located in a "fixest" object?
- Collapsing data per family
- How to set default template for new ".R" files in rstudio
- Adding two-way fixed effects for zero inflated Poisson model
- How to Move R Code and Output to the Right in a Quarto PDF Document?
- What does runif() mean when used inside if_else()?
- Remove columns from dataframe where ALL values are NA
- How to pass unquoted argument to filter() within user defined function
- Optimizing the distribution of random integers across data frame rows
- R dplyr conditional join with "join_by" not working
- How to hide a reappearing hover label for a trace in R-Plotly within Shiny?
- Estimating non-monotonic bi-exponential curve fit
- Problem minimising a function using L-BFGS-B method in R?
- trying to obtain TRUE/FALSE response to the question "is argument name x valid for function y?"
- Retrieve whole lyrics from URL