@svgrid/grid 1.1.1 → 1.2.1

package/dist/FlexRender.svelte

@@ -1,96 +1,96 @@
-<script
-  lang="ts"
-  generics="TData extends RowData"
->
-  import { isFunction } from './core'
-  import {
-    RenderComponentConfig,
-    RenderSnippetConfig,
-  } from './render-component'
-  import type {
-    Cell,
-    CellContext,
-    ColumnDefTemplate,
-    Header,
-    HeaderContext,
-    RowData,
-  } from './core'
-
-  type Props =
-    | {
-        content?: ColumnDefTemplate<
-          | HeaderContext<TData>
-          | CellContext<TData>
-        >
-        context:
-          | HeaderContext<TData>
-          | CellContext<TData>
-        cell?: never
-        header?: never
-        footer?: never
-      }
-    | {
-        cell: Cell<TData>
-        content?: never
-        context?: never
-        header?: never
-        footer?: never
-      }
-    | {
-        header: Header<TData>
-        content?: never
-        context?: never
-        cell?: never
-        footer?: never
-      }
-    | {
-        footer: Header<TData>
-        content?: never
-        context?: never
-        cell?: never
-        header?: never
-      }
-
-  let props: Props = $props()
-
-  const resolved = $derived.by(() => {
-    if ('cell' in props && props.cell) {
-      return {
-        content: props.cell.column.columnDef.cell,
-        context: props.cell.getContext(),
-      }
-    }
-    if ('header' in props && props.header) {
-      return {
-        content: props.header.column.columnDef.header,
-        context: props.header.getContext(),
-      }
-    }
-    if ('footer' in props && props.footer) {
-      return {
-        content: props.footer.column.columnDef.footer,
-        context: props.footer.getContext(),
-      }
-    }
-    return {
-      content: props.content,
-      context: props.context,
-    }
-  })
-
-  const result = $derived(
-    isFunction(resolved.content)
-      ? resolved.content(resolved.context as any)
-      : undefined,
-  )
-</script>
-
-{#if typeof resolved.content === 'string'}
-  {resolved.content}
-{:else if result instanceof RenderComponentConfig}
-  <result.component {...result.props} />
-{:else if result instanceof RenderSnippetConfig}
-  {@render result.snippet(result.params)}
-{:else if result !== undefined}
-  {result}
-{/if}
+<script
+  lang="ts"
+  generics="TData extends RowData"
+>
+  import { isFunction } from './core'
+  import {
+    RenderComponentConfig,
+    RenderSnippetConfig,
+  } from './render-component'
+  import type {
+    Cell,
+    CellContext,
+    ColumnDefTemplate,
+    Header,
+    HeaderContext,
+    RowData,
+  } from './core'
+
+  type Props =
+    | {
+        content?: ColumnDefTemplate<
+          | HeaderContext<TData>
+          | CellContext<TData>
+        >
+        context:
+          | HeaderContext<TData>
+          | CellContext<TData>
+        cell?: never
+        header?: never
+        footer?: never
+      }
+    | {
+        cell: Cell<TData>
+        content?: never
+        context?: never
+        header?: never
+        footer?: never
+      }
+    | {
+        header: Header<TData>
+        content?: never
+        context?: never
+        cell?: never
+        footer?: never
+      }
+    | {
+        footer: Header<TData>
+        content?: never
+        context?: never
+        cell?: never
+        header?: never
+      }
+
+  let props: Props = $props()
+
+  const resolved = $derived.by(() => {
+    if ('cell' in props && props.cell) {
+      return {
+        content: props.cell.column.columnDef.cell,
+        context: props.cell.getContext(),
+      }
+    }
+    if ('header' in props && props.header) {
+      return {
+        content: props.header.column.columnDef.header,
+        context: props.header.getContext(),
+      }
+    }
+    if ('footer' in props && props.footer) {
+      return {
+        content: props.footer.column.columnDef.footer,
+        context: props.footer.getContext(),
+      }
+    }
+    return {
+      content: props.content,
+      context: props.context,
+    }
+  })
+
+  const result = $derived(
+    isFunction(resolved.content)
+      ? resolved.content(resolved.context as any)
+      : undefined,
+  )
+</script>
+
+{#if typeof resolved.content === 'string'}
+  {resolved.content}
+{:else if result instanceof RenderComponentConfig}
+  <result.component {...result.props} />
+{:else if result instanceof RenderSnippetConfig}
+  {@render result.snippet(result.params)}
+{:else if result !== undefined}
+  {result}
+{/if}

package/dist/SvGrid.controller.svelte.js

@@ -263,14 +263,25 @@ export function createSvGridController(props) {
         };
     });
     /** Vertical overflow from the virtualizer's authoritative total size,
-     *  NOT from `scrollMetrics.scrollHeight`. Reading DOM dimensions
+     *  NOT from `scrollMetrics.scrollHeight` alone. Reading DOM dimensions
      *  during a Svelte derived runs BEFORE the browser paints - the table
      *  hasn't laid out the new rows yet, so `scrollHeight` is briefly 0
      *  even after data loads. That made the overflow flag return false,
-     *  hid the scrollbar, and broke dragging. */
+     *  hid the scrollbar, and broke dragging.
+     *
+     *  However, virtualizer.getTotalSize() uses rowHeight * numRows which
+     *  underestimates when variable-height rows are present (e.g. master-detail
+     *  expanded rows). We therefore take the MAX of the two sources:
+     *  - virtualizer.getTotalSize(): correct at initial load (before first paint)
+     *  - scrollMetrics.scrollHeight: correct after detail rows expand (DOM is live,
+     *    ResizeObserver on gridRootEl already bumps scrollVersion at that point) */
     const hasVerticalOverflow = $derived.by(() => {
         virtualizer.version;
-        return virtualizer.getTotalSize() > viewportHeight + 1;
+        const virtualizerSize = virtualizer.getTotalSize();
+        // scrollMetrics.scrollHeight is 0 before initial paint; once the table
+        // is in the DOM it reflects the true content height including expanded rows.
+        const domSize = scrollMetrics.scrollHeight;
+        return Math.max(virtualizerSize, domSize) > viewportHeight + 1;
     });
     // Effective filter-UI flags. Each show* prop wins when explicitly set;
     // otherwise the `filterMode` prop (default 'menu') picks exactly one surface.
@@ -629,12 +640,12 @@ export function createSvGridController(props) {
             if (!needs)
                 continue;
             const def = column.columnDef;
-            const accessorFn = def.accessorFn;
+            const fieldFn = def.fieldFn;
             const field = def.field;
             const stat = computeColumnStat((function* () {
                 for (const row of allRows) {
-                    yield accessorFn
-                        ? accessorFn(row.original)
+                    yield fieldFn
+                        ? fieldFn(row.original)
                         : field
                             ? row.original[field]
                             : row.getCellValueByColumnId(column.id);