@svgrid/grid 3.0.3 → 3.0.5

package/src/SvGrid.svelte

@@ -3,7 +3,6 @@
   generics="TFeatures extends TableFeatures = TableFeatures, TData extends RowData = RowData"
 >
   import {
-    getGridCellA11yProps,
     getGridCellDomId,
     getGridHeaderA11yProps,
     getGridRootA11yProps,
@@ -22,6 +21,7 @@
     RenderComponentConfig,
   } from "./render-component";
   import { buildSparkline, toSparklineValues } from "./sparkline";
+  import { mergeDrawAt } from "./merges";
   import { localizeOperatorLabel } from "./filter-operators";
   import { GRID_ICON_GLYPHS, type GridIconName } from "./grid-icons";
   // The whole editor UI - including the lazy SvGridDropdown / SvDateTimePicker
@@ -54,6 +54,7 @@
   import { getSchedulerView } from "./scheduler-view.svelte";
   import { getSelectionBarView } from "./selection-bar-view.svelte";
   import { getBoardView } from "./board-view.svelte";
+  import { getGanttView } from "./gantt-view.svelte";
   import { getChartView } from "./chart-view.svelte";
   let props: Props<TFeatures, TData> = $props();
   // Per-instance base for every DOM id the grid mints. `$props.id()` is stable
@@ -78,6 +79,9 @@
   const boardConfig = $derived(opt.board);
   // Scheduler / calendar mode: same "view of the grid" seam as the board.
   const schedulerConfig = $derived(opt.scheduler);
+  // Gantt mode: a task table beside a time chart. Same seam again; the renderer
+  // ships in @svgrid/enterprise (enableGanttView).
+  const ganttConfig = $derived(opt.gantt);
   // Chart mode: another "view of the grid". Unlike board/scheduler, the renderer
   // is free - a built-in default (SvGridChartView, lazy-loaded below) wraps the
   // standalone SvChart, overridable via the `chart-view` seam (getChartView).
