Add fill argument to dataTableOutput() (#1027)

* Revert "dataTableOutput()'s width and height now default to NULL  (#1026)"

This reverts commit e02783c.

* Add fill argument to dataTableOutput()

NEWS.md

@@ -1,6 +1,8 @@
 # CHANGES IN DT VERSION 0.27
 
-- `dataTableOutput()`'s `height` and `width` now defaults to `NULL`, allowing it have more flexible default sizing behavior, which will be primarily useful in combination with `{bslib}`'s new `card()` API (thanks, @cpsievert, #1026).
+- `dataTableOutput()` gains a new `fill` parameter. When `TRUE` (the default), the widget's container element is allowed to grow/shrink to fit it's parent container so long as that parent is opinionated about its height and has been marked with `htmltools::bindFillRole(x, container = TRUE)`. (#2198)
+
+  - The primary motivation for this is to allow DT to grow/shrink [inside `bslib::card_body_fill()`](https://rstudio.github.io/bslib/articles/cards.html#responsive-sizing). When doing so, you'll also want to set `fillContainer = TRUE` in `datatable()`.
 
 # CHANGES IN DT VERSION 0.26
 

R/shiny.R

@@ -7,6 +7,8 @@
 #' @inheritParams shiny::dataTableOutput
 #' @param width the width of the table container
 #' @param height the height of the table container
+#' @param fill passed to \code{htmlwidgets::\link{shinyWidgetOutput}()}, see
+#'   there for explanation (requires \pkg{htmlwidgets} > v1.5.4).
 #' @references \url{https://rstudio.github.io/DT/shiny.html}
 #' @export
 #' @examples # !formatR
@@ -22,11 +24,13 @@
 #'     }
 #'   )
 #' }
-dataTableOutput = function(outputId, width = NULL, height = NULL) {
+dataTableOutput = function(outputId, width = '100%', height = 'auto', fill = TRUE) {
+  args = list(outputId, 'datatables', width, height, package = 'DT')
+  if ("fill" %in% names(formals(htmlwidgets::shinyWidgetOutput)))
+    args$fill = fill
+
   htmltools::attachDependencies(
-    htmlwidgets::shinyWidgetOutput(
-      outputId, 'datatables', width, height, package = 'DT'
-    ),
+    do.call(htmlwidgets::shinyWidgetOutput, args),
     crosstalk::crosstalkLibs(),
     append = TRUE
   )

inst/htmlwidgets/css/datatables-crosstalk.css

@@ -21,3 +21,12 @@ See https://github.com/DataTables/DataTablesSrc/issues/160
 table.dataTable {
   display: table;
 }
+
+
+/*
+When DTOutput(fill = TRUE), it receives a .html-fill-item class (via htmltools::bindFillRole()), which effectively amounts to `flex: 1 1 auto`. That's mostly fine, but the case where `fillContainer=TRUE`+`height:auto`+`flex-basis:auto` and the container (e.g., a bslib::card()) doesn't have a defined height is a bit problematic since the table wants to fit the parent but the parent wants to fit the table, which results pretty small table height (maybe because there is a minimum height somewhere?). It seems better in this case to impose a 400px height default for the table, which we can do by setting `flex-basis` to 400px (the table is still allowed to grow/shrink when the container has an opinionated height).
+*/
+
+.html-fill-container > .html-fill-item.datatables {
+  flex-basis: 400px;
+}

inst/htmlwidgets/datatables.yaml

@@ -2,7 +2,4 @@ dependencies:
   - name: datatables-css
     version: 0.0.0
     src: "htmlwidgets/css"
-    stylesheet: [
-      datatables.css,
-      datatables-crosstalk.css
-    ]
+    stylesheet: datatables-crosstalk.css