Bootstrap 卡中闪亮的 bslib() 和数据表答案

【问题标题】：Shiny bslib() and Datatables inside a Bootstrap CardBootstrap 卡中闪亮的 bslib() 和数据表
【发布时间】：2022-02-14 18:37:33
【问题描述】：

我喜欢将东西放入卡片中的设计选项，就像这里取自 blslib() website 的可重现示例。这不会按预期呈现在我的屏幕上。应该有 10 行可见，这在我的屏幕上呈现两行带有滚动条。我认为参数 fillContainer 会导致它渲染并填充卡片空间。

任何人都可以看到一个修复，以便表格用页面长度选项设置的行数填充卡片吗？

bs4_card <- function(body, title) {
  div(class="table-responsive",
    class = "card",
    div(class = "card-header bg-primary", title),
    div(class = "card-body d-flex justify-content-center", body)
  )
}

shinyApp(
  fluidPage(
    theme = bslib::bs_theme(primary = "orange"),
    uiOutput("dat")
  ),
  function(input, output) {
    output$dat <- renderUI({
      table <- DT::datatable(mtcars, fillContainer = TRUE, style = "bootstrap4", rownames = FALSE)
      bs4_card(table, "The mtcars dataset")
    })
  }
)

编辑： 我发现如果我在原始帖子的编辑中添加class="table-responsive"，行数会反映分页。更改分页也可以，并且添加了一个滚动条。

然而，我的偏好是卡片大小与表格中的行数相关，而不是滚动条。

我想这有一个类，但我在这里的 css 知识有限。

【问题讨论】：

似乎是由fillContainer = TRUE引起的，...删除它，您将看到10行。不过可能会扩展容器，...
@TonioLiebrand，确实如此。当我这样做时，表格溢出卡外，但确实显示了预期的行数。

标签： css r bootstrap-4 shiny

【解决方案1】：

要使卡片大小适合桌子大小，您可以在DT::datatable() 中添加height = "100%"，如下所示：

DT::datatable(mtcars, style = "bootstrap4", rownames = FALSE, height = "100%")

请注意，您还需要删除fillContainer = TRUE。

【讨论】：