simple-table-core 3.8.6 → 3.8.8
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.
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/src/core/SimpleTableVanilla.d.ts +37 -0
- package/dist/cjs/src/core/api/TableAPIImpl.d.ts +2 -0
- package/dist/cjs/src/core/rendering/RenderOrchestrator.d.ts +6 -0
- package/dist/cjs/src/core/rendering/TableRenderer.d.ts +6 -0
- package/dist/cjs/src/types/HandleResizeStartProps.d.ts +4 -0
- package/dist/cjs/src/types/HeaderObject.d.ts +5 -1
- package/dist/cjs/src/types/SimpleTableConfig.d.ts +7 -0
- package/dist/cjs/src/types/TableAPI.d.ts +6 -1
- package/dist/cjs/src/types/Theme.d.ts +1 -1
- package/dist/cjs/src/utils/charts/createBarChart.d.ts +5 -0
- package/dist/cjs/src/utils/charts/createLineAreaChart.d.ts +8 -0
- package/dist/cjs/src/utils/headerCell/resizing.d.ts +1 -1
- package/dist/cjs/src/utils/headerCell/styling.d.ts +3 -3
- package/dist/cjs/src/utils/headerCell/types.d.ts +4 -0
- package/dist/cjs/src/utils/headerWidthUtils.d.ts +6 -5
- package/dist/cjs/src/utils/resizeUtils/autoExpandResize.d.ts +14 -3
- package/dist/cjs/src/utils/resizeUtils/compensation.d.ts +7 -1
- package/dist/cjs/src/utils/resizeUtils/index.d.ts +6 -2
- package/dist/cjs/stories/examples/music/MusicExample.d.ts +1 -1
- package/dist/cjs/stories/tests/08-ColumnWidthTests.stories.d.ts +6 -2
- package/dist/cjs/stories/tests/32-ThemesTests.stories.d.ts +1 -17
- package/dist/cjs/stories/tests/39-AutoExpandColumnsTests.stories.d.ts +8 -5
- package/dist/cjs/stories/tests/46-AutoSizeColumnsTests.stories.d.ts +53 -0
- package/dist/cjs/stories/tests/49-AutoWidthAutoExpandTests.stories.d.ts +151 -0
- package/dist/cjs/styles.css +1 -1
- package/dist/index.es.js +1 -1
- package/dist/src/core/SimpleTableVanilla.d.ts +37 -0
- package/dist/src/core/api/TableAPIImpl.d.ts +2 -0
- package/dist/src/core/rendering/RenderOrchestrator.d.ts +6 -0
- package/dist/src/core/rendering/TableRenderer.d.ts +6 -0
- package/dist/src/types/HandleResizeStartProps.d.ts +4 -0
- package/dist/src/types/HeaderObject.d.ts +5 -1
- package/dist/src/types/SimpleTableConfig.d.ts +7 -0
- package/dist/src/types/TableAPI.d.ts +6 -1
- package/dist/src/types/Theme.d.ts +1 -1
- package/dist/src/utils/charts/createBarChart.d.ts +5 -0
- package/dist/src/utils/charts/createLineAreaChart.d.ts +8 -0
- package/dist/src/utils/headerCell/resizing.d.ts +1 -1
- package/dist/src/utils/headerCell/styling.d.ts +3 -3
- package/dist/src/utils/headerCell/types.d.ts +4 -0
- package/dist/src/utils/headerWidthUtils.d.ts +6 -5
- package/dist/src/utils/resizeUtils/autoExpandResize.d.ts +14 -3
- package/dist/src/utils/resizeUtils/compensation.d.ts +7 -1
- package/dist/src/utils/resizeUtils/index.d.ts +6 -2
- package/dist/stories/examples/music/MusicExample.d.ts +1 -1
- package/dist/stories/tests/08-ColumnWidthTests.stories.d.ts +6 -2
- package/dist/stories/tests/32-ThemesTests.stories.d.ts +1 -17
- package/dist/stories/tests/39-AutoExpandColumnsTests.stories.d.ts +8 -5
- package/dist/stories/tests/46-AutoSizeColumnsTests.stories.d.ts +53 -0
- package/dist/stories/tests/49-AutoWidthAutoExpandTests.stories.d.ts +151 -0
- package/dist/styles.css +1 -1
- package/package.json +1 -1
- package/src/styles/all-themes.css +0 -4
- package/src/styles/base.css +35 -75
- package/src/styles/themes/dark.css +7 -5
- package/src/styles/themes/light.css +4 -2
- package/src/styles/themes/modern-dark.css +7 -146
- package/src/styles/themes/modern-light.css +11 -138
- package/src/styles/themes/neutral.css +6 -4
- package/src/styles/themes/theme-custom.css +6 -253
- package/src/styles/themes/frost.css +0 -116
- package/src/styles/themes/sky.css +0 -115
- package/src/styles/themes/violet.css +0 -116
|
@@ -13,11 +13,32 @@ export declare class SimpleTableVanilla {
|
|
|
13
13
|
private hoveredHeaderRef;
|
|
14
14
|
private localRows;
|
|
15
15
|
private headers;
|
|
16
|
+
/**
|
|
17
|
+
* Pristine deep-cloned snapshot of the column definitions as configured
|
|
18
|
+
* (constructor / update with `defaultHeaders`). `this.headers` shares object
|
|
19
|
+
* references with `config.defaultHeaders` at mount, and the column editor
|
|
20
|
+
* mutates header objects in place (e.g. `header.hide = true`) — so
|
|
21
|
+
* `config.defaultHeaders` drifts with runtime state and cannot serve as the
|
|
22
|
+
* reset target. `resetColumns()` restores from this snapshot instead, giving
|
|
23
|
+
* a well-defined default: every column visible except those explicitly
|
|
24
|
+
* configured with `hide: true` in the definitions.
|
|
25
|
+
*/
|
|
26
|
+
private pristineDefaultHeaders;
|
|
16
27
|
private essentialAccessors;
|
|
17
28
|
/** Accessors of leaf columns that should size to content (width:"auto" or autoSizeColumns). */
|
|
18
29
|
private autoSizeAccessors;
|
|
19
30
|
/** Accessors awaiting a content-fit measurement on the next render. */
|
|
20
31
|
private pendingAutoSize;
|
|
32
|
+
/**
|
|
33
|
+
* Natural (unexpanded) pixel width per leaf column, overriding the declared
|
|
34
|
+
* width: the measured content width for `width: "auto"` columns and the
|
|
35
|
+
* width the user explicitly set via drag-resize / double-click auto-fit.
|
|
36
|
+
* With autoExpandColumns these feed the shrink floors used during column
|
|
37
|
+
* resize — neighbors give up surplus (expanded) space but are never
|
|
38
|
+
* squeezed below their natural width; past that point the section
|
|
39
|
+
* overflows into horizontal scroll.
|
|
40
|
+
*/
|
|
41
|
+
private naturalWidths;
|
|
21
42
|
/** Guard against re-entrancy while the auto-size pass re-renders. */
|
|
22
43
|
private isAutoSizing;
|
|
23
44
|
private currentPage;
|
|
@@ -268,6 +289,17 @@ export declare class SimpleTableVanilla {
|
|
|
268
289
|
* every auto column's width.
|
|
269
290
|
*/
|
|
270
291
|
private getAutoSizeRows;
|
|
292
|
+
/**
|
|
293
|
+
* Shrink floors for auto-expand column resize, keyed by accessor. Each
|
|
294
|
+
* visible leaf's floor is its natural width — a user-set / content-measured
|
|
295
|
+
* override when present, else the pixel width declared in the column
|
|
296
|
+
* definitions — raised to at least its `minWidth` (or the global minimum).
|
|
297
|
+
* Flexible declarations (fr / % / unmeasured "auto") have no pixel natural,
|
|
298
|
+
* so they floor at `minWidth` alone.
|
|
299
|
+
*/
|
|
300
|
+
private getShrinkFloors;
|
|
301
|
+
/** Record user-set / measured widths as the columns' new natural widths. */
|
|
302
|
+
private recordNaturalWidths;
|
|
271
303
|
/** Immutably write measured pixel widths into the leaf headers. */
|
|
272
304
|
private applyMeasuredWidths;
|
|
273
305
|
/**
|
|
@@ -276,6 +308,11 @@ export declare class SimpleTableVanilla {
|
|
|
276
308
|
* measurement reads the just-rendered (provisional-width) DOM and the
|
|
277
309
|
* corrective render happens in the same synchronous task, so there is no
|
|
278
310
|
* visible width snap.
|
|
311
|
+
*
|
|
312
|
+
* With autoExpandColumns, the measured width becomes the column's natural
|
|
313
|
+
* width: the expand-only auto-scale pass in the corrective render stretches
|
|
314
|
+
* columns to fill surplus container space, or leaves them at natural width
|
|
315
|
+
* (horizontal scroll) when they don't fit.
|
|
279
316
|
*/
|
|
280
317
|
private maybeAutoSizeColumns;
|
|
281
318
|
/**
|
|
@@ -14,6 +14,8 @@ export interface TableAPIContext {
|
|
|
14
14
|
localRows: Row[];
|
|
15
15
|
effectiveHeaders: HeaderObject[];
|
|
16
16
|
headers: HeaderObject[];
|
|
17
|
+
/** Pristine snapshot of the configured column definitions (see SimpleTableVanilla.pristineDefaultHeaders). */
|
|
18
|
+
getPristineDefaultHeaders: () => HeaderObject[];
|
|
17
19
|
essentialAccessors: Set<string>;
|
|
18
20
|
customTheme: CustomTheme;
|
|
19
21
|
currentPage: number;
|
|
@@ -44,6 +44,8 @@ export interface RenderContext {
|
|
|
44
44
|
getCollapsedHeaders?: () => Set<Accessor>;
|
|
45
45
|
getExpandedRows: () => Map<string, number>;
|
|
46
46
|
getHeaders: () => HeaderObject[];
|
|
47
|
+
/** Pristine snapshot of the configured column definitions — the reset target for the column editor's reset button. */
|
|
48
|
+
getPristineDefaultHeaders: () => HeaderObject[];
|
|
47
49
|
getRowStateMap: () => Map<string | number, RowState>;
|
|
48
50
|
headerRegistry: Map<string, any>;
|
|
49
51
|
headers: HeaderObject[];
|
|
@@ -62,6 +64,10 @@ export interface RenderContext {
|
|
|
62
64
|
current: HTMLDivElement | null;
|
|
63
65
|
};
|
|
64
66
|
onRender: () => void;
|
|
67
|
+
/** Natural-width shrink floors (accessor -> px) for auto-expand column resize. */
|
|
68
|
+
getShrinkFloors?: () => Map<string, number>;
|
|
69
|
+
/** Persist user-set widths (drag / double-click auto-fit) as natural widths. */
|
|
70
|
+
onAutoExpandNaturalWidths?: (widths: Map<string, number>) => void;
|
|
65
71
|
pinnedLeftHeaderRef: {
|
|
66
72
|
current: HTMLDivElement | null;
|
|
67
73
|
};
|
|
@@ -41,6 +41,8 @@ export interface TableRendererDeps {
|
|
|
41
41
|
getCollapsedRows: () => Map<string, number>;
|
|
42
42
|
getExpandedRows: () => Map<string, number>;
|
|
43
43
|
getHeaders: () => HeaderObject[];
|
|
44
|
+
/** Pristine snapshot of the configured column definitions — the reset target for the column editor's reset button. */
|
|
45
|
+
getPristineDefaultHeaders: () => HeaderObject[];
|
|
44
46
|
getRowStateMap: () => Map<string | number, any>;
|
|
45
47
|
headerRegistry: Map<string, any>;
|
|
46
48
|
headers: HeaderObject[];
|
|
@@ -57,6 +59,10 @@ export interface TableRendererDeps {
|
|
|
57
59
|
current: HTMLDivElement | null;
|
|
58
60
|
};
|
|
59
61
|
onRender: () => void;
|
|
62
|
+
/** Natural-width shrink floors (accessor -> px) for auto-expand column resize. */
|
|
63
|
+
getShrinkFloors?: () => Map<string, number>;
|
|
64
|
+
/** Persist user-set widths (drag / double-click auto-fit) as natural widths. */
|
|
65
|
+
onAutoExpandNaturalWidths?: (widths: Map<string, number>) => void;
|
|
60
66
|
pinnedLeftHeaderRef: {
|
|
61
67
|
current: HTMLDivElement | null;
|
|
62
68
|
};
|
|
@@ -12,10 +12,14 @@ export type HandleResizeStartProps = {
|
|
|
12
12
|
headers: HeaderObject[];
|
|
13
13
|
mainBodyRef: RefObject<HTMLDivElement>;
|
|
14
14
|
onColumnWidthChange?: (headers: HeaderObject[]) => void;
|
|
15
|
+
/** Persist the dragged column(s)' final widths as their natural widths (autoExpandColumns). */
|
|
16
|
+
onAutoExpandNaturalWidths?: (widths: Map<string, number>) => void;
|
|
15
17
|
pinnedLeftRef: RefObject<HTMLDivElement>;
|
|
16
18
|
pinnedRightRef: RefObject<HTMLDivElement>;
|
|
17
19
|
reverse: boolean;
|
|
18
20
|
setHeaders: (headers: HeaderObject[] | ((prev: HeaderObject[]) => HeaderObject[])) => void;
|
|
19
21
|
setIsResizing: (isResizing: boolean | ((prev: boolean) => boolean)) => void;
|
|
22
|
+
/** Natural-width shrink floors (accessor -> px) for compensating neighbors (autoExpandColumns). */
|
|
23
|
+
shrinkFloors?: Map<string, number>;
|
|
20
24
|
startWidth: number;
|
|
21
25
|
};
|
|
@@ -121,7 +121,11 @@ type HeaderObject = {
|
|
|
121
121
|
showWhen?: ShowWhen;
|
|
122
122
|
/**
|
|
123
123
|
* Column width. A number or px/fr/% string sets a fixed/proportional width.
|
|
124
|
-
* The special value `"auto"` sizes the column to fit its content (see
|
|
124
|
+
* The special value `"auto"` sizes the column to fit its content (see
|
|
125
|
+
* `autoSizeMode`). With `autoExpandColumns`, the fixed/measured width acts
|
|
126
|
+
* as the column's natural width: it can stretch to help fill surplus
|
|
127
|
+
* container space but is never squeezed narrower (the table scrolls
|
|
128
|
+
* horizontally instead).
|
|
125
129
|
*/
|
|
126
130
|
width: number | string;
|
|
127
131
|
maxWidth?: number | string;
|
|
@@ -22,6 +22,13 @@ import { AnimationsConfig } from "./AnimationsConfig";
|
|
|
22
22
|
import type { FooterPosition } from "./FooterPosition";
|
|
23
23
|
export interface SimpleTableConfig {
|
|
24
24
|
animations?: AnimationsConfig;
|
|
25
|
+
/**
|
|
26
|
+
* Expand-only fill: when the columns' natural widths (declared px, or
|
|
27
|
+
* content-measured for `width: "auto"`) leave surplus container space,
|
|
28
|
+
* columns stretch proportionally to fill it (respecting `maxWidth`).
|
|
29
|
+
* Columns are never squeezed below their natural width — when they don't
|
|
30
|
+
* fit, the table scrolls horizontally instead.
|
|
31
|
+
*/
|
|
25
32
|
autoExpandColumns?: boolean;
|
|
26
33
|
canExpandRowGroup?: (row: Row) => boolean;
|
|
27
34
|
cellUpdateFlash?: boolean;
|
|
@@ -47,7 +47,12 @@ export type TableAPI = {
|
|
|
47
47
|
applyColumnVisibility: (visibility: {
|
|
48
48
|
[accessor: string]: boolean;
|
|
49
49
|
}) => Promise<void>;
|
|
50
|
-
/**
|
|
50
|
+
/**
|
|
51
|
+
* Reset columns to the configured definitions: default order, widths, and
|
|
52
|
+
* visibility. All columns become visible again except those explicitly
|
|
53
|
+
* defined with `hide: true` in `defaultHeaders`, regardless of any runtime
|
|
54
|
+
* visibility changes made since mount.
|
|
55
|
+
*/
|
|
51
56
|
resetColumns: () => void;
|
|
52
57
|
setQuickFilter: (text: string) => void;
|
|
53
58
|
getSelectedCells: () => Set<string>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
type Theme = "light" | "dark" | "
|
|
1
|
+
type Theme = "light" | "dark" | "neutral" | "custom" | "modern-light" | "modern-dark";
|
|
2
2
|
export default Theme;
|
|
@@ -8,6 +8,11 @@ export interface BarChartProps {
|
|
|
8
8
|
min?: number;
|
|
9
9
|
max?: number;
|
|
10
10
|
}
|
|
11
|
+
/**
|
|
12
|
+
* Renders a sparkline bar chart in pixel space: the viewBox always matches the
|
|
13
|
+
* actual rendered size (tracked via ResizeObserver), and bar edges are snapped
|
|
14
|
+
* to whole pixels so bars and gaps stay uniform and crisp at any column width.
|
|
15
|
+
*/
|
|
11
16
|
export declare const createBarChart: (options: BarChartProps) => {
|
|
12
17
|
element: SVGSVGElement;
|
|
13
18
|
update: (newOptions: Partial<BarChartProps>) => void;
|
|
@@ -10,6 +10,14 @@ export interface LineAreaChartProps {
|
|
|
10
10
|
min?: number;
|
|
11
11
|
max?: number;
|
|
12
12
|
}
|
|
13
|
+
/**
|
|
14
|
+
* Renders a sparkline line/area chart in pixel space: the viewBox always
|
|
15
|
+
* matches the actual rendered size (tracked via ResizeObserver), so the stroke
|
|
16
|
+
* keeps a uniform width instead of being smeared by non-uniform scaling. The
|
|
17
|
+
* line is inset by half the stroke width so peaks and valleys aren't clipped,
|
|
18
|
+
* and the area is filled with a vertical gradient that fades toward the
|
|
19
|
+
* baseline.
|
|
20
|
+
*/
|
|
13
21
|
export declare const createLineAreaChart: (options: LineAreaChartProps) => {
|
|
14
22
|
element: SVGSVGElement;
|
|
15
23
|
update: (newOptions: Partial<LineAreaChartProps>) => void;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import HeaderObject from "../../types/HeaderObject";
|
|
2
2
|
import { HeaderRenderContext } from "./types";
|
|
3
|
-
export declare const createResizeHandle: (header: HeaderObject, context: HeaderRenderContext
|
|
3
|
+
export declare const createResizeHandle: (header: HeaderObject, context: HeaderRenderContext) => HTMLElement | null;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { AbsoluteCell, HeaderRenderContext } from "./types";
|
|
2
|
-
export declare const calculateHeaderCellClasses: (cell: AbsoluteCell, context: HeaderRenderContext
|
|
3
|
-
export declare const createHeaderCellElement: (cell: AbsoluteCell, context: HeaderRenderContext
|
|
2
|
+
export declare const calculateHeaderCellClasses: (cell: AbsoluteCell, context: HeaderRenderContext) => string;
|
|
3
|
+
export declare const createHeaderCellElement: (cell: AbsoluteCell, context: HeaderRenderContext) => HTMLElement;
|
|
4
4
|
export declare const getLastHeaderIndex: (absoluteCells: AbsoluteCell[]) => number;
|
|
5
5
|
/** Replace sort/filter/collapse icons on an existing header cell, preserving label/drag handlers. */
|
|
6
6
|
export declare const refreshHeaderCellIcons: (cellElement: HTMLElement, header: AbsoluteCell["header"], context: HeaderRenderContext, colIndex: number) => void;
|
|
7
|
-
export declare const updateHeaderCellElement: (cellElement: HTMLElement, cell: AbsoluteCell, context: HeaderRenderContext
|
|
7
|
+
export declare const updateHeaderCellElement: (cellElement: HTMLElement, cell: AbsoluteCell, context: HeaderRenderContext) => void;
|
|
@@ -38,6 +38,10 @@ export interface HeaderRenderContext {
|
|
|
38
38
|
filters: TableFilterState;
|
|
39
39
|
forceUpdate: () => void;
|
|
40
40
|
getCollapsedHeaders?: () => Set<Accessor>; /** Get current collapsed headers (avoids stale closure in toggle handler). */
|
|
41
|
+
/** Natural-width shrink floors (accessor -> px) for auto-expand column resize. */
|
|
42
|
+
getShrinkFloors?: () => Map<string, number>;
|
|
43
|
+
/** Persist user-set widths (drag / double-click auto-fit) as natural widths. */
|
|
44
|
+
onAutoExpandNaturalWidths?: (widths: Map<string, number>) => void;
|
|
41
45
|
handleApplyFilter: (filter: FilterCondition) => void;
|
|
42
46
|
handleClearFilter: (accessor: Accessor) => void;
|
|
43
47
|
handleSelectAll?: (checked: boolean) => void;
|
|
@@ -62,11 +62,6 @@ export declare const getHeaderMinWidth: (header: HeaderObject) => number;
|
|
|
62
62
|
* Get all visible leaf headers from an array of headers
|
|
63
63
|
*/
|
|
64
64
|
export declare const getAllVisibleLeafHeaders: (headers: HeaderObject[], collapsedHeaders?: Set<Accessor>) => HeaderObject[];
|
|
65
|
-
/**
|
|
66
|
-
* Convert pixel-based widths to proportional fr units
|
|
67
|
-
* This is used when autoExpandColumns is enabled
|
|
68
|
-
*/
|
|
69
|
-
export declare const convertPixelWidthsToFr: (headers: HeaderObject[], collapsedHeaders?: Set<Accessor>) => HeaderObject[];
|
|
70
65
|
/**
|
|
71
66
|
* Calculate the optimal width for a column by measuring both header and cell content
|
|
72
67
|
* This is used for auto-sizing columns to fit their content (like Excel/Google Sheets)
|
|
@@ -95,4 +90,10 @@ export declare const calculateHeaderContentWidth: (accessor: Accessor, options?:
|
|
|
95
90
|
theme?: any;
|
|
96
91
|
/** Scope `.st-cell-content` font/padding sampling to this table instance */
|
|
97
92
|
styleRoot?: ParentNode | null;
|
|
93
|
+
/**
|
|
94
|
+
* The table's resolved sort icon. Used to reserve space on sortable columns
|
|
95
|
+
* that are not currently sorted (the icon only exists on the active sort
|
|
96
|
+
* column), so sorting later does not push the label into ellipsis.
|
|
97
|
+
*/
|
|
98
|
+
sortIcon?: string | HTMLElement | SVGSVGElement;
|
|
98
99
|
}) => number;
|
|
@@ -1,10 +1,17 @@
|
|
|
1
1
|
import type HeaderObject from "../../types/HeaderObject";
|
|
2
2
|
import type { Pinned } from "../../types/Pinned";
|
|
3
3
|
/**
|
|
4
|
-
* Handle resize with autoExpandColumns enabled
|
|
5
|
-
*
|
|
4
|
+
* Handle resize with autoExpandColumns enabled.
|
|
5
|
+
*
|
|
6
|
+
* Neighbors compensate a growing column only down to their shrink floor (their
|
|
7
|
+
* natural width — declared, content-measured, or user-set). Once all
|
|
8
|
+
* neighbors are at their floor, the main section keeps growing past the
|
|
9
|
+
* container width and overflows into horizontal scroll instead of blocking
|
|
10
|
+
* the drag. Pinned sections cannot scroll their own content, so their growth
|
|
11
|
+
* stays capped by the neighbors' available surplus (plus the pinned-width
|
|
12
|
+
* policy cap).
|
|
6
13
|
*/
|
|
7
|
-
export declare const handleResizeWithAutoExpand: ({ childrenToResize, collapsedHeaders, containerWidth, delta, headers, initialWidthsMap, isParentResize, resizedHeader, reverse, rootPinned, sectionHeaders, sectionWidth, startWidth, }: {
|
|
14
|
+
export declare const handleResizeWithAutoExpand: ({ childrenToResize, collapsedHeaders, containerWidth, delta, headers, initialWidthsMap, isParentResize, resizedHeader, reverse, rootPinned, sectionHeaders, sectionWidth, sectionViewportWidth, shrinkFloors, startWidth, }: {
|
|
8
15
|
childrenToResize?: HeaderObject[] | undefined;
|
|
9
16
|
collapsedHeaders?: Set<string> | undefined;
|
|
10
17
|
containerWidth: number;
|
|
@@ -17,5 +24,9 @@ export declare const handleResizeWithAutoExpand: ({ childrenToResize, collapsedH
|
|
|
17
24
|
rootPinned: Pinned | undefined;
|
|
18
25
|
sectionHeaders: HeaderObject[];
|
|
19
26
|
sectionWidth: number;
|
|
27
|
+
/** Visible viewport width of the section (main: container minus pinned). 0 when unknown. */
|
|
28
|
+
sectionViewportWidth?: number | undefined;
|
|
29
|
+
/** Accessor -> natural width; the shrink floor for compensating neighbors. */
|
|
30
|
+
shrinkFloors?: Map<string, number> | undefined;
|
|
20
31
|
startWidth: number;
|
|
21
32
|
}) => void;
|
|
@@ -3,9 +3,15 @@ import type HeaderObject from "../../types/HeaderObject";
|
|
|
3
3
|
* Distribute compensation among columns proportionally based on available headroom
|
|
4
4
|
* Used in autoExpandColumns mode
|
|
5
5
|
* Positive compensation = shrink columns, Negative compensation = grow columns
|
|
6
|
+
*
|
|
7
|
+
* `shrinkFloors` (accessor -> px) sets each column's shrink floor — its natural
|
|
8
|
+
* width (declared, content-measured, or user-set). Columns give up only their
|
|
9
|
+
* surplus (expanded) space and are never squeezed below their natural width.
|
|
10
|
+
* Falls back to MIN_COLUMN_WIDTH when a column has no known floor.
|
|
6
11
|
*/
|
|
7
|
-
export declare const distributeCompensationProportionally: ({ columnsToShrink, totalCompensation, initialWidthsMap, }: {
|
|
12
|
+
export declare const distributeCompensationProportionally: ({ columnsToShrink, totalCompensation, initialWidthsMap, shrinkFloors, }: {
|
|
8
13
|
columnsToShrink: HeaderObject[];
|
|
9
14
|
totalCompensation: number;
|
|
10
15
|
initialWidthsMap: Map<string, number>;
|
|
16
|
+
shrinkFloors?: Map<string, number> | undefined;
|
|
11
17
|
}) => void;
|
|
@@ -4,7 +4,7 @@ import type { HandleResizeStartProps } from "../../types/HandleResizeStartProps"
|
|
|
4
4
|
/**
|
|
5
5
|
* Handler for when resize dragging starts
|
|
6
6
|
*/
|
|
7
|
-
export declare const handleResizeStart: ({ autoExpandColumns, collapsedHeaders, containerWidth, event, header, headers, mainBodyRef, onColumnWidthChange, reverse, setHeaders, setIsResizing, startWidth, }: HandleResizeStartProps) => void;
|
|
7
|
+
export declare const handleResizeStart: ({ autoExpandColumns, collapsedHeaders, containerWidth, event, header, headers, mainBodyRef, onColumnWidthChange, onAutoExpandNaturalWidths, reverse, setHeaders, setIsResizing, shrinkFloors, startWidth, }: HandleResizeStartProps) => void;
|
|
8
8
|
export type ApplyColumnAutoFitWithAutoExpandParams = {
|
|
9
9
|
collapsedHeaders: Set<Accessor>;
|
|
10
10
|
containerWidth: number;
|
|
@@ -13,10 +13,14 @@ export type ApplyColumnAutoFitWithAutoExpandParams = {
|
|
|
13
13
|
headerCellElement: HTMLElement | null;
|
|
14
14
|
headers: HeaderObject[];
|
|
15
15
|
mainBodyRef: HandleResizeStartProps["mainBodyRef"];
|
|
16
|
+
/** Persist the auto-fitted column(s)' widths as their natural widths. */
|
|
17
|
+
onAutoExpandNaturalWidths?: (widths: Map<string, number>) => void;
|
|
16
18
|
reverse: boolean;
|
|
19
|
+
/** Natural-width shrink floors (accessor -> px) for compensating neighbors. */
|
|
20
|
+
shrinkFloors?: Map<string, number>;
|
|
17
21
|
};
|
|
18
22
|
/**
|
|
19
23
|
* Apply a one-shot "fit to content" width for a column while preserving autoExpand
|
|
20
24
|
* compensation (same redistribution rules as dragging the resize handle).
|
|
21
25
|
*/
|
|
22
|
-
export declare const applyColumnAutoFitWithAutoExpand: ({ header, headers, collapsedHeaders, containerWidth, mainBodyRef, reverse, headerCellElement, getTargetLeafWidth, }: ApplyColumnAutoFitWithAutoExpandParams) => void;
|
|
26
|
+
export declare const applyColumnAutoFitWithAutoExpand: ({ header, headers, collapsedHeaders, containerWidth, mainBodyRef, reverse, headerCellElement, getTargetLeafWidth, onAutoExpandNaturalWidths, shrinkFloors, }: ApplyColumnAutoFitWithAutoExpandParams) => void;
|
|
@@ -45,7 +45,9 @@ export declare const AutoExpandColumnsBasic: {
|
|
|
45
45
|
canvasElement: any;
|
|
46
46
|
}) => Promise<void>;
|
|
47
47
|
};
|
|
48
|
-
|
|
48
|
+
/** Expand-only: when declared widths exceed the container, columns keep their
|
|
49
|
+
* declared (natural) widths and the table scrolls horizontally — no squeeze. */
|
|
50
|
+
export declare const AutoExpandColumnsNeverSqueezesBelowDeclaredWidth: {
|
|
49
51
|
render: () => HTMLDivElement & {
|
|
50
52
|
_table?: import("../../src/index").SimpleTableVanilla | undefined;
|
|
51
53
|
};
|
|
@@ -53,7 +55,9 @@ export declare const AutoExpandColumnsIgnoresMinWidth: {
|
|
|
53
55
|
canvasElement: any;
|
|
54
56
|
}) => Promise<void>;
|
|
55
57
|
};
|
|
56
|
-
|
|
58
|
+
/** Expansion respects maxWidth: capped columns stop at their cap and the
|
|
59
|
+
* remaining surplus is redistributed to uncapped columns. */
|
|
60
|
+
export declare const AutoExpandColumnsRespectsMaxWidthOnExpand: {
|
|
57
61
|
render: () => HTMLDivElement & {
|
|
58
62
|
_table?: import("../../src/index").SimpleTableVanilla | undefined;
|
|
59
63
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* THEMES TESTS
|
|
3
|
-
* Tests for SimpleTable theme prop (light, dark,
|
|
3
|
+
* Tests for SimpleTable theme prop (light, dark, neutral, modern-light, modern-dark).
|
|
4
4
|
*/
|
|
5
5
|
import type { Meta } from "@storybook/html";
|
|
6
6
|
declare const meta: Meta;
|
|
@@ -21,22 +21,6 @@ export declare const ThemeDark: {
|
|
|
21
21
|
canvasElement: HTMLElement;
|
|
22
22
|
}) => Promise<void>;
|
|
23
23
|
};
|
|
24
|
-
export declare const ThemeSky: {
|
|
25
|
-
render: () => HTMLDivElement & {
|
|
26
|
-
_table?: import("../../src/index").SimpleTableVanilla | undefined;
|
|
27
|
-
};
|
|
28
|
-
play: ({ canvasElement }: {
|
|
29
|
-
canvasElement: HTMLElement;
|
|
30
|
-
}) => Promise<void>;
|
|
31
|
-
};
|
|
32
|
-
export declare const ThemeViolet: {
|
|
33
|
-
render: () => HTMLDivElement & {
|
|
34
|
-
_table?: import("../../src/index").SimpleTableVanilla | undefined;
|
|
35
|
-
};
|
|
36
|
-
play: ({ canvasElement }: {
|
|
37
|
-
canvasElement: HTMLElement;
|
|
38
|
-
}) => Promise<void>;
|
|
39
|
-
};
|
|
40
24
|
export declare const ThemeModernLight: {
|
|
41
25
|
render: () => HTMLDivElement & {
|
|
42
26
|
_table?: import("../../src/index").SimpleTableVanilla | undefined;
|
|
@@ -309,9 +309,10 @@ export declare const AutoExpandShrinkColumnToMinWidth: {
|
|
|
309
309
|
canvasElement: HTMLElement;
|
|
310
310
|
}) => Promise<void>;
|
|
311
311
|
};
|
|
312
|
-
/** Grow a column
|
|
313
|
-
*
|
|
314
|
-
|
|
312
|
+
/** Grow a column far past what siblings can absorb. Siblings shrink only down
|
|
313
|
+
* to their natural (declared) widths — never below — and the extra growth
|
|
314
|
+
* overflows the container into horizontal scroll. */
|
|
315
|
+
export declare const AutoExpandGrowPastSiblingFloorsOverflows: {
|
|
315
316
|
parameters: {
|
|
316
317
|
tags: string[];
|
|
317
318
|
};
|
|
@@ -360,8 +361,10 @@ export declare const AutoExpandDoubleClickResizePinned: {
|
|
|
360
361
|
canvasElement: HTMLElement;
|
|
361
362
|
}) => Promise<void>;
|
|
362
363
|
};
|
|
363
|
-
/**
|
|
364
|
-
|
|
364
|
+
/** The last main column keeps its resize handle under autoExpandColumns
|
|
365
|
+
* (growth past the container is now possible via horizontal overflow).
|
|
366
|
+
* Dragging it reclaims the left neighbor's expanded surplus first. */
|
|
367
|
+
export declare const AutoExpandLastMainColumnHasResizeHandle: {
|
|
365
368
|
parameters: {
|
|
366
369
|
tags: string[];
|
|
367
370
|
};
|
|
@@ -84,6 +84,28 @@ export declare const AutoSizeMeasuresCustomRenderer: {
|
|
|
84
84
|
canvasElement: HTMLElement;
|
|
85
85
|
}) => Promise<void>;
|
|
86
86
|
};
|
|
87
|
+
export declare const AutoSizeMeasuresCustomHeaderRenderer: {
|
|
88
|
+
parameters: {
|
|
89
|
+
tags: string[];
|
|
90
|
+
};
|
|
91
|
+
render: () => HTMLDivElement & {
|
|
92
|
+
_table?: SimpleTableVanilla | undefined;
|
|
93
|
+
};
|
|
94
|
+
play: ({ canvasElement }: {
|
|
95
|
+
canvasElement: HTMLElement;
|
|
96
|
+
}) => Promise<void>;
|
|
97
|
+
};
|
|
98
|
+
export declare const AutoSizeSortIconDoesNotTruncateLabel: {
|
|
99
|
+
parameters: {
|
|
100
|
+
tags: string[];
|
|
101
|
+
};
|
|
102
|
+
render: () => HTMLDivElement & {
|
|
103
|
+
_table?: SimpleTableVanilla | undefined;
|
|
104
|
+
};
|
|
105
|
+
play: ({ canvasElement }: {
|
|
106
|
+
canvasElement: HTMLElement;
|
|
107
|
+
}) => Promise<void>;
|
|
108
|
+
};
|
|
87
109
|
export declare const AutoSizeMeasuresFormattedValue: {
|
|
88
110
|
parameters: {
|
|
89
111
|
tags: string[];
|
|
@@ -249,6 +271,37 @@ export declare const AutoSizeNoFlicker: {
|
|
|
249
271
|
canvasElement: HTMLElement;
|
|
250
272
|
}) => Promise<void>;
|
|
251
273
|
};
|
|
274
|
+
export declare const AutoSizeAsyncRendererInternalTruncation: {
|
|
275
|
+
parameters: {
|
|
276
|
+
tags: string[];
|
|
277
|
+
};
|
|
278
|
+
render: () => HTMLDivElement & {
|
|
279
|
+
_table?: SimpleTableVanilla | undefined;
|
|
280
|
+
};
|
|
281
|
+
play: ({ canvasElement }: {
|
|
282
|
+
canvasElement: HTMLElement;
|
|
283
|
+
}) => Promise<void>;
|
|
284
|
+
};
|
|
285
|
+
export declare const AutoSizeConsistentAcrossContainerWidths: {
|
|
286
|
+
parameters: {
|
|
287
|
+
tags: string[];
|
|
288
|
+
};
|
|
289
|
+
render: () => HTMLDivElement;
|
|
290
|
+
play: ({ canvasElement }: {
|
|
291
|
+
canvasElement: HTMLElement;
|
|
292
|
+
}) => Promise<void>;
|
|
293
|
+
};
|
|
294
|
+
export declare const AutoSizeEmptyStateAsyncHeaderRenderer: {
|
|
295
|
+
parameters: {
|
|
296
|
+
tags: string[];
|
|
297
|
+
};
|
|
298
|
+
render: () => HTMLDivElement & {
|
|
299
|
+
_table?: SimpleTableVanilla | undefined;
|
|
300
|
+
};
|
|
301
|
+
play: ({ canvasElement }: {
|
|
302
|
+
canvasElement: HTMLElement;
|
|
303
|
+
}) => Promise<void>;
|
|
304
|
+
};
|
|
252
305
|
export declare const SamplingAndOutlierHelpers: {
|
|
253
306
|
parameters: {
|
|
254
307
|
tags: string[];
|
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* AUTO WIDTH + AUTO EXPAND COLUMNS TESTS
|
|
3
|
+
*
|
|
4
|
+
* Combined coverage for `width: "auto"` columns under `autoExpandColumns`
|
|
5
|
+
* (the expand-only model):
|
|
6
|
+
* - surplus: content-measured natural widths stretched proportionally to fill
|
|
7
|
+
* - deficit: natural widths kept, horizontal scroll, never squeezed
|
|
8
|
+
* - container resize crossing the fit threshold both ways (no compounding)
|
|
9
|
+
* - drag-resize into horizontal overflow and back out of it
|
|
10
|
+
* - neighbor shrink floors at the measured (natural) width during drags
|
|
11
|
+
* - maxWidth caps during expansion with surplus redistribution
|
|
12
|
+
* - pinned + auto + autoExpand layout
|
|
13
|
+
* - data updates and pagination page changes re-measuring auto columns
|
|
14
|
+
* - double-click auto-fit under the expand-or-scroll model
|
|
15
|
+
*/
|
|
16
|
+
import { SimpleTableVanilla } from "../../src/index";
|
|
17
|
+
import type { Meta } from "@storybook/html";
|
|
18
|
+
declare const meta: Meta;
|
|
19
|
+
export default meta;
|
|
20
|
+
/** Surplus: auto column is content-measured, then all columns stretch
|
|
21
|
+
* proportionally to fill the container. No horizontal scroll. */
|
|
22
|
+
export declare const AutoWidthSurplusStretchesToFill: {
|
|
23
|
+
parameters: {
|
|
24
|
+
tags: string[];
|
|
25
|
+
};
|
|
26
|
+
render: () => HTMLDivElement & {
|
|
27
|
+
_table?: SimpleTableVanilla | undefined;
|
|
28
|
+
};
|
|
29
|
+
play: ({ canvasElement }: {
|
|
30
|
+
canvasElement: HTMLElement;
|
|
31
|
+
}) => Promise<void>;
|
|
32
|
+
};
|
|
33
|
+
/** Deficit: the measured auto column plus fixed columns exceed the container.
|
|
34
|
+
* Nothing is squeezed — natural widths are kept and the table scrolls. */
|
|
35
|
+
export declare const AutoWidthDeficitScrollsNoSqueeze: {
|
|
36
|
+
parameters: {
|
|
37
|
+
tags: string[];
|
|
38
|
+
};
|
|
39
|
+
render: () => HTMLDivElement & {
|
|
40
|
+
_table?: SimpleTableVanilla | undefined;
|
|
41
|
+
};
|
|
42
|
+
play: ({ canvasElement }: {
|
|
43
|
+
canvasElement: HTMLElement;
|
|
44
|
+
}) => Promise<void>;
|
|
45
|
+
};
|
|
46
|
+
/** Container resize across the fit threshold in both directions: shrink below
|
|
47
|
+
* the natural total (scroll, naturals kept), then grow back (re-expand).
|
|
48
|
+
* Widths must return to the original expanded values — no compounding. */
|
|
49
|
+
export declare const AutoWidthContainerResizeNoCompounding: {
|
|
50
|
+
parameters: {
|
|
51
|
+
tags: string[];
|
|
52
|
+
};
|
|
53
|
+
render: () => HTMLDivElement & {
|
|
54
|
+
_table?: SimpleTableVanilla | undefined;
|
|
55
|
+
};
|
|
56
|
+
play: ({ canvasElement }: {
|
|
57
|
+
canvasElement: HTMLElement;
|
|
58
|
+
}) => Promise<void>;
|
|
59
|
+
};
|
|
60
|
+
/** Drag a column into overflow (past the neighbors' natural floors), then drag
|
|
61
|
+
* it back: the freed space first swallows the overflow, then refills the
|
|
62
|
+
* neighbors, ending exactly full again. */
|
|
63
|
+
export declare const AutoExpandDragIntoOverflowAndBack: {
|
|
64
|
+
parameters: {
|
|
65
|
+
tags: string[];
|
|
66
|
+
};
|
|
67
|
+
render: () => HTMLDivElement & {
|
|
68
|
+
_table?: SimpleTableVanilla | undefined;
|
|
69
|
+
};
|
|
70
|
+
play: ({ canvasElement }: {
|
|
71
|
+
canvasElement: HTMLElement;
|
|
72
|
+
}) => Promise<void>;
|
|
73
|
+
};
|
|
74
|
+
/** During a drag, a `width: "auto"` neighbor gives up only its expanded
|
|
75
|
+
* surplus: it shrinks down to its measured content width and no further. */
|
|
76
|
+
export declare const AutoWidthNeighborFloorsAtMeasuredWidth: {
|
|
77
|
+
parameters: {
|
|
78
|
+
tags: string[];
|
|
79
|
+
};
|
|
80
|
+
render: () => HTMLDivElement & {
|
|
81
|
+
_table?: SimpleTableVanilla | undefined;
|
|
82
|
+
};
|
|
83
|
+
play: ({ canvasElement }: {
|
|
84
|
+
canvasElement: HTMLElement;
|
|
85
|
+
}) => Promise<void>;
|
|
86
|
+
};
|
|
87
|
+
/** During expansion, capped columns (including a measured auto column with
|
|
88
|
+
* maxWidth) stop at their cap; the surplus flows to the uncapped column. */
|
|
89
|
+
export declare const AutoWidthMaxWidthCapsExpansion: {
|
|
90
|
+
parameters: {
|
|
91
|
+
tags: string[];
|
|
92
|
+
};
|
|
93
|
+
render: () => HTMLDivElement & {
|
|
94
|
+
_table?: SimpleTableVanilla | undefined;
|
|
95
|
+
};
|
|
96
|
+
play: ({ canvasElement }: {
|
|
97
|
+
canvasElement: HTMLElement;
|
|
98
|
+
}) => Promise<void>;
|
|
99
|
+
};
|
|
100
|
+
/** A pinned-left auto column keeps its compact measured width (pinned sections
|
|
101
|
+
* don't stretch); the main section expands to fill the remaining space. */
|
|
102
|
+
export declare const AutoWidthPinnedAutoColumn: {
|
|
103
|
+
parameters: {
|
|
104
|
+
tags: string[];
|
|
105
|
+
};
|
|
106
|
+
render: () => HTMLDivElement & {
|
|
107
|
+
_table?: SimpleTableVanilla | undefined;
|
|
108
|
+
};
|
|
109
|
+
play: ({ canvasElement }: {
|
|
110
|
+
canvasElement: HTMLElement;
|
|
111
|
+
}) => Promise<void>;
|
|
112
|
+
};
|
|
113
|
+
/** A data update that grows the auto column's content past the container
|
|
114
|
+
* crosses from "expanded fill" into "natural widths + scroll". */
|
|
115
|
+
export declare const AutoWidthDataUpdateGrowsPastThreshold: {
|
|
116
|
+
parameters: {
|
|
117
|
+
tags: string[];
|
|
118
|
+
};
|
|
119
|
+
render: () => HTMLDivElement & {
|
|
120
|
+
_table?: SimpleTableVanilla | undefined;
|
|
121
|
+
};
|
|
122
|
+
play: ({ canvasElement }: {
|
|
123
|
+
canvasElement: HTMLElement;
|
|
124
|
+
}) => Promise<void>;
|
|
125
|
+
};
|
|
126
|
+
/** Pagination: each page re-measures the auto column against its own rows —
|
|
127
|
+
* a compact page fills the container, a long-content page overflows. */
|
|
128
|
+
export declare const AutoWidthPaginationRemeasuresPerPage: {
|
|
129
|
+
parameters: {
|
|
130
|
+
tags: string[];
|
|
131
|
+
};
|
|
132
|
+
render: () => HTMLDivElement & {
|
|
133
|
+
_table?: SimpleTableVanilla | undefined;
|
|
134
|
+
};
|
|
135
|
+
play: ({ canvasElement }: {
|
|
136
|
+
canvasElement: HTMLElement;
|
|
137
|
+
}) => Promise<void>;
|
|
138
|
+
};
|
|
139
|
+
/** Double-click auto-fit sets the column to its content width (its new natural
|
|
140
|
+
* width); the freed surplus flows to the neighbor and the table stays full. */
|
|
141
|
+
export declare const AutoWidthDoubleClickAutoFit: {
|
|
142
|
+
parameters: {
|
|
143
|
+
tags: string[];
|
|
144
|
+
};
|
|
145
|
+
render: () => HTMLDivElement & {
|
|
146
|
+
_table?: SimpleTableVanilla | undefined;
|
|
147
|
+
};
|
|
148
|
+
play: ({ canvasElement }: {
|
|
149
|
+
canvasElement: HTMLElement;
|
|
150
|
+
}) => Promise<void>;
|
|
151
|
+
};
|