在R Shiny中渲染时如何在多个列中扩展表格单元格?

时间:2018-04-12 18:53:53

标签: r html-table shiny

我有一个值的数据框,我试图在R Shiny中呈现为一个表格。我希望扩展某些值,以便以与您使用HTML rowspan属性相同的方式占用多个列。但是,如果我这样做,我必须从头开始创建整个表格,我更倾向于使用DT库从我的数据表中轻松转换。

作为一个例子,我创建了以下脚本:

# ui.R

fluidPage(
  DT::dataTableOutput("table")
)

# server.R

library(DT)

function(input, output) {

  output$table <- DT::renderDataTable({
    df <- data.frame(A = c("Trial 1", 1, 1, 1), B = c("", 1, 1, 1), C = c("", 1, 1, 1),
                     D = c("Trial 2", 2, 2, 2), E = c("", 2, 2, 2), F = c("", 2, 2, 2),
                     G = c("Trial 3", 3, 3, 3), H = c("", 3, 3, 3), I = c("", 3, 3, 3))

    DT::datatable(df,
                  options = list(dom = "t",
                                 ordering = FALSE))
  })

}

此脚本呈现以下UI:

UI output of above R Shiny app

如何扩展包含&#34;试验1&#34;,&#34;试验2&#34;和试验3&#34;这样他们每人占据三列?

1 个答案:

答案 0 :(得分:1)

我们可以使用自定义容器将列组名称添加为实际列标题:

# ui.R

ui <- fluidPage(
  DT::dataTableOutput("table")
)

# server.R

library(DT)
df <- data.frame(A = c(1, 1, 1), B = c(1, 1, 1), C = c(1, 1, 1),
                 D = c(2, 2, 2), E = c(2, 2, 2), F = c(2, 2, 2),
                 G = c(3, 3, 3), H = c(3, 3, 3), I = c(3, 3, 3))

myContainer <- htmltools::withTags(table(
  class = 'display',
  thead(
    tr(
      th(),
      th(colspan = 3, 'Trial 1', class = "dt-center"),
      th(colspan = 3, 'Trial 2', class = "dt-center"),
      th(colspan = 3, 'Trial 3', class = "dt-center")
    ),
    tr(
      th(),
      lapply(names(df), th)
    )
  )
))

server <- function(input, output) {

  output$table <- DT::renderDataTable({
    DT::datatable(df, container = myContainer,
                  options = list(dom = "t", ordering = FALSE,
                                 columnDefs = list(list(className = "dt-center", targets = "_all"))
                  ))
  })

}

runApp(list(ui = ui, server = server))

<强>输出:

enter image description here

另外,如果你真的希望第一行有colspans,我们可以使用initComplete选项在呈现表时调用JavaScript函数。这是仅服务器部分:

jsc <- '
function(settings, json) {
  $("td:contains(\'Trial\')").attr("colspan", "3").css("text-align", "center");
  $("tbody > tr:first-child > td:empty").remove();
}'

server <- function(input, output) {
  output$table <- DT::renderDataTable({
    df <- data.frame(A = c("Trial 1", 1, 1, 1), B = c("", 1, 1, 1), C = c("", 1, 1, 1),
                     D = c("Trial 2", 2, 2, 2), E = c("", 2, 2, 2), F = c("", 2, 2, 2),
                     G = c("Trial 3", 3, 3, 3), H = c("", 3, 3, 3), I = c("", 3, 3, 3))
    DT::datatable(df, options = list(dom = "t", ordering = FALSE, initComplete = JS(jsc)))
  })

}

在JS函数的第一行中,我们选择包含单词 Trial 的所有单元格,并添加相应的属性和样式。然后我们选择所有空单元格,它们是行元素的直接后代,而行元素又是表格主体的第一个子元素,并从DOM中删除它们。 Here您可以找到有关>等CSS选择器的一般参考。

<强>输出:

enter image description here