simple-table-core 3.8.3 → 3.8.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. package/dist/cjs/index.js +1 -1
  2. package/dist/cjs/src/consts/general-consts.d.ts +1 -0
  3. package/dist/cjs/src/core/SimpleTableVanilla.d.ts +39 -0
  4. package/dist/cjs/src/core/api/TableAPIImpl.d.ts +9 -0
  5. package/dist/cjs/src/core/rendering/RenderOrchestrator.d.ts +3 -0
  6. package/dist/cjs/src/core/rendering/TableRenderer.d.ts +3 -0
  7. package/dist/cjs/src/index.d.ts +2 -2
  8. package/dist/cjs/src/managers/AnimationCoordinator.d.ts +37 -0
  9. package/dist/cjs/src/types/FilterTypes.d.ts +10 -1
  10. package/dist/cjs/src/types/HeaderObject.d.ts +14 -0
  11. package/dist/cjs/src/utils/bodyCell/cellLiveRef.d.ts +9 -0
  12. package/dist/cjs/src/utils/bodyCell/styling.d.ts +3 -8
  13. package/dist/cjs/src/utils/bodyCell/types.d.ts +20 -1
  14. package/dist/cjs/src/utils/externalScroll.d.ts +11 -0
  15. package/dist/cjs/src/utils/headerCell/types.d.ts +2 -1
  16. package/dist/cjs/src/utils/nestedGridRowRenderer.d.ts +16 -0
  17. package/dist/cjs/src/utils/resizeUtils/sectionWidths.d.ts +20 -0
  18. package/dist/cjs/stories/SimpleTable.stories.d.ts +1 -0
  19. package/dist/cjs/stories/examples/music/MusicWindowScrollExample.d.ts +5 -0
  20. package/dist/cjs/stories/examples/music/music-window.data.d.ts +47 -0
  21. package/dist/cjs/stories/tests/03-ColumnFilteringTests.stories.d.ts +16 -0
  22. package/dist/cjs/stories/tests/37-TableRefMethodsTests.stories.d.ts +8 -0
  23. package/dist/cjs/stories/tests/48-ExternalScrollLateParentTests.stories.d.ts +45 -0
  24. package/dist/index.es.js +1 -1
  25. package/dist/src/consts/general-consts.d.ts +1 -0
  26. package/dist/src/core/SimpleTableVanilla.d.ts +39 -0
  27. package/dist/src/core/api/TableAPIImpl.d.ts +9 -0
  28. package/dist/src/core/rendering/RenderOrchestrator.d.ts +3 -0
  29. package/dist/src/core/rendering/TableRenderer.d.ts +3 -0
  30. package/dist/src/index.d.ts +2 -2
  31. package/dist/src/managers/AnimationCoordinator.d.ts +37 -0
  32. package/dist/src/types/FilterTypes.d.ts +10 -1
  33. package/dist/src/types/HeaderObject.d.ts +14 -0
  34. package/dist/src/utils/bodyCell/cellLiveRef.d.ts +9 -0
  35. package/dist/src/utils/bodyCell/styling.d.ts +3 -8
  36. package/dist/src/utils/bodyCell/types.d.ts +20 -1
  37. package/dist/src/utils/externalScroll.d.ts +11 -0
  38. package/dist/src/utils/headerCell/types.d.ts +2 -1
  39. package/dist/src/utils/nestedGridRowRenderer.d.ts +16 -0
  40. package/dist/src/utils/resizeUtils/sectionWidths.d.ts +20 -0
  41. package/dist/stories/SimpleTable.stories.d.ts +1 -0
  42. package/dist/stories/examples/music/MusicWindowScrollExample.d.ts +5 -0
  43. package/dist/stories/examples/music/music-window.data.d.ts +47 -0
  44. package/dist/stories/tests/03-ColumnFilteringTests.stories.d.ts +16 -0
  45. package/dist/stories/tests/37-TableRefMethodsTests.stories.d.ts +8 -0
  46. package/dist/stories/tests/48-ExternalScrollLateParentTests.stories.d.ts +45 -0
  47. package/package.json +1 -1
@@ -4,6 +4,7 @@ export declare const PAGE_SIZE = 20;
4
4
  export declare const CSS_VAR_BORDER_WIDTH = "--st-border-width";
5
5
  export declare const DEFAULT_BORDER_WIDTH = 1;
6
6
  export declare const VIRTUALIZATION_THRESHOLD = 20;
7
+ export declare const UNVIRTUALIZED_ROW_WARNING_THRESHOLD = 500;
7
8
  export declare const OVERSCAN_PIXELS = 800;
8
9
  export declare const calculateBufferRowCount: (rowHeight: number) => number;
9
10
  export declare const COLUMN_EDIT_WIDTH = 29.5;
