@svgrid/grid 3.0.4 → 3.0.6

package/src/SvGrid.svelte

@@ -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).
@@ -210,6 +214,10 @@
   const columnResizeEnabled = $derived(opt.columnResize === true);
   const selectionColumnWidth = $derived(ctrl.selectionColumnWidth);
   const rowNumberColumnWidth = $derived(ctrl.rowNumberColumnWidth);
+  const detailToggleColumnWidth = $derived(ctrl.detailToggleColumnWidth);
+  const detailToggleColumnLeft = $derived(ctrl.detailToggleColumnLeft);
+  const showDetailToggleEffective = $derived(ctrl.showDetailToggleEffective);
+  const detailToggleOf = $derived(ctrl.detailToggleOf);
   const showRowNumbersEffective = $derived(ctrl.showRowNumbersEffective);
   const columnMenuFor = $derived(ctrl.columnMenuFor);
   const filterMenuFor = $derived(ctrl.filterMenuFor);
@@ -272,7 +280,9 @@
     if (!rowDragManagedEffective || rowDropIndex !== rowIndex) return "";
     return rowDropSide === "after"
       ? "sv-grid-row-drop-after"
-      : "sv-grid-row-drop-before";
+      : rowDropSide === "into"
+        ? "sv-grid-row-drop-into"
+        : "sv-grid-row-drop-before";
   }
   const getColumnBaseValue = $derived(ctrl.getColumnBaseValue);
   const hasConditionalFormats = $derived(ctrl.hasConditionalFormats);
@@ -408,8 +418,15 @@
     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);
+  const stickyGroupRows = $derived(ctrl.stickyGroupRows);
+  const stickyTopOfRow = $derived(ctrl.stickyTopOfRow);
   // 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
@@ -536,12 +553,17 @@
   // normal cell path and their aggregates land under the right columns; only
   // the class distinguishes them. Typed here rather than cast inline - an `as`
   // inside template markup type-checks but breaks the vitest/build parse.
+  // The client-side controller sets the flags on the row objects it builds;
+  // a row model (server-side grouping) sets them on the data it hands over,
+  // so both places are read and either model's totals get the same chrome.
   const isGroupFooterRow = (row: Row<TData>): boolean =>
-    (row as { __groupFooter?: boolean }).__groupFooter === true;
+    (row as { __groupFooter?: boolean }).__groupFooter === true ||
+    (row.original as { __groupFooter?: boolean } | null)?.__groupFooter === true;
   // The grand total is a group footer that closes the whole set rather than one
   // group, so it carries both classes - shared chrome, heavier top rule.
   const isGrandTotalRow = (row: Row<TData>): boolean =>
-    (row as { __grandTotal?: boolean }).__grandTotal === true;
+    (row as { __grandTotal?: boolean }).__grandTotal === true ||
+    (row.original as { __grandTotal?: boolean } | null)?.__grandTotal === true;
   const computeCellClass = $derived(ctrl.computeCellClass);
   const computeCellTooltip = $derived(ctrl.computeCellTooltip);
   const computeCellValidity = $derived(ctrl.computeCellValidity);
@@ -769,9 +791,9 @@
   than four copies: four gates worded four ways is how a product ends up
   explaining its own licensing inconsistently.
 
