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

Question

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

谁能看到一个修复程序，使 table 以页面长度选项设置的行数填充卡片？

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" 添加到原始 post，行数会反映分页。更改分页也有效，并添加了一个滚动条。

不过，我更喜欢卡片大小随着 table 中行数的增加而增加，而不是使用滚动条。

我想有一个 class 可以解决这个问题，但我的 css 知识有限。

Answer 1

要使卡片尺寸适合table尺寸，您可以在DT::datatable()中添加height = "100%"，如下：

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

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

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

Shiny bslib() and Datatables inside a Bootstrap Card

css

r

shiny

bootstrap-4