simple-table-core 3.9.6 → 3.9.8

package/dist/cjs/src/core/SimpleTableVanilla.d.ts

@@ -69,6 +69,14 @@ export declare class SimpleTableVanilla {
     private headerRegistry;
     private rowIndexMap;
     private animationCoordinator;
+    /**
+     * When true, the sort subscriber skips `captureAnimationSnapshot` so
+     * live-update-driven reorder/visibility changes don't FLIP-animate.
+     * User-initiated sorts leave this false and keep FLIP.
+     */
+    private suppressNextAnimationSnapshot;
+    /** Lazily created once — callers often invoke getAPI() every live tick. */
+    private cachedAPI;
     private autoScaleManager;
     private dimensionManager;
     private scrollManager;

package/dist/cjs/src/core/api/TableAPIImpl.d.ts

@@ -41,6 +41,8 @@ export interface TableAPIContext {
      * re-render once the animation settles.
      */
     isCellAnimating?: (cellId: string) => boolean;
+    /** True while any FLIP cell transition is in flight (blocks live re-sort/re-filter). */
+    hasAnimatingCells?: () => boolean;
     columnEditorOpen: boolean;
     expandedDepthsManager: any;
     selectionManager: SelectionManager | null;
@@ -50,6 +52,17 @@ export interface TableAPIContext {
     getCachedFlattenResult?: () => FlattenRowsResult | null;
     getCachedProcessedResult?: () => ProcessRowsResult | null;
     onRender: () => void;
+    /**
+     * Bust the flatten / body row caches so the next render re-runs quick filter
+     * (and related processing) against in-place mutated row values.
+     */
+    invalidateRowsCache?: () => void;
+    /**
+     * Run `fn` without capturing a FLIP snapshot when sort/filter subscribers
+     * fire. Used for live-update-driven reorder/visibility changes so high-
+     * frequency ticks don't spam sort animations.
+     */
+    runWithoutAnimationSnapshot?: (fn: () => void) => void;
     setHeaders: (headers: HeaderObject[]) => void;
     setCurrentPage: (page: number) => void;
     setColumnEditorOpen: (open: boolean) => void;

package/dist/cjs/src/hooks/handleOutsideClick.d.ts

@@ -1,7 +1,7 @@
 import HeaderObject from "../types/HeaderObject";
 import Cell from "../types/Cell";
 export interface HandleOutsideClickConfig {
-    selectableCells: boolean;
+    selectableColumns: boolean;
     selectedCells: Set<string>;
     selectedColumns: Set<number>;
     setSelectedCells: (cells: Set<string>) => void;

package/dist/cjs/src/index.d.ts

@@ -49,4 +49,6 @@ import type { RowId } from "./types/RowId";
 import type { PinnedSectionsState } from "./types/PinnedSectionsState";
 export { SimpleTableVanilla };
 export { asRows } from "./utils/asRows";
+export { headersStructurallyEqual, collectHeaderAccessors, rowsShallowUnchanged, shallowEqualRow, SHALLOW_ROW_COMPARE_MAX, } from "./utils/propSyncEqual";
+export type { HeaderStructureLike, GetRowIdLike } from "./utils/propSyncEqual";
 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, RowSelectionMode, RowState, SetHeaderRenameProps, SharedTableProps, ShowWhen, SimpleTableConfig, SimpleTableProps, SortColumn, TableAPI, TableFilterState, TableHeaderProps, TableRowProps, Theme, PinnedSectionsState, UpdateDataProps, ValueFormatter, ValueFormatterProps, ValueGetter, ValueGetterProps, };

package/dist/cjs/src/managers/AnimationCoordinator.d.ts

@@ -117,6 +117,8 @@ export declare class AnimationCoordinator {
     setEasing(easing: string): void;
     isEnabled(): boolean;
     isInFlight(cellId: string): boolean;
+    /** True while any FLIP / retained-cell transition is still running. */
+    hasInFlight(): boolean;
     getDuration(): number;
     getEasing(): string;
     /**

package/dist/cjs/src/managers/SelectionManager/types.d.ts

@@ -5,8 +5,13 @@ import type Cell from "../../types/Cell";
 import type { CustomTheme } from "../../types/CustomTheme";
 export declare const createSetString: ({ rowIndex, colIndex, rowId }: Cell) => string;
 export interface SelectionManagerConfig {
-    /** When true, enables cell selection and column header selection. */
     selectableCells: boolean;
+    /**
+     * When true, column header click selects columns (`st-header-selected` on headers).
+     * Cell-in-column header tint (`st-header-has-highlighted-cell`) also applies when `selectableCells` is true
+     * even if this is false.
+     */
+    selectableColumns?: boolean;
     headers: HeaderObject[];
     tableRows: TableRowType[];
     onCellEdit?: (props: any) => void;

package/dist/cjs/src/managers/TableManager.d.ts

@@ -23,6 +23,7 @@ export interface TableManagerConfig {
     rowGrouping?: Accessor[];
     getRowId?: GetRowId;
     selectableCells?: boolean;
+    selectableColumns?: boolean;
     enableRowSelection?: boolean;
     copyHeadersToClipboard?: boolean;
     height?: string | number;

package/dist/cjs/src/types/SimpleTableConfig.d.ts

@@ -105,6 +105,7 @@ export interface SimpleTableConfig {
     rowsPerPage?: number;
     scrollParent?: HTMLElement | "window" | (() => HTMLElement | null);
     selectableCells?: boolean;
+    selectableColumns?: boolean;
     serverSidePagination?: boolean;
     shouldPaginate?: boolean;
     tableEmptyStateRenderer?: HTMLElement | string | null;

package/dist/cjs/src/types/SimpleTableProps.d.ts

@@ -98,6 +98,7 @@ export interface SimpleTableProps {
     rowsPerPage?: number;
     scrollParent?: HTMLElement | "window" | (() => HTMLElement | null);
     selectableCells?: boolean;
+    selectableColumns?: boolean;
     serverSidePagination?: boolean;
     shouldPaginate?: boolean;
     tableEmptyStateRenderer?: HTMLElement | string | null;

package/dist/cjs/src/utils/headerCell/types.d.ts

@@ -74,7 +74,7 @@ export interface HeaderRenderContext {
     reverse: boolean;
     rows: Row[];
     selectColumns?: (columnIndices: number[]) => void;
-    selectableCells?: boolean;
+    selectableColumns?: boolean;
     selectedColumns: Set<number>;
     selectedRowCount?: number; /** Used for context cache invalidation when row selection changes */
     setCollapsedHeaders: Dispatch<SetStateAction<Set<Accessor>>>;

package/dist/cjs/src/utils/propSyncEqual.d.ts

@@ -0,0 +1,65 @@
+/**
+ * Shared prop-sync helpers for framework adapters.
+ * Used to skip no-op `defaultHeaders` / `rows` updates when consumers rebuild
+ * column configs or shallow-clone rows every render.
+ */
+/** Minimal header shape for structural comparison (renderers ignored). */
+export type HeaderStructureLike = {
+    accessor: string | number | symbol;
+    width?: number | string;
+    minWidth?: number | string;
+    maxWidth?: number | string;
+    label?: string;
+    type?: string;
+    pinned?: string | boolean | null;
+    hide?: boolean;
+    isSortable?: boolean;
+    filterable?: boolean;
+    align?: string;
+    collapsible?: boolean;
+    collapseDefault?: boolean;
+    showWhen?: string;
+    isEditable?: boolean;
+    isEssential?: boolean;
+    disableReorder?: boolean;
+    expandable?: boolean;
+    excludeFromRender?: boolean;
+    autoSizeMode?: string;
+    tooltip?: string;
+    quickFilterable?: boolean;
+    filterOperators?: ReadonlyArray<string>;
+    children?: ReadonlyArray<HeaderStructureLike>;
+};
+/**
+ * True when two header trees describe the same columns (accessors, widths,
+ * flags, nesting). Ignores renderer identity.
+ */
+export declare function headersStructurallyEqual(a: ReadonlyArray<HeaderStructureLike> | undefined, b: ReadonlyArray<HeaderStructureLike> | undefined): boolean;
+/** Collect every accessor in a header tree (for renderer-cache pruning). */
+export declare function collectHeaderAccessors(headers: ReadonlyArray<HeaderStructureLike>, into?: Set<string>): Set<string>;
+/**
+ * Shallow equality of a single row object (own enumerable keys, `===` values).
+ * Identical references are equal. In-place mutation on a shared object is
+ * invisible — callers must pass new object identities when data changes.
+ */
+export declare function shallowEqualRow(a: object, b: object): boolean;
+export type GetRowIdLike = (params: {
+    row: unknown;
+    depth?: number;
+    index?: number;
+    rowPath?: (string | number)[];
+    rowIndexPath?: number[];
+    groupingKey?: string;
+}) => string | number | undefined;
+/**
+ * Above this length, skip per-field shallow compares when row object identity
+ * differs. Same-array-ref and same-row-object cases stay O(1) / O(n) pointer
+ * checks. Protects huge client datasets from O(n × fields) scans.
+ */
+export declare const SHALLOW_ROW_COMPARE_MAX = 50000;
+/**
+ * True when `next` is a no-op relative to `prev` for table sync:
+ * same length, matching `getRowId` sequence (when provided), and each row
+ * either the same object or shallow-equal (for modest list sizes).
+ */
+export declare function rowsShallowUnchanged(prev: ReadonlyArray<object> | undefined, next: ReadonlyArray<object> | undefined, getRowId?: GetRowIdLike): boolean;

package/dist/cjs/src/utils/rowUtils.d.ts

@@ -55,6 +55,13 @@ export declare const calculateNestedTableHeight: ({ calculatedHeight, customHeig
  *   getNestedValue(row, "releaseDate[0]") returns row.releaseDate[0]
  */
 export declare const getNestedValue: (obj: Row, path: Accessor) => CellValue;
+/**
+ * True when both arrays have the same length and the same row object references
+ * at each index. Used by FilterManager / SortManager so in-place live updates
+ * that recompute filter/sort only notify subscribers when membership or order
+ * actually changed (`.filter()` / `handleSort` always allocate new arrays).
+ */
+export declare const rowsOrderEqual: (a: Row[], b: Row[]) => boolean;
 /**
  * Set a nested property value in an object using dot notation and array bracket notation
  * Examples:

package/dist/cjs/stories/docs/Examples.stories.d.ts

@@ -7,6 +7,7 @@ declare const meta: Meta;
 export default meta;
 export declare const Billing: StoryObj;
 export declare const Clay: StoryObj;
+export declare const Crypto: StoryObj;
 export declare const Finance: StoryObj;
 export declare const Infrastructure: StoryObj;
 export declare const Leads: StoryObj;

package/dist/cjs/stories/docs/storyArgs.d.ts

@@ -18,6 +18,7 @@ export declare const storyArgs: (exampleDefaults?: Partial<UniversalVanillaArgs>
         hideFooter?: boolean | undefined;
         rowsPerPage?: number | undefined;
         selectableCells?: boolean | undefined;
+        selectableColumns?: boolean | undefined;
         shouldPaginate?: boolean | undefined;
         theme?: import("../../src/types/Theme").default | undefined;
         useHoverRowBackground?: boolean | undefined;
@@ -110,6 +111,12 @@ export declare const storyArgs: (exampleDefaults?: Partial<UniversalVanillaArgs>
             };
             description: string;
         };
+        selectableColumns: {
+            control: {
+                type: "boolean";
+            };
+            description: string;
+        };
         shouldPaginate: {
             control: {
                 type: "boolean";

package/dist/cjs/stories/examples/AlignmentExample.d.ts

@@ -3,6 +3,7 @@ export declare const alignmentExampleDefaults: {
     columnResizing: boolean;
     columnReordering: boolean;
     selectableCells: boolean;
+    selectableColumns: boolean;
     editColumns: boolean;
     height: string;
 };

package/dist/cjs/stories/examples/CellHighlighting.d.ts

@@ -2,5 +2,6 @@ import { type UniversalVanillaArgs } from "../vanillaStoryConfig";
 export declare const cellHighlightingExampleDefaults: {
     height: string;
     selectableCells: boolean;
+    selectableColumns: boolean;
 };
 export declare function renderCellHighlightingExample(args?: Partial<UniversalVanillaArgs>): HTMLElement;

package/dist/cjs/stories/examples/Pagination.d.ts

@@ -5,6 +5,7 @@ export declare const paginationExampleDefaults: {
     columnReordering: boolean;
     columnResizing: boolean;
     selectableCells: boolean;
+    selectableColumns: boolean;
     theme: "modern-dark";
     height: string;
 };

package/dist/cjs/stories/examples/SelectableCells.d.ts

@@ -2,6 +2,7 @@ import { type UniversalVanillaArgs } from "../vanillaStoryConfig";
 export declare const selectableCellsExampleDefaults: {
     rowGrouping: readonly ["stores"];
     selectableCells: boolean;
+    selectableColumns: boolean;
     columnResizing: boolean;
     columnReordering: boolean;
     height: string;

package/dist/cjs/stories/examples/Theming.d.ts

@@ -4,6 +4,7 @@ export declare const themingExampleDefaults: {
     columnReordering: boolean;
     editColumns: boolean;
     selectableCells: boolean;
+    selectableColumns: boolean;
     shouldPaginate: boolean;
     rowsPerPage: number;
     height: string;

package/dist/cjs/stories/examples/crypto/CryptoExample.d.ts

@@ -0,0 +1,14 @@
+import { type UniversalVanillaArgs } from "../../vanillaStoryConfig";
+export declare const cryptoExampleDefaults: {
+    columnResizing: boolean;
+    columnReordering: boolean;
+    selectableCells: boolean;
+    editColumns: boolean;
+    cellUpdateFlash: boolean;
+    height: string;
+    customTheme: {
+        headerHeight: number;
+        rowHeight: number;
+    };
+};
+export declare function renderCryptoExample(args?: Partial<UniversalVanillaArgs>): HTMLElement;

package/dist/cjs/stories/examples/crypto/crypto-data.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Deterministic crypto market dataset – same generator as the marketing
+ * Crypto example (`apps/marketing/src/examples/crypto/useCryptoData.ts`).
+ */
+import type { Row } from "../../../src/index";
+export interface CryptoCoin extends Row {
+    id: string;
+    rank: number;
+    name: string;
+    symbol: string;
+    price: number;
+    change1h: number;
+    change24h: number;
+    change7d: number;
+    change30d: number;
+    marketCap: number;
+    volume24h: number;
+    circulatingSupply: number;
+    maxSupply: number | null;
+    supplyPercent: number;
+    ath: number;
+    athChangePercent: number;
+    category: string;
+    priceHistory: number[];
+}
+export declare function generateCryptoData(count?: number): CryptoCoin[];
+export declare function formatCompact(value: number): string;
+export declare function formatCompactUsd(value: number): string;
+export declare function formatPrice(value: number): string;
+export declare function formatSignedPercent(value: number, digits?: number): string;

package/dist/cjs/stories/examples/crypto/crypto-headers.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Crypto example headers – vanilla port of the marketing crypto-headers.
+ */
+import type { HeaderObject } from "../../../src/index";
+export declare function getCryptoHeaders(): HeaderObject[];

package/dist/cjs/stories/examples/pinned-columns/PinnedColumns.d.ts

@@ -4,6 +4,7 @@ export declare const pinnedColumnsExampleDefaults: {
     rowGrouping: readonly ["stores"];
     columnReordering: boolean;
     selectableCells: boolean;
+    selectableColumns: boolean;
     editColumns: boolean;
     height: string;
     enableStickyParents: boolean;

package/dist/cjs/stories/tests/12-CellSelectionTests.stories.d.ts

@@ -74,7 +74,7 @@ export declare const OutsideClickClearsSelection: {
     }) => Promise<void>;
 };
 /**
- * Edge case: when selectableCells is true, clicking a column header should clear
+ * Edge case: when selectableColumns is true, clicking a column header should clear
  * any existing cell selection (and initial focused cell) so that column selection takes over.
  */
 export declare const ColumnHeaderClickClearsCellSelection: {

package/dist/cjs/stories/tests/21-ColumnSelectionTests.stories.d.ts

@@ -1,6 +1,6 @@
 /**
  * COLUMN SELECTION TESTS
- * Tests for selectableCells (column selection mode) and onColumnSelect callback.
+ * Tests for selectableColumns and onColumnSelect callback.
  */
 import type { Meta } from "@storybook/html";
 declare const meta: Meta;

package/dist/cjs/stories/tests/testUtils.d.ts

@@ -24,7 +24,7 @@ export declare const rowExists: (container: HTMLElement, rowIndex: string) => bo
  * This mimics the old .st-row structure for backward compatibility with tests
  */
 export declare const getVirtualRows: (container: HTMLElement) => HTMLElement[][];
-export declare const waitForTable: (timeout?: number) => Promise<void>;
+export declare const waitForTable: (timeoutOrRoot?: number | ParentNode, maybeTimeout?: number) => Promise<void>;
 /** Poll until predicate returns true or timeout (reduces flake vs fixed setTimeout). */
 export declare function waitUntil(predicate: () => boolean, options?: {
     timeoutMs?: number;

package/dist/cjs/stories/vanillaStoryConfig.d.ts

@@ -18,6 +18,7 @@ export interface UniversalVanillaArgs {
     hideFooter?: boolean;
     rowsPerPage?: number;
     selectableCells?: boolean;
+    selectableColumns?: boolean;
     shouldPaginate?: boolean;
     theme?: Theme;
     useHoverRowBackground?: boolean;
@@ -111,6 +112,12 @@ export declare const vanillaArgTypes: {
         };
         description: string;
     };
+    selectableColumns: {
+        control: {
+            type: "boolean";
+        };
+        description: string;
+    };
     shouldPaginate: {
         control: {
             type: "boolean";