-  Enterprise is SOFT-gated - the feature runs without a key and the grid shows
-  an unlicensed watermark - so this says exactly that rather than implying the
-  feature is inert without one.
+  Enterprise runs without a key during the evaluation and the grid shows the
+  watermark and a console notice, so this says exactly that rather than
+  implying the feature is inert without one.
 -->
 {#snippet enterpriseLicenseNote()}
   <p class="sv-grid-upsell-license">
@@ -1050,6 +1072,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"
@@ -1409,7 +1473,7 @@
         type="button"
         class="sv-grid-group-toggle"
         aria-expanded={row.getIsExpanded?.() ? "true" : "false"}
-        aria-label={row.getIsExpanded?.() ? "Collapse group" : "Expand group"}
+        aria-label={row.getIsExpanded?.() ? messages.collapseGroup : messages.expandGroup}
         onclick={(event) => {
           event.stopPropagation();
           row.toggleExpanded?.();
@@ -1417,7 +1481,7 @@
       >
       <span class="sv-grid-group-label">{headerLabel}: {groupValue}</span>
       <span class="sv-grid-group-count"
-        >{count} {count === 1 ? "row" : "rows"}</span
+        >{count} {count === 1 ? messages.rowSuffix : messages.rowsSuffix}</span
       >
       {#each allColumns as col (col.id)}
         {#if col.columnDef.aggregate && col.id !== groupingColumnId}
@@ -1440,27 +1504,113 @@
   <!-- A full-width detail row: one colspan cell spanning every column,
        hosting the consumer's `renderDetailRow` snippet. Auto height (no
        fixed row height) so the panel grows to fit its content. -->
-  {#snippet detailRowMarkup(detailRow: Row<TData>, detailRowIndex: number)}
+  {#snippet detailRowMarkup(detailRow: Row<TData>, detailRowIndex: number, rowStyle: string)}
+    <!-- A declared detailRowHeight sizes the row (the virtualizer counts on
+         it); the cell then scrolls what does not fit. Without one the row
+         is auto height, as before. -->
     <tr
       class="sv-grid-row sv-grid-detail-row"
+      class:sv-grid-detail-row-sized={opt.detailRowHeight != null}
+      style={opt.detailRowHeight != null ? `--sv-detail-h: ${ctrl.rowSizePxOf(detailRowIndex)}px; ${rowStyle}` : undefined}
       {...getGridRowA11yProps(detailRowIndex + 1)}
     >
       <td
         class="sv-grid-cell sv-grid-detail-cell"
         colspan={allColumns.length +
           (showRowNumbersEffective ? 1 : 0) +
-          (showRowSelectionEffective ? 1 : 0)}
+          (showRowSelectionEffective ? 1 : 0) +
+          (showDetailToggleEffective ? 1 : 0)}
       >
         {#if opt.renderDetailRow}
-          {@render opt.renderDetailRow({
-            row: detailRow.original as TData,
-            rowIndex: detailRowIndex,
-          })}
+          {#if opt.detailRowHeight != null}
+            <div class="sv-grid-detail-body">
+              {@render opt.renderDetailRow({
+                row: detailRow.original as TData,
+                rowIndex: detailRowIndex,
+              })}
+            </div>
+          {:else}
+            {@render opt.renderDetailRow({
+              row: detailRow.original as TData,
+              rowIndex: detailRowIndex,
+            })}
+          {/if}
         {/if}
       </td>
     </tr>
   {/snippet}
 
+  <!-- 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-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 phState === "failed"}
+        <td
+          class="sv-grid-cell sv-grid-placeholder-cell"
+          colspan={allColumns.length +
+            (showRowNumbersEffective ? 1 : 0) +
+            (showRowSelectionEffective ? 1 : 0) +
+            (showDetailToggleEffective ? 1 : 0)}
+        >
+          {#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}
+        {#if showDetailToggleEffective}
+          <td class="sv-grid-cell sv-grid-detail-toggle-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}
+
   <!-- 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
@@ -1474,15 +1624,24 @@
     the virtualizer's measured size, or the declared one.
   -->
   {#snippet bodyRow(row: Row<TData>, rowIndex: number, rowStyle: string)}
-                  {#if opt.isDetailRow?.(row.original as TData, rowIndex)}
-                    {@render detailRowMarkup(row, rowIndex)}
+                  {@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, rowStyle)}
                   {:else if isGroupRow(row) && !groupColumnMode}
+                    {@const stickyTop = stickyTopOfRow(rowIndex)}
                     <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}
+                      class:sv-grid-row-sticky-group={stickyTop !== undefined}
+                      style:top={rowIndex < frozenRowCount ? `${frozenRowTop(rowIndex)}px` : stickyTop !== undefined ? `${stickyTop}px` : undefined}
                       aria-level={row.depth + 1}
                       aria-expanded={row.getIsExpanded?.() ? "true" : "false"}
                       {...getGridRowA11yProps(rowIndex + 1)}
@@ -1495,7 +1654,8 @@
                           rowIndex}
                         colspan={allColumns.length +
                           (showRowNumbersEffective ? 1 : 0) +
-                          (showRowSelectionEffective ? 1 : 0)}
+                          (showRowSelectionEffective ? 1 : 0) +
+                          (showDetailToggleEffective ? 1 : 0)}
                         onclick={() => row.toggleExpanded?.()}
                       >
                         {@render groupRowContent(row)}
@@ -1503,6 +1663,7 @@
                     </tr>
                   {:else}
                     {@const userRowClass = computeRowClass(row, rowIndex)}
+                    {@const stickyTop = stickyTopOfRow(rowIndex)}
                     <tr
                       class={`sv-grid-row ${userRowClass} ${rowDropClass(rowIndex)}`}
                       class:sv-grid-row-selected={isRowSelected(row.id)}
@@ -1514,7 +1675,8 @@
                       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}
+                      class:sv-grid-row-sticky-group={stickyTop !== undefined}
+                      style:top={rowIndex < frozenRowCount ? `${frozenRowTop(rowIndex)}px` : stickyTop !== undefined ? `${stickyTop}px` : undefined}
                       {...getGridRowA11yProps(rowIndex + 1)}
                       aria-level={sgAriaLevel(row)}
                       aria-expanded={sgAriaExpanded(row)}
@@ -1526,14 +1688,14 @@
                       {#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;`}
+                          style={`width: ${rowNumberColumnWidth}px; min-width: ${rowNumberColumnWidth}px; max-width: ${rowNumberColumnWidth}px; inset-inline-start: 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;`}
+                          style={`width: ${selectionColumnWidth}px; min-width: ${selectionColumnWidth}px; max-width: ${selectionColumnWidth}px; inset-inline-start: ${showRowNumbersEffective ? rowNumberColumnWidth : 0}px;`}
                           onclick={() => toggleRowSelectionById(row.id)}
                         >
                           <button
@@ -1554,6 +1716,26 @@
                           ></button>
                         </td>
                       {/if}
+                      {#if showDetailToggleEffective}
+                        {@const dt = detailToggleOf(row, rowIndex)}
+                        <td
+                          class="sv-grid-cell sv-grid-detail-toggle-cell"
+                          style={`width: ${detailToggleColumnWidth}px; min-width: ${detailToggleColumnWidth}px; max-width: ${detailToggleColumnWidth}px; left: ${detailToggleColumnLeft}px;`}
+                        >
+                          {#if dt}
+                            <button
+                              type="button"
+                              class="sv-grid-detail-toggle"
+                              aria-expanded={dt.open ? "true" : "false"}
+                              aria-label={dt.open ? messages.closeDetail : messages.openDetail}
+                              onclick={(event) => {
+                                event.stopPropagation();
+                                dt.toggle();
+                              }}>{@render icon("chevron-right")}</button
+                            >
+                          {/if}
+                        </td>
+                      {/if}
                       {#if columnVirtualizationEnabled && columnWindowStart > 0}
                         <td
                           class="sv-grid-cell sv-grid-cell-spacer"
@@ -1767,6 +1949,90 @@
                     </tr>
                   {/if}
   {/snippet}
+  <!-- A sticky copy of an ancestor group row, for the band under the header
+       while its rows scroll past. The real row is elsewhere in the flow (or
+       outside the rendered window), so this one carries no cell ids, no
+       row index attributes and is hidden from assistive tech; the group
+       cell's own expander still works, since it is the same renderer. -->
+  {#snippet stickyGroupRow(row: Row<TData>, rowIndex: number, top: number, size: number, last: boolean)}
+    {#if isGroupRow(row) && !groupColumnMode}
+      <tr
+        class="sv-grid-row sv-grid-group-row sv-grid-row-sticky-group"
+        class:sv-grid-row-sticky-group-last={last}
+        style:top={`${top}px`}
+        style={rowHeightStyle(size)}
+        aria-hidden="true"
+      >
+        <td
+          class="sv-grid-cell sv-grid-group-cell"
+          colspan={allColumns.length +
+            (showRowNumbersEffective ? 1 : 0) +
+            (showRowSelectionEffective ? 1 : 0) +
+            (showDetailToggleEffective ? 1 : 0)}
+          onclick={() => row.toggleExpanded?.()}
+        >
+          {@render groupRowContent(row)}
+        </td>
+      </tr>
+    {:else}
+      <tr
+        class={`sv-grid-row sv-grid-row-sticky-group ${computeRowClass(row, rowIndex)}`}
+        class:sv-grid-row-sticky-group-last={last}
+        style:top={`${top}px`}
+        style={rowHeightStyle(size)}
+        aria-hidden="true"
+      >
+        {#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;`}
+          ></td>
+        {/if}
+        {#if showDetailToggleEffective}
+          <td
+            class="sv-grid-cell sv-grid-detail-toggle-cell"
+            style={`width: ${detailToggleColumnWidth}px; min-width: ${detailToggleColumnWidth}px; max-width: ${detailToggleColumnWidth}px; left: ${detailToggleColumnLeft}px;`}
+          ></td>
+        {/if}
+        {#if columnVirtualizationEnabled && columnWindowStart > 0}
+          <td
+            class="sv-grid-cell sv-grid-cell-spacer"
+            style={`width: ${columnWindowStart}px; min-width: ${columnWindowStart}px; max-width: ${columnWindowStart}px;`}
+          ></td>
+        {/if}
+        {#each renderedColumns as rendered (rendered.column.id)}
+          {@const cellValue = getCellDisplayValue(row.id, rendered.column.id, getColumnBaseValue(row, rendered.column))}
+          <td
+            class={`sv-grid-cell ${computeCellClass(row, rendered.column)}`}
+            class:sv-grid-cell-cf={hasConditionalFormats}
+            data-col-id={rendered.column.id}
+            data-align={getColumnAlign(rendered.column)}
+            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)}`}
+          >
+            {#if plainCellBody}
+              {@render cellBody(row, rendered.column, cellValue)}
+            {:else}
+              {@render cellBodyWithFormat(row, rendered.column, cellValue)}
+            {/if}
+          </td>
+        {/each}
+        {#if columnVirtualizationEnabled && columnWindowRightSpacer > 0}
+          <td
+            class="sv-grid-cell sv-grid-cell-spacer"
+            style={`width: ${columnWindowRightSpacer}px; min-width: ${columnWindowRightSpacer}px; max-width: ${columnWindowRightSpacer}px;`}
+          ></td>
+        {/if}
+      </tr>
+    {/if}
+  {/snippet}
   {#snippet pinnedRowBody(
     rowData: TData,
     where: "top" | "bottom",
@@ -1780,14 +2046,20 @@
       {#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;`}
+          style={`width: ${rowNumberColumnWidth}px; min-width: ${rowNumberColumnWidth}px; max-width: ${rowNumberColumnWidth}px; inset-inline-start: 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;`}
+          style={`width: ${selectionColumnWidth}px; min-width: ${selectionColumnWidth}px; max-width: ${selectionColumnWidth}px; inset-inline-start: ${showRowNumbersEffective ? rowNumberColumnWidth : 0}px;`}
+        ></td>
+      {/if}
+      {#if showDetailToggleEffective}
+        <td
+          class="sv-grid-cell sv-grid-detail-toggle-cell"
+          style={`width: ${detailToggleColumnWidth}px; min-width: ${detailToggleColumnWidth}px; max-width: ${detailToggleColumnWidth}px; left: ${detailToggleColumnLeft}px;`}
         ></td>
       {/if}
       {#if columnVirtualizationEnabled && columnWindowStart > 0}
@@ -1806,6 +2078,7 @@
         <td
           class={`sv-grid-cell ${userCellClass}`}
           data-col-id={rendered.column.id}
+          data-align={getColumnAlign(rendered.column)}
           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
@@ -1824,10 +2097,11 @@
   <div
     class="sv-grid-root"
     class:sv-grid-root-fill={opt.containerHeight === "100%"}
+    class:sv-grid-active-seeded={!ctrl.userHasActivatedCell}
     style={chartDockReserveStyle}
     data-move-grab={ctrl.moveGrabHover || ctrl.moveDrag ? "true" : undefined}
     data-selbar={
-      ctrl.selectionBarOn && ctrl.selectionBarTarget.ids.length > 0
+      ctrl.selectionBarVisible
         ? (getSelectionBarView() ? ctrl.selectionBarPosition : `upsell-${ctrl.selectionBarPosition}`)
         : undefined
     }
@@ -1955,14 +2229,21 @@
                 {#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;`}
+                    style={`width: ${rowNumberColumnWidth}px; min-width: ${rowNumberColumnWidth}px; max-width: ${rowNumberColumnWidth}px; inset-inline-start: 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;`}
+                    style={`width: ${selectionColumnWidth}px; min-width: ${selectionColumnWidth}px; max-width: ${selectionColumnWidth}px; inset-inline-start: ${showRowNumbersEffective ? rowNumberColumnWidth : 0}px;`}
+                    aria-hidden="true"
+                  ></th>
+                {/if}
+                {#if showDetailToggleEffective}
+                  <th
+                    class="sv-grid-column sv-grid-detail-toggle-column"
+                    style={`width: ${detailToggleColumnWidth}px; min-width: ${detailToggleColumnWidth}px; max-width: ${detailToggleColumnWidth}px; left: ${detailToggleColumnLeft}px;`}
                     aria-hidden="true"
                   ></th>
                 {/if}
@@ -2030,9 +2311,14 @@
                 {#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-label="Row number"
+                    style={`width: ${rowNumberColumnWidth}px; min-width: ${rowNumberColumnWidth}px; max-width: ${rowNumberColumnWidth}px; inset-inline-start: 0;`}
                   >
+                    <!-- The corner over the row gutter. Its only content is an
+                         icon, which is aria-hidden, so the name comes from a
+                         visually-hidden span rather than an aria-label: axe's
+                         `empty-table-header` asks a th for text a screen
+                         reader can read, and a label attribute is not it. -->
+                    <span class="sv-grid-sr-only">Row number</span>
                     <span class="sv-grid-row-number-head"
                       >{@render icon("row-number")}</span
                     >
@@ -2041,7 +2327,7 @@
                 {#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;`}
+                    style={`width: ${selectionColumnWidth}px; min-width: ${selectionColumnWidth}px; max-width: ${selectionColumnWidth}px; inset-inline-start: ${showRowNumbersEffective ? rowNumberColumnWidth : 0}px;`}
                   >
                     <button
                       type="button"
@@ -2059,6 +2345,13 @@
                     ></button>
                   </th>
                 {/if}
+                {#if showDetailToggleEffective}
+                  <th
+                    class="sv-grid-column sv-grid-detail-toggle-column"
+                    style={`width: ${detailToggleColumnWidth}px; min-width: ${detailToggleColumnWidth}px; max-width: ${detailToggleColumnWidth}px; left: ${detailToggleColumnLeft}px;`}
+                    aria-hidden="true"
+                  ></th>
+                {/if}
                 {#if columnVirtualizationEnabled && columnWindowStart > 0}
                   <th
                     class="sv-grid-column sv-grid-column-spacer"
@@ -2287,7 +2580,7 @@
                   {#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;`}
+                      style={`width: ${rowNumberColumnWidth}px; min-width: ${rowNumberColumnWidth}px; max-width: ${rowNumberColumnWidth}px; inset-inline-start: 0;`}
                     ></th>
                   {/if}
                   {#if showRowSelectionEffective}
@@ -2297,7 +2590,14 @@
                          axe `empty-table-header` violation. -->
                     <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;`}
+                      style={`width: ${selectionColumnWidth}px; min-width: ${selectionColumnWidth}px; max-width: ${selectionColumnWidth}px; inset-inline-start: ${showRowNumbersEffective ? rowNumberColumnWidth : 0}px;`}
+                      aria-hidden="true"
+                    ></th>
+                  {/if}
+                  {#if showDetailToggleEffective}
+                    <th
+                      class="sv-grid-column sv-grid-detail-toggle-column"
+                      style={`width: ${detailToggleColumnWidth}px; min-width: ${detailToggleColumnWidth}px; max-width: ${detailToggleColumnWidth}px; left: ${detailToggleColumnLeft}px;`}
                       aria-hidden="true"
                     ></th>
                   {/if}
@@ -2528,7 +2828,8 @@
                   class="sv-grid-cell sv-grid-empty-cell"
                   colSpan={allColumns.length +
                     (showRowNumbersEffective ? 1 : 0) +
-                    (showRowSelectionEffective ? 1 : 0)}
+                    (showRowSelectionEffective ? 1 : 0) +
+                    (showDetailToggleEffective ? 1 : 0)}
                 >
                   {opt.emptyMessage ?? messages.noRows}
                 </td>
@@ -2537,6 +2838,9 @@
               {#each frozenRowList as row, rowIndex (row.id)}
                 {@render bodyRow(row, rowIndex, rowStyleFor(rowIndex))}
               {/each}
+              {#each stickyGroupRows as sticky, k (`sticky:${sticky.row.id}`)}
+                {@render stickyGroupRow(sticky.row, sticky.rowIndex, sticky.top, sticky.size, k === stickyGroupRows.length - 1)}
+              {/each}
               {#if rowTopSpacer > 0}
                 <tr class="sv-grid-row sv-grid-row-spacer" aria-hidden="true">
                   <td
@@ -2544,7 +2848,8 @@
                     style={`height: ${rowTopSpacer}px; padding: 0; border: 0;`}
                     colSpan={allColumns.length +
                       (showRowNumbersEffective ? 1 : 0) +
-                      (showRowSelectionEffective ? 1 : 0)}
+                      (showRowSelectionEffective ? 1 : 0) +
+                      (showDetailToggleEffective ? 1 : 0)}
                   ></td>
                 </tr>
               {/if}
@@ -2568,7 +2873,8 @@
                     style={`height: ${rowBottomSpacer}px; padding: 0; border: 0;`}
                     colSpan={allColumns.length +
                       (showRowNumbersEffective ? 1 : 0) +
-                      (showRowSelectionEffective ? 1 : 0)}
+                      (showRowSelectionEffective ? 1 : 0) +
+                      (showDetailToggleEffective ? 1 : 0)}
                   ></td>
                 </tr>
               {/if}
@@ -2602,7 +2908,7 @@
                   <!-- Blank spacer, not a header - see the selection cell below. -->
                   <td
                     class="sv-grid-column sv-grid-summary-column sv-grid-row-number-column"
-                    style={`width: ${rowNumberColumnWidth}px; min-width: ${rowNumberColumnWidth}px; max-width: ${rowNumberColumnWidth}px; left: 0;`}
+                    style={`width: ${rowNumberColumnWidth}px; min-width: ${rowNumberColumnWidth}px; max-width: ${rowNumberColumnWidth}px; inset-inline-start: 0;`}
                   ></td>
                 {/if}
                 {#if showRowSelectionEffective}
@@ -2612,7 +2918,13 @@
                        (axe `empty-table-header`). -->
                   <td
                     class="sv-grid-column sv-grid-summary-column sv-grid-selection-column"
-                    style={`width: ${selectionColumnWidth}px; min-width: ${selectionColumnWidth}px; max-width: ${selectionColumnWidth}px; left: ${showRowNumbersEffective ? rowNumberColumnWidth : 0}px;`}
+                    style={`width: ${selectionColumnWidth}px; min-width: ${selectionColumnWidth}px; max-width: ${selectionColumnWidth}px; inset-inline-start: ${showRowNumbersEffective ? rowNumberColumnWidth : 0}px;`}
+                  ></td>
+                {/if}
+                {#if showDetailToggleEffective}
+                  <td
+                    class="sv-grid-column sv-grid-summary-column sv-grid-detail-toggle-column"
+                    style={`width: ${detailToggleColumnWidth}px; min-width: ${detailToggleColumnWidth}px; max-width: ${detailToggleColumnWidth}px; left: ${detailToggleColumnLeft}px;`}
                   ></td>
                 {/if}
                 {#if columnVirtualizationEnabled && columnWindowStart > 0}
@@ -2695,9 +3007,7 @@
       {/if}
       {#if hasMeasured && hasHorizontalOverflow}
         {@const horizontalContentSize =
-          totalColumnWidth +
-          (showRowNumbersEffective ? rowNumberColumnWidth : 0) +
-          (showRowSelectionEffective ? selectionColumnWidth : 0)}
+          totalColumnWidth + ctrl.systemColumnsWidth}
         <sv-grid-scrollbar
           class="sv-grid-scrollbar sv-grid-scrollbar-horizontal"
           bind:this={ctrl.horizontalScrollbarEl}
@@ -3004,7 +3314,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} />