Merge pull request #1992 from malloydata/dashboard-table-virtual-scroll

fix: table virtual scroll bug with missing items
malloydata · Nov 1, 2024 · 8485b6f · 8485b6f
2 parents 24fbae1 + abe204c
commit 8485b6f
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 3 deletions.
diff --git a/packages/malloy-render/src/component/dashboard/dashboard.tsx b/packages/malloy-render/src/component/dashboard/dashboard.tsx
@@ -28,7 +28,7 @@ function DashboardItem(props: {
     resultMetadata: props.resultMetadata,
     customProps: {
       table: {
-        disableVirtualization: props.maxTableHeight,
+        disableVirtualization: !props.maxTableHeight,
       },
     },
   });

diff --git a/packages/malloy-render/src/component/table/table.tsx b/packages/malloy-render/src/component/table/table.tsx
@@ -393,7 +393,9 @@ const MalloyTableRoot = (_props: {
   if (props.scrollEl) scrollEl = props.scrollEl;
   let virtualizer: Virtualizer<HTMLElement, Element> | undefined;
 
-  const [rowEstimate, setRowEstimate] = createSignal(28);
+  // Set arbitrarily large initial height to deal with weird measurement bug https://github.com/TanStack/virtual/issues/869
+  // Could possibly try to pre-calculate a height estimate using metadata, but may be hard to do with potentially wrapping text so would have to add a buffer
+  const [rowEstimate, setRowEstimate] = createSignal(1000);
 
   const shouldVirtualize = tableCtx.root && !props.disableVirtualization;
 

diff --git a/packages/malloy-render/src/stories/line_charts.stories.malloy b/packages/malloy-render/src/stories/line_charts.stories.malloy
@@ -34,7 +34,7 @@ source: products is duckdb.table("data/products.parquet") extend {
     order_by: dcId
   }
 
-  # dashboard { table.max_heightX=100000 }
+  # dashboard { table.max_height=100000 }
   view: seriesCharts is {
     group_by: ` ` is 'Line Charts'
     # line_chart