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

NEWS.md

@@ -1,5 +1,7 @@
 # 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).
+
 # CHANGES IN DT VERSION 0.26
 
 - Upgraded DataTables to v1.12.1.

R/shiny.R

@@ -22,7 +22,7 @@
 #'     }
 #'   )
 #' }
-dataTableOutput = function(outputId, width = '100%', height = 'auto') {
+dataTableOutput = function(outputId, width = NULL, height = NULL) {
   htmltools::attachDependencies(
     htmlwidgets::shinyWidgetOutput(
       outputId, 'datatables', width, height, package = 'DT'

inst/htmlwidgets/css/datatables.css

@@ -0,0 +1,11 @@
+/*
+dataTableOutput() no longer supplies a default size via inline styles, so define those defaults here.
+
+We also define `flex-basis` since when dataTableOutput() (and thus htmlwidgets::shinyWidgetOutput()) has height = NULL, it receives a CSS class which effectively amounts to `flex: 1 1 auto` in a `{bslib}` app (to make it so widgets can stretch vertically inside of resizable card()s). That's mostly fine, but `fillContainer=TRUE`+`height:auto`+`flex-basis:auto` is problematic for DT since the table wants to fit the parent but the parent wants to fit the table. Thankfully, setting `flex-basis` to a fixed size seems to resolve that issue.
+*/
+
+.datatables.html-widget {
+  width: 100%;
+  height: auto;
+  flex-basis: 400px;
+}

inst/htmlwidgets/datatables.yaml

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