jamesthomson jamesthomson - 5 months ago 42
HTML Question

R tableHTML add_css text-align centre not working in Shiny

I'm trying to style a table in a Shiny app using the tableHTML package in R.

When I use the

tableHTML()
function in R it produces exactly what I want. I use the add_css_column to align the text in the column to the centre. However when I use it in a Shiny app the headers end up left aligned and the rows centre aligned. Any ideas how I can fix this?

output$viewers_website_top <- renderUI({
tableHTML(website_index, rownames = FALSE, widths=c(200,200)) %>%
add_css_column(css = list("text-align", "center"),
column_names = names(website_index))
})

Answer

This is a common issue with bootstrap 3 unfortunately. Whenever you use shiny it loads up a bootstrap 3 css (immediately) which makes it difficult to overwrite.

I have seen many cases where you cannot easily overwrite bootstrap's original css. For this particular case add_css_* will not work unfortunately, not even if you use !important i.e. add_css_column(css = list("text-align", "center !important"), column_names = names(website_index)).

The one thing you can do is to add a separate css file with shiny::includeCSS. There is more info here and here on how to use includeCSS.

In the css file you need to write:

.table_website_index {
  text-align: center;
}

And that should do it!

P.S. table_website_index is the class the package assigns to the table which you can also change with the class argument.

P.S.2 I am the developer - thanks for using the package :)