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

Question

我喜欢将东西放入卡片中的设计选项，例如这里取自 blslib() 网站的可重现示例。这不会按预期呈现在我的屏幕上。应该有 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 知识有限。

Answer 1

为了使卡片尺寸适合桌面尺寸，可以在

height = "100%"

中添加

DT::datatable()

，如下：

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

请注意，您还需要删除

fillContainer = TRUE

。

Answer 2

我知道这可能有点晚了，我不确定这是否能解决您的问题。

DataTables 中有一个功能，可以在更改后或在引导选项卡中的表格中使用时重新调整布局。

https://datatables.net/reference/api/columns.adjust()

var table = $('#example').DataTable();

$('#container').css( 'display', 'block' );
table.columns.adjust().draw();