Problem in centering table header in shiny - html

Question

Problem in centering table header in shiny, when centering my table the first column remains aligned to the left. How do I fix this? Just below I made available my CSS code. I'm in doubt as to how to align the first column of my table. I am also in doubt, if I called the CSS correctly in my code.
library(shiny)
library(dplyr)
bd= read.csv("bd.csv", sep = ";")
ui = fluidPage(
fixedRow(
column(12,
titlePanel("Tabelas"),
sidebarLayout(
sidebarPanel(selectInput("TABELA", "Selecione a Tabela:", choices = bd$TABELA),
downloadButton("downloadData", "Download")),
mainPanel(tags$link(
rel='stylesheet',
type='text/css',
href='custom.css'),
(tableOutput("bd")))
)
)
)
)
server = function(input, output) {
output$bd <- renderTable({
bd %>%
dplyr::filter(TABELA == input$TABELA)%>%
dplyr::select(LOCAL, ENTREVISTAS.PRE, ENTREVISTAS.POS, CITACOES.PRE, CITACOES.POS, PERCENT.PRE, PERCENT.POS)
}
)
output$downloadData <- downloadHandler(
filename = function() {
paste("bd-", Sys.Date(), ".csv", sep="")
},
content = function(file) {
write.csv(bd, file)
}
)
}
shinyApp(ui = ui, server = server)
.table.shiny-table>thead>tr>th,
.table.shiny-table>thead>tr>td,
.table.shiny-table>tbody>tr>th,
.table.shiny-table>tbody>tr>td,
.table.shiny-table>tfoot>tr>th,
.table.shiny-table>tfoot>tr>td {
padding-right: 12px;
padding-left: 12px;
font-size:80%;
text-align: center;
}
.table>caption+thead>tr:first-child>td,
.table>caption+thead>tr:first-child>th,
.table>colgroup+thead>tr:first-child>td,
.table>colgroup+thead>tr:first-child>th,
.table>thead:first-child>tr:first-child>td,
.table>thead:first-child>tr:first-child>th {
border-top: 0;
font-size:80%;
text-align: center;
}

Answer 1

What I like to do to format the table is to use the datatable function from the DT package.
I create a create_dt function with new variables to pass some values, which I use throughout the shiny application. I leave the format that I use in my tables, if you want to use it. There are many options to configure your table here.
create_dt <- function(x,y = NULL,z = NULL,w,v = NULL){
v <- if_else(is.null(v),TRUE,FALSE)
y <- if_else(is.null(y),16,y)
datatable(x,
rownames = FALSE,
class = "compact cell-border",
extensions = 'Buttons',
caption = z,
options = list(dom = 'rtB',
buttons = list(list(extend='excel',
filename = 'Nombre tabla',
text = '<i class="fas fa-download"></i>')),
pageLenght = y,
lengthMenu = list(c(y,25,50,-1),
c(y,25,50,"All")),
scrollX = TRUE,
initComplete = htmlwidgets::JS(
"function(settings, json) {",
"$(this.api().table().header()).css({'background-color': '#000', 'color': '#fff'});","}"),
columnDefs = list(list(className = 'dt-center', targets = '_all'))
),
container = w,
escape = v) %>%
formatStyle(columns = names(x),
color = "black",
fontSize = '8pt')
This is what my table looks like.
example of table
And this is how I apply the function with the data:
And the Ui part:
fluidRow(column(6,withSpinner(dataTableOutput("resume_tbl_entero",height = '100%'))))
The server part:
output$resume_tbl_entero <- renderDataTable(
{create_dt({React_ano_filter_general_entero() %>%
mutate(Resultado = str_to_sentence(Resultado)) %>%
pivot_wider(names_from = Resultado,values_from=Total)},
z = "Enterococcus")}
And the data used looks like this
I hope it serves you greetings!