@@ -60,6 +60,10 @@ export declare class SimpleTableVanilla {
60
60
  private scrollEndTimeoutId;
61
61
  private lastScrollTop;
62
62
  private isUpdating;
63
+ /** Set once the dev-only "too many unvirtualized rows" warning has fired, so it never repeats. */
64
+ private hasWarnedUnvirtualizedRows;
65
+ /** Pending deferred check for the unvirtualized-rows warning (lets external-scroll seeding settle first). */
66
+ private unvirtualizedRowsCheckTimeoutId;
63
67
  /** Currently resolved external scroll parent (HTMLElement or window). Null when external scroll mode is inactive. */
64
68
  private resolvedScrollParent;
65
69
  /** Bound scroll handler attached to the external scroll parent. */
@@ -70,6 +74,15 @@ export declare class SimpleTableVanilla {
70
74
  private externalParentResizeObserver;
71
75
  /** Cached visible viewport height of the table inside the external parent. Fed into virtualization. */
72
76
  private externalViewportHeight;
77
+ /**
78
+ * rAF handle for retrying resolution of a configured-but-not-yet-resolvable
79
+ * `scrollParent` (e.g. a getter pointing at a ref attached on a later commit
80
+ * than this table's mount). Null when no retry is pending.
81
+ */
82
+ private externalScrollRetryRaf;
83
+ /** Number of resolution retries attempted; bounded so we don't spin forever. */
84
+ private externalScrollRetryCount;
85
+ private static readonly EXTERNAL_SCROLL_MAX_RETRIES;
73
86
  /** True iff the body-container scroll listener is currently attached. */
74
87
  private bodyScrollListenerAttached;
75
88
  /** Bound mouseleave handler on the body container. */
@@ -155,6 +168,13 @@ export declare class SimpleTableVanilla {
155
168
  */
156
169
  private didColumnVisibilityChange;
157
170
  private captureAnimationSnapshot;
171
+ /**
172
+ * Push the visible vertical viewport into the animation coordinator when
173
+ * external/page scroll is active (or clear it otherwise). Keeps the FLIP
174
+ * distance-scaling viewport-relative so cells don't slide the full
175
+ * conceptual distance when the table grows to its natural height.
176
+ */
177
+ private updateAnimationVerticalScroll;
158
178
  /**
159
179
  * Open the accordion animation window for the next render: capture a FLIP
160
180
  * snapshot, mark the active axis so cell renderers initialize incoming
@@ -180,6 +200,14 @@ export declare class SimpleTableVanilla {
180
200
  * `maxHeight`). Idempotent — safe to call repeatedly.
181
201
  */
182
202
  private syncExternalScrollWiring;
203
+ /**
204
+ * Retry resolving a configured `scrollParent` on the next animation frame.
205
+ * Used when the parent (typically a getter pointing at a ref) was not yet
206
+ * resolvable when external wiring last ran. Bounded by
207
+ * {@link SimpleTableVanilla.EXTERNAL_SCROLL_MAX_RETRIES} so a permanently
208
+ * unresolvable parent doesn't spin forever.
209
+ */
210
+ private scheduleExternalScrollParentRetry;
183
211
  private ensureBodyScrollListenerAttached;
184
212
  private ensureBodyScrollListenerDetached;
185
213
  private attachExternalScrollWiring;
@@ -250,6 +278,17 @@ export declare class SimpleTableVanilla {
250
278
  */
251
279
  refitAutoSizeColumns(): void;
252
280
  private render;
281
+ /**
282
+ * Dev-only safeguard. Schedules a one-shot, deferred check that warns when the
283
+ * table is about to render a very large number of rows with no virtualization
284
+ * active (no `height` / `maxHeight` and no bounded `scrollParent`). The check
285
+ * is deferred so external-scroll viewport seeding (which can momentarily leave
286
+ * `contentHeight` undefined on the first paint) has time to settle and we
287
+ * don't cry wolf for a correctly-configured table. Compiled out of production
288
+ * via the NODE_ENV guard. Never throws.
289
+ */
290
+ private maybeScheduleUnvirtualizedRowsWarning;
291
+ private evaluateUnvirtualizedRowsWarning;
253
292
  update(config: Partial<SimpleTableConfig>): void;
254
293
  /** @deprecated Use {@link update} — same behavior. */
255
294
  updateConfig(config: Partial<SimpleTableConfig>): void;
@@ -29,6 +29,15 @@ export interface TableAPIContext {
29
29
  cellRegistry?: Map<string, {
30
30
  updateContent: (value: any) => void;
31
31
  }>;
32
+ /**
33
+ * Whether a cell (by its `getCellId` key) is currently mid-FLIP-animation.
34
+ * Live `updateData` content writes are skipped for animating cells so a
35
+ * data tick doesn't re-render / mutate a cell that is sliding to a new
36
+ * position (which causes visible jank). The underlying row data is still
37
+ * updated; only the in-place DOM refresh is deferred to the next tick or
38
+ * re-render once the animation settles.
39
+ */
40
+ isCellAnimating?: (cellId: string) => boolean;
32
41
  columnEditorOpen: boolean;
33
42
  expandedDepthsManager: any;
34
43
  selectionManager: SelectionManager | null;
@@ -12,6 +12,7 @@ import { SelectionManager } from "../../managers/SelectionManager";
12
12
  import { RowSelectionManager } from "../../managers/RowSelectionManager";
13
13
  import type { AnimationCoordinator, CellPosition } from "../../managers/AnimationCoordinator";
14
14
  import type { AccordionAxis } from "../../utils/accordionAnimation";
15
+ import type { NestedTableFactory } from "../../utils/nestedGridRowRenderer";
15
16
  import { FlattenRowsResult } from "../../utils/rowFlattening";
16
17
  import { ProcessRowsResult } from "../../utils/rowProcessing";
17
18
  import { MergedColumnEditorConfig, ResolvedIcons } from "../initialization/TableInitializer";
@@ -52,6 +53,8 @@ export interface RenderContext {
52
53
  internalIsLoading: boolean;
53
54
  isResizing: boolean;
54
55
  localRows: Row[];
56
+ /** Injected factory for nested grid tables (breaks the SimpleTableVanilla import cycle). */
57
+ createNestedTable?: NestedTableFactory;
55
58
  mainBodyRef: {
56
59
  current: HTMLDivElement | null;
57
60
  };
@@ -9,6 +9,7 @@ import { SelectionManager } from "../../managers/SelectionManager";
9
9
  import { RowSelectionManager } from "../../managers/RowSelectionManager";
10
10
  import type { AnimationCoordinator, CellPosition } from "../../managers/AnimationCoordinator";
11
11
  import type { AccordionAxis } from "../../utils/accordionAnimation";
12
+ import type { NestedTableFactory } from "../../utils/nestedGridRowRenderer";
12
13
  export interface TableRendererDeps {
13
14
  /** Accordion animation axis for the in-flight collapse/expand. See {@link RenderContext.accordionAxis}. */
14
15
  accordionAxis?: AccordionAxis;
@@ -81,6 +82,8 @@ export interface TableRendererDeps {
81
82
  setIsResizing: (value: boolean) => void;
82
83
  setRowStateMap: (map: Map<string | number, any>) => void;
83
84
  sortManager: SortManager | null;
85
+ /** Injected factory for nested grid tables (breaks the SimpleTableVanilla import cycle). */
86
+ createNestedTable?: NestedTableFactory;
84
87
  }
85
88
  export declare class TableRenderer {
86
89
  private sectionRenderer;
@@ -19,7 +19,7 @@ import type { TableAPI, SetHeaderRenameProps, ExportToCSVProps } from "./types/T
19
19
  import type TableRowProps from "./types/TableRowProps";
20
20
  import type Theme from "./types/Theme";
21
21
  import type UpdateDataProps from "./types/UpdateCellProps";
22
- import type { FilterCondition, TableFilterState } from "./types/FilterTypes";
22
+ import type { FilterCondition, TableFilterState, FilterOperator, StringFilterOperator, NumberFilterOperator, BooleanFilterOperator, DateFilterOperator, EnumFilterOperator } from "./types/FilterTypes";
23
23
  import type { QuickFilterConfig, QuickFilterGetter, QuickFilterGetterProps, QuickFilterMode } from "./types/QuickFilterTypes";
24
24
  import type { ColumnVisibilityState } from "./types/ColumnVisibilityTypes";
25
25
  import type RowSelectionChangeProps from "./types/RowSelectionChangeProps";
@@ -48,4 +48,4 @@ import type { RowId } from "./types/RowId";
48
48
  import type { PinnedSectionsState } from "./types/PinnedSectionsState";
49
49
  export { SimpleTableVanilla };
50
50
  export { asRows } from "./utils/asRows";
51
- export type { Accessor, AggregationConfig, AggregationType, AnimationsConfig, BoundingBox, Cell, CellChangeProps, CellClickProps, CellRenderer, CellRendererProps, CellValue, ChartOptions, ColumnEditorConfig, ColumnEditorCustomRenderer, ColumnEditorCustomRendererProps, ColumnEditorRowRenderer, ColumnEditorRowRendererComponents, ColumnEditorRowRendererProps, ColumnEditorSearchFunction, ColumnType, ColumnVisibilityState, Comparator, ComparatorProps, CustomTheme, CustomThemeProps, DragHandlerProps, EmptyStateRenderer, EmptyStateRendererProps, EnumOption, ErrorStateRenderer, ErrorStateRendererProps, ExportToCSVProps, ExportValueGetter, ExportValueProps, FilterCondition, FooterRendererProps, FooterPosition, GetRowId, GetRowIdParams, IconsConfig, LoadingStateRenderer, LoadingStateRendererProps, HeaderDropdown, HeaderDropdownProps, HeaderObject, HeaderRenderer, HeaderRendererProps, HeaderRendererComponents, OnRowGroupExpandProps, OnSortProps, QuickFilterConfig, QuickFilterGetter, QuickFilterGetterProps, QuickFilterMode, Row, RowButtonProps, RowId, RowSelectionChangeProps, RowState, SetHeaderRenameProps, SharedTableProps, ShowWhen, SimpleTableConfig, SimpleTableProps, SortColumn, TableAPI, TableFilterState, TableHeaderProps, TableRowProps, Theme, PinnedSectionsState, UpdateDataProps, ValueFormatter, ValueFormatterProps, ValueGetter, ValueGetterProps, };
51
+ export type { Accessor, AggregationConfig, AggregationType, AnimationsConfig, BoundingBox, Cell, CellChangeProps, CellClickProps, CellRenderer, CellRendererProps, CellValue, ChartOptions, ColumnEditorConfig, ColumnEditorCustomRenderer, ColumnEditorCustomRendererProps, ColumnEditorRowRenderer, ColumnEditorRowRendererComponents, ColumnEditorRowRendererProps, ColumnEditorSearchFunction, ColumnType, ColumnVisibilityState, Comparator, ComparatorProps, CustomTheme, CustomThemeProps, DragHandlerProps, EmptyStateRenderer, EmptyStateRendererProps, EnumOption, ErrorStateRenderer, ErrorStateRendererProps, ExportToCSVProps, ExportValueGetter, ExportValueProps, FilterCondition, FilterOperator, StringFilterOperator, NumberFilterOperator, BooleanFilterOperator, DateFilterOperator, EnumFilterOperator, FooterRendererProps, FooterPosition, GetRowId, GetRowIdParams, IconsConfig, LoadingStateRenderer, LoadingStateRendererProps, HeaderDropdown, HeaderDropdownProps, HeaderObject, HeaderRenderer, HeaderRendererProps, HeaderRendererComponents, OnRowGroupExpandProps, OnSortProps, QuickFilterConfig, QuickFilterGetter, QuickFilterGetterProps, QuickFilterMode, Row, RowButtonProps, RowId, RowSelectionChangeProps, RowState, SetHeaderRenameProps, SharedTableProps, ShowWhen, SimpleTableConfig, SimpleTableProps, SortColumn, TableAPI, TableFilterState, TableHeaderProps, TableRowProps, Theme, PinnedSectionsState, UpdateDataProps, ValueFormatter, ValueFormatterProps, ValueGetter, ValueGetterProps, };
@@ -57,6 +57,31 @@ export declare class AnimationCoordinator {
57
57
  * stable within a single sort.
58
58
  */
59
59
  private scrollerMetricsCache;
60
+ /**
61
+ * Vertical scroller metrics override for external/page-scroll mode. When the
62
+ * table has no internal vertical overflow (it grows to its natural height and
63
+ * a parent element / the window scrolls), the body container's own
64
+ * clientHeight/scrollHeight no longer describe the visible viewport, so
65
+ * {@link scaleFlipDistance} can't bound the FLIP journey and sort cells slide
66
+ * the full conceptual distance. The vanilla table pushes the real visible
67
+ * viewport here (from the same `getExternalScrollMetrics` the virtualizer
68
+ * uses) so the y-axis FLIP scaling matches the on-screen viewport. `null`
69
+ * when external scroll is inactive — internal scroller metrics are used as-is.
70
+ */
71
+ private externalVerticalScroll;
72
+ /**
73
+ * The currently-scheduled (not-yet-started) FLIP frame. play() defers the
74
+ * transition start by two animation frames so the inverted "First" frame
75
+ * gets painted before the transition fires. Spam-clicking sort triggers a
76
+ * full re-render + play() inside that two-frame window: without coalescing,
77
+ * the stale chain's startTransition zeroes the transforms the newer cycle
78
+ * just inverted (a frame early), so the final transition animates
79
+ * identity→identity and nothing visibly moves — and many captured nodes are
80
+ * detached by the intervening render before they ever transition. Tracking
81
+ * the pending frame lets a new play() cancel the prior cycle and reset the
82
+ * transforms it left behind, so only the latest sort animates.
83
+ */
84
+ private scheduledFlip;
60
85
  constructor(opts?: AnimationCoordinatorOptions);
61
86
  setEnabled(enabled: boolean): void;
62
87
  setDuration(duration: number): void;
@@ -84,6 +109,18 @@ export declare class AnimationCoordinator {
84
109
  * mutation in the loop.
85
110
  */
86
111
  private getScrollerMetrics;
112
+ /**
113
+ * Supply (or clear) the vertical scroller metrics override used by
114
+ * {@link scaleFlipDistance} in external/page-scroll mode. Must be set before
115
+ * `captureSnapshot`/`retainCell`/`play` so the whole FLIP cycle scales
116
+ * against the real visible viewport. Pass `null` to fall back to the body
117
+ * container's own metrics (internal scroll).
118
+ */
119
+ setExternalVerticalScroll(metrics: {
120
+ clientHeight: number;
121
+ scrollHeight: number;
122
+ scrollTop: number;
123
+ } | null): void;
87
124
  private clearScrollerMetricsCache;
88
125
  /**
89
126
  * Capture pre-change positions for cells we may want to animate.
@@ -16,7 +16,16 @@ export interface TableFilterState {
16
16
  [accessor: Accessor]: FilterCondition;
17
17
  }
18
18
  export declare const FILTER_OPERATOR_LABELS: Record<FilterOperator, string>;
19
- export declare const getAvailableOperators: (columnType: "string" | "number" | "boolean" | "date" | "enum") => FilterOperator[];
19
+ /**
20
+ * Returns the list of operators a column should expose in its filter UI.
21
+ *
22
+ * When `allowedOperators` is provided, the result is restricted to that list,
23
+ * preserving the consumer-specified order. Operators that aren't valid for the
24
+ * given column type are ignored. If the restriction would leave no valid
25
+ * operators (e.g. a misconfiguration), the full default list for the column
26
+ * type is returned so the filter UI never renders an empty dropdown.
27
+ */
28
+ export declare const getAvailableOperators: (columnType: "string" | "number" | "boolean" | "date" | "enum", allowedOperators?: FilterOperator[]) => FilterOperator[];
20
29
  export declare const requiresSingleValue: (operator: FilterOperator) => boolean;
21
30
  export declare const requiresMultipleValues: (operator: FilterOperator) => boolean;
22
31
  export declare const requiresNoValue: (operator: FilterOperator) => boolean;
@@ -7,6 +7,7 @@ import { HeaderRenderer } from "./HeaderRendererProps";
7
7
  import CellValue from "./CellValue";
8
8
  import { SimpleTableProps } from "./SimpleTableProps";
9
9
  import { QuickFilterGetter } from "./QuickFilterTypes";
10
+ import type { FilterOperator } from "./FilterTypes";
10
11
  export type Accessor = keyof Row | string;
11
12
  export type ColumnType = "string" | "number" | "boolean" | "date" | "enum" | "lineAreaChart" | "barChart" | "other";
12
13
  export type ShowWhen = "parentCollapsed" | "parentExpanded" | "always";
@@ -81,6 +82,19 @@ type HeaderObject = {
81
82
  expandable?: boolean;
82
83
  exportValueGetter?: ExportValueGetter;
83
84
  filterable?: boolean;
85
+ /**
86
+ * Restricts which filter operators are shown in this column's filter dropdown.
87
+ * Only operators valid for the column's `type` are honored, and they appear in
88
+ * the order provided here. When omitted, all operators for the column type are
89
+ * shown. Has no effect on `enum` columns (which use a checkbox value picker
90
+ * instead of an operator dropdown).
91
+ *
92
+ * @example
93
+ * // String column limited to "contains" and "equals"
94
+ * { accessor: "name", type: "string", filterable: true,
95
+ * filterOperators: ["contains", "equals"] }
96
+ */
97
+ filterOperators?: FilterOperator[];
84
98
  headerRenderer?: HeaderRenderer;
85
99
  hide?: boolean;
86
100
  isEditable?: boolean;
@@ -0,0 +1,9 @@
1
+ import type Row from "../../types/Row";
2
+ import type TableRow from "../../types/TableRow";
3
+ import { CellRenderContext } from "./types";
4
+ export interface CellLiveRef {
5
+ row: Row;
6
+ tableRow: TableRow;
7
+ context: CellRenderContext;
8
+ }
9
+ export declare const cellLiveRefMap: WeakMap<HTMLElement, CellLiveRef>;
@@ -1,12 +1,7 @@
1
- import type Row from "../../types/Row";
2
- import type TableRow from "../../types/TableRow";
3
1
  import { AbsoluteBodyCell, CellRegistryEntry, CellRenderContext } from "./types";
4
- export interface CellLiveRef {
5
- row: Row;
6
- tableRow: TableRow;
7
- context: CellRenderContext;
8
- }
9
- export declare const cellLiveRefMap: WeakMap<HTMLElement, CellLiveRef>;
2
+ import { CellLiveRef, cellLiveRefMap } from "./cellLiveRef";
3
+ export { cellLiveRefMap };
4
+ export type { CellLiveRef };
10
5
  export declare const untrackCellByRow: (rowId: string, cellElement: HTMLElement) => void;
11
6
  export declare const unregisterCellFromRegistry: (cellElement: HTMLElement, cellRegistry?: Map<string, CellRegistryEntry>) => void;
12
7
  export declare const createBodyCellElement: (cell: AbsoluteBodyCell, context: CellRenderContext) => HTMLElement;
@@ -10,6 +10,7 @@ import type { CustomTheme } from "../../types/CustomTheme";
10
10
  import type { HeightOffsets } from "../infiniteScrollUtils";
11
11
  import type { AccordionAxis } from "../accordionAnimation";
12
12
  import type { VanillaEmptyStateRenderer, VanillaErrorStateRenderer, VanillaLoadingStateRenderer } from "../../types/RowStateRendererProps";
13
+ import type { NestedTableFactory } from "../nestedGridRowRenderer";
13
14
  type SetStateAction<T> = T | ((prevState: T) => T);
14
15
  type Dispatch<A> = (value: A) => void;
15
16
  export interface AbsoluteBodyCell {
@@ -83,8 +84,20 @@ export interface CellRenderContext {
83
84
  heightOffsets?: HeightOffsets;
84
85
  customTheme?: CustomTheme;
85
86
  containerWidth?: number;
86
- /** Main section viewport width (avoids clientWidth read when set); use for getVisibleBodyCells when !pinned */
87
+ /**
88
+ * Main section *content* width (sum of all non-pinned column widths). Drives
89
+ * the body section / row-separator width so the body is as wide as its
90
+ * content and scrolls horizontally. NOT the virtualization viewport — use
91
+ * `mainSectionViewportWidth` for getVisibleBodyCells.
92
+ */
87
93
  mainSectionContainerWidth?: number;
94
+ /**
95
+ * Main section *visible* viewport width (container minus pinned sections).
96
+ * Used by getVisibleBodyCells to decide which cells intersect the viewport
97
+ * (column virtualization). NOT the content width — using the content width
98
+ * here makes every column count as visible, disabling virtualization.
99
+ */
100
+ mainSectionViewportWidth?: number;
88
101
  onCellEdit?: (params: CellEditParams) => void;
89
102
  onCellClick?: (params: CellClickParams) => void;
90
103
  onRowGroupExpand?: (props: OnRowGroupExpandProps) => void | Promise<void>;
@@ -103,6 +116,12 @@ export interface CellRenderContext {
103
116
  loadingStateRenderer?: VanillaLoadingStateRenderer;
104
117
  errorStateRenderer?: VanillaErrorStateRenderer;
105
118
  emptyStateRenderer?: VanillaEmptyStateRenderer;
119
+ /**
120
+ * Factory used to instantiate nested grid tables. Injected by the host table
121
+ * so {@link nestedGridRowRenderer} never has to import the concrete
122
+ * `SimpleTableVanilla` class (which would create a render-module import cycle).
123
+ */
124
+ createNestedTable?: NestedTableFactory;
106
125
  getBorderClass: (cell: CellData) => string;
107
126
  isSelected: (cell: CellData) => boolean;
108
127
  isInitialFocusedCell: (cell: CellData) => boolean;
@@ -45,3 +45,14 @@ export declare const getExternalScrollMetrics: (parent: ResolvedScrollParent, ta
45
45
  * Returns the raw scroll-top of the parent (used for direction tracking only).
46
46
  */
47
47
  export declare const getParentScrollTop: (parent: ResolvedScrollParent) => number;
48
+ /**
49
+ * Height of the parent's own viewport (window.innerHeight, or the element's
50
+ * border-box height), independent of where the table sits inside it.
51
+ *
52
+ * Used as a provisional virtualization viewport before the table has been laid
53
+ * out: at that point the table∩viewport intersection is 0, which would disable
54
+ * virtualization and render every row at once. Seeding with the parent viewport
55
+ * keeps virtualization active on the first paint; a later precise recompute
56
+ * refines it. Returns 0 when the parent can't be measured.
57
+ */
58
+ export declare const getParentViewportHeight: (parent: ResolvedScrollParent) => number;
@@ -52,7 +52,8 @@ export interface HeaderRenderContext {
52
52
  icons: IconsConfig;
53
53
  lastHeaderIndex: number;
54
54
  mainBodyRef: RefObject<HTMLDivElement>;
55
- mainSectionContainerWidth?: number; /** Main section viewport width (avoids clientWidth read when set); use for getVisibleCells when !pinned */
55
+ mainSectionContainerWidth?: number; /** Main section *content* width (sum of all non-pinned column widths). NOT the virtualization viewport. */
56
+ mainSectionViewportWidth?: number; /** Main section *visible* viewport width (container minus pinned); use for getVisibleCells when !pinned */
56
57
  onColumnOrderChange?: (headers: HeaderObject[]) => void;
57
58
  onColumnSelect?: (header: HeaderObject) => void;
58
59
  onColumnWidthChange?: (headers: HeaderObject[]) => void;
@@ -6,6 +6,20 @@ import type TableRow from "../types/TableRow";
6
6
  import type { CustomTheme } from "../types/CustomTheme";
7
7
  import type { SimpleTableConfig } from "../types/SimpleTableConfig";
8
8
  import { type HeightOffsets } from "./infiniteScrollUtils";
9
+ /**
10
+ * Minimal surface of a table instance this renderer drives. Declared
11
+ * structurally so this module never has to statically import the concrete
12
+ * `SimpleTableVanilla` class — that import would close a cycle
13
+ * (SimpleTableVanilla → RenderOrchestrator → TableRenderer → SectionRenderer →
14
+ * nestedGridRowRenderer → SimpleTableVanilla). The class is injected at render
15
+ * time via {@link NestedTableFactory} instead.
16
+ */
17
+ export interface NestedTableInstance {
18
+ mount: () => void;
19
+ destroy: () => void;
20
+ }
21
+ /** Factory injected by the host table to instantiate a nested table. */
22
+ export type NestedTableFactory = (container: HTMLElement, config: SimpleTableConfig) => NestedTableInstance;
9
23
  export interface NestedGridRowRenderContext {
10
24
  rowHeight: number;
11
25
  heightOffsets: HeightOffsets | undefined;
@@ -17,6 +31,8 @@ export interface NestedGridRowRenderContext {
17
31
  errorStateRenderer?: SimpleTableConfig["errorStateRenderer"];
18
32
  emptyStateRenderer?: SimpleTableConfig["emptyStateRenderer"];
19
33
  icons?: SimpleTableConfig["icons"];
34
+ /** Injected constructor for nested tables (breaks the import cycle). */
35
+ createNestedTable?: NestedTableFactory;
20
36
  }
21
37
  /**
22
38
  * Creates a nested grid row element: a div with class "st-row st-nested-grid-row"
@@ -1,4 +1,24 @@
1
1
  import type HeaderObject from "../../types/HeaderObject";
2
+ /**
3
+ * Width of the *visible* portion of the main (non-pinned) section: the container
4
+ * width minus the pinned section widths.
5
+ *
6
+ * This is the viewport used for column virtualization (getVisibleBodyCells /
7
+ * getVisibleCells) — NOT `mainWidth` from {@link recalculateAllSectionWidths},
8
+ * which is the full *content* width (sum of all main column widths). Passing the
9
+ * content width here makes every column count as "in viewport", disabling column
10
+ * virtualization (all columns render). See the column-virtualization regression
11
+ * tests.
12
+ *
13
+ * Returns `undefined` when the container has not been measured yet
14
+ * (`containerWidth` 0) so callers fall back to a live `clientWidth` read instead
15
+ * of virtualizing against a 0px viewport.
16
+ */
17
+ export declare const getMainSectionViewportWidth: ({ containerWidth, leftWidth, rightWidth, }: {
18
+ containerWidth: number;
19
+ leftWidth: number;
20
+ rightWidth: number;
21
+ }) => number | undefined;
2
22
  /**
3
23
  * Recalculate widths for all sections (left, right, main)
4
24
  * Returns both constrained widths (for display) and raw content widths (for scrolling)
@@ -44,6 +44,7 @@ export declare const LiveUpdates: StoryObj;
44
44
  export declare const LoadingState: StoryObj;
45
45
  export declare const ManufacturingExample: StoryObj;
46
46
  export declare const MusicExample: StoryObj;
47
+ export declare const MusicWindowScroll: StoryObj;
47
48
  export declare const NestedGrid: StoryObj;
48
49
  export declare const NestedAccessor: StoryObj;
49
50
  export declare const Pagination: StoryObj;
@@ -0,0 +1,5 @@
1
+ import { type UniversalVanillaArgs } from "../../vanillaStoryConfig";
2
+ import { METRICS } from "./music-window.data";
3
+ export declare const musicWindowScrollExampleDefaults: Partial<UniversalVanillaArgs>;
4
+ export declare function renderMusicWindowScrollExample(args?: Partial<UniversalVanillaArgs>): HTMLElement;
5
+ export { METRICS };
@@ -0,0 +1,47 @@
1
+ /**
2
+ * Self-contained demo data for the wide window-scroll Music example.
3
+ *
4
+ * Vanilla port of the React `music.demo-data.ts`: a wide, real-world-shaped
5
+ * artist analytics dataset (~60 columns) generated at runtime via a
6
+ * deterministic PRNG so rows stay stable across reloads.
7
+ */
8
+ export interface MusicArtist {
9
+ id: string;
10
+ rank: number;
11
+ rankChange: number;
12
+ artistName: string;
13
+ artistType: string;
14
+ pronouns: string;
15
+ recordLabel: string;
16
+ genre: string;
17
+ country: string;
18
+ countryFlag: string;
19
+ continent: string;
20
+ score: number;
21
+ scoreChange: number;
22
+ earliestAlbumReleaseDate: string;
23
+ latestAlbumReleaseDate: string;
24
+ audienceAge: Record<string, number>;
25
+ audienceGender: {
26
+ f: number;
27
+ m: number;
28
+ };
29
+ spotifyPopularity: number;
30
+ spotifyPopularityChangePercent: number;
31
+ spotifyFollowersToListenersRatio: number;
32
+ spotifyReachFollowersRatio: number;
33
+ youtubeEngagementRate: number;
34
+ instagramEngagementRate: number;
35
+ tiktokEngagementRate: number;
36
+ tiktokEngagementRateChange: number;
37
+ [key: string]: string | number | Record<string, number> | {
38
+ f: number;
39
+ m: number;
40
+ } | undefined;
41
+ }
42
+ export declare const METRICS: [string, number][];
43
+ export declare function generateMusicData(count?: number): MusicArtist[];
44
+ export declare function getMusicThemeColors(theme?: string): {
45
+ text: string;
46
+ muted: string;
47
+ };
@@ -68,3 +68,19 @@ export declare const EnumFilterMoreThan10OptionsShowsSearch: {
68
68
  canvasElement: HTMLElement;
69
69
  }) => Promise<void>;
70
70
  };
71
+ export declare const LimitFilterOperators: {
72
+ render: () => HTMLDivElement & {
73
+ _table?: SimpleTableVanilla | undefined;
74
+ };
75
+ play: ({ canvasElement }: {
76
+ canvasElement: HTMLElement;
77
+ }) => Promise<void>;
78
+ };
79
+ export declare const LimitFilterOperatorsFallbackDefault: {
80
+ render: () => HTMLDivElement & {
81
+ _table?: SimpleTableVanilla | undefined;
82
+ };
83
+ play: ({ canvasElement }: {
84
+ canvasElement: HTMLElement;
85
+ }) => Promise<void>;
86
+ };
@@ -58,6 +58,14 @@ export declare const ToggleColumnEditorApplyColumnVisibility: {
58
58
  canvasElement: HTMLElement;
59
59
  }) => Promise<void>;
60
60
  };
61
+ export declare const ToggleColumnEditorNoArgsRepeated: {
62
+ render: () => HTMLDivElement & {
63
+ _table?: SimpleTableVanilla | undefined;
64
+ };
65
+ play: ({ canvasElement }: {
66
+ canvasElement: HTMLElement;
67
+ }) => Promise<void>;
68
+ };
61
69
  export declare const ExpandAllCollapseAllGetExpandedDepths: {
62
70
  render: () => HTMLDivElement & {
63
71
  _table?: SimpleTableVanilla | undefined;
@@ -0,0 +1,45 @@
1
+ /**
2
+ * EXTERNAL SCROLL — LATE-RESOLVING PARENT TESTS
3
+ *
4
+ * Regression tests for the three fixes that make external scroll mode robust
5
+ * when `scrollParent` is a getter that is not resolvable at mount time (the
6
+ * common React case: `scrollParent={() => ref.current?.parentElement}` where
7
+ * `ref` is on an ancestor that React attaches *after* the table's mount effect).
8
+ *
9
+ * Fix 1 — the table retries resolving the parent on later frames, so a getter
10
+ * that returns null at mount still wires up once it resolves.
11
+ * Fix 2 — while the parent is unresolved, a provisional viewport keeps row
12
+ * virtualization ON, so the table never renders every row at once
13
+ * (the original symptom was a multi-second freeze + collapsed table).
14
+ * Fix 3 — that provisional viewport feeds the render-window math (it is not
15
+ * gated on a resolved parent), so the very first render is virtualized
16
+ * and external-scroll mode (sticky header) engages immediately.
17
+ *
18
+ * These run in a real browser via the Storybook test-runner, so layout
19
+ * (getBoundingClientRect / scrollHeight / clientHeight) is real — which the
20
+ * external-scroll virtualization math depends on.
21
+ */
22
+ import type { Meta } from "@storybook/html";
23
+ declare const meta: Meta;
24
+ export default meta;
25
+ export declare const LateResolvingParentGetsWired: {
26
+ tags: string[];
27
+ render: () => HTMLDivElement;
28
+ play: ({ canvasElement }: {
29
+ canvasElement: HTMLElement;
30
+ }) => Promise<void>;
31
+ };
32
+ export declare const UnresolvedParentStaysVirtualized: {
33
+ tags: string[];
34
+ render: () => HTMLDivElement;
35
+ play: ({ canvasElement }: {
36
+ canvasElement: HTMLElement;
37
+ }) => Promise<void>;
38
+ };
39
+ export declare const ProvisionalViewportFeedsRenderWindow: {
40
+ tags: string[];
41
+ render: () => HTMLDivElement;
42
+ play: ({ canvasElement }: {
43
+ canvasElement: HTMLElement;
44
+ }) => Promise<void>;
45
+ };