CODEWITHSUNDEEP
cssrshinydtbslib
dhc
dhc

Reputation: 787

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.

Upvotes: 4

Views: 1725

Answers (2)

Kyle Coots
Kyle Coots

Reputation: 2131

I know this may be kinda late and I am not sure if this will fix the issue for you.

There is a function in DataTables to readjust the layout after changes or when using in the table in bootstrap tabs.

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

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

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

Upvotes: 0

bretauv
bretauv

Reputation: 8557

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.

Upvotes: 2

Related Questions