如何在reactable (r-package)上居中标题列？

Question

嗨，谢谢你读我的文章

我正在使用r中的"reactable“包处理一些表，但我只想将每列的标题居中。例如：

library(reactable)
reactable(iris,
          defaultColDef = colDef(
            header = function(value) gsub(".", " ", value, fixed = TRUE),
            cell = function(value) format(value, nsmall = 1),
            align = "center",
            minWidth = 70,
            headerStyle = list(background = "#12a09a")
          ))

显然，选项colDef(align = "center")使整个列居中，但是否有仅使标题居中的选项？

Answer 1

我假设您正在R markdown文档或闪亮的应用程序中使用这些表。在这两种情况下，您都可以覆盖css以左对齐表格文本，或者让默认表格将标题居中。

在第一种情况下，您只需添加此行.rt-align-center{text-align: left;}。

在shiny中，您只需将其添加到自定义样式中，或者使用css标签将其内联添加，如下面的示例所示：

library(shiny)
library(reactable)


ui <- fluidPage(
    # inline style tag to define table row text alignment
    tags$style(HTML(".rt-align-center {text-align: left;}")),

    titlePanel("Iris react table"),

    sidebarLayout(
        sidebarPanel(
           helpText("Nothing to see here")
        ),
        mainPanel(
            reactableOutput("table")
        )

    )
)

server <- function(input, output) {

    output$table <- renderReactable({
    
        reactable(iris,
                  defaultColDef = colDef(
                      header = function(value) gsub(".", " ", value, fixed = TRUE),
                      cell = function(value) format(value, nsmall = 1),
                      align = "center",
                      minWidth = 70,
                      headerStyle = list(background = "#12a09a")
                  ))
    })
}

shinyApp(ui = ui, server = server)

如果您正在使用Rmarkdown文档，只需将其添加到样式标记中的html中，如下所示：

<style> .rt-align-center {text-align: left;} </style>

结果是：

​

​