@@ -387,8 +391,9 @@
   );
 
   const rowSizePx = (i: number): number => {
-    // A height the user dragged wins over the declared one, so the row stays
-    // where they put it across re-renders and virtualization recycling.
+    // A height the user dragged, or set through the api, wins over the
+    // declared one, so the row stays where they put it across re-renders
+    // and virtualization recycling.
     const dragged = ctrl.rowResizeHeightPx(i);
     if (dragged != null) return dragged;
     const rh = opt.rowHeight;
@@ -402,10 +407,52 @@
     autoRowHeightOn
       ? `min-height: ${measuredRowHeightPx(i) ?? rowSizePx(i)}px;`
       : `height: ${rowSizePx(i)}px;`;
+  const collapsedColumns = $derived(ctrl.collapsedColumns);
   const columnVirtualizationEnabled = $derived(
     ctrl.columnVirtualizationEnabled,
   );
   const virtualRows = $derived(ctrl.virtualRows);
+  // The first body row on screen: where a failed run that started above
+  // the window repeats its message.
+  const firstRenderedRowIndex = $derived(
+    rowVirtualizationEnabled ? (virtualRows[0]?.index ?? 0) : 0,
+  );
+  const frozenRowCount = $derived(ctrl.frozenRowCount);
+  const frozenRowList = $derived(ctrl.frozenRowList);
+  // Merged cells. A merge is drawn once per band (the frozen rows, the
+  // scrolling body), by the top-left cell of the part the band shows, with
+  // its spans clamped to the rendered window: a td never spans into rows
+  // the table has not drawn.
+  const mergeIndex = $derived(ctrl.mergeIndex);
+  const mergeColumnWindow = $derived.by(() => ({
+    firstCol: renderedColumns[0]?.item.index ?? 0,
+    lastCol: renderedColumns[renderedColumns.length - 1]?.item.index ?? -1,
+  }));
+  const mergeBodyWindow = $derived.by(() => {
+    const cols = mergeColumnWindow;
+    if (!rowVirtualizationEnabled) return { firstRow: frozenRowCount, lastRow: allRows.length - 1, ...cols };
+    let firstRow = Number.POSITIVE_INFINITY;
+    let lastRow = -1;
+    for (const item of virtualRows) {
+      if (item.index < frozenRowCount) continue;
+      if (item.index < firstRow) firstRow = item.index;
+      if (item.index > lastRow) lastRow = item.index;
+    }
+    return { firstRow: Number.isFinite(firstRow) ? firstRow : frozenRowCount, lastRow, ...cols };
+  });
+  const mergeFrozenWindow = $derived.by(() => ({ firstRow: 0, lastRow: frozenRowCount - 1, ...mergeColumnWindow }));
+  /** The width a td spanning `colSpan` rendered columns from `colIndex` takes. */
+  function mergedWidth(colIndex: number, colSpan: number, own: number): number {
+    if (colSpan <= 1) return own;
+    let total = 0;
+    for (const rendered of renderedColumns) {
+      const i = rendered.item.index;
+      if (i >= colIndex && i < colIndex + colSpan) total += rendered.item.size;
+    }
+    return total || own;
+  }
+  const frozenBandHeight = $derived(ctrl.frozenBandHeight);
+  const frozenRowTop = $derived(ctrl.frozenRowTop);
   const autoRowHeightOn = $derived(ctrl.autoRowHeightOn);
   const measureRowHeight = $derived(ctrl.measureRowHeight);
   const measuredRowHeightPx = $derived(ctrl.measuredRowHeightPx);
@@ -522,9 +569,8 @@
   const toggleSelectAllRows = $derived(ctrl.toggleSelectAllRows);
   const setActiveCell = $derived(ctrl.setActiveCell);
   const scrollActiveCellIntoView = $derived(ctrl.scrollActiveCellIntoView);
+  const cellSelectionState = $derived(ctrl.cellSelectionState);
   const getColumnWidth = $derived(ctrl.getColumnWidth);
-  const getCellRangeEdges = $derived(ctrl.getCellRangeEdges);
-  const fillHandleCell = $derived(ctrl.fillHandleCell);
   const isInFillPreview = $derived(ctrl.isInFillPreview);
   const fillMarqueeEdges = $derived(ctrl.fillMarqueeEdges);
   const startFillDrag = $derived(ctrl.startFillDrag);
@@ -755,6 +801,19 @@
      rotate-on-open both hang off it (SvGrid.css), and an override that
      dropped the class would lose both silently - which is the kind of bug
      that only shows up in someone else's app. -->
+{#snippet chartToggle()}
+  <button
+    type="button"
+    class="sv-grid-toolbar-btn sv-grid-chart-toggle"
+    class:is-active={ctrl.chartPanelOpen}
+    aria-label={ctrl.chartPanelOpen ? "Close chart" : "Open chart"}
+    aria-expanded={ctrl.chartPanelOpen}
+    onclick={() => (ctrl.chartPanelOpen = !ctrl.chartPanelOpen)}
+  >
+    {@render icon("chart")}
+    Chart
+  </button>
+{/snippet}
 {#snippet icon(name: GridIconName)}
   {@const override = opt.icons?.[name]}
   {#if override}
@@ -1000,6 +1059,48 @@
       {/if}
     </div>
   </div>
+{:else if ganttConfig}
+  <div
+    class="sv-grid-root sv-grid-gantt-root"
+    class:sv-grid-root-fill={opt.containerHeight === "100%"}
+    style={`height: ${
+      typeof opt.containerHeight === "string"
+        ? opt.containerHeight
+        : `${opt.containerHeight ?? 520}px`
+    }; display: flex; flex-direction: column;`}
+  >
+    {#if ganttConfig.searchable !== false}
+      <label class="sv-grid-board-search">
+        {@render icon("search")}
+        <input
+          type="search"
+          placeholder={ganttConfig.searchPlaceholder ??
+            messages.ganttSearchPlaceholder}
+          bind:value={ctrl.globalFilter}
+          aria-label="Search tasks"
+        />
+      </label>
+    {/if}
+    <div style="flex: 1 1 auto; min-height: 0;">
+      {#if getGanttView()}
+        {@const GanttView = getGanttView()}
+        <GanttView
+          data={boardData}
+          columns={opt.columns}
+          gantt={ganttConfig}
+          getRowId={opt.getRowId}
+        />
+      {:else}
+        <!-- The Gantt renderer ships in @svgrid/enterprise. Call
+             `enableGanttView()` (or `installEnterprise(api)`) to register it. -->
+        <div class="sv-grid-scheduler-upsell sv-grid-gantt-upsell" role="note">
+          <strong>{messages.ganttUpsellTitle}</strong>
+          <p>{messages.ganttUpsellBody}</p>
+          {@render enterpriseLicenseNote()}
+        </div>
+      {/if}
+    </div>
+  </div>
 {:else if chartViewConfig}
   <div
     class="sv-grid-root sv-grid-chart-root"
@@ -1046,6 +1147,9 @@
     </div>
   </div>
 {:else if pivotViewOn}
+  <!-- The Chart panel docks here the way it docks beside the flat grid,
+       and charts the pivot on screen: the root reserves the panel's edge and
+       the pivot bar carries the toggle the toolbar carries in flat mode. -->
   <div
     class="sv-grid-root sv-grid-pivot-root"
     class:sv-grid-root-fill={opt.containerHeight === "100%"}
@@ -1053,7 +1157,7 @@
       typeof opt.containerHeight === "string"
         ? opt.containerHeight
         : `${opt.containerHeight ?? 520}px`
-    }; display: flex; flex-direction: column;`}
+    }; display: flex; flex-direction: column; ${chartDockReserveStyle}`}
   >
     <div class="sv-grid-pivot-bar">
       <span class="sv-grid-pivot-badge">{messages.group}</span>
@@ -1063,6 +1167,9 @@
         aria-pressed="true"
         onclick={() => ctrl.togglePivotMode()}
       >{messages.pivotUpsellTitle}</button>
+      {#if ctrl.chartingEnabled}
+        {@render chartToggle()}
+      {/if}
     </div>
     <div style="flex: 1 1 auto; min-height: 0;">
       {#if pivotResult}
@@ -1081,6 +1188,9 @@
         </div>
       {/if}
     </div>
+    {#if ctrl.chartingEnabled && ctrl.chartPanelOpen && ChartPanelView}
+      <ChartPanelView {ctrl} />
+    {/if}
   </div>
 {:else}
 
@@ -1402,234 +1512,602 @@
     </tr>
   {/snippet}
 
-  <!-- A single pinned row (top or bottom). Read-only by design: no
-       inline editing, no row-selection checkbox, no fill handle.
-       Position-sticky CSS keeps it anchored to the top of the body or
-       the bottom of the viewport while the rest scrolls. -->
-  {#snippet pinnedRowBody(
-    rowData: TData,
-    where: "top" | "bottom",
-    index: number,
+  <!-- A row whose data has not arrived.
+
+       "loading" keeps the real columns and draws a shimmer bar in each,
+       so the table keeps its shape while blocks stream in - a full-width
+       bar would make the whole grid jump every time one landed. "failed"
+       is the opposite case: there is nothing per-column to say, just one
+       message and a way to try again, so it spans the row like a detail
+       cell does. Neither is selectable or editable; there is nothing
+       there to act on.
+
+       A failed block is a run of failed rows, one per row it claimed,
+       and one message serves the run: the first failed row on screen
+       carries it (the run's first row, or the top of the window when
+       the run started above it) and the rows under it are a plain
+       tinted band. A hundred "Could not load" lines for one block
+       was a wall of red. -->
+  {#snippet placeholderRowMarkup(
+    phRow: Row<TData>,
+    phRowIndex: number,
+    phState: "loading" | "failed",
+    phStyle: string,
+    phContinues: boolean,
   )}
     <tr
-      class={`sv-grid-row sv-grid-pinned-row sv-grid-pinned-row-${where}`}
-      data-pinned-row={where}
-      data-pinned-index={index}
+      class="sv-grid-row sv-grid-placeholder-row"
+      class:sv-grid-placeholder-failed={phState === "failed"}
+      class:sv-grid-placeholder-failed-cont={phContinues}
+      aria-busy={phState === "loading" ? "true" : undefined}
+      {...getGridRowA11yProps(phRowIndex + 1)}
+      style={phStyle}
     >
-      {#if showRowNumbersEffective}
-        <td
-          class="sv-grid-cell sv-grid-row-number-cell"
-          style={`width: ${rowNumberColumnWidth}px; min-width: ${rowNumberColumnWidth}px; max-width: ${rowNumberColumnWidth}px; left: 0;`}
-          >{#if where === "top"}{@render icon("pinned-row-top")}{:else}{@render icon("pinned-row-bottom")}{/if}</td
-        >
-      {/if}
-      {#if showRowSelectionEffective}
-        <td
-          class="sv-grid-cell sv-grid-selection-cell"
-          style={`width: ${selectionColumnWidth}px; min-width: ${selectionColumnWidth}px; max-width: ${selectionColumnWidth}px; left: ${showRowNumbersEffective ? rowNumberColumnWidth : 0}px;`}
-        ></td>
-      {/if}
-      {#if columnVirtualizationEnabled && columnWindowStart > 0}
-        <td
-          class="sv-grid-cell sv-grid-cell-spacer"
-          aria-hidden="true"
-          style={`width: ${columnWindowStart}px; min-width: ${columnWindowStart}px; max-width: ${columnWindowStart}px;`}
-        ></td>
-      {/if}
-      {#each renderedColumns as rendered (rendered.column.id)}
-        {@const value = getPinnedCellValue(rowData, rendered.column)}
-        {@const userCellClass = computePinnedCellClass(
-          rowData,
-          rendered.column,
-        )}
+      {#if phState === "failed"}
         <td
-          class={`sv-grid-cell ${userCellClass}`}
-          data-col-id={rendered.column.id}
-          data-pinned={isColumnPinned(rendered.column.id) ?? undefined}
-          style={`width: ${rendered.item.size}px; min-width: ${rendered.item.size}px; max-width: ${rendered.item.size}px; ${cellPinStyle(rendered.column.id)}`}
-          >{formatPinnedValue(rendered.column, value)}</td
+          class="sv-grid-cell sv-grid-placeholder-cell"
+          colspan={allColumns.length +
+            (showRowNumbersEffective ? 1 : 0) +
+            (showRowSelectionEffective ? 1 : 0)}
         >
-      {/each}
-      {#if columnVirtualizationEnabled && columnWindowRightSpacer > 0}
-        <td
-          class="sv-grid-cell sv-grid-cell-spacer"
-          aria-hidden="true"
-          style={`width: ${columnWindowRightSpacer}px; min-width: ${columnWindowRightSpacer}px; max-width: ${columnWindowRightSpacer}px;`}
-        ></td>
+          {#if !phContinues}
+            <div class="sv-grid-placeholder-failed-body">
+              <span class="sv-grid-placeholder-error">{messages.rowLoadFailed}</span>
+              {#if opt.onRetryRow}
+                <button
+                  type="button"
+                  class="sv-grid-placeholder-retry"
+                  onclick={() => ctrl.retryRow(phRow)}>{messages.rowLoadRetry}</button
+                >
+              {/if}
+            </div>
+          {/if}
+        </td>
+      {:else}
+        {#if showRowNumbersEffective}
+          <td class="sv-grid-cell sv-grid-rownum-cell"></td>
+        {/if}
+        {#if showRowSelectionEffective}
+          <td class="sv-grid-cell sv-grid-select-cell"></td>
+        {/if}
+        {#each allColumns as col (col.id)}
+          <td class="sv-grid-cell sv-grid-placeholder-cell">
+            <span class="sv-grid-placeholder-skeleton" aria-hidden="true"></span>
+          </td>
+        {/each}
       {/if}
     </tr>
   {/snippet}
 
-  <div
-    class="sv-grid-root"
-    class:sv-grid-root-fill={opt.containerHeight === "100%"}
-    style={chartDockReserveStyle}
-    data-move-grab={ctrl.moveGrabHover || ctrl.moveDrag ? "true" : undefined}
-    data-selbar={
-      ctrl.selectionBarOn && ctrl.selectionBarTarget.ids.length > 0
-        ? (getSelectionBarView() ? ctrl.selectionBarPosition : `upsell-${ctrl.selectionBarPosition}`)
-        : undefined
-    }
-    use:lazyRowResize={{
-      disabled: !ctrl.rowResizeOn,
-      // No gutter column on most grids, so fall back to the first body cell -
-      // otherwise `rowResize` would be a prop that silently does nothing.
-      anchor: "row",
-      onResize: (index, height) => ctrl.setRowResizeHeight(index, height),
-    }}
-    use:lazyColumnResize={{
-      disabled: !columnResizeEnabled,
-      getWidth: (columnId) => ctrl.getColumnWidth(columnId),
-      onResize: (columnId, width) => {
-        ctrl.columnWidths = { ...ctrl.columnWidths, [columnId]: width };
-      },
-      label: (columnId) => {
-        const col = ctrl.findColumnById(columnId);
-        return col ? toolPanelHeaderLabel(col) : columnId;
-      },
-      canResize: (columnId) => ctrl.columnResizable(columnId),
-      onAutosize: (columnId) => ctrl.autosizeColumn(columnId),
-    }}
-  >
-    {#if showGlobalFilterEffective}
-      <label class="sv-grid-global-filter">
-        Filter all rows
-        <input bind:value={ctrl.globalFilter} placeholder="Type to filter..." />
-      </label>
-    {/if}
-
-    {#if toolPanelEnabled || ctrl.chartingEnabled || ctrl.advancedFilter}
-      <div class="sv-grid-toolbar">
-        {#if ctrl.advancedFilter}
-          <!--
-            An advanced filter is set from a panel the consumer mounts, which
-            may be scrolled away or in a drawer. Without something here, rows
-            are missing from the grid with nothing on screen to explain why or
-            to undo it. This is that something: state plus a way out.
-          -->
-          <span class="sv-grid-advf-chip">
-            {@render icon("advanced-filter")}
-            {messages.advancedFilterActive}
-            <button
-              type="button"
-              class="sv-grid-advf-clear"
-              aria-label={messages.advancedFilterClear}
-              title={messages.advancedFilterClear}
-              onclick={() => (ctrl.advancedFilter = null)}
-            >{@render icon("clear")}</button>
-          </span>
-        {/if}
-        {#if toolPanelEnabled}
-          <button
-            type="button"
-            class="sv-grid-toolbar-btn"
-            class:is-active={ctrl.toolPanelOpen}
-            aria-label={ctrl.toolPanelOpen
-              ? "Close tool panel"
-              : "Open tool panel (columns & filters)"}
-            aria-expanded={ctrl.toolPanelOpen}
-            onclick={() => (ctrl.toolPanelOpen = !ctrl.toolPanelOpen)}
-          >
-            {@render icon("tool-panel")}
-            Columns &amp; Filters
-          </button>
-        {/if}
-        {#if ctrl.chartingEnabled}
-          <button
-            type="button"
-            class="sv-grid-toolbar-btn sv-grid-chart-toggle"
-            class:is-active={ctrl.chartPanelOpen}
-            aria-label={ctrl.chartPanelOpen ? "Close chart" : "Open chart"}
-            aria-expanded={ctrl.chartPanelOpen}
-            onclick={() => (ctrl.chartPanelOpen = !ctrl.chartPanelOpen)}
-          >
-            {@render icon("chart")}
-            Chart
-          </button>
-        {/if}
-      </div>
-    {/if}
-
-    {#if hasMeasured && (opt.paginationPosition === "top" || opt.paginationPosition === "both")}
-      <GridFooter {ctrl} {icon} showStatus={false} top pager pageSizeOptions={opt.pageSizeOptions} />
-    {/if}
-
-    <div
-      class="sv-grid-shell"
-      style={`height: ${
-        typeof opt.containerHeight === "string"
-          ? opt.containerHeight
-          : `${opt.containerHeight ?? 520}px`
-      }; --sg-thead-h: ${headerHeight}px; --sg-pinned-row-h: ${typeof opt.rowHeight === "number" ? opt.rowHeight : 30}px;`}
-    >
-      <div
-        class="sv-grid-container sv-grid-container-custom-scrollbars"
-        class:sv-grid-has-vscroll={hasMeasured && hasVerticalOverflow}
-        class:sv-grid-has-hscroll={hasMeasured && hasHorizontalOverflow}
-        class:sv-grid-narrow={ctrl.isNarrowResponsive}
-        bind:this={ctrl.scrollContainer}
-        onscroll={onBodyScroll}
-        style={`overflow: auto; position: relative; height: calc(100% - ${hasMeasured && hasHorizontalOverflow ? 16 : 0}px);`}
-      >
-        <table
-          bind:this={ctrl.gridRootEl}
-          class="sv-grid-table"
-          class:sv-grid-no-row-hover={opt.enableRowHover !== true}
-          {...getGridRootA11yProps({
-            activeDescendantId,
-            rowCount: allRows.length,
-            colCount: allColumns.length,
-            treegrid: !!opt.serverGroup || !!opt.treeData,
-          })}
-          onkeydown={onGridKeyDown}
-          onpaste={onGridPaste}
-          style={`min-width: ${totalColumnWidth}px;`}
-        >
-          <!-- svelte-ignore a11y_no_redundant_roles -->
-          <thead class="sv-grid-head" bind:this={ctrl.theadEl} role="rowgroup">
-            <!-- Multi-level group header rows. Only present when the
-                 consumer's column tree has `columns: [...]` nesting.
-                 Each TH spans the leaf widths underneath via the
-                 precomputed `widthPx` + `colSpan` from groupHeaderRows. -->
-            {#each groupHeaderRows as row (row.id)}
-              <tr
-                class="sv-grid-row sv-grid-header-row sv-grid-group-header-row"
-                {...getGridRowA11yProps()}
-                style={opt.headerHeight
-                  ? `height: ${opt.headerHeight}px;`
-                  : undefined}
-              >
-                {#if showRowNumbersEffective}
-                  <th
-                    class="sv-grid-column sv-grid-row-number-column"
-                    style={`width: ${rowNumberColumnWidth}px; min-width: ${rowNumberColumnWidth}px; max-width: ${rowNumberColumnWidth}px; left: 0;`}
-                    aria-hidden="true"
-                  ></th>
-                {/if}
-                {#if showRowSelectionEffective}
-                  <th
-                    class="sv-grid-column sv-grid-selection-column"
-                    style={`width: ${selectionColumnWidth}px; min-width: ${selectionColumnWidth}px; max-width: ${selectionColumnWidth}px; left: ${showRowNumbersEffective ? rowNumberColumnWidth : 0}px;`}
-                    aria-hidden="true"
-                  ></th>
-                {/if}
-                {#if columnVirtualizationEnabled && columnWindowStart > 0}
-                  <th
-                    class="sv-grid-column sv-grid-column-spacer"
-                    aria-hidden="true"
-                    style={`width: ${columnWindowStart}px; min-width: ${columnWindowStart}px; max-width: ${columnWindowStart}px;`}
-                  ></th>
-                {/if}
-                {#each row.cells as cell (cell.key)}
-                  <th
-                    class="sv-grid-column sv-grid-group-header-cell"
-                    class:sv-grid-group-header-placeholder={cell.isPlaceholder}
-                    colspan={cell.colSpan}
-                    style={`width: ${cell.widthPx}px; min-width: ${cell.widthPx}px; max-width: ${cell.widthPx}px;`}
-                  >
-                    {#if !cell.isPlaceholder}
-                      {#if cell.collapsible}
-                        <button
+  <!-- A single pinned row (top or bottom). Read-only by design: no
+       inline editing, no row-selection checkbox, no fill handle.
+       Position-sticky CSS keeps it anchored to the top of the body or
+       the bottom of the viewport while the rest scrolls. -->
+  <!--
+    One body row, whatever path renders it: the virtualized window, the
+    plain full-list body, or the frozen rows pinned above the window. The
+    two loops used to carry a copy each and had drifted apart (cell
+    tooltips on one, the fill handle on the other), so a feature landed in
+    one mode and not the other. `rowStyle` is the height the caller knows:
+    the virtualizer's measured size, or the declared one.
+  -->
+  {#snippet bodyRow(row: Row<TData>, rowIndex: number, rowStyle: string)}
+                  {@const phState = ctrl.placeholderStateOf(row)}
+                  {#if phState}
+                    {@const phContinues =
+                      phState === "failed" &&
+                      rowIndex > firstRenderedRowIndex &&
+                      ctrl.placeholderStateOf(allRows[rowIndex - 1]!) === "failed"}
+                    {@render placeholderRowMarkup(row, rowIndex, phState, rowStyle, phContinues)}
+                  {:else if opt.isDetailRow?.(row.original as TData, rowIndex)}
+                    {@render detailRowMarkup(row, rowIndex)}
+                  {:else if isGroupRow(row) && !groupColumnMode}
+                    <tr
+                      class="sv-grid-row sv-grid-group-row"
+                      class:sv-grid-row-selected={isRowSelected(row.id)}
+                      class:sv-grid-row-frozen={rowIndex < frozenRowCount}
+                      class:sv-grid-row-frozen-last={frozenRowCount > 0 && rowIndex === frozenRowCount - 1}
+                      style:top={rowIndex < frozenRowCount ? `${frozenRowTop(rowIndex)}px` : undefined}
+                      aria-level={row.depth + 1}
+                      aria-expanded={row.getIsExpanded?.() ? "true" : "false"}
+                      {...getGridRowA11yProps(rowIndex + 1)}
+                      class:sv-grid-row-collapsed={ctrl.isRowCollapsed(rowIndex)}
+                      style={rowStyle}
+                    >
+                      <td
+                        class="sv-grid-cell sv-grid-group-cell"
+                        class:sv-grid-cell-active={activeCell.rowIndex ===
+                          rowIndex}
+                        colspan={allColumns.length +
+                          (showRowNumbersEffective ? 1 : 0) +
+                          (showRowSelectionEffective ? 1 : 0)}
+                        onclick={() => row.toggleExpanded?.()}
+                      >
+                        {@render groupRowContent(row)}
+                      </td>
+                    </tr>
+                  {:else}
+                    {@const userRowClass = computeRowClass(row, rowIndex)}
+                    <tr
+                      class={`sv-grid-row ${userRowClass} ${rowDropClass(rowIndex)}`}
+                      class:sv-grid-row-selected={isRowSelected(row.id)}
+                      class:sv-grid-row-alt={opt.zebraRows &&
+                        rowIndex % 2 === 1}
+                      class:sv-grid-row-draggable={rowDragManagedEffective}
+                      class:sv-grid-group-footer-row={isGroupFooterRow(row)}
+                      class:sv-grid-grand-total-row={isGrandTotalRow(row)}
+                      class:sv-grid-row-auto-height={autoRowHeightOn}
+                      class:sv-grid-row-frozen={rowIndex < frozenRowCount}
+                      class:sv-grid-row-frozen-last={frozenRowCount > 0 && rowIndex === frozenRowCount - 1}
+                      style:top={rowIndex < frozenRowCount ? `${frozenRowTop(rowIndex)}px` : undefined}
+                      {...getGridRowA11yProps(rowIndex + 1)}
+                      aria-level={sgAriaLevel(row)}
+                      aria-expanded={sgAriaExpanded(row)}
+                      {...rowDragAttrs(rowIndex)}
+                      class:sv-grid-row-collapsed={ctrl.isRowCollapsed(rowIndex)}
+                      style={rowStyle}
+                      use:measureRowHeight={rowIndex}
+                    >
+                      {#if showRowNumbersEffective}
+                        <td
+                          class="sv-grid-cell sv-grid-row-number-cell"
+                          style={`width: ${rowNumberColumnWidth}px; min-width: ${rowNumberColumnWidth}px; max-width: ${rowNumberColumnWidth}px; left: 0;`}
+                          >{rowIndex + 1}</td
+                        >
+                      {/if}
+                      {#if showRowSelectionEffective}
+                        <td
+                          class="sv-grid-cell sv-grid-selection-cell"
+                          style={`width: ${selectionColumnWidth}px; min-width: ${selectionColumnWidth}px; max-width: ${selectionColumnWidth}px; left: ${showRowNumbersEffective ? rowNumberColumnWidth : 0}px;`}
+                          onclick={() => toggleRowSelectionById(row.id)}
+                        >
+                          <button
+                            type="button"
+                            class="sv-grid-checkbox"
+                            role="checkbox"
+                            aria-checked={isRowSelected(row.id)}
+                            aria-label="Select row"
+                            onclick={(event) => {
+                              event.stopPropagation();
+                              toggleRowSelectionById(row.id);
+                            }}
+                            onkeydown={(event) =>
+                              toggleCheckboxWithKeyboard(event, () => {
+                                event.stopPropagation();
+                                toggleRowSelectionById(row.id);
+                              })}
+                          ></button>
+                        </td>
+                      {/if}
+                      {#if columnVirtualizationEnabled && columnWindowStart > 0}
+                        <td
+                          class="sv-grid-cell sv-grid-cell-spacer"
+                          aria-hidden="true"
+                          style={`width: ${columnWindowStart}px; min-width: ${columnWindowStart}px; max-width: ${columnWindowStart}px;`}
+                        ></td>
+                      {/if}
+                      {#each renderedColumns as rendered (rendered.column.id)}
+                        {@const colIndex = rendered.item.index}
+                        {@const draw = mergeIndex
+                          ? mergeDrawAt(mergeIndex, rowIndex, colIndex, rowIndex < frozenRowCount ? mergeFrozenWindow : mergeBodyWindow)
+                          : null}
+                        {#if draw?.kind !== "skip"}
+                        {@const cellRow = draw?.kind === "continuation" ? (allRows[draw.merge.rowIndex] ?? row) : row}
+                        {@const cellColumn = draw?.kind === "continuation" ? (allColumns[draw.merge.colIndex] ?? rendered.column) : rendered.column}
+                        {@const baseValue = getColumnBaseValue(
+                          cellRow,
+                          cellColumn,
+                        )}
+                        {@const cellValue = getCellDisplayValue(
+                          cellRow.id,
+                          cellColumn.id,
+                          baseValue,
+                        )}
+                        {@const isEditing =
+                          ctrl.editingCell?.rowId === cellRow.id &&
+                          ctrl.editingCell?.columnId === cellColumn.id}
+                        {@const inRowEdit =
+                          !!fullRowEdit &&
+                          fullRowEdit.rowId === cellRow.id &&
+                          cellColumn.id in fullRowEdit.draft}
+                        {@const cellSel = cellSelectionState(rowIndex, colIndex)}
+                        {@const fillEdges = fillMarqueeEdges(rowIndex, colIndex)}
+                        {@const userCellClass = computeCellClass(
+                          cellRow,
+                          cellColumn,
+                        )}
+                        {@const cellTooltip = computeCellTooltip(
+                          cellRow,
+                          cellColumn,
+                        )}
+                        {@const cellValidity = computeCellValidity(
+                          cellRow,
+                          cellColumn,
+                        )}
+                        {@const cellNote = computeCellNote(
+                          cellRow,
+                          cellColumn,
+                        )}
+                        {@const tdWidth = draw ? mergedWidth(colIndex, draw.colSpan, rendered.item.size) : rendered.item.size}
+                        <td
+                          rowspan={draw && draw.rowSpan > 1 ? draw.rowSpan : undefined}
+                          colspan={draw && draw.colSpan > 1 ? draw.colSpan : undefined}
+                          data-merge-origin={draw ? `${draw.merge.rowIndex}:${draw.merge.colIndex}` : undefined}
+                          class:sv-grid-cell-merged={!!draw}
+                          class={`sv-grid-cell ${userCellClass}`}
+                          class:sv-grid-cell-editing={isEditing || inRowEdit}
+                          class:sv-grid-cell-collapsed={!!collapsedColumns[rendered.column.id]}
+                          class:sv-grid-cell-active={!!cellSel?.active}
+                          class:sv-grid-cell-has-fill-handle={!!cellSel?.fillHandle}
+                          class:sv-grid-cell-cf={hasConditionalFormats}
+                          class:sv-grid-cell-invalid={cellValidity.invalid}
+                          class:sv-grid-cell-has-note={cellNote != null}
+                          aria-invalid={cellValidity.invalid ? "true" : undefined}
+                          data-svgrid-row={rowIndex}
+                          data-svgrid-col={colIndex}
+                          data-col-id={rendered.column.id}
+                          data-align={getColumnAlign(rendered.column)}
+                          data-pinned={isColumnPinned(rendered.column.id) ??
+                            undefined}
+                          data-selected-range={cellSel?.edges ? "true" : undefined}
+                          data-range-top={cellSel?.edges?.top ? "true" : undefined}
+                          data-range-bottom={cellSel?.edges?.bottom
+                            ? "true"
+                            : undefined}
+                          data-range-left={cellSel?.edges?.left
+                            ? "true"
+                            : undefined}
+                          data-range-right={cellSel?.edges?.right
+                            ? "true"
+                            : undefined}
+                          data-fill-preview={isInFillPreview(rowIndex, colIndex)
+                            ? "true"
+                            : undefined}
+                          data-fill-top={fillEdges?.top ? "true" : undefined}
+                          data-fill-bottom={fillEdges?.bottom ? "true" : undefined}
+                          data-fill-left={fillEdges?.left ? "true" : undefined}
+                          data-fill-right={fillEdges?.right ? "true" : undefined}
+                          style={`width: ${tdWidth}px; min-width: ${tdWidth}px; max-width: ${tdWidth}px; ${cellPinStyle(rendered.column.id)}`}
+                          onpointerdown={(event) =>
+                            onCellPointerDown(rowIndex, colIndex, event)}
+                          onpointerenter={(event) => {
+                            onCellPointerEnter(rowIndex, colIndex);
+                            // The column tooltip fires on whole-cell hover; a
+                            // per-cell note waits for its corner below. A
+                            // validation message wins over the column's tooltip.
+                            const tip =
+                              cellValidity.invalid && cellValidity.message
+                                ? cellValidity.message
+                                : cellTooltip;
+                            if (tip)
+                              showTooltipFor(
+                                event.currentTarget as HTMLElement,
+                                tip,
+                              );
+                          }}
+                          onpointerleave={hideTooltip}
+                          ondblclick={() =>
+                            emitCellDoubleClick(rowIndex, colIndex)}
+                          onclick={() => onCellClick(rowIndex, colIndex)}
+                          oncontextmenu={(event) =>
+                            openContextMenu(
+                              event,
+                              rowIndex,
+                              colIndex,
+                              rendered.column.id,
+                            )}
+                          use:cellFlashAction={{
+                            rowId: cellRow.id,
+                            value: cellValue,
+                            active: !!cellColumn.columnDef.cellFlash,
+                            className: flashClassFor(
+                              cellColumn.columnDef.cellFlash,
+                            ),
+                          }}
+                          role="gridcell"
+                          id={getGridCellDomId(ctrl.gridDomId, rowIndex, colIndex)}
+                          aria-colindex={colIndex + 1}
+                          aria-rowindex={rowIndex + 1}
+                          aria-selected={isRowSelected(row.id)}
+                        >
+                          {#if inRowEdit || isEditing}
+                            <!-- The editing cell stays empty until the lazy
+                                 editor chunk lands, exactly as it already did
+                                 for the dropdown / date editors. Falling back
+                                 to the read-only value here would flash stale
+                                 content into a cell the user is editing. -->
+                            {#if CellEditor}
+                              <CellEditor {ctrl} column={cellColumn} row={cellRow} fullRow={inRowEdit} />
+                            {/if}
+                          {:else}
+                            {#if plainCellBody}
+                              {@render cellBody(cellRow, cellColumn, cellValue)}
+                            {:else}
+                              {@render cellBodyWithFormat(
+                                cellRow,
+                                cellColumn,
+                                cellValue,
+                              )}
+                            {/if}
+                          {/if}
+                          {#if !isEditing && cellSel?.fillHandle}
+                            <!-- Excel-style fill handle: drag down/right to
+                           extend the selection and pattern-fill the new
+                           cells on release. Rendered inside the bottom-
+                           right cell of the selection range (or active
+                           cell if there's no range). -->
+                            <!-- svelte-ignore a11y_no_static_element_interactions -->
+                            <div
+                              class="sv-grid-fill-handle"
+                              role="button"
+                              aria-label="Fill handle"
+                              tabindex={-1}
+                              onpointerdown={(event) =>
+                                startFillDrag(event, rowIndex, colIndex)}
+                              ondblclick={(event) => {
+                                // Not the cell's double-click: this fills
+                                // down as far as the neighbour column goes.
+                                event.stopPropagation();
+                                event.preventDefault();
+                                ctrl.fillDownToNeighbour();
+                              }}
+                            ></div>
+                          {/if}
+                          {#if cellValidity.invalid && cellValidity.message}
+                            <!-- The validation message, for assistive tech: the
+                                 tooltip above is mouse-only, and unlike a title
+                                 a visually-hidden span adds no second native
+                                 tooltip competing with the custom one. -->
+                            <span class="sv-grid-sr-only"
+                              >{cellValidity.message}</span
+                            >
+                          {/if}
+                          {#if cellNote != null && !isEditing}
+                            <span
+                              class="sv-grid-cell-note-corner"
+                              aria-label="Note"
+                              onpointerenter={(event) => {
+                                event.stopPropagation();
+                                showTooltipFor(
+                                  event.currentTarget as HTMLElement,
+                                  cellNote,
+                                );
+                              }}
+                              onpointerleave={(event) => {
+                                event.stopPropagation();
+                                hideTooltip();
+                              }}
+                            ></span>
+                          {/if}
+                        </td>
+                        {/if}
+                      {/each}
+                      {#if columnVirtualizationEnabled && columnWindowRightSpacer > 0}
+                        <td
+                          class="sv-grid-cell sv-grid-cell-spacer"
+                          aria-hidden="true"
+                          style={`width: ${columnWindowRightSpacer}px; min-width: ${columnWindowRightSpacer}px; max-width: ${columnWindowRightSpacer}px;`}
+                        ></td>
+                      {/if}
+                    </tr>
+                  {/if}
+  {/snippet}
+  {#snippet pinnedRowBody(
+    rowData: TData,
+    where: "top" | "bottom",
+    index: number,
+  )}
+    <tr
+      class={`sv-grid-row sv-grid-pinned-row sv-grid-pinned-row-${where}`}
+      data-pinned-row={where}
+      data-pinned-index={index}
+    >
+      {#if showRowNumbersEffective}
+        <td
+          class="sv-grid-cell sv-grid-row-number-cell"
+          style={`width: ${rowNumberColumnWidth}px; min-width: ${rowNumberColumnWidth}px; max-width: ${rowNumberColumnWidth}px; left: 0;`}
+          >{#if where === "top"}{@render icon("pinned-row-top")}{:else}{@render icon("pinned-row-bottom")}{/if}</td
+        >
+      {/if}
+      {#if showRowSelectionEffective}
+        <td
+          class="sv-grid-cell sv-grid-selection-cell"
+          style={`width: ${selectionColumnWidth}px; min-width: ${selectionColumnWidth}px; max-width: ${selectionColumnWidth}px; left: ${showRowNumbersEffective ? rowNumberColumnWidth : 0}px;`}
+        ></td>
+      {/if}
+      {#if columnVirtualizationEnabled && columnWindowStart > 0}
+        <td
+          class="sv-grid-cell sv-grid-cell-spacer"
+          aria-hidden="true"
+          style={`width: ${columnWindowStart}px; min-width: ${columnWindowStart}px; max-width: ${columnWindowStart}px;`}
+        ></td>
+      {/if}
+      {#each renderedColumns as rendered (rendered.column.id)}
+        {@const value = getPinnedCellValue(rowData, rendered.column)}
+        {@const userCellClass = computePinnedCellClass(
+          rowData,
+          rendered.column,
+        )}
+        <td
+          class={`sv-grid-cell ${userCellClass}`}
+          data-col-id={rendered.column.id}
+          data-pinned={isColumnPinned(rendered.column.id) ?? undefined}
+          style={`width: ${rendered.item.size}px; min-width: ${rendered.item.size}px; max-width: ${rendered.item.size}px; ${cellPinStyle(rendered.column.id)}`}
+          >{formatPinnedValue(rendered.column, value)}</td
+        >
+      {/each}
+      {#if columnVirtualizationEnabled && columnWindowRightSpacer > 0}
+        <td
+          class="sv-grid-cell sv-grid-cell-spacer"
+          aria-hidden="true"
+          style={`width: ${columnWindowRightSpacer}px; min-width: ${columnWindowRightSpacer}px; max-width: ${columnWindowRightSpacer}px;`}
+        ></td>
+      {/if}
+    </tr>
+  {/snippet}
+
+  <div
+    class="sv-grid-root"
+    class:sv-grid-root-fill={opt.containerHeight === "100%"}
+    style={chartDockReserveStyle}
+    data-move-grab={ctrl.moveGrabHover || ctrl.moveDrag ? "true" : undefined}
+    data-selbar={
+      ctrl.selectionBarVisible
+        ? (getSelectionBarView() ? ctrl.selectionBarPosition : `upsell-${ctrl.selectionBarPosition}`)
+        : undefined
+    }
+    use:lazyRowResize={{
+      disabled: !ctrl.rowResizeOn,
+      // No gutter column on most grids, so fall back to the first body cell -
+      // otherwise `rowResize` would be a prop that silently does nothing.
+      anchor: "row",
+      onResize: (index, height) => ctrl.resizeRowByUser(index, height),
+      onAutosize: (index) => ctrl.resizeRowByUser(index, null),
+    }}
+    use:lazyColumnResize={{
+      disabled: !columnResizeEnabled,
+      getWidth: (columnId) => ctrl.getColumnWidth(columnId),
+      onResize: (columnId, width) => {
+        ctrl.columnWidths = { ...ctrl.columnWidths, [columnId]: width };
+      },
+      onResizeEnd: (columnId, width, startWidth) => ctrl.resizeColumnByUser(columnId, width, startWidth),
+      label: (columnId) => {
+        const col = ctrl.findColumnById(columnId);
+        return col ? toolPanelHeaderLabel(col) : columnId;
+      },
+      canResize: (columnId) => ctrl.columnResizable(columnId),
+      onAutosize: (columnId) => ctrl.autosizeColumnByUser(columnId),
+    }}
+  >
+    {#if showGlobalFilterEffective}
+      <label class="sv-grid-global-filter">
+        Filter all rows
+        <input bind:value={ctrl.globalFilter} placeholder="Type to filter..." />
+      </label>
+    {/if}
+
+    {#if toolPanelEnabled || ctrl.chartingEnabled || ctrl.advancedFilter}
+      <div class="sv-grid-toolbar">
+        {#if ctrl.advancedFilter}
+          <!--
+            An advanced filter is set from a panel the consumer mounts, which
+            may be scrolled away or in a drawer. Without something here, rows
+            are missing from the grid with nothing on screen to explain why or
+            to undo it. This is that something: state plus a way out.
+          -->
+          <span class="sv-grid-advf-chip">
+            {@render icon("advanced-filter")}
+            {messages.advancedFilterActive}
+            <button
+              type="button"
+              class="sv-grid-advf-clear"
+              aria-label={messages.advancedFilterClear}
+              title={messages.advancedFilterClear}
+              onclick={() => (ctrl.advancedFilter = null)}
+            >{@render icon("clear")}</button>
+          </span>
+        {/if}
+        {#if toolPanelEnabled}
+          <button
+            type="button"
+            class="sv-grid-toolbar-btn"
+            class:is-active={ctrl.toolPanelOpen}
+            aria-label={ctrl.toolPanelOpen
+              ? "Close tool panel"
+              : "Open tool panel (columns & filters)"}
+            aria-expanded={ctrl.toolPanelOpen}
+            onclick={() => (ctrl.toolPanelOpen = !ctrl.toolPanelOpen)}
+          >
+            {@render icon("tool-panel")}
+            Columns &amp; Filters
+          </button>
+        {/if}
+        {#if ctrl.chartingEnabled}
+          {@render chartToggle()}
+        {/if}
+      </div>
+    {/if}
+
+    {#if hasMeasured && (opt.paginationPosition === "top" || opt.paginationPosition === "both")}
+      <GridFooter {ctrl} {icon} showStatus={false} top pager pageSizeOptions={opt.pageSizeOptions} />
+    {/if}
+
+    <div
+      class="sv-grid-shell"
+      style={`height: ${
+        typeof opt.containerHeight === "string"
+          ? opt.containerHeight
+          : `${opt.containerHeight ?? 520}px`
+      }; --sg-thead-h: ${headerHeight}px; --sg-frozen-h: ${frozenBandHeight}px; --sg-pinned-row-h: ${typeof opt.rowHeight === "number" ? opt.rowHeight : 30}px;`}
+    >
+      <div
+        class="sv-grid-container sv-grid-container-custom-scrollbars"
+        class:sv-grid-has-vscroll={hasMeasured && hasVerticalOverflow}
+        class:sv-grid-has-hscroll={hasMeasured && hasHorizontalOverflow}
+        class:sv-grid-narrow={ctrl.isNarrowResponsive}
+        bind:this={ctrl.scrollContainer}
+        onscroll={onBodyScroll}
+        style={`overflow: auto; position: relative; height: calc(100% - ${hasMeasured && hasHorizontalOverflow ? 16 : 0}px);`}
+      >
+        <table
+          bind:this={ctrl.gridRootEl}
+          class="sv-grid-table"
+          class:sv-grid-no-row-hover={opt.enableRowHover !== true}
+          {...getGridRootA11yProps({
+            activeDescendantId,
+            rowCount: allRows.length,
+            colCount: allColumns.length,
+            treegrid: !!opt.serverGroup || !!opt.treeData,
+          })}
+          onkeydown={onGridKeyDown}
+          onpaste={onGridPaste}
+          style={`min-width: ${totalColumnWidth}px;`}
+        >
+          <!-- svelte-ignore a11y_no_redundant_roles -->
+          <thead class="sv-grid-head" bind:this={ctrl.theadEl} role="rowgroup">
+            <!-- Multi-level group header rows. Only present when the
+                 consumer's column tree has `columns: [...]` nesting.
+                 Each TH spans the leaf widths underneath via the
+                 precomputed `widthPx` + `colSpan` from groupHeaderRows. -->
+            {#each groupHeaderRows as row (row.id)}
+              <tr
+                class="sv-grid-row sv-grid-header-row sv-grid-group-header-row"
+                {...getGridRowA11yProps()}
+                style={opt.headerHeight
+                  ? `height: ${opt.headerHeight}px;`
+                  : undefined}
+              >
+                {#if showRowNumbersEffective}
+                  <th
+                    class="sv-grid-column sv-grid-row-number-column"
+                    style={`width: ${rowNumberColumnWidth}px; min-width: ${rowNumberColumnWidth}px; max-width: ${rowNumberColumnWidth}px; left: 0;`}
+                    aria-hidden="true"
+                  ></th>
+                {/if}
+                {#if showRowSelectionEffective}
+                  <th
+                    class="sv-grid-column sv-grid-selection-column"
+                    style={`width: ${selectionColumnWidth}px; min-width: ${selectionColumnWidth}px; max-width: ${selectionColumnWidth}px; left: ${showRowNumbersEffective ? rowNumberColumnWidth : 0}px;`}
+                    aria-hidden="true"
+                  ></th>
+                {/if}
+                {#if columnVirtualizationEnabled && columnWindowStart > 0}
+                  <th
+                    class="sv-grid-column sv-grid-column-spacer"
+                    aria-hidden="true"
+                    style={`width: ${columnWindowStart}px; min-width: ${columnWindowStart}px; max-width: ${columnWindowStart}px;`}
+                  ></th>
+                {/if}
+                {#each row.cells as cell (cell.key)}
+                  <th
+                    class="sv-grid-column sv-grid-group-header-cell"
+                    class:sv-grid-group-header-placeholder={cell.isPlaceholder}
+                    colspan={cell.colSpan}
+                    style={`width: ${cell.widthPx}px; min-width: ${cell.widthPx}px; max-width: ${cell.widthPx}px;`}
+                  >
+                    {#if !cell.isPlaceholder}
+                      {#if cell.collapsible}
+                        <button
                           type="button"
                           class="sv-grid-group-toggle"
                           class:is-collapsed={cell.collapsed}
@@ -1723,6 +2201,7 @@
                     )}
                     <th
                       class="sv-grid-column"
+                      class:sv-grid-column-collapsed={!!collapsedColumns[header.column.id]}
                       class:is-drag-target-before={colDropOnId ===
                         header.column.id && colDropSide === "before"}
                       class:is-drag-target-after={colDropOnId ===
@@ -2180,6 +2659,9 @@
                 </td>
               </tr>
             {:else if rowVirtualizationEnabled}
+              {#each frozenRowList as row, rowIndex (row.id)}
+                {@render bodyRow(row, rowIndex, rowStyleFor(rowIndex))}
+              {/each}
               {#if rowTopSpacer > 0}
                 <tr class="sv-grid-row sv-grid-row-spacer" aria-hidden="true">
                   <td
@@ -2191,256 +2673,17 @@
                   ></td>
                 </tr>
               {/if}
+              <!-- The virtualizer counts every row, frozen ones included, so its
+                   offsets and sizes stay in row-index space; the frozen rows are
+                   rendered in the band above and SKIPPED here. Shifting the
+                   index instead (item i drawn as row i + N) sized every row with
+                   the height of the row N above it, so a row dragged taller under
+                   a freeze showed its neighbour's height. -->
               {#each virtualRows as rowItem (rowItem.key)}
                 {@const rowIndex = rowItem.index}
                 {@const row = allRows[rowIndex]}
-                {#if row}
-                  {#if opt.isDetailRow?.(row.original as TData, rowIndex)}
-                    {@render detailRowMarkup(row, rowIndex)}
-                  {:else if isGroupRow(row) && !groupColumnMode}
-                    <tr
-                      class="sv-grid-row sv-grid-group-row"
-                      class:sv-grid-row-selected={isRowSelected(row.id)}
-                      aria-level={row.depth + 1}
-                      aria-expanded={row.getIsExpanded?.() ? "true" : "false"}
-                      {...getGridRowA11yProps(rowIndex + 1)}
-                      style={rowHeightStyle(rowItem.size)}
-                    >
-                      <td
-                        class="sv-grid-cell sv-grid-group-cell"
-                        class:sv-grid-cell-active={activeCell.rowIndex ===
-                          rowIndex}
-                        colspan={allColumns.length +
-                          (showRowNumbersEffective ? 1 : 0) +
-                          (showRowSelectionEffective ? 1 : 0)}
-                        onclick={() => row.toggleExpanded?.()}
-                      >
-                        {@render groupRowContent(row)}
-                      </td>
-                    </tr>
-                  {:else}
-                    {@const userRowClass = computeRowClass(row, rowIndex)}
-                    <tr
-                      class={`sv-grid-row ${userRowClass} ${rowDropClass(rowIndex)}`}
-                      class:sv-grid-row-selected={isRowSelected(row.id)}
-                      class:sv-grid-row-alt={opt.zebraRows &&
-                        rowIndex % 2 === 1}
-                      class:sv-grid-row-draggable={rowDragManagedEffective}
-                      class:sv-grid-group-footer-row={isGroupFooterRow(row)}
-                      class:sv-grid-grand-total-row={isGrandTotalRow(row)}
-                      class:sv-grid-row-auto-height={autoRowHeightOn}
-                      {...getGridRowA11yProps(rowIndex + 1)}
-                      aria-level={sgAriaLevel(row)}
-                      aria-expanded={sgAriaExpanded(row)}
-                      {...rowDragAttrs(rowIndex)}
-                      style={rowHeightStyle(rowItem.size)}
-                      use:measureRowHeight={rowIndex}
-                    >
-                      {#if showRowNumbersEffective}
-                        <td
-                          class="sv-grid-cell sv-grid-row-number-cell"
-                          style={`width: ${rowNumberColumnWidth}px; min-width: ${rowNumberColumnWidth}px; max-width: ${rowNumberColumnWidth}px; left: 0;`}
-                          >{rowIndex + 1}</td
-                        >
-                      {/if}
-                      {#if showRowSelectionEffective}
-                        <td
-                          class="sv-grid-cell sv-grid-selection-cell"
-                          style={`width: ${selectionColumnWidth}px; min-width: ${selectionColumnWidth}px; max-width: ${selectionColumnWidth}px; left: ${showRowNumbersEffective ? rowNumberColumnWidth : 0}px;`}
-                          onclick={() => toggleRowSelectionById(row.id)}
-                        >
-                          <button
-                            type="button"
-                            class="sv-grid-checkbox"
-                            role="checkbox"
-                            aria-checked={isRowSelected(row.id)}
-                            aria-label="Select row"
-                            onclick={(event) => {
-                              event.stopPropagation();
-                              toggleRowSelectionById(row.id);
-                            }}
-                            onkeydown={(event) =>
-                              toggleCheckboxWithKeyboard(event, () => {
-                                event.stopPropagation();
-                                toggleRowSelectionById(row.id);
-                              })}
-                          ></button>
-                        </td>
-                      {/if}
-                      {#if columnVirtualizationEnabled && columnWindowStart > 0}
-                        <td
-                          class="sv-grid-cell sv-grid-cell-spacer"
-                          aria-hidden="true"
-                          style={`width: ${columnWindowStart}px; min-width: ${columnWindowStart}px; max-width: ${columnWindowStart}px;`}
-                        ></td>
-                      {/if}
-                      {#each renderedColumns as rendered (rendered.column.id)}
-                        {@const colIndex = rendered.item.index}
-                        {@const baseValue = getColumnBaseValue(
-                          row,
-                          rendered.column,
-                        )}
-                        {@const cellValue = getCellDisplayValue(
-                          row.id,
-                          rendered.column.id,
-                          baseValue,
-                        )}
-                        {@const isEditing =
-                          ctrl.editingCell?.rowId === row.id &&
-                          ctrl.editingCell?.columnId === rendered.column.id}
-                        {@const inRowEdit =
-                          !!fullRowEdit &&
-                          fullRowEdit.rowId === row.id &&
-                          rendered.column.id in fullRowEdit.draft}
-                        {@const rangeEdges = getCellRangeEdges(
-                          rowIndex,
-                          colIndex,
-                        )}
-                        {@const fillEdges = fillMarqueeEdges(rowIndex, colIndex)}
-                        {@const hasFillHandle =
-                          fillHandleCell &&
-                          fillHandleCell.rowIndex === rowIndex &&
-                          fillHandleCell.colIndex === colIndex}
-                        {@const userCellClass = computeCellClass(
-                          row,
-                          rendered.column,
-                        )}
-                        {@const cellValidity = computeCellValidity(
-                          row,
-                          rendered.column,
-                        )}
-                        {@const cellNote = computeCellNote(
-                          row,
-                          rendered.column,
-                        )}
-                        <td
-                          class={`sv-grid-cell ${userCellClass}`}
-                          class:sv-grid-cell-editing={isEditing || inRowEdit}
-                          class:sv-grid-cell-active={activeCell.rowIndex ===
-                            rowIndex && activeCell.colIndex === colIndex}
-                          class:sv-grid-cell-has-fill-handle={hasFillHandle}
-                          class:sv-grid-cell-cf={hasConditionalFormats}
-                          class:sv-grid-cell-invalid={cellValidity.invalid}
-                          class:sv-grid-cell-has-note={cellNote != null}
-                          aria-invalid={cellValidity.invalid ? "true" : undefined}
-                          title={cellValidity.message ?? undefined}
-                          data-svgrid-row={rowIndex}
-                          data-svgrid-col={colIndex}
-                          data-col-id={rendered.column.id}
-                          data-align={getColumnAlign(rendered.column)}
-                          data-pinned={isColumnPinned(rendered.column.id) ??
-                            undefined}
-                          data-selected-range={rangeEdges ? "true" : undefined}
-                          data-range-top={rangeEdges?.top ? "true" : undefined}
-                          data-range-bottom={rangeEdges?.bottom
-                            ? "true"
-                            : undefined}
-                          data-range-left={rangeEdges?.left
-                            ? "true"
-                            : undefined}
-                          data-range-right={rangeEdges?.right
-                            ? "true"
-                            : undefined}
-                          data-fill-preview={isInFillPreview(rowIndex, colIndex)
-                            ? "true"
-                            : undefined}
-                          data-fill-top={fillEdges?.top ? "true" : undefined}
-                          data-fill-bottom={fillEdges?.bottom ? "true" : undefined}
-                          data-fill-left={fillEdges?.left ? "true" : undefined}
-                          data-fill-right={fillEdges?.right ? "true" : undefined}
-                          style={`width: ${rendered.item.size}px; min-width: ${rendered.item.size}px; max-width: ${rendered.item.size}px; ${cellPinStyle(rendered.column.id)}`}
-                          onpointerdown={(event) =>
-                            onCellPointerDown(rowIndex, colIndex, event)}
-                          onpointerenter={() =>
-                            onCellPointerEnter(rowIndex, colIndex)}
-                          ondblclick={() =>
-                            emitCellDoubleClick(rowIndex, colIndex)}
-                          onclick={() => onCellClick(rowIndex, colIndex)}
-                          oncontextmenu={(event) =>
-                            openContextMenu(
-                              event,
-                              rowIndex,
-                              colIndex,
-                              rendered.column.id,
-                            )}
-                          use:cellFlashAction={{
-                            rowId: row.id,
-                            value: cellValue,
-                            active: !!rendered.column.columnDef.cellFlash,
-                            className: flashClassFor(
-                              rendered.column.columnDef.cellFlash,
-                            ),
-                          }}
-                          role="gridcell"
-                          id={getGridCellDomId(ctrl.gridDomId, rowIndex, colIndex)}
-                          aria-colindex={colIndex + 1}
-                          aria-rowindex={rowIndex + 1}
-                          aria-selected={isRowSelected(row.id)}
-                        >
-                          {#if inRowEdit || isEditing}
-                            <!-- The editing cell stays empty until the lazy
-                                 editor chunk lands, exactly as it already did
-                                 for the dropdown / date editors. Falling back
-                                 to the read-only value here would flash stale
-                                 content into a cell the user is editing. -->
-                            {#if CellEditor}
-                              <CellEditor {ctrl} column={rendered.column} {row} fullRow={inRowEdit} />
-                            {/if}
-                          {:else}
-                            {#if plainCellBody}
-                              {@render cellBody(row, rendered.column, cellValue)}
-                            {:else}
-                              {@render cellBodyWithFormat(
-                                row,
-                                rendered.column,
-                                cellValue,
-                              )}
-                            {/if}
-                          {/if}
-                          {#if !isEditing && fillHandleCell && fillHandleCell.rowIndex === rowIndex && fillHandleCell.colIndex === colIndex}
-                            <!-- Excel-style fill handle: drag down/right to
-                           extend the selection and pattern-fill the new
-                           cells on release. Rendered inside the bottom-
-                           right cell of the selection range (or active
-                           cell if there's no range). -->
-                            <!-- svelte-ignore a11y_no_static_element_interactions -->
-                            <div
-                              class="sv-grid-fill-handle"
-                              role="button"
-                              aria-label="Fill handle"
-                              tabindex={-1}
-                              onpointerdown={(event) =>
-                                startFillDrag(event, rowIndex, colIndex)}
-                            ></div>
-                          {/if}
-                          {#if cellNote != null && !isEditing}
-                            <span
-                              class="sv-grid-cell-note-corner"
-                              aria-label="Note"
-                              onpointerenter={(event) => {
-                                event.stopPropagation();
-                                showTooltipFor(
-                                  event.currentTarget as HTMLElement,
-                                  cellNote,
-                                );
-                              }}
-                              onpointerleave={(event) => {
-                                event.stopPropagation();
-                                hideTooltip();
-                              }}
-                            ></span>
-                          {/if}
-                        </td>
-                      {/each}
-                      {#if columnVirtualizationEnabled && columnWindowRightSpacer > 0}
-                        <td
-                          class="sv-grid-cell sv-grid-cell-spacer"
-                          aria-hidden="true"
-                          style={`width: ${columnWindowRightSpacer}px; min-width: ${columnWindowRightSpacer}px; max-width: ${columnWindowRightSpacer}px;`}
-                        ></td>
-                      {/if}
-                    </tr>
-                  {/if}
+                {#if row && rowIndex >= frozenRowCount}
+                  {@render bodyRow(row, rowIndex, rowHeightStyle(rowItem.size))}
                 {/if}
               {/each}
               {#if rowBottomSpacer > 0}
@@ -2456,253 +2699,7 @@
               {/if}
             {:else}
               {#each allRows as row, rowIndex (row.id)}
-                {#if opt.isDetailRow?.(row.original as TData, rowIndex)}
-                  {@render detailRowMarkup(row, rowIndex)}
-                {:else if isGroupRow(row) && !groupColumnMode}
-                  <tr
-                    class="sv-grid-row sv-grid-group-row"
-                    class:sv-grid-row-selected={isRowSelected(row.id)}
-                    aria-level={row.depth + 1}
-                    aria-expanded={row.getIsExpanded?.() ? "true" : "false"}
-                    {...getGridRowA11yProps(rowIndex + 1)}
-                    style={rowStyleFor(rowIndex)}
-                  >
-                    <td
-                      class="sv-grid-cell sv-grid-group-cell"
-                      class:sv-grid-cell-active={activeCell.rowIndex ===
-                        rowIndex}
-                      colspan={allColumns.length +
-                        (showRowNumbersEffective ? 1 : 0) +
-                        (showRowSelectionEffective ? 1 : 0)}
-                      onclick={() => row.toggleExpanded?.()}
-                    >
-                      {@render groupRowContent(row)}
-                    </td>
-                  </tr>
-                {:else}
-                  {@const userRowClass = computeRowClass(row, rowIndex)}
-                  <tr
-                    class={`sv-grid-row ${userRowClass} ${rowDropClass(rowIndex)}`}
-                    class:sv-grid-row-selected={isRowSelected(row.id)}
-                    class:sv-grid-row-alt={opt.zebraRows &&
-                      rowIndex % 2 === 1}
-                    class:sv-grid-row-draggable={rowDragManagedEffective}
-                    class:sv-grid-group-footer-row={isGroupFooterRow(row)}
-                    class:sv-grid-grand-total-row={isGrandTotalRow(row)}
-                    class:sv-grid-row-auto-height={autoRowHeightOn}
-                    {...getGridRowA11yProps(rowIndex + 1)}
-                    aria-level={sgAriaLevel(row)}
-                    aria-expanded={sgAriaExpanded(row)}
-                    {...rowDragAttrs(rowIndex)}
-                    style={rowStyleFor(rowIndex)}
-                    use:measureRowHeight={rowIndex}
-                  >
-                    {#if showRowNumbersEffective}
-                      <td
-                        class="sv-grid-cell sv-grid-row-number-cell"
-                        style={`width: ${rowNumberColumnWidth}px; min-width: ${rowNumberColumnWidth}px; max-width: ${rowNumberColumnWidth}px; left: 0;`}
-                        >{rowIndex + 1}</td
-                      >
-                    {/if}
-                    {#if showRowSelectionEffective}
-                      <td
-                        class="sv-grid-cell sv-grid-selection-cell"
-                        style={`width: ${selectionColumnWidth}px; min-width: ${selectionColumnWidth}px; max-width: ${selectionColumnWidth}px; left: ${showRowNumbersEffective ? rowNumberColumnWidth : 0}px;`}
-                        onclick={() => toggleRowSelectionById(row.id)}
-                      >
-                        <button
-                          type="button"
-                          class="sv-grid-checkbox"
-                          role="checkbox"
-                          aria-checked={isRowSelected(row.id)}
-                          aria-label="Select row"
-                          onclick={(event) => {
-                            event.stopPropagation();
-                            toggleRowSelectionById(row.id);
-                          }}
-                          onkeydown={(event) =>
-                            toggleCheckboxWithKeyboard(event, () => {
-                              event.stopPropagation();
-                              toggleRowSelectionById(row.id);
-                            })}
-                        ></button>
-                      </td>
-                    {/if}
-                    {#if columnVirtualizationEnabled && columnWindowStart > 0}
-                      <td
-                        class="sv-grid-cell sv-grid-cell-spacer"
-                        aria-hidden="true"
-                        style={`width: ${columnWindowStart}px; min-width: ${columnWindowStart}px; max-width: ${columnWindowStart}px;`}
-                      ></td>
-                    {/if}
-                    {#each renderedColumns as rendered (rendered.column.id)}
-                      {@const colIndex = rendered.item.index}
-                      {@const baseValue = getColumnBaseValue(
-                        row,
-                        rendered.column,
-                      )}
-                      {@const cellValue = getCellDisplayValue(
-                        row.id,
-                        rendered.column.id,
-                        baseValue,
-                      )}
-                      {@const isEditing =
-                        ctrl.editingCell?.rowId === row.id &&
-                        ctrl.editingCell?.columnId === rendered.column.id}
-                      {@const inRowEdit =
-                        !!fullRowEdit &&
-                        fullRowEdit.rowId === row.id &&
-                        rendered.column.id in fullRowEdit.draft}
-                      {@const rangeEdges = getCellRangeEdges(
-                        rowIndex,
-                        colIndex,
-                      )}
-                      {@const userCellClass = computeCellClass(
-                        row,
-                        rendered.column,
-                      )}
-                      {@const cellTooltip = computeCellTooltip(
-                        row,
-                        rendered.column,
-                      )}
-                      {@const cellValidity = computeCellValidity(
-                        row,
-                        rendered.column,
-                      )}
-                      {@const cellNote = computeCellNote(row, rendered.column)}
-                      <td
-                        class={`sv-grid-cell ${userCellClass}`}
-                        class:sv-grid-cell-editing={isEditing || inRowEdit}
-                        class:sv-grid-cell-active={activeCell.rowIndex ===
-                          rowIndex && activeCell.colIndex === colIndex}
-                        class:sv-grid-cell-cf={hasConditionalFormats}
-                        class:sv-grid-cell-invalid={cellValidity.invalid}
-                        class:sv-grid-cell-has-note={cellNote != null}
-                        aria-invalid={cellValidity.invalid ? "true" : undefined}
-                        data-svgrid-row={rowIndex}
-                        data-svgrid-col={colIndex}
-                        data-col-id={rendered.column.id}
-                        data-align={getColumnAlign(rendered.column)}
-                        data-pinned={isColumnPinned(rendered.column.id) ??
-                          undefined}
-                        data-selected-range={rangeEdges ? "true" : undefined}
-                        data-range-top={rangeEdges?.top ? "true" : undefined}
-                        data-range-bottom={rangeEdges?.bottom
-                          ? "true"
-                          : undefined}
-                        data-range-left={rangeEdges?.left ? "true" : undefined}
-                        data-range-right={rangeEdges?.right
-                          ? "true"
-                          : undefined}
-                        style={`width: ${rendered.item.size}px; min-width: ${rendered.item.size}px; max-width: ${rendered.item.size}px; ${cellPinStyle(rendered.column.id)}`}
-                        onpointerdown={(event) =>
-                          onCellPointerDown(rowIndex, colIndex, event)}
-                        onpointerenter={(event) => {
-                          onCellPointerEnter(rowIndex, colIndex);
-                          // Column tooltip fires on whole-cell hover.
-                          // Per-cell notes are gated on the corner hot-
-                          // zone below (Excel-style: hover the small
-                          // triangle to read the note). A validation
-                          // message (when the cell is invalid) wins over
-                          // the plain column tooltip.
-                          const tip =
-                            cellValidity.invalid && cellValidity.message
-                              ? cellValidity.message
-                              : cellTooltip;
-                          if (tip)
-                            showTooltipFor(
-                              event.currentTarget as HTMLElement,
-                              tip,
-                            );
-                        }}
-                        onpointerleave={hideTooltip}
-                        ondblclick={() =>
-                          emitCellDoubleClick(rowIndex, colIndex)}
-                        onclick={() => onCellClick(rowIndex, colIndex)}
-                        oncontextmenu={(event) =>
-                          openContextMenu(
-                            event,
-                            rowIndex,
-                            colIndex,
-                            rendered.column.id,
-                          )}
-                        use:cellFlashAction={{
-                          rowId: row.id,
-                          value: cellValue,
-                          active: !!rendered.column.columnDef.cellFlash,
-                          className: flashClassFor(
-                            rendered.column.columnDef.cellFlash,
-                          ),
-                        }}
-                        {...getGridCellA11yProps({
-                          id: getGridCellDomId(ctrl.gridDomId, rowIndex, colIndex),
-                          rowIndex: rowIndex + 1,
-                          colIndex: colIndex + 1,
-                          selected: isRowSelected(row.id),
-                        })}
-                      >
-                        {#if inRowEdit || isEditing}
-                          <!-- Empty until the lazy editor chunk lands - see the
-                               matching branch in the pinned-row body above. -->
-                          {#if CellEditor}
-                            <CellEditor {ctrl} column={rendered.column} {row} fullRow={inRowEdit} />
-                          {/if}
-                        {:else}
-                          {@render cellBodyWithFormat(
-                            row,
-                            rendered.column,
-                            cellValue,
-                          )}
-                        {/if}
-                        {#if cellValidity.invalid && cellValidity.message}
-                          <!-- The validation message, for assistive tech.
-                               On this path the message is shown visually by
-                               the pointerenter tooltip above, which is mouse-
-                               only - a keyboard or screen-reader user would
-                               get `aria-invalid` with no reason attached.
-                               A visually-hidden span inside the cell is read
-                               as part of the cell when focus lands on it, and
-                               unlike `title` it adds no second native tooltip
-                               competing with the custom one. -->
-                          <span class="sv-grid-sr-only"
-                            >{cellValidity.message}</span
-                          >
-                        {/if}
-                        {#if cellNote != null && !isEditing}
-                          <!-- Excel-style per-cell note indicator. The
-                               triangle itself is the hot-zone; hover
-                               just the corner to see the note (Excel
-                               red-dot behaviour). The cell-level
-                               tooltip handler only shows the column
-                               tooltip, so the two surfaces stay
-                               separate. -->
-                          <span
-                            class="sv-grid-cell-note-corner"
-                            aria-label="Note"
-                            onpointerenter={(event) => {
-                              event.stopPropagation();
-                              showTooltipFor(
-                                event.currentTarget as HTMLElement,
-                                cellNote,
-                              );
-                            }}
-                            onpointerleave={(event) => {
-                              event.stopPropagation();
-                              hideTooltip();
-                            }}
-                          ></span>
-                        {/if}
-                      </td>
-                    {/each}
-                    {#if columnVirtualizationEnabled && columnWindowRightSpacer > 0}
-                      <td
-                        class="sv-grid-cell sv-grid-cell-spacer"
-                        aria-hidden="true"
-                        style={`width: ${columnWindowRightSpacer}px; min-width: ${columnWindowRightSpacer}px; max-width: ${columnWindowRightSpacer}px;`}
-                      ></td>
-                    {/if}
-                  </tr>
-                {/if}
+                {@render bodyRow(row, rowIndex, rowStyleFor(rowIndex))}
               {/each}
             {/if}
           </tbody>
@@ -3132,7 +3129,7 @@
          `absolute` against it, so moving it outside would anchor it to the
          page. The renderer is Enterprise and arrives through the
          selection-bar-view seam; without it, a short note in its place. -->
-    {#if ctrl.selectionBarOn && ctrl.selectionBarTarget.ids.length > 0}
+    {#if ctrl.selectionBarVisible}
       {#if getSelectionBarView()}
         {@const SelectionBarView = getSelectionBarView()}
         <SelectionBarView {ctrl} />