Close #1118. Update data frame renderer to work properly with fill/fillable

Author: cpsievert

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);
@@ -227,10 +227,15 @@ 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" }}
       >

js/dataframe/styles.scss

@@ -38,6 +38,7 @@
 
 .shiny-data-grid {
   max-width: 100%;
+  height: 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

@@ -74,7 +74,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",
@@ -193,6 +193,7 @@ def to_payload(self) -> Jsonifiable:
             filters=self.filters,
             row_selection_mode=self.row_selection_mode,
             style="table",
+            fill=self.height is None,
         )
         return res