simple-table-core 4.1.6 → 4.1.7
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/README.md +15 -7
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/styles.css +1 -1
- package/dist/consts/general-consts.d.ts +0 -4
- package/dist/core/SimpleTableVanilla.d.ts +19 -275
- package/dist/core/api/TableAPIContext.d.ts +74 -0
- package/dist/core/api/TableAPIImpl.d.ts +2 -74
- package/dist/core/api/buildTableAPIContext.d.ts +61 -0
- package/dist/core/dev/UnvirtualizedRowsWarning.d.ts +20 -0
- package/dist/core/initialization/createDataManagers.d.ts +37 -0
- package/dist/core/initialization/wireMountManagers.d.ts +43 -0
- package/dist/core/pipeline/syncPivotPipeline.d.ts +41 -0
- package/dist/core/rendering/RenderContext.d.ts +125 -0
- package/dist/core/rendering/RenderOrchestrator.d.ts +8 -119
- package/dist/core/rendering/SectionRenderer.d.ts +21 -15
- package/dist/core/rendering/TableRenderer.d.ts +6 -98
- package/dist/core/rendering/TableRendererDeps.d.ts +98 -0
- package/dist/core/rendering/buildRenderContext.d.ts +94 -0
- package/dist/core/rendering/cellRenderContexts.d.ts +11 -0
- package/dist/core/rendering/renderBodySections.d.ts +14 -0
- package/dist/core/rendering/renderHeaderSections.d.ts +13 -0
- package/dist/core/rendering/sectionCaches.d.ts +24 -0
- package/dist/core/rendering/sectionExtraRows.d.ts +19 -0
- package/dist/core/rendering/sectionLayout.d.ts +42 -0
- package/dist/core/vanilla/VanillaLiveHost.d.ts +103 -0
- package/dist/core/vanilla/applyTableUpdate.d.ts +10 -0
- package/dist/core/vanilla/createVanillaRenderContext.d.ts +4 -0
- package/dist/core/vanilla/destroyTableResources.d.ts +26 -0
- package/dist/core/vanilla/syncRowSelectionManager.d.ts +13 -0
- package/dist/core/vanilla/tableContainers.d.ts +5 -0
- package/dist/core/vanilla/toTableAPIContextHost.d.ts +3 -0
- package/dist/hooks/contentHeight.d.ts +3 -1
- package/dist/hooks/scrollbarWidth.d.ts +0 -43
- package/dist/hooks/useAggregatedRows.d.ts +0 -2
- package/dist/index.es.js +1 -1
- package/dist/managers/AccordionController.d.ts +39 -0
- package/dist/managers/AnimationCoordinator.d.ts +15 -1
- package/dist/managers/AutoSizeManager.d.ts +64 -0
- package/dist/managers/CellSlideAnimator.d.ts +54 -0
- package/dist/managers/DragHandlerManager.d.ts +4 -26
- package/dist/managers/ExternalScrollController.d.ts +68 -0
- package/dist/managers/ScrollRenderCoalescer.d.ts +32 -0
- package/dist/managers/SelectionManager/mouseUtils.d.ts +3 -3
- package/dist/styles.css +1 -1
- package/dist/utils/accordionAnimation.d.ts +0 -5
- package/dist/utils/bodyCell/editing.d.ts +1 -1
- package/dist/utils/bodyCell/editors/booleanDropdown.d.ts +1 -1
- package/dist/utils/bodyCell/editors/datePicker.d.ts +1 -1
- package/dist/utils/bodyCell/editors/enumDropdown.d.ts +1 -1
- package/dist/utils/bodyCell/selection.d.ts +0 -1
- package/dist/utils/bodyCell/styling.d.ts +2 -0
- package/dist/utils/cellScrollUtils.d.ts +1 -1
- package/dist/utils/cellUtils.d.ts +0 -4
- package/dist/utils/collapseUtils.d.ts +0 -10
- package/dist/utils/externalScroll.d.ts +0 -10
- package/dist/utils/formatters.d.ts +0 -2
- package/dist/utils/headerCell/eventTracking.d.ts +2 -2
- package/dist/utils/headerCell/styling.d.ts +0 -1
- package/dist/utils/headerWidthUtils.d.ts +2 -2
- package/dist/utils/infiniteScrollUtils.d.ts +0 -1
- package/dist/utils/parkAndStagger.d.ts +44 -0
- package/dist/utils/resizeUtils/domUpdates.d.ts +1 -1
- package/dist/utils/resizeUtils/maxWidth.d.ts +2 -1
- package/dist/utils/rowSelectionUtils.d.ts +0 -4
- package/dist/utils/rowSeparatorRenderer.d.ts +0 -1
- package/dist/utils/rowUtils.d.ts +1 -27
- package/dist/utils/setAbsoluteCellPosition.d.ts +31 -0
- package/dist/utils/stateRowRenderer.d.ts +0 -1
- package/dist/utils/tableDomScope.d.ts +20 -0
- package/package.json +4 -3
- package/src/styles/base.css +40 -147
- package/dist/managers/ColumnManager.d.ts +0 -42
- package/dist/managers/RowManager.d.ts +0 -56
- package/dist/managers/TableManager.d.ts +0 -72
- package/dist/types/BoundingBox.d.ts +0 -11
- package/dist/types/DragHandlerProps.d.ts +0 -14
- package/dist/types/OnSortProps.d.ts +0 -3
- package/dist/types/SharedTableProps.d.ts +0 -24
- package/dist/types/TableBodyProps.d.ts +0 -20
- package/dist/types/TableHeaderProps.d.ts +0 -17
- package/dist/types/TableHeaderSectionProps.d.ts +0 -19
- package/dist/types/TableRowProps.d.ts +0 -29
- package/dist/utils/columnIndicesUtils.d.ts +0 -15
- package/dist/utils/columnVirtualizationUtils.d.ts +0 -128
package/dist/utils/rowUtils.d.ts
CHANGED
|
@@ -1,8 +1,6 @@
|
|
|
1
|
-
import TableRow from "../types/TableRow";
|
|
2
1
|
import Row from "../types/Row";
|
|
3
|
-
import
|
|
2
|
+
import { Accessor } from "../types/ColumnDef";
|
|
4
3
|
import CellValue from "../types/CellValue";
|
|
5
|
-
import RowState from "../types/RowState";
|
|
6
4
|
import { CustomTheme } from "../types/CustomTheme";
|
|
7
5
|
import { GetRowId } from "../types/GetRowId";
|
|
8
6
|
import { GenerateRowIdParams } from "../types/GenerateRowIdParams";
|
|
@@ -161,27 +159,3 @@ export declare const hasNestedRows: (row: Row, groupingKey?: string) => boolean;
|
|
|
161
159
|
* @returns true if the row is expanded, false otherwise
|
|
162
160
|
*/
|
|
163
161
|
export declare const isRowExpanded: (expandStateRowId: string | number, depth: number, expandedDepths: Set<number>, expandedRows: Map<string, number>, collapsedRows: Map<string, number>) => boolean;
|
|
164
|
-
/**
|
|
165
|
-
* Flatten rows recursively based on row grouping configuration
|
|
166
|
-
* Now calculates ALL properties including position and isLastGroupRow
|
|
167
|
-
* Also injects special state rows for loading/error/empty states (only if renderers are available)
|
|
168
|
-
* Also injects nested grid rows when a header has nestedTable configuration
|
|
169
|
-
*/
|
|
170
|
-
export declare const flattenRowsWithGrouping: ({ depth, expandedDepths, expandedRows, collapsedRows, rowGrouping, getRowId, rows, displayPositionOffset, rowStateMap, hasLoadingRenderer, hasErrorRenderer, hasEmptyRenderer, headers, rowHeight, headerHeight, customTheme, }: {
|
|
171
|
-
depth?: number;
|
|
172
|
-
expandedDepths: Set<number>;
|
|
173
|
-
expandedRows: Map<string, number>;
|
|
174
|
-
collapsedRows: Map<string, number>;
|
|
175
|
-
rowGrouping?: Accessor[];
|
|
176
|
-
getRowId?: GetRowId;
|
|
177
|
-
rows: Row[];
|
|
178
|
-
displayPositionOffset?: number;
|
|
179
|
-
rowStateMap?: Map<string | number, RowState>;
|
|
180
|
-
hasLoadingRenderer?: boolean;
|
|
181
|
-
hasErrorRenderer?: boolean;
|
|
182
|
-
hasEmptyRenderer?: boolean;
|
|
183
|
-
headers?: ColumnDef[];
|
|
184
|
-
rowHeight: number;
|
|
185
|
-
headerHeight: number;
|
|
186
|
-
customTheme: CustomTheme;
|
|
187
|
-
}) => TableRow[];
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Write absolute `left`/`top` while preserving an in-flight FLIP visual position.
|
|
3
|
+
*
|
|
4
|
+
* FLIP inverts use `transform: translate3d(...)` relative to `style.left/top`.
|
|
5
|
+
* Updating left/top without adjusting that translate moves the painted cell by
|
|
6
|
+
* the same delta — then `play()` "corrects" it with a new invert, which reads
|
|
7
|
+
* as a jump during rapid reorders.
|
|
8
|
+
*
|
|
9
|
+
* Column-drag does NOT compensate here: {@link CellSlideAnimator} snapshots
|
|
10
|
+
* visuals before left writes and applies the hold+tween after.
|
|
11
|
+
*/
|
|
12
|
+
export declare const setFlipCompensationEnabled: (enabled: boolean) => void;
|
|
13
|
+
/** Parse translate/matrix CSS into tx/ty. */
|
|
14
|
+
export declare const parseCssTranslate: (transform: string) => {
|
|
15
|
+
x: number;
|
|
16
|
+
y: number;
|
|
17
|
+
} | null;
|
|
18
|
+
/**
|
|
19
|
+
* Painted translate in style.left/top space. Prefers the computed matrix so a
|
|
20
|
+
* running WAAPI slide is not mistaken for its start keyframe (`style.transform`
|
|
21
|
+
* stays at the invert until the animation finishes).
|
|
22
|
+
*/
|
|
23
|
+
export declare const readLiveTranslate: (element: HTMLElement) => {
|
|
24
|
+
x: number;
|
|
25
|
+
y: number;
|
|
26
|
+
} | null;
|
|
27
|
+
/**
|
|
28
|
+
* Set absolute cell coordinates, compensating any active FLIP translate so the
|
|
29
|
+
* visual position does not drift when the logical slot moves.
|
|
30
|
+
*/
|
|
31
|
+
export declare const setAbsoluteCellPosition: (element: HTMLElement, nextLeft: number, nextTop: number) => void;
|
|
@@ -12,4 +12,3 @@ export interface StateRowRenderContext {
|
|
|
12
12
|
emptyStateRenderer?: EmptyStateRenderer;
|
|
13
13
|
}
|
|
14
14
|
export declare const createStateRow: (tableRow: TableRowType, context: StateRowRenderContext) => HTMLElement;
|
|
15
|
-
export declare const cleanupStateRow: (rowElement: HTMLElement) => void;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/** Class on the per-instance table wrapper created by DOMManager. */
|
|
2
|
+
export declare const TABLE_ROOT_CLASS = "simple-table-root";
|
|
3
|
+
export declare const TABLE_ROOT_SELECTOR = ".simple-table-root";
|
|
4
|
+
/** Walks up from `from` to this table's `.simple-table-root`, or null. */
|
|
5
|
+
export declare const resolveTableRoot: (from: Element | null | undefined) => HTMLElement | null;
|
|
6
|
+
/**
|
|
7
|
+
* True when `el` belongs to this table instance, not a nested table inside it.
|
|
8
|
+
* Nested grids mount their own `.simple-table-root` under the parent.
|
|
9
|
+
*/
|
|
10
|
+
export declare const isOwnedByTable: (root: Element, el: Element) => boolean;
|
|
11
|
+
/**
|
|
12
|
+
* `querySelectorAll` within `root`, skipping nodes that belong to a nested table.
|
|
13
|
+
* Pass this instance's `.simple-table-root` (or any descendant of it).
|
|
14
|
+
*/
|
|
15
|
+
export declare const queryAllInTable: <E extends Element = HTMLElement>(root: ParentNode | null | undefined, selector: string) => E[];
|
|
16
|
+
/** First match of `queryAllInTable`, or null. */
|
|
17
|
+
export declare const queryInTable: <E extends Element = HTMLElement>(root: ParentNode | null | undefined, selector: string) => E | null;
|
|
18
|
+
/** Looks up an element by `id` inside this table, not `document.getElementById`. */
|
|
19
|
+
export declare const getElementByIdInTable: (root: ParentNode | null | undefined, id: string) => HTMLElement | null;
|
|
20
|
+
export declare const escapeTableAttrValue: (value: string) => string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "simple-table-core",
|
|
3
|
-
"version": "4.1.
|
|
3
|
+
"version": "4.1.7",
|
|
4
4
|
"main": "dist/cjs/index.js",
|
|
5
5
|
"module": "dist/index.es.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -42,11 +42,11 @@
|
|
|
42
42
|
"@storybook/test-runner": "^0.19.1",
|
|
43
43
|
"@types/node": "^16.18.111",
|
|
44
44
|
"cssnano": "^7.0.6",
|
|
45
|
+
"playwright": "1.58.2",
|
|
45
46
|
"postcss-calc": "^10.1.1",
|
|
46
47
|
"postcss-custom-properties": "^14.0.4",
|
|
47
48
|
"postcss-import": "^16.1.0",
|
|
48
49
|
"postcss-preset-env": "^10.1.5",
|
|
49
|
-
"playwright": "1.58.2",
|
|
50
50
|
"rollup": "^2.79.2",
|
|
51
51
|
"rollup-plugin-delete": "^2.1.0",
|
|
52
52
|
"rollup-plugin-peer-deps-external": "^2.2.4",
|
|
@@ -57,7 +57,8 @@
|
|
|
57
57
|
"storybook": "^8.6.14",
|
|
58
58
|
"ts-loader": "^9.5.4",
|
|
59
59
|
"tslib": "^2.8.1",
|
|
60
|
-
"typescript": "^5.0.0"
|
|
60
|
+
"typescript": "^5.0.0",
|
|
61
|
+
"vitest": "^2.1.9"
|
|
61
62
|
},
|
|
62
63
|
"browserslist": {
|
|
63
64
|
"production": [
|
package/src/styles/base.css
CHANGED
|
@@ -86,7 +86,7 @@
|
|
|
86
86
|
font-family: inherit;
|
|
87
87
|
}
|
|
88
88
|
|
|
89
|
-
input {
|
|
89
|
+
.simple-table-root input {
|
|
90
90
|
color: black;
|
|
91
91
|
}
|
|
92
92
|
|
|
@@ -206,7 +206,7 @@ input {
|
|
|
206
206
|
display: block;
|
|
207
207
|
/* `*` does not target ::after; border-box keeps the bottom border inside the flex line. */
|
|
208
208
|
box-sizing: border-box;
|
|
209
|
-
width: var(--st-after-width,
|
|
209
|
+
width: var(--st-after-width, 11.01px);
|
|
210
210
|
flex-shrink: 0;
|
|
211
211
|
background-color: var(--st-header-background-color);
|
|
212
212
|
border-bottom: var(--st-border-width) solid var(--st-border-color);
|
|
@@ -218,11 +218,6 @@ input {
|
|
|
218
218
|
border-bottom: var(--st-border-width) solid var(--st-border-color);
|
|
219
219
|
}
|
|
220
220
|
|
|
221
|
-
.st-header-grid {
|
|
222
|
-
position: relative;
|
|
223
|
-
min-width: 100%;
|
|
224
|
-
}
|
|
225
|
-
|
|
226
221
|
.st-horizontal-scrollbar-middle,
|
|
227
222
|
.st-horizontal-scrollbar-left,
|
|
228
223
|
.st-horizontal-scrollbar-right,
|
|
@@ -373,12 +368,6 @@ input {
|
|
|
373
368
|
background-color: var(--st-selected-row-background-color);
|
|
374
369
|
}
|
|
375
370
|
|
|
376
|
-
.st-sticky-top
|
|
377
|
-
.st-row.hovered:not(.st-cell-editing):not(.st-cell-column-selected):not(
|
|
378
|
-
.st-cell-column-selected-last
|
|
379
|
-
):not(.st-cell-column-selected-first) {
|
|
380
|
-
background-color: var(--st-hover-row-background-color);
|
|
381
|
-
}
|
|
382
371
|
.st-row.hovered .st-cell-editing,
|
|
383
372
|
.st-row.hovered
|
|
384
373
|
.st-cell:not(.st-cell-selected):not(.st-cell-selected-first):not(.st-cell-column-selected):not(
|
|
@@ -497,9 +486,6 @@ input {
|
|
|
497
486
|
.st-header-cell.st-header-editable {
|
|
498
487
|
cursor: pointer;
|
|
499
488
|
}
|
|
500
|
-
.st-header-cell.draggable {
|
|
501
|
-
cursor: grab;
|
|
502
|
-
}
|
|
503
489
|
.st-header-cell.st-header-selected {
|
|
504
490
|
background-color: var(--st-header-selected-background-color);
|
|
505
491
|
}
|
|
@@ -727,10 +713,6 @@ input {
|
|
|
727
713
|
outline-offset: 2px;
|
|
728
714
|
}
|
|
729
715
|
|
|
730
|
-
.st-collapse-icon-container {
|
|
731
|
-
cursor: pointer;
|
|
732
|
-
}
|
|
733
|
-
|
|
734
716
|
.st-expand-icon {
|
|
735
717
|
cursor: pointer;
|
|
736
718
|
color: var(--st-header-label-color);
|
|
@@ -774,6 +756,40 @@ input {
|
|
|
774
756
|
.st-dragging.st-sub-header {
|
|
775
757
|
background-color: var(--st-dragging-sub-header-background-color);
|
|
776
758
|
}
|
|
759
|
+
/* Keep the dragged header above neighbors while they slide past (DOM order
|
|
760
|
+
would otherwise flip who paints on top mid-animation). */
|
|
761
|
+
.st-header-cell.st-dragging {
|
|
762
|
+
z-index: 2;
|
|
763
|
+
}
|
|
764
|
+
|
|
765
|
+
/*
|
|
766
|
+
* Column-drag / FLIP pass-through paint.
|
|
767
|
+
*
|
|
768
|
+
* Body cells use `background-color: transparent` so a shared row fill shows
|
|
769
|
+
* through — when two cells slide past each other you see labels overlap, not
|
|
770
|
+
* opaque rectangles stacking. Neighboring headers do the same during reorder
|
|
771
|
+
* (the header strip already paints `--st-header-background-color`).
|
|
772
|
+
* `.st-flip-active` covers slides that continue after dragend.
|
|
773
|
+
*
|
|
774
|
+
* The dragged header keeps `--st-dragging-background-color` (see below) so the
|
|
775
|
+
* active column stays visually marked.
|
|
776
|
+
*/
|
|
777
|
+
.simple-table-root.st-column-reordering .st-header-cell,
|
|
778
|
+
.simple-table-root.st-column-reordering .st-header-cell.st-sub-header,
|
|
779
|
+
.st-header-cell.st-flip-active,
|
|
780
|
+
.st-header-cell.st-flip-active.st-sub-header {
|
|
781
|
+
background-color: transparent;
|
|
782
|
+
}
|
|
783
|
+
|
|
784
|
+
/* Dragged header fill wins over the pass-through rule above. */
|
|
785
|
+
.simple-table-root.st-column-reordering .st-header-cell.st-dragging:not(.st-sub-header),
|
|
786
|
+
.st-header-cell.st-flip-active.st-dragging:not(.st-sub-header) {
|
|
787
|
+
background-color: var(--st-dragging-background-color);
|
|
788
|
+
}
|
|
789
|
+
.simple-table-root.st-column-reordering .st-header-cell.st-dragging.st-sub-header,
|
|
790
|
+
.st-header-cell.st-flip-active.st-dragging.st-sub-header {
|
|
791
|
+
background-color: var(--st-dragging-sub-header-background-color);
|
|
792
|
+
}
|
|
777
793
|
|
|
778
794
|
/* Loading skeleton styles */
|
|
779
795
|
.st-loading-skeleton {
|
|
@@ -1166,10 +1182,6 @@ input {
|
|
|
1166
1182
|
padding: var(--st-spacing-medium);
|
|
1167
1183
|
}
|
|
1168
1184
|
|
|
1169
|
-
/* Column Editor Search Styles */
|
|
1170
|
-
.st-column-editor-search {
|
|
1171
|
-
}
|
|
1172
|
-
|
|
1173
1185
|
/* Column Editor List */
|
|
1174
1186
|
.st-column-editor-list {
|
|
1175
1187
|
display: flex;
|
|
@@ -1346,12 +1358,6 @@ input {
|
|
|
1346
1358
|
background: color-mix(in srgb, var(--st-column-editor-text-color) 12%, transparent);
|
|
1347
1359
|
}
|
|
1348
1360
|
|
|
1349
|
-
.st-column-pin-pinned-mark {
|
|
1350
|
-
display: flex;
|
|
1351
|
-
align-items: center;
|
|
1352
|
-
justify-content: center;
|
|
1353
|
-
}
|
|
1354
|
-
|
|
1355
1361
|
/* Pinned left/right: same surface as .st-column-pin-btn:hover */
|
|
1356
1362
|
.st-column-pin-pinned-active {
|
|
1357
1363
|
background: color-mix(in srgb, var(--st-column-editor-text-color) 12%, transparent);
|
|
@@ -1495,11 +1501,6 @@ input {
|
|
|
1495
1501
|
align-items: center;
|
|
1496
1502
|
}
|
|
1497
1503
|
|
|
1498
|
-
.st-nested-headers {
|
|
1499
|
-
display: flex;
|
|
1500
|
-
flex-direction: column;
|
|
1501
|
-
}
|
|
1502
|
-
|
|
1503
1504
|
.st-column-editor-popout.open {
|
|
1504
1505
|
min-width: 240px;
|
|
1505
1506
|
width: auto;
|
|
@@ -1566,77 +1567,6 @@ input {
|
|
|
1566
1567
|
color: var(--st-button-active-text-color);
|
|
1567
1568
|
}
|
|
1568
1569
|
|
|
1569
|
-
@keyframes slide-in-left {
|
|
1570
|
-
from {
|
|
1571
|
-
transform: translateX(-100%);
|
|
1572
|
-
}
|
|
1573
|
-
to {
|
|
1574
|
-
transform: translateX(0);
|
|
1575
|
-
}
|
|
1576
|
-
}
|
|
1577
|
-
|
|
1578
|
-
@keyframes slide-in-right {
|
|
1579
|
-
from {
|
|
1580
|
-
transform: translateX(100%);
|
|
1581
|
-
}
|
|
1582
|
-
to {
|
|
1583
|
-
transform: translateX(0);
|
|
1584
|
-
}
|
|
1585
|
-
}
|
|
1586
|
-
|
|
1587
|
-
/* Group Header Styles */
|
|
1588
|
-
.st-group-header {
|
|
1589
|
-
background-color: var(--st-header-background-color);
|
|
1590
|
-
cursor: pointer;
|
|
1591
|
-
user-select: none;
|
|
1592
|
-
height: 40px;
|
|
1593
|
-
display: flex;
|
|
1594
|
-
align-items: center;
|
|
1595
|
-
border-bottom: var(--st-border-width) solid var(--st-border-color);
|
|
1596
|
-
color: var(--st-cell-color);
|
|
1597
|
-
font-weight: 500;
|
|
1598
|
-
transition: background-color var(--st-transition-duration) var(--st-transition-ease);
|
|
1599
|
-
}
|
|
1600
|
-
|
|
1601
|
-
.st-group-header:hover {
|
|
1602
|
-
background-color: var(--st-button-hover-background-color);
|
|
1603
|
-
}
|
|
1604
|
-
|
|
1605
|
-
.st-group-header-content {
|
|
1606
|
-
display: flex;
|
|
1607
|
-
align-items: center;
|
|
1608
|
-
gap: var(--st-spacing-medium);
|
|
1609
|
-
}
|
|
1610
|
-
|
|
1611
|
-
.st-group-toggle-icon {
|
|
1612
|
-
font-size: 0.8em;
|
|
1613
|
-
width: 16px;
|
|
1614
|
-
height: 16px;
|
|
1615
|
-
display: flex;
|
|
1616
|
-
align-items: center;
|
|
1617
|
-
justify-content: center;
|
|
1618
|
-
}
|
|
1619
|
-
|
|
1620
|
-
.st-group-name {
|
|
1621
|
-
font-weight: 600;
|
|
1622
|
-
}
|
|
1623
|
-
|
|
1624
|
-
.st-group-count {
|
|
1625
|
-
color: var(--st-cell-odd-row-color);
|
|
1626
|
-
font-size: 0.9em;
|
|
1627
|
-
}
|
|
1628
|
-
|
|
1629
|
-
/* Animation for expand/collapse */
|
|
1630
|
-
.st-group-header.expanded .st-group-toggle-icon {
|
|
1631
|
-
transform: rotate(0deg);
|
|
1632
|
-
transition: transform var(--st-transition-duration) var(--st-transition-ease);
|
|
1633
|
-
}
|
|
1634
|
-
|
|
1635
|
-
.st-group-header.collapsed .st-group-toggle-icon {
|
|
1636
|
-
transform: rotate(-90deg);
|
|
1637
|
-
transition: transform var(--st-transition-duration) var(--st-transition-ease);
|
|
1638
|
-
}
|
|
1639
|
-
|
|
1640
1570
|
/* Row expand icon animation */
|
|
1641
1571
|
.st-expand-icon-container {
|
|
1642
1572
|
transition: transform var(--st-transition-duration) var(--st-transition-ease);
|
|
@@ -1822,12 +1752,6 @@ input {
|
|
|
1822
1752
|
color: var(--st-selected-cell-color);
|
|
1823
1753
|
}
|
|
1824
1754
|
|
|
1825
|
-
.st-dropdown-divider {
|
|
1826
|
-
height: 1px;
|
|
1827
|
-
margin: 4px 0;
|
|
1828
|
-
background-color: var(--st-border-color);
|
|
1829
|
-
}
|
|
1830
|
-
|
|
1831
1755
|
/* Datepicker css */
|
|
1832
1756
|
|
|
1833
1757
|
.st-datepicker {
|
|
@@ -2037,25 +1961,6 @@ input {
|
|
|
2037
1961
|
margin-bottom: var(--st-spacing-medium);
|
|
2038
1962
|
}
|
|
2039
1963
|
|
|
2040
|
-
/* Filter Select - Dropdown selectors */
|
|
2041
|
-
.st-filter-select {
|
|
2042
|
-
width: 100%;
|
|
2043
|
-
padding: var(--st-control-padding-y) var(--st-control-padding-x);
|
|
2044
|
-
border: var(--st-border-width) solid var(--st-border-color);
|
|
2045
|
-
border-radius: var(--st-border-radius);
|
|
2046
|
-
font-size: var(--st-overlay-font-size);
|
|
2047
|
-
background-color: var(--st-odd-row-background-color);
|
|
2048
|
-
color: var(--st-cell-color);
|
|
2049
|
-
font-family: inherit;
|
|
2050
|
-
cursor: pointer;
|
|
2051
|
-
outline: none;
|
|
2052
|
-
transition: border-color var(--st-transition-duration) var(--st-transition-ease);
|
|
2053
|
-
}
|
|
2054
|
-
|
|
2055
|
-
.st-filter-select:focus {
|
|
2056
|
-
border-color: var(--st-editable-cell-focus-border-color);
|
|
2057
|
-
}
|
|
2058
|
-
|
|
2059
1964
|
/* Filter Actions - Button container and buttons */
|
|
2060
1965
|
.st-filter-actions {
|
|
2061
1966
|
display: flex;
|
|
@@ -2282,14 +2187,6 @@ input {
|
|
|
2282
2187
|
font-style: italic;
|
|
2283
2188
|
}
|
|
2284
2189
|
|
|
2285
|
-
/* Row number styling */
|
|
2286
|
-
.st-row-number {
|
|
2287
|
-
font-size: 0.8em;
|
|
2288
|
-
opacity: 0.6;
|
|
2289
|
-
user-select: none;
|
|
2290
|
-
font-weight: 500;
|
|
2291
|
-
}
|
|
2292
|
-
|
|
2293
2190
|
/* Selection cell with row buttons layout */
|
|
2294
2191
|
.st-selection-cell-content {
|
|
2295
2192
|
display: flex;
|
|
@@ -2365,6 +2262,10 @@ input {
|
|
|
2365
2262
|
animation: st-tooltip-fade-in 0.2s ease-out;
|
|
2366
2263
|
}
|
|
2367
2264
|
|
|
2265
|
+
.simple-table-root.st-column-reordering .st-tooltip {
|
|
2266
|
+
display: none;
|
|
2267
|
+
}
|
|
2268
|
+
|
|
2368
2269
|
@keyframes st-tooltip-fade-in {
|
|
2369
2270
|
from {
|
|
2370
2271
|
opacity: 0;
|
|
@@ -2387,14 +2288,6 @@ input {
|
|
|
2387
2288
|
width: 100%;
|
|
2388
2289
|
}
|
|
2389
2290
|
|
|
2390
|
-
/* Empty spacer for pinned sections when state row is shown */
|
|
2391
|
-
.st-row.st-state-row-spacer {
|
|
2392
|
-
display: block;
|
|
2393
|
-
position: absolute;
|
|
2394
|
-
width: 100%;
|
|
2395
|
-
background-color: transparent;
|
|
2396
|
-
}
|
|
2397
|
-
|
|
2398
2291
|
/* The cell within state row that spans full width */
|
|
2399
2292
|
.st-state-row-cell {
|
|
2400
2293
|
grid-column: 1 / -1;
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
import ColumnDef, { Accessor } from "../types/ColumnDef";
|
|
2
|
-
import { ColumnVisibilityState } from "../types/ColumnVisibilityTypes";
|
|
3
|
-
export interface ColumnManagerConfig {
|
|
4
|
-
headers: ColumnDef[];
|
|
5
|
-
collapsedHeaders: Set<Accessor>;
|
|
6
|
-
onColumnOrderChange?: (newHeaders: ColumnDef[]) => void;
|
|
7
|
-
onColumnVisibilityChange?: (visibilityState: ColumnVisibilityState) => void;
|
|
8
|
-
onColumnWidthChange?: (headers: ColumnDef[]) => void;
|
|
9
|
-
}
|
|
10
|
-
export interface ColumnManagerState {
|
|
11
|
-
headers: ColumnDef[];
|
|
12
|
-
collapsedHeaders: Set<Accessor>;
|
|
13
|
-
columnVisibility: ColumnVisibilityState;
|
|
14
|
-
draggedHeader: ColumnDef | null;
|
|
15
|
-
hoveredHeader: ColumnDef | null;
|
|
16
|
-
}
|
|
17
|
-
type StateChangeCallback = (state: ColumnManagerState) => void;
|
|
18
|
-
export declare class ColumnManager {
|
|
19
|
-
private config;
|
|
20
|
-
private state;
|
|
21
|
-
private subscribers;
|
|
22
|
-
constructor(config: ColumnManagerConfig);
|
|
23
|
-
private buildColumnVisibilityState;
|
|
24
|
-
updateConfig(config: Partial<ColumnManagerConfig>): void;
|
|
25
|
-
subscribe(callback: StateChangeCallback): () => void;
|
|
26
|
-
private notifySubscribers;
|
|
27
|
-
setHeaders(headers: ColumnDef[]): void;
|
|
28
|
-
setCollapsedHeaders(collapsedHeaders: Set<Accessor>): void;
|
|
29
|
-
toggleColumnCollapse(accessor: Accessor): void;
|
|
30
|
-
setColumnVisibility(accessor: Accessor, visible: boolean): void;
|
|
31
|
-
updateColumnWidth(accessor: Accessor, width: number | string): void;
|
|
32
|
-
reorderColumns(newHeaders: ColumnDef[]): void;
|
|
33
|
-
setDraggedHeader(header: ColumnDef | null): void;
|
|
34
|
-
setHoveredHeader(header: ColumnDef | null): void;
|
|
35
|
-
getState(): ColumnManagerState;
|
|
36
|
-
getHeaders(): ColumnDef[];
|
|
37
|
-
getCollapsedHeaders(): Set<Accessor>;
|
|
38
|
-
getColumnVisibility(): ColumnVisibilityState;
|
|
39
|
-
isColumnVisible(accessor: Accessor): boolean;
|
|
40
|
-
destroy(): void;
|
|
41
|
-
}
|
|
42
|
-
export {};
|
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
import ColumnDef, { Accessor } from "../types/ColumnDef";
|
|
2
|
-
import Row from "../types/Row";
|
|
3
|
-
import RowState from "../types/RowState";
|
|
4
|
-
import TableRow from "../types/TableRow";
|
|
5
|
-
import { HeightOffsets } from "../utils/infiniteScrollUtils";
|
|
6
|
-
import { CustomTheme } from "../types/CustomTheme";
|
|
7
|
-
import { GetRowId } from "../types/GetRowId";
|
|
8
|
-
export interface RowManagerConfig {
|
|
9
|
-
rows: Row[];
|
|
10
|
-
headers: ColumnDef[];
|
|
11
|
-
rowGrouping?: Accessor[];
|
|
12
|
-
getRowId?: GetRowId;
|
|
13
|
-
rowHeight: number;
|
|
14
|
-
headerHeight: number;
|
|
15
|
-
customTheme: CustomTheme;
|
|
16
|
-
hasLoadingRenderer: boolean;
|
|
17
|
-
hasErrorRenderer: boolean;
|
|
18
|
-
hasEmptyRenderer: boolean;
|
|
19
|
-
}
|
|
20
|
-
export interface RowManagerState {
|
|
21
|
-
expandedRows: Map<string, number>;
|
|
22
|
-
collapsedRows: Map<string, number>;
|
|
23
|
-
expandedDepths: Set<number>;
|
|
24
|
-
rowStateMap: Map<string | number, RowState>;
|
|
25
|
-
aggregatedRows: Row[];
|
|
26
|
-
flattenedRows: TableRow[];
|
|
27
|
-
heightOffsets: HeightOffsets;
|
|
28
|
-
paginatableRows: TableRow[];
|
|
29
|
-
parentEndPositions: number[];
|
|
30
|
-
}
|
|
31
|
-
type StateChangeCallback = (state: RowManagerState) => void;
|
|
32
|
-
export declare class RowManager {
|
|
33
|
-
private config;
|
|
34
|
-
private state;
|
|
35
|
-
private subscribers;
|
|
36
|
-
constructor(config: RowManagerConfig);
|
|
37
|
-
private getAllAggregationHeaders;
|
|
38
|
-
private calculateAggregation;
|
|
39
|
-
private computeAggregatedRows;
|
|
40
|
-
private computeFlattenedRows;
|
|
41
|
-
updateConfig(config: Partial<RowManagerConfig>): void;
|
|
42
|
-
subscribe(callback: StateChangeCallback): () => void;
|
|
43
|
-
private notifySubscribers;
|
|
44
|
-
setExpandedRows(expandedRows: Map<string, number>): void;
|
|
45
|
-
setCollapsedRows(collapsedRows: Map<string, number>): void;
|
|
46
|
-
setExpandedDepths(expandedDepths: Set<number>): void;
|
|
47
|
-
setRowStateMap(rowStateMap: Map<string | number, RowState>): void;
|
|
48
|
-
getState(): RowManagerState;
|
|
49
|
-
getAggregatedRows(): Row[];
|
|
50
|
-
getFlattenedRows(): TableRow[];
|
|
51
|
-
getHeightOffsets(): HeightOffsets;
|
|
52
|
-
getPaginatableRows(): TableRow[];
|
|
53
|
-
getParentEndPositions(): number[];
|
|
54
|
-
destroy(): void;
|
|
55
|
-
}
|
|
56
|
-
export {};
|
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
import ColumnDef, { Accessor } from "../types/ColumnDef";
|
|
2
|
-
import Row from "../types/Row";
|
|
3
|
-
import SortColumn, { SortDirection } from "../types/SortColumn";
|
|
4
|
-
import { TableFilterState } from "../types/FilterTypes";
|
|
5
|
-
import { ColumnVisibilityState } from "../types/ColumnVisibilityTypes";
|
|
6
|
-
import { CustomTheme } from "../types/CustomTheme";
|
|
7
|
-
import { GetRowId } from "../types/GetRowId";
|
|
8
|
-
import { SortManager } from "./SortManager";
|
|
9
|
-
import { FilterManager } from "./FilterManager";
|
|
10
|
-
import { RowManager } from "./RowManager";
|
|
11
|
-
import { ColumnManager } from "./ColumnManager";
|
|
12
|
-
import { DimensionManager } from "./DimensionManager";
|
|
13
|
-
import { ScrollManager } from "./ScrollManager";
|
|
14
|
-
import { SelectionManager } from "./SelectionManager";
|
|
15
|
-
export interface TableManagerConfig {
|
|
16
|
-
headers: ColumnDef[];
|
|
17
|
-
rows: Row[];
|
|
18
|
-
rowHeight: number;
|
|
19
|
-
headerHeight?: number;
|
|
20
|
-
customTheme: CustomTheme;
|
|
21
|
-
externalSortHandling?: boolean;
|
|
22
|
-
externalFilterHandling?: boolean;
|
|
23
|
-
rowGrouping?: Accessor[];
|
|
24
|
-
getRowId?: GetRowId;
|
|
25
|
-
selectableCells?: boolean;
|
|
26
|
-
selectableColumns?: boolean;
|
|
27
|
-
enableRowSelection?: boolean;
|
|
28
|
-
copyHeadersToClipboard?: boolean;
|
|
29
|
-
height?: string | number;
|
|
30
|
-
maxHeight?: string | number;
|
|
31
|
-
initialSortColumn?: string;
|
|
32
|
-
initialSortDirection?: SortDirection;
|
|
33
|
-
onSortChange?: (sort: SortColumn | null) => void;
|
|
34
|
-
onFilterChange?: (filters: TableFilterState) => void;
|
|
35
|
-
onColumnOrderChange?: (newHeaders: ColumnDef[]) => void;
|
|
36
|
-
onColumnVisibilityChange?: (visibilityState: ColumnVisibilityState) => void;
|
|
37
|
-
onColumnWidthChange?: (headers: ColumnDef[]) => void;
|
|
38
|
-
onLoadMore?: () => void;
|
|
39
|
-
onCellEdit?: (props: any) => void;
|
|
40
|
-
announce?: (message: string) => void;
|
|
41
|
-
containerElement?: HTMLElement;
|
|
42
|
-
cellRegistry?: Map<string, any>;
|
|
43
|
-
collapsedHeaders?: Set<Accessor>;
|
|
44
|
-
}
|
|
45
|
-
export interface TableManagerState {
|
|
46
|
-
isReady: boolean;
|
|
47
|
-
}
|
|
48
|
-
type StateChangeCallback = () => void;
|
|
49
|
-
export declare class TableManager {
|
|
50
|
-
private config;
|
|
51
|
-
private state;
|
|
52
|
-
private subscribers;
|
|
53
|
-
sortManager: SortManager;
|
|
54
|
-
filterManager: FilterManager;
|
|
55
|
-
rowManager: RowManager;
|
|
56
|
-
columnManager: ColumnManager;
|
|
57
|
-
dimensionManager: DimensionManager;
|
|
58
|
-
scrollManager: ScrollManager;
|
|
59
|
-
selectionManager: SelectionManager;
|
|
60
|
-
constructor(config: TableManagerConfig);
|
|
61
|
-
private setupManagerSubscriptions;
|
|
62
|
-
private applyFiltersAndSort;
|
|
63
|
-
private handleSortChange;
|
|
64
|
-
private handleFilterChange;
|
|
65
|
-
updateConfig(config: Partial<TableManagerConfig>): void;
|
|
66
|
-
subscribe(callback: StateChangeCallback): () => void;
|
|
67
|
-
private notifySubscribers;
|
|
68
|
-
getState(): TableManagerState;
|
|
69
|
-
isReady(): boolean;
|
|
70
|
-
destroy(): void;
|
|
71
|
-
}
|
|
72
|
-
export {};
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import ColumnDef, { Accessor } from "./ColumnDef";
|
|
2
|
-
type useDragHandlerProps = {
|
|
3
|
-
draggedHeaderRef: {
|
|
4
|
-
current: ColumnDef | null;
|
|
5
|
-
};
|
|
6
|
-
essentialAccessors?: ReadonlySet<Accessor | string>;
|
|
7
|
-
headers: ColumnDef[];
|
|
8
|
-
hoveredHeaderRef: {
|
|
9
|
-
current: ColumnDef | null;
|
|
10
|
-
};
|
|
11
|
-
onColumnOrderChange?: (newHeaders: ColumnDef[]) => void;
|
|
12
|
-
onTableHeaderDragEnd: (newHeaders: ColumnDef[]) => void;
|
|
13
|
-
};
|
|
14
|
-
export default useDragHandlerProps;
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import ColumnDef from "./ColumnDef";
|
|
2
|
-
export interface RefObject<T> {
|
|
3
|
-
current: T | null;
|
|
4
|
-
}
|
|
5
|
-
interface SharedTableProps {
|
|
6
|
-
centerHeaderRef: RefObject<HTMLDivElement | null>;
|
|
7
|
-
draggedHeaderRef: {
|
|
8
|
-
current: ColumnDef | null;
|
|
9
|
-
};
|
|
10
|
-
headerContainerRef: RefObject<HTMLDivElement | null>;
|
|
11
|
-
headers: ColumnDef[];
|
|
12
|
-
hoveredHeaderRef: {
|
|
13
|
-
current: ColumnDef | null;
|
|
14
|
-
};
|
|
15
|
-
mainBodyRef: RefObject<HTMLDivElement | null>;
|
|
16
|
-
onTableHeaderDragEnd: (newHeaders: ColumnDef[]) => void;
|
|
17
|
-
pinnedLeftColumns: ColumnDef[];
|
|
18
|
-
pinnedLeftHeaderRef: RefObject<HTMLDivElement | null>;
|
|
19
|
-
pinnedRightColumns: ColumnDef[];
|
|
20
|
-
pinnedRightHeaderRef: RefObject<HTMLDivElement | null>;
|
|
21
|
-
rowHeight: number;
|
|
22
|
-
tableBodyContainerRef: RefObject<HTMLDivElement | null>;
|
|
23
|
-
}
|
|
24
|
-
export default SharedTableProps;
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { ColumnDef } from "..";
|
|
2
|
-
import TableRow from "./TableRow";
|
|
3
|
-
import { CumulativeHeightMap } from "../utils/infiniteScrollUtils";
|
|
4
|
-
interface TableBodyProps {
|
|
5
|
-
calculatedHeaderHeight: number;
|
|
6
|
-
heightMap?: CumulativeHeightMap;
|
|
7
|
-
partiallyVisibleRows: TableRow[];
|
|
8
|
-
pinnedLeftColumns: ColumnDef[];
|
|
9
|
-
pinnedLeftWidth: number;
|
|
10
|
-
pinnedRightColumns: ColumnDef[];
|
|
11
|
-
pinnedRightWidth: number;
|
|
12
|
-
regularRows: TableRow[];
|
|
13
|
-
rowsToRender: TableRow[];
|
|
14
|
-
setScrollDirection: (direction: "up" | "down" | "none") => void;
|
|
15
|
-
setScrollTop: (scrollTop: number) => void;
|
|
16
|
-
shouldShowEmptyState: boolean;
|
|
17
|
-
stickyParents: TableRow[];
|
|
18
|
-
tableRows: TableRow[];
|
|
19
|
-
}
|
|
20
|
-
export default TableBodyProps;
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import SortColumn from "./SortColumn";
|
|
2
|
-
import ColumnDef from "./ColumnDef";
|
|
3
|
-
export interface RefObject<T> {
|
|
4
|
-
current: T | null;
|
|
5
|
-
}
|
|
6
|
-
type TableHeaderProps = {
|
|
7
|
-
calculatedHeaderHeight: number;
|
|
8
|
-
centerHeaderRef: RefObject<HTMLDivElement | null>;
|
|
9
|
-
headers: ColumnDef[];
|
|
10
|
-
mainBodyWidth: number;
|
|
11
|
-
pinnedLeftColumns: ColumnDef[];
|
|
12
|
-
pinnedLeftWidth: number;
|
|
13
|
-
pinnedRightColumns: ColumnDef[];
|
|
14
|
-
pinnedRightWidth: number;
|
|
15
|
-
sort: SortColumn | null;
|
|
16
|
-
};
|
|
17
|
-
export default TableHeaderProps;
|