Update @render.data_frame renderer to work properly with fill/fillable

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" : "")}
@@ -476,6 +484,8 @@ export class ShinyDataFrameOutput extends HTMLElement {
 
     const myDiv = document.createElement("div");
     myDiv.classList.add("html-fill-container", "html-fill-item");
+    myDiv.style.marginLeft = "auto";
+    myDiv.style.marginRight = "auto";
     target.appendChild(myDiv);
 
     this.reactRoot = createRoot(myDiv);

js/dataframe/styles.scss

@@ -38,6 +38,11 @@
 
 .shiny-data-grid {
   max-width: 100%;
+  height: 500px;
+  &:not(.scrolling) {
+    height: auto;
+    flex-basis: 500px;
+  }
 
   > table {
     border-collapse: separate;

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

@@ -73,7 +73,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",
@@ -103,6 +103,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