cssrshinydtbslib

Shiny bslib() and Datatables inside a Bootstrap Card

I like the design option of putting things inside a card like the reproducible example here taken from the blslib() website. This does not render on my screen as expected. There should be 10 rows visible and this, on my screen, renders two rows with a scroll bar. I thought the argument fillContainer would cause for this to render and fill the card space.

Can anyone see a fix so that the table fills the card with the number of rows set by the page length option?

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")
    })
  }
)

EDIT: I have found that if I add class="table-responsive" as in my edit to my original post, the number of rows reflects the pagination. Changing the pagination also works and there is a scroll bar added.

My preference, however, is for the card size to grow in relationship to the number of rows in the table instead of having the scroll bar.

I suppose there is a class for this, but am at the limit of my css knowledge here.

Solution

  • To fit the card size to the table size, you can add height = "100%" in DT::datatable(), as below:

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

    Note that you also need to remove fillContainer = TRUE.