Update @render.data_frame renderer to work properly with fill/fillable (#1126)

Co-authored-by: Barret Schloerke <[email protected]>

Author: cpsievert

CHANGELOG.md

@@ -22,6 +22,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Other changes
 
+* `@render.data_frame` now properly fills its container by default. (#1126)
+
 * We improved the accessibility of the full screen toggle button in cards created with `ui.card(full_screen=True)`. Full-screen cards are now also supported on mobile devices. (#1129)
 
 * When entering and exiting full-screen card mode, Shiny now emits a client-side custom `bslib.card` event that JavaScript-oriented users can use to react to the full screen state change. (#1129)

js/dataframe/index.tsx

@@ -59,7 +59,7 @@ interface ShinyDataGridProps<TIndex> {
 const ShinyDataGrid: FC<ShinyDataGridProps<unknown>> = (props) => {
   const { id, data, bgcolor } = props;
   const { columns, type_hints, data: rowData } = data;
-  const { width, height, filters: withFilters } = data.options;
+  const { width, height, fill, filters: withFilters } = data.options;
 
   const containerRef = useRef<HTMLDivElement>(null);
   const theadRef = useRef<HTMLTableSectionElement>(null);
@@ -213,10 +213,13 @@ const ShinyDataGrid: FC<ShinyDataGridProps<unknown>> = (props) => {
 
   const headerRowCount = table.getHeaderGroups().length;
 
-  const scrollingClass =
-    containerRef.current?.scrollHeight > containerRef.current?.clientHeight
-      ? "scrolling"
-      : "";
+  // Assume we're scrolling until proven otherwise
+  let scrollingClass = "scrolling";
+  const scrollHeight = containerRef.current?.scrollHeight;
+  const clientHeight = containerRef.current?.clientHeight;
+  if (scrollHeight && clientHeight && scrollHeight <= clientHeight) {
+    scrollingClass = "";
+  }
 
   const makeHeaderKeyDown =
     (column: Column<unknown[], unknown>) => (event: React.KeyboardEvent) => {
@@ -227,12 +230,17 @@ const ShinyDataGrid: FC<ShinyDataGridProps<unknown>> = (props) => {
 
   const measureEl = useVirtualizerMeasureWorkaround(rowVirtualizer);
 
+  let className = `shiny-data-grid ${containerClass} ${scrollingClass}`;
+  if (fill) {
+    className += " html-fill-item";
+  }
+
   return (
     <>
       <div
-        className={`shiny-data-grid ${containerClass} ${scrollingClass}`}
+        className={className}
         ref={containerRef}
-        style={{ width, maxHeight: height, overflow: "auto" }}
+        style={{ width, height, overflow: "auto" }}
       >
         <table
           className={tableClass + (withFilters ? " filtering" : "")}

js/dataframe/styles.scss

@@ -38,6 +38,10 @@
 
 .shiny-data-grid {
   max-width: 100%;
+  height: 500px;
+  &:not(.scrolling) {
+    height: auto;
+  }
 
   > table {
     border-collapse: separate;
@@ -198,3 +202,20 @@
     }
   }
 }
+
+/* Center the table when inside of a card */
+.card-body .shiny-data-grid {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+
+/* When .shiny-data-grid is not scrolling, the containers shouldn't flex */
+shiny-data-frame {
+  &:has(> div > .shiny-data-grid:not(.scrolling)) {
+    flex: 0 0 auto;
+  }
+  > div:has(> .shiny-data-grid:not(.scrolling)) {
+    flex: 0 0 auto;
+  }
+}

js/dataframe/types.ts

@@ -16,6 +16,7 @@ export interface DataGridOptions {
   filters?: boolean;
   width?: string;
   height?: string;
+  fill?: boolean;
 }
 
 export interface PandasData<TIndex> {

shiny/render/_dataframe.py

@@ -42,15 +42,15 @@ class DataGrid(AbstractTabularData):
         A pandas `DataFrame` object, or any object that has a `.to_pandas()` method
         (e.g., a Polars data frame or Arrow table).
     width
-        A _maximum_ amount of vertical space for the data grid to occupy, in CSS units
+        A _maximum_ amount of horizontal space for the data grid to occupy, in CSS units
         (e.g. `"400px"`) or as a number, which will be interpreted as pixels. The
         default is `fit-content`, which sets the grid's width according to its contents.
         Set this to `100%` to use the maximum available horizontal space.
     height
         A _maximum_ amount of vertical space for the data grid to occupy, in CSS units
         (e.g. `"400px"`) or as a number, which will be interpreted as pixels. If there
         are more rows than can fit in this space, the grid will scroll. Set the height
-        to `None` to allow the grid to grow to fit all of the rows (this is not
+        to `"auto"` to allow the grid to grow to fit all of the rows (this is not
         recommended for large data sets, as it may crash the browser).
     summary
         If `True` (the default), shows a message like "Viewing rows 1 through 10 of 20"
@@ -83,7 +83,7 @@ def __init__(
         data: object,
         *,
         width: str | float | None = "fit-content",
-        height: Union[str, float, None] = "500px",
+        height: Union[str, float, None] = None,
         summary: Union[bool, str] = True,
         filters: bool = False,
         row_selection_mode: Literal["none", "single", "multiple"] = "none",
@@ -113,6 +113,7 @@ def to_payload(self) -> Jsonifiable:
             filters=self.filters,
             row_selection_mode=self.row_selection_mode,
             style="grid",
+            fill=self.height is None,
         )
         return res