I really appreciate the way design elements are placed inside a card, similar to the example I found on the blslib() website. However, when I try to implement it on my screen, it doesn't appear the way I expected. Instead of seeing 10 rows displayed, I only see two rows with a scroll bar. I assumed that using the fillContainer argument would automatically adjust the table to fit within the card space.
Does anyone have a solution to make the table fill the card with the specified 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 discovered that including
class="table-responsive"I personally prefer the card size to adapt according to the table's rows rather than having a scroll bar present.
It seems like there may be a specific CSS class for this, but my knowledge is limited in that area.