@wallarm-org/claude-design 0.0.0-stage → 4.9.0

package/dist/project/components/Table/README.md

@@ -0,0 +1,471 @@
+The grid for many records of one shape — reach for a `Card` grid when a row reads better as an object than as a set of columns, and for `Attribute` when you are showing one record rather than many. Everything interactive is controlled: sorting, selection, expansion, column order, pinning, sizing and visibility are each a state prop with a callback, so nothing moves unless you move it, and `manualSorting` hands the sort to the server. Filtering belongs above the grid in a `FilterInput`, and a long collection scrolls rather than paginates — `Pagination` is the deliberate exception, for when a page number is part of the task.
+
+## Props as canvas attributes
+
+Use kebab-case attribute names. Pass non-string values through renderVals holes, including booleans. The full emitted API is in `components/index.d.ts`.
+
+| Attribute | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `data` | `T[]` | yes | — | Data array for rows |
+| `columns` | `TableColumnDef<T>[]` | yes | — | Column definitions |
+| `is-loading` | `boolean \| undefined` | no | `false` | Show skeleton rows |
+| `is-loading-previous` | `boolean \| undefined` | no | — | Show skeleton rows above the first row while a previous page is being fetched (bidirectional infinite scroll — the start-edge counterpart of `isLoading`). Pair with `onStartReached`. |
+| `skeleton-count` | `number \| undefined` | no | — | Number of skeleton rows to display when loading (default: 12, `TABLE_SKELETON_ROWS`) |
+| `get-row-id` | `((row: T, index: number) => string) \| undefined` | no | — | Row id accessor for stable row identity |
+| `aria-label` | `string \| undefined` | no | — | Accessible label for the table |
+| `sorting` | `TableSortingState \| undefined` | no | — |  |
+| `on-sorting-change` | `complex` | no | — |  |
+| `manual-sorting` | `boolean \| undefined` | no | — | When `true`, disables TanStack's client-side sort. The table renders rows in the order they appear in `data` and only fires `onSortingChange` on header clicks. Use this when sorting is performed server-side and the server returns pre-sorted rows. Default: `false` (client-side sort via TanStack's `getSortedRowModel`). |
+| `row-selection` | `TableRowSelectionState \| undefined` | no | — |  |
+| `on-row-selection-change` | `complex` | no | — |  |
+| `enable-select-all-rows` | `boolean \| undefined` | no | — | Renders the master checkbox in the selection column header. Set `false` when "all rows" is not a selection the consumer can act on — a listing whose scope the consumer cannot express, for instance — leaving per-row checkboxes (shift-click range selection included) as the only way to select. The column itself stays, so the layout does not shift. Default: `true`. |
+| `on-select-all-rows` | `((selected: boolean) => void) \| undefined` | no | — | Called when the master checkbox is toggled, with its new state, in addition to the `onRowSelectionChange` the toggle produces. The state change alone cannot identify the gesture: "every loaded row is selected" is also what checking the last row by hand produces. A consumer that treats the master checkbox as meaning more than the loaded rows — everything matching a server-side filter, say — needs to know the difference, which is what this reports. |
+| `column-sizing` | `TableColumnSizingState \| undefined` | no | — |  |
+| `on-column-sizing-change` | `complex` | no | — |  |
+| `column-pinning` | `TableColumnPinningState \| undefined` | no | — |  |
+| `on-column-pinning-change` | `complex` | no | — |  |
+| `column-order` | `string[] \| undefined` | no | — |  |
+| `on-column-order-change` | `TableOnChangeFn<string[]> \| undefined` | no | — |  |
+| `grouping` | `TableGroupingState \| undefined` | no | — |  |
+| `on-grouping-change` | `complex` | no | — |  |
+| `render-group-row` | `((row: TableRow<T>) => ReactNode) \| undefined` | no | — | Group row content for `getSubRows` grouping. Passing it switches the table to sub-row grouping mode: the auto-injected expand column is dropped, so the content is responsible for its own expand/collapse toggle (`row.getToggleExpandedHandler()`). Rendered only with `groupRowSpan: 'full'`. With the default `'master'` the group row shows its master (first data) column cell, as before. |
+| `group-row-span` | `"full" \| "master" \| undefined` | no | — | How a group row lays out its content. - `'master'` (default): the master column's cell, then empty filler cells — the content is confined to the master column width. - `'full'`: `renderGroupRow(row)` in a single cell spanning every data column (system cells — selection, drag handle — keep their own cells). Use for a group header with a title on the left and actions pinned to the right edge of the table. Requires `renderGroupRow`. |
+| `group-expand-column` | `boolean \| undefined` | no | — | Keep the expand column in sub-row grouping mode (`renderGroupRow`), which otherwise drops it and leaves the toggle to the group row's content. The column comes first, ahead of the drag handle, and shows a toggle on group rows only — so the rows of a group, drag handle included, sit inside it. |
+| `get-sub-rows` | `((row: T) => T[] \| undefined) \| undefined` | no | — | Sub-row accessor for hierarchical/tree data (used with renderGroupRow) |
+| `show-empty-groups` | `boolean \| undefined` | no | — | Render a top-level row whose `getSubRows` returns an empty array as an (empty) group row instead of a plain row — for groups that stay visible with nothing in them yet. Return `undefined` for rows that are not groups. |
+| `expanded` | `boolean` | no | `false` |  |
+| `on-expanded-change` | `complex` | no | — |  |
+| `render-expanded-row` | `((row: TableRow<T>) => ReactNode) \| undefined` | no | — |  |
+| `column-visibility` | `TableVisibilityState \| undefined` | no | — |  |
+| `on-column-visibility-change` | `complex` | no | — |  |
+| `default-column-visibility` | `TableVisibilityState \| undefined` | no | — |  |
+| `default-column-order` | `string[] \| undefined` | no | — |  |
+| `column-groups` | `TableColumnGroup[] \| undefined` | no | — | Labeled sections for the column-settings menu. When set, the menu renders these groups (flat, non-reorderable — like the FilterInput field menu) instead of the default pinned/unpinned drag-reorder list. See {@link TableColumnGroup}. |
+| `on-settings-open-change` | `((open: boolean) => void) \| undefined` | no | — | Fired when the built-in column-settings menu opens (`true`) or closes (`false`). The menu's open state otherwise lives inside the DS and is not observable, so consumers that want to defer expensive work — e.g. refetch once with the final column selection instead of on every toggle — can hook the close edge here. |
+| `defer-column-visibility` | `boolean \| undefined` | no | — | Hold column-visibility toggles in the built-in settings menu until it closes, then apply them as one `columnVisibility` change. Without it each switch shows or hides its column at once — a column whose data the consumer only fetches on close then sits empty while the menu is open. |
+| `virtualized` | `"container" \| "window"` | no | — | Enable row virtualization. `'container'` virtualizes within the table's own scroll container; `'window'` follows the page scroll — the nearest scrollable ancestor, or the browser window. |
+| `stretch` | `boolean \| undefined` | no | — | Whether columns stretch proportionally to fill the container width. When `false`, columns use their defined sizes and the table may be narrower than its container. Default: `true`. |
+| `estimate-row-height` | `((index: number) => number) \| undefined` | no | — |  |
+| `overscan` | `number \| undefined` | no | — |  |
+| `on-end-reached` | `(() => void) \| undefined` | no | — | Callback fired when the user scrolls near the end (bottom) of the table |
+| `on-end-reached-threshold` | `number \| undefined` | no | — | Distance from the bottom (in px) to trigger onEndReached (default: 200) |
+| `on-start-reached` | `(() => void) \| undefined` | no | — | Callback fired when the user scrolls near the start (top) of the table |
+| `on-start-reached-threshold` | `number \| undefined` | no | — | Distance from the top (in px) to trigger onStartReached (default: 200) |
+| `initial-scroll-to-row-id` | `string \| undefined` | no | — | Row id to anchor the initial scroll position to. The table scrolls this row into view on mount and arms the edge detectors only after that initial scroll settles. Use for deep-linking into the middle of a dataset. |
+| `on-row-reorder` | `((event: TableRowReorderEvent) => void) \| undefined` | no | — | Callback fired when a row is dragged to a new position. When provided, a drag-handle column is auto-injected and row DnD is enabled. With `getSubRows` grouping, group rows stay put and a row moves only among the rows of its own group. |
+| `get-row-can-drag` | `((row: TableRow<T>) => boolean) \| undefined` | no | — | Per-row drag control for `onRowReorder`. A row for which it returns `false` shows a disabled grip (none on a full-width row), cannot be dragged and is not a drop target — the other rows of its group move around it. Group rows never move regardless. Default: every non-group row can be dragged. |
+| `render-full-width-row` | `((row: TableRow<T>) => ReactNode) \| undefined` | no | — | Renders a non-group row as a single cell spanning every data column — a banner or notice row among regular rows. Return `undefined` to render the row normally, with a cell per column. System cells (selection, drag handle) keep their own cells. Pair with `getRowCanDrag` to keep such a row in place in a reorderable table. Called on every render of the row: return elements, do not call hooks in the callback itself (components it returns may). |
+| `on-master-cell-click` | `((rowId: string) => void) \| undefined` | no | — | Callback fired when the master cell is clicked. Receives the row ID. |
+| `active-row-id` | `string \| null \| undefined` | no | — | ID of the currently active (highlighted) row, or null. Controls row highlighting via data-preview-active attribute. |
+| `data-testid` | `string \| undefined` | no | — |  |
+
+## Sub-components
+
+- `WallarmDS.BulkBarSummaryClear` — `BulkBarSummaryClearProps` in the declaration bundle.
+- `WallarmDS.BulkBarSummaryCount` — `BulkBarSummaryCountProps` in the declaration bundle.
+- `WallarmDS.BulkBarSummary` — `BulkBarSummaryProps` in the declaration bundle.
+- `WallarmDS.BulkBarSummarySelectAll` — `BulkBarSummarySelectAllProps` in the declaration bundle.
+- `WallarmDS.EditableSelectCell` — `EditableSelectCellProps` in the declaration bundle.
+- `WallarmDS.EditableTextCell` — `EditableTextCellProps` in the declaration bundle.
+- `WallarmDS.TableActionBarSelection` — `TableActionBarSelectionProps` in the declaration bundle.
+- `WallarmDS.TableColumnMenuHideItem` — `TableColumnMenuHideItemProps` in the declaration bundle.
+- `WallarmDS.TableColumnMenuMoveLeftItem` — `TableColumnMenuMoveLeftItemProps` in the declaration bundle.
+- `WallarmDS.TableColumnMenuMoveRightItem` — `TableColumnMenuMoveRightItemProps` in the declaration bundle.
+- `WallarmDS.TableColumnMenuPinItem` — `TableColumnMenuPinItemProps` in the declaration bundle.
+- `WallarmDS.TableColumnMenu` — `TableColumnMenuProps` in the declaration bundle.
+- `WallarmDS.TableColumnMenuSortItem` — `TableColumnMenuSortItemProps` in the declaration bundle.
+- `WallarmDS.TableScrollHandlerLeft` — `TableScrollHandlerLeftProps` in the declaration bundle.
+- `WallarmDS.TableScrollHandler` — `TableScrollHandlerProps` in the declaration bundle.
+- `WallarmDS.TableScrollHandlerRight` — `TableScrollHandlerRightProps` in the declaration bundle.
+- `WallarmDS.TableSettingsMenuItem` — `TableSettingsMenuItemProps` in the declaration bundle.
+- `WallarmDS.TableSettingsMenu` — `TableSettingsMenuProps` in the declaration bundle.
+- `WallarmDS.TableSettingsMenuReset` — `TableSettingsMenuResetProps` in the declaration bundle.
+- `WallarmDS.TableSettingsMenuSearch` — `TableSettingsMenuSearchProps` in the declaration bundle.
+- `WallarmDS.TableSortTrigger` — `TableSortTriggerProps` in the declaration bundle.
+- `WallarmDS.BulkBarSummarySeparator` — `BulkBarSummarySeparatorProps` in the declaration bundle.
+- `WallarmDS.TableActionBar` — `TableActionBarProps` in the declaration bundle.
+- `WallarmDS.TableEmptyState` — `TableEmptyStateProps` in the declaration bundle.
+
+## Stories
+
+### Basic
+
+The minimum — `data`, `columns`, `getRowId` and a column to open sorted on. The header stays
+put as the body scrolls.
+
+Source: Table/Table.stories.tsx#Basic
+
+### NoStretch
+
+`stretch={false}` — columns keep their defined widths and do not expand to fill the container.
+Empty space appears on the right when the total column width is less than the container width.
+
+Source: Table/Table.stories.tsx#NoStretch
+
+### WithPagination
+
+`useClientPagination` slices the rows and the pager sits right-aligned below the table,
+sharing its footer with the rows-per-page control.
+
+Source: Table/Table.stories.tsx#WithPagination
+
+### Sorting
+
+Sorting held in state, so the arrow and the row order are the same fact — click a header to
+cycle through the directions.
+
+Source: Table/Table.stories.tsx#Sorting
+
+### ManualSorting
+
+`manualSorting` stops the table sorting anything itself: it only reports the change, and the
+story re-derives `data` the way a refetch would.
+
+Source: Table/Table.stories.tsx#ManualSorting
+
+### WithAnalytics
+
+Every analytics seam at once — `TableSortTrigger`, `TableColumnMenu` and each of its items,
+the action bar, the scroll handlers — plus the state callbacks, which carry the resulting
+sort, selection and column layout rather than just a click.
+
+Source: Table/Table.stories.tsx#WithAnalytics
+
+### LoadingState
+
+`isLoading` with nothing to show yet: skeleton rows under a real header, so the columns do
+not jump when the data lands.
+
+Source: Table/Table.stories.tsx#LoadingState
+
+### LoadingWithData
+
+The same flag with rows already present appends the skeletons below them — this is the shape
+for fetching the next batch, not for replacing what is on screen.
+
+Source: Table/Table.stories.tsx#LoadingWithData
+
+### EmptyCollection
+
+`TableEmptyState` holding an `EmptyState` of `type='collection-empty'`: nothing exists yet,
+so the action creates the first thing.
+
+Source: Table/Table.stories.tsx#EmptyCollection
+
+### NoResults
+
+When data exists but the current filters or search matched nothing, stay at
+the `collection-empty` scale — a table body is a page-level surface, and
+`no-results` is the compact treatment for a card or menu. What changes is the
+action: a neutral one that clears the filters, never a primary "create".
+
+Source: Table/Table.stories.tsx#NoResults
+
+### ColumnResizing
+
+Drag a header edge to resize. `columnSizing` is state like everything else, so a width can
+be remembered between visits.
+
+Source: Table/Table.stories.tsx#ColumnResizing
+
+### ColumnResizingWithOverflowList
+
+A resizable column whose cell holds an `OverflowList`: the tags re-measure as the column
+narrows instead of being clipped by it.
+
+Source: Table/Table.stories.tsx#ColumnResizingWithOverflowList
+
+### ColumnResizingWithPinning
+
+Resizing alongside a pinned column — the pinned one holds its position while the rest of the
+row moves underneath it.
+
+Source: Table/Table.stories.tsx#ColumnResizingWithPinning
+
+### ColumnPinning
+
+`columnPinning` freezes a column to the left, so the name of the thing stays readable
+however far sideways the table scrolls.
+
+Source: Table/Table.stories.tsx#ColumnPinning
+
+### ColumnDragAndDrop
+
+Drag a header to reorder the columns. `columnOrder` is the same state the settings menu
+writes, so the two never disagree.
+
+Source: Table/Table.stories.tsx#ColumnDragAndDrop
+
+### ColumnHeaderMenu
+
+The per-column menu that appears on hover — sort, pin, hide, move — which is where the
+column controls live once a header is too narrow to show them.
+
+Source: Table/Table.stories.tsx#ColumnHeaderMenu
+
+### RowSelection
+
+Checkboxes plus `TableActionBar`, which rises from the bottom once a row is ticked and
+carries the verbs that apply to the whole selection.
+
+Source: Table/Table.stories.tsx#RowSelection
+
+### SelectAllRowsGesture
+
+`onSelectAllRows` separates the master checkbox from a hand-made full selection, which the
+row state alone cannot tell apart. Here the gesture means "every row matching the filter",
+including the ones the server has not sent — so the bar jumps to the filter's total, and any
+manual change drops back to the rows actually loaded.
+
+Source: Table/Table.stories.tsx#SelectAllRowsGesture
+
+### SelectAllRowsDisabled
+
+`enableSelectAllRows={false}` drops the master checkbox while keeping the column, for a
+listing where "all rows" is not a scope the consumer can act on. Per-row checkboxes stay,
+shift-click range selection included.
+
+Source: Table/Table.stories.tsx#SelectAllRowsDisabled
+
+### RowSelectionWindowScroll
+
+A selection that outlives the table scrolling away: under `virtualized='window'` the bar is
+pinned to the viewport rather than to the table.
+
+Source: Table/Table.stories.tsx#RowSelectionWindowScroll
+
+### RowGrouping
+
+`getSubRows` turns flat data into groups — each group row counts its children and collapses
+them, keyed in the same `expanded` state a row detail uses.
+
+Source: Table/Table.stories.tsx#RowGrouping
+
+### RowExpanding
+
+`renderExpandedRow` draws a panel beneath the row, for the two or three fields that do not
+deserve columns of their own.
+
+Source: Table/Table.stories.tsx#RowExpanding
+
+### ContextMenu
+
+Right-click inside a cell: `DropdownMenuContextTrigger` puts that column's verbs where the
+pointer already is, so each column can offer its own.
+
+Source: Table/Table.stories.tsx#ContextMenu
+
+### SettingsMenu
+
+The gear at the end of the header — search the columns, show and hide them, reorder them,
+reset — writing the same visibility and order state as the header menu.
+
+Source: Table/Table.stories.tsx#SettingsMenu
+
+### SettingsMenuDeferred
+
+`deferColumnVisibility` holds switch toggles and "Reset to default" while the
+settings menu is open and applies them as one `columnVisibility` change on
+close — for consumers that fetch a column's data only once the menu closes,
+so a new column never sits empty behind the open menu.
+
+Source: Table/Table.stories.tsx#SettingsMenuDeferred
+
+### SettingsMenuGrouped
+
+`columnGroups` turns the settings menu into labeled, non-reorderable sections
+(the FilterInput field-menu pattern): no drag handle, columns rendered under
+their group header in the given order. Column ids absent from every group
+(`cweId` here) fall into a trailing headerless section.
+
+Source: Table/Table.stories.tsx#SettingsMenuGrouped
+
+### Virtualization
+
+`virtualized='container'` inside a fixed height renders only the rows in view, which is what
+lets a thousand rows behave like ten.
+
+Source: Table/Table.stories.tsx#Virtualization
+
+### WindowVirtualization
+
+`virtualized='window'` measures against the page's own scroll instead, for a table that is
+the page rather than a panel inside one.
+
+Source: Table/Table.stories.tsx#WindowVirtualization
+
+### ScrollToRow
+
+The imperative escape hatch: `scrollToRow(id, { align })` off the ref, returning false for
+an id the table does not have so a deep link can fall back.
+
+Source: Table/Table.stories.tsx#ScrollToRow
+
+### InfiniteScroll
+
+`onEndReached` with `isLoading` — the house default for a long collection, where rows arrive
+as you reach them and there is no page number to lose.
+
+Source: Table/Table.stories.tsx#InfiniteScroll
+
+### InfiniteScrollWindow
+
+The same fetch-on-approach against the page's scroll, where the trigger has to account for
+everything else on the page as well as the table.
+
+Source: Table/Table.stories.tsx#InfiniteScrollWindow
+
+### BidirectionalInfiniteScroll
+
+Both ends at once: `onStartReached` prepends, and the scroll position is compensated so the
+row you were reading does not slide out from under you.
+
+Source: Table/Table.stories.tsx#BidirectionalInfiniteScroll
+
+### BidirectionalInfiniteScrollWindow
+
+The prepend case against the document scroll, where unrelated page content shares the height
+being measured — the regression this story exists to catch.
+
+Source: Table/Table.stories.tsx#BidirectionalInfiniteScrollWindow
+
+### InfiniteScrollWindowInPane
+
+`virtualized='window'` in an app shell that scrolls a content pane instead of the document: the
+table follows the pane. The `overflow-x: hidden` wrapper in between never scrolls (its
+`overflow-y` only computes to `auto`), so it must not be taken for the scroll root.
+
+Source: Table/Table.stories.tsx#InfiniteScrollWindowInPane
+
+### InfiniteScrollWindowInPaneAnchored
+
+A share-link landing in a pane host: the window-mode table opens scrolled to its anchor row,
+inside the pane — the document stays put.
+
+Source: Table/Table.stories.tsx#InfiniteScrollWindowInPaneAnchored
+
+### InfiniteScrollWindowInPaneLateRows
+
+A pane host that mounts the table before its data: rows arrive after a delay. Neither edge may
+fire against the window meanwhile — only the edge the user scrolls to.
+
+Source: Table/Table.stories.tsx#InfiniteScrollWindowInPaneLateRows
+
+### InfiniteScrollWindowInHiddenPaneAnchored
+
+A share-link landing in a pane that starts hidden (a closed tab or drawer): the anchor waits
+until the table is shown and laid out, then lands inside the pane.
+
+Source: Table/Table.stories.tsx#InfiniteScrollWindowInHiddenPaneAnchored
+
+### InfiniteScrollWindowInScrolledPane
+
+A window-mode table mounting into a pane the user already scrolled (content above it): the pane
+keeps its position — adopting the root must not reset it.
+
+Source: Table/Table.stories.tsx#InfiniteScrollWindowInScrolledPane
+
+### HeaderColumnDescription
+
+A column can explain itself: `description` renders as a second line under the title, or as a
+tooltip behind a dashed underline when the header has no room for one.
+
+Source: Table/Table.stories.tsx#HeaderColumnDescription
+
+### MasterCellWithActions
+
+The first column is the master cell — pinned, and the place per-row actions appear on hover,
+so every row keeps its verbs in one predictable spot.
+
+Source: Table/Table.stories.tsx#MasterCellWithActions
+
+### MasterCellWithDrawer
+
+`onMasterCellClick` with `activeRowId`: the master cell opens a `Drawer` and the row it
+belongs to stays marked while the panel is open.
+
+Source: Table/Table.stories.tsx#MasterCellWithDrawer
+
+### MasterCellWithActionsAndDrawer
+
+Master cell with both an action menu and a drawer:
+clicking the cell body opens the drawer, clicking the action button opens the menu
+without triggering the drawer.
+
+Source: Table/Table.stories.tsx#MasterCellWithActionsAndDrawer
+
+### FullFeatured
+
+Grouping, expansion, selection, pinning, virtualization and the action bar in one table —
+the honest test of whether the features cooperate rather than merely exist.
+
+Source: Table/Table.stories.tsx#FullFeatured
+
+### RowReordering
+
+`EditableTextCell` and `EditableSelectCell` in the plain columns, with the master column
+deliberately read-only — editing in place suits a value the user owns, not one the system
+reports. Hovering highlights the whole cell, clicking opens it without the content shifting,
+and Enter or blur commits while Escape reverts.
+
+Source: Table/Table.stories.tsx#RowReordering
+
+### RowReorderingInGroups
+
+With `getSubRows` grouping, a row moves only among the rows of its own group; group rows stay
+put. `showEmptyGroups` keeps a group whose `getSubRows` returns `[]` on screen as a group row.
+
+Source: Table/Table.stories.tsx#RowReorderingInGroups
+
+### GroupedWithFullWidthRows
+
+`groupRowSpan: 'full'` draws `renderGroupRow` across every data column — title on the left,
+actions on the right edge; the content owns the collapse toggle. `renderFullWidthRow` turns a
+regular row into a single spanning banner, and `getRowCanDrag` keeps the banner and the locked
+first header in place while the other rows of the group reorder around them.
+
+Source: Table/Table.stories.tsx#GroupedWithFullWidthRows
+
+### GroupedWithExpandColumn
+
+`groupExpandColumn` keeps the expand column in grouping mode: the toggle sits in its own column,
+first, and every row of a group — drag handle included — sits to the right of it, while
+`renderGroupRow` keeps the title and the actions.
+
+Source: Table/Table.stories.tsx#GroupedWithExpandColumn
+
+### RowReorderingWithSelection
+
+Row reordering coexists with row selection — each feature has its own column and they
+don't interfere with each other.
+
+Source: Table/Table.stories.tsx#RowReorderingWithSelection
+
+### RowReorderingVirtualized
+
+Row drag-and-drop with container virtualization — the `DragOverlay` renders the dragged row
+outside the virtualizer so it stays visible even when scrolled out of the virtual window.
+
+Source: Table/Table.stories.tsx#RowReorderingVirtualized
+
+### InlineCellEditing
+
+Source: Table/Table.stories.tsx#InlineCellEditing
+
+### StickyGroupParentStory
+
+The group parent row sticks below the header while its children scroll — scroll through
+a group to see the parent pin in place, then release when the group boundary passes.
+
+Source: Table/Table.stories.tsx#StickyGroupParentStory
+
+### StickyGroupParentVirtualized
+
+The same sticky-parent behavior under container virtualization with large grouped data —
+the overlay stays in the DOM even when the real parent row is unmounted by the virtualizer.
+
+Source: Table/Table.stories.tsx#StickyGroupParentVirtualized
+
+## Story sources
+
+The story files and their local imports are in [stories.md](./stories.md), verbatim.

package/dist/project/components/Table/preview.html

@@ -0,0 +1,2 @@
+<!-- @dsCard group="Data Display" height=480 -->
+<!doctype html><html><head><meta charset="utf-8"></head><body><div id="preview"></div><script src="./stories.js"></script><script>window.WallarmPreview.mount(document.getElementById('preview'));</script></body></html>