simple-table-core 3.0.0-beta.8 → 3.0.0
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 +20 -17
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/src/core/SimpleTableVanilla.d.ts +2 -0
- package/dist/cjs/src/core/initialization/TableInitializer.d.ts +4 -1
- package/dist/cjs/src/core/rendering/RenderOrchestrator.d.ts +1 -0
- package/dist/cjs/src/core/rendering/TableRenderer.d.ts +1 -0
- package/dist/cjs/src/index.d.ts +3 -2
- package/dist/cjs/src/managers/DimensionManager.d.ts +3 -0
- package/dist/cjs/src/managers/SelectionManager/SelectionManager.d.ts +7 -0
- package/dist/cjs/src/managers/SelectionManager/mouseUtils.d.ts +2 -1
- package/dist/cjs/src/managers/SelectionManager/types.d.ts +6 -0
- package/dist/cjs/src/types/ColumnEditorConfig.d.ts +5 -2
- package/dist/cjs/src/types/ColumnEditorCustomRendererProps.d.ts +14 -0
- package/dist/cjs/src/types/CustomTheme.d.ts +2 -0
- package/dist/cjs/src/types/HeaderObject.d.ts +1 -1
- package/dist/cjs/src/types/SimpleTableConfig.d.ts +0 -2
- package/dist/cjs/src/types/SimpleTableProps.d.ts +0 -13
- package/dist/cjs/src/utils/asRows.d.ts +7 -0
- package/dist/cjs/src/utils/bodyCell/expansion.d.ts +9 -1
- package/dist/cjs/src/utils/columnEditor/createColumnEditor.d.ts +0 -1
- package/dist/cjs/src/utils/columnEditor/createColumnEditorPopout.d.ts +0 -1
- package/dist/cjs/src/utils/columnEditor/createColumnEditorRow.d.ts +8 -1
- package/dist/cjs/src/utils/filters/createDropdown.d.ts +17 -0
- package/dist/cjs/src/utils/filters/createFilterActions.d.ts +1 -0
- package/dist/cjs/src/utils/headerCell/collapsing.d.ts +1 -1
- package/dist/cjs/src/utils/headerCell/eventTracking.d.ts +3 -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 +2 -0
- package/dist/cjs/src/utils/headerWidthUtils.d.ts +4 -2
- package/dist/cjs/src/utils/pinnedColumnUtils.d.ts +5 -1
- package/dist/cjs/src/utils/resizeUtils/index.d.ts +18 -1
- package/dist/cjs/src/utils/rowSeparatorRenderer.d.ts +4 -0
- package/dist/cjs/stories/SimpleTable.stories.d.ts +1 -0
- package/dist/cjs/stories/examples/infrastructure/InfrastructureExample.d.ts +1 -0
- package/dist/cjs/stories/examples/spreadsheet/SpreadsheetExample.d.ts +4 -0
- package/dist/cjs/stories/tests/07-RowSelectionTests.stories.d.ts +1 -0
- package/dist/cjs/stories/tests/10-ColumnPinningTests.stories.d.ts +9 -0
- package/dist/cjs/stories/tests/13-ColumnResizeTests.stories.d.ts +27 -0
- package/dist/cjs/stories/tests/37-TableRefMethodsTests.stories.d.ts +1 -1
- package/dist/cjs/stories/tests/39-AutoExpandColumnsTests.stories.d.ts +127 -0
- package/dist/cjs/stories/tests/testUtils.d.ts +2 -0
- package/dist/cjs/styles.css +1 -1
- package/dist/index.es.js +1 -1
- package/dist/src/core/SimpleTableVanilla.d.ts +2 -0
- package/dist/src/core/initialization/TableInitializer.d.ts +4 -1
- package/dist/src/core/rendering/RenderOrchestrator.d.ts +1 -0
- package/dist/src/core/rendering/TableRenderer.d.ts +1 -0
- package/dist/src/index.d.ts +3 -2
- package/dist/src/managers/DimensionManager.d.ts +3 -0
- package/dist/src/managers/SelectionManager/SelectionManager.d.ts +7 -0
- package/dist/src/managers/SelectionManager/mouseUtils.d.ts +2 -1
- package/dist/src/managers/SelectionManager/types.d.ts +6 -0
- package/dist/src/types/ColumnEditorConfig.d.ts +5 -2
- package/dist/src/types/ColumnEditorCustomRendererProps.d.ts +14 -0
- package/dist/src/types/CustomTheme.d.ts +2 -0
- package/dist/src/types/HeaderObject.d.ts +1 -1
- package/dist/src/types/SimpleTableConfig.d.ts +0 -2
- package/dist/src/types/SimpleTableProps.d.ts +0 -13
- package/dist/src/utils/asRows.d.ts +7 -0
- package/dist/src/utils/bodyCell/expansion.d.ts +9 -1
- package/dist/src/utils/columnEditor/createColumnEditor.d.ts +0 -1
- package/dist/src/utils/columnEditor/createColumnEditorPopout.d.ts +0 -1
- package/dist/src/utils/columnEditor/createColumnEditorRow.d.ts +8 -1
- package/dist/src/utils/filters/createDropdown.d.ts +17 -0
- package/dist/src/utils/filters/createFilterActions.d.ts +1 -0
- package/dist/src/utils/headerCell/collapsing.d.ts +1 -1
- package/dist/src/utils/headerCell/eventTracking.d.ts +3 -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 +2 -0
- package/dist/src/utils/headerWidthUtils.d.ts +4 -2
- package/dist/src/utils/pinnedColumnUtils.d.ts +5 -1
- package/dist/src/utils/resizeUtils/index.d.ts +18 -1
- package/dist/src/utils/rowSeparatorRenderer.d.ts +4 -0
- package/dist/stories/SimpleTable.stories.d.ts +1 -0
- package/dist/stories/examples/infrastructure/InfrastructureExample.d.ts +1 -0
- package/dist/stories/examples/spreadsheet/SpreadsheetExample.d.ts +4 -0
- package/dist/stories/tests/07-RowSelectionTests.stories.d.ts +1 -0
- package/dist/stories/tests/10-ColumnPinningTests.stories.d.ts +9 -0
- package/dist/stories/tests/13-ColumnResizeTests.stories.d.ts +27 -0
- package/dist/stories/tests/37-TableRefMethodsTests.stories.d.ts +1 -1
- package/dist/stories/tests/39-AutoExpandColumnsTests.stories.d.ts +127 -0
- package/dist/stories/tests/testUtils.d.ts +2 -0
- package/dist/styles.css +1 -1
- package/package.json +2 -1
- package/src/styles/all-themes.css +1 -0
- package/src/styles/base.css +61 -16
- package/src/styles/themes/modern-dark.css +4 -16
- package/src/styles/themes/modern-light.css +4 -16
- package/src/styles/themes/theme-custom.css +253 -0
- package/dist/cjs/src/types/TableRefType.d.ts +0 -78
- package/dist/cjs/src/utils/deprecatedPropsWarnings.d.ts +0 -10
- package/dist/src/types/TableRefType.d.ts +0 -78
- package/dist/src/utils/deprecatedPropsWarnings.d.ts +0 -10
package/src/styles/base.css
CHANGED
|
@@ -420,10 +420,14 @@ input {
|
|
|
420
420
|
}
|
|
421
421
|
|
|
422
422
|
/* Cell-level row background classes (for absolute positioned cells) */
|
|
423
|
-
.st-cell.st-cell-even-row
|
|
423
|
+
.st-cell.st-cell-even-row:not(.st-cell-selected):not(.st-cell-selected-first):not(
|
|
424
|
+
.st-cell-column-selected
|
|
425
|
+
):not(.st-cell-column-selected-first) {
|
|
424
426
|
background-color: var(--st-even-row-background-color);
|
|
425
427
|
}
|
|
426
|
-
.st-cell.st-cell-odd-row
|
|
428
|
+
.st-cell.st-cell-odd-row:not(.st-cell-selected):not(.st-cell-selected-first):not(
|
|
429
|
+
.st-cell-column-selected
|
|
430
|
+
):not(.st-cell-column-selected-first) {
|
|
427
431
|
background-color: var(--st-odd-row-background-color);
|
|
428
432
|
}
|
|
429
433
|
.st-cell.st-cell-even-row .st-cell-content {
|
|
@@ -481,11 +485,9 @@ input {
|
|
|
481
485
|
}
|
|
482
486
|
.st-header-cell.st-header-selected .st-header-icon {
|
|
483
487
|
fill: var(--st-header-selected-icon-color);
|
|
484
|
-
background-color: var(--st-header-selected-icon-color);
|
|
485
488
|
}
|
|
486
489
|
.st-header-cell.st-header-selected .st-icon-container * {
|
|
487
490
|
fill: var(--st-header-selected-icon-color);
|
|
488
|
-
background-color: var(--st-header-selected-icon-color);
|
|
489
491
|
}
|
|
490
492
|
.st-header-cell.st-header-selected .st-icon-container {
|
|
491
493
|
color: var(--st-header-selected-icon-color);
|
|
@@ -967,6 +969,11 @@ input {
|
|
|
967
969
|
color: white;
|
|
968
970
|
}
|
|
969
971
|
|
|
972
|
+
/* Set by createTableFooter when page controls exceed MAX_COMPACT_VISIBLE_PAGE_BUTTONS */
|
|
973
|
+
.st-footer-pagination .st-page-btn.st-page-btn--compact-hidden {
|
|
974
|
+
display: none;
|
|
975
|
+
}
|
|
976
|
+
|
|
970
977
|
.st-page-ellipsis {
|
|
971
978
|
display: inline-flex;
|
|
972
979
|
align-items: center;
|
|
@@ -1002,7 +1009,10 @@ input {
|
|
|
1002
1009
|
border-left: var(--st-border-width) solid var(--st-border-color);
|
|
1003
1010
|
color: var(--st-column-editor-text-color);
|
|
1004
1011
|
flex-shrink: 0;
|
|
1005
|
-
height:
|
|
1012
|
+
/* Row flex with .st-content: stretch to its height; height:100% is auto when root height is indefinite. */
|
|
1013
|
+
align-self: stretch;
|
|
1014
|
+
height: auto;
|
|
1015
|
+
min-height: 0;
|
|
1006
1016
|
}
|
|
1007
1017
|
|
|
1008
1018
|
.st-column-editor-text {
|
|
@@ -1244,6 +1254,14 @@ input {
|
|
|
1244
1254
|
align-items: center;
|
|
1245
1255
|
}
|
|
1246
1256
|
|
|
1257
|
+
.st-collapsible-header-icon.st-expand-icon-container.expanded {
|
|
1258
|
+
transform: rotate(180deg);
|
|
1259
|
+
}
|
|
1260
|
+
|
|
1261
|
+
.st-collapsible-header-icon.st-expand-icon-container.collapsed {
|
|
1262
|
+
transform: rotate(0deg);
|
|
1263
|
+
}
|
|
1264
|
+
|
|
1247
1265
|
.st-nested-headers {
|
|
1248
1266
|
display: flex;
|
|
1249
1267
|
flex-direction: column;
|
|
@@ -1489,21 +1507,25 @@ input {
|
|
|
1489
1507
|
cursor: default;
|
|
1490
1508
|
}
|
|
1491
1509
|
|
|
1492
|
-
/*
|
|
1493
|
-
|
|
1494
|
-
|
|
1495
|
-
|
|
1496
|
-
|
|
1497
|
-
|
|
1498
|
-
margin-top: 4px;
|
|
1510
|
+
/* Filter popover (and similar): nested .st-dropdown-content menus must not be clipped by the shell.
|
|
1511
|
+
overflow:auto + max-height on the parent creates a scrollport that clips absolutely positioned
|
|
1512
|
+
children (operator CustomSelect, date picker, etc.). */
|
|
1513
|
+
.st-dropdown-content.st-dropdown-content--allow-descendant-overflow {
|
|
1514
|
+
overflow: visible;
|
|
1515
|
+
max-height: none;
|
|
1499
1516
|
}
|
|
1500
1517
|
|
|
1501
|
-
|
|
1502
|
-
|
|
1518
|
+
/* Nested filter UI panels (absolute) stack above the fixed filter shell */
|
|
1519
|
+
.st-filter-container .st-dropdown-content {
|
|
1520
|
+
z-index: 101;
|
|
1503
1521
|
}
|
|
1504
1522
|
|
|
1523
|
+
/* Position variants — vertical offset comes from JS (React Dropdown parity: +4px only) */
|
|
1524
|
+
.st-dropdown-bottom-left,
|
|
1525
|
+
.st-dropdown-bottom-right,
|
|
1526
|
+
.st-dropdown-top-left,
|
|
1505
1527
|
.st-dropdown-top-right {
|
|
1506
|
-
margin
|
|
1528
|
+
margin: 0;
|
|
1507
1529
|
}
|
|
1508
1530
|
|
|
1509
1531
|
/* Dropdown items */
|
|
@@ -1763,12 +1785,19 @@ input {
|
|
|
1763
1785
|
font-size: 0.9em;
|
|
1764
1786
|
font-weight: 500;
|
|
1765
1787
|
font-family: inherit;
|
|
1788
|
+
appearance: none;
|
|
1789
|
+
-webkit-appearance: none;
|
|
1766
1790
|
transition: background-color var(--st-transition-duration)
|
|
1767
1791
|
var(--st-transition-ease);
|
|
1768
1792
|
}
|
|
1793
|
+
/* Keyboard only — avoids a stuck ring after mouse click (especially on bordered Clear) */
|
|
1769
1794
|
.st-filter-button:focus {
|
|
1795
|
+
outline: none;
|
|
1796
|
+
}
|
|
1797
|
+
|
|
1798
|
+
.st-filter-button:focus-visible {
|
|
1770
1799
|
outline: 2px solid var(--st-focus-ring-color);
|
|
1771
|
-
outline-offset:
|
|
1800
|
+
outline-offset: 2px;
|
|
1772
1801
|
}
|
|
1773
1802
|
|
|
1774
1803
|
/* Apply Button */
|
|
@@ -1820,6 +1849,9 @@ input {
|
|
|
1820
1849
|
justify-content: space-between;
|
|
1821
1850
|
gap: var(--st-spacing-medium);
|
|
1822
1851
|
outline: none;
|
|
1852
|
+
appearance: none;
|
|
1853
|
+
-webkit-appearance: none;
|
|
1854
|
+
text-align: left;
|
|
1823
1855
|
transition: border-color var(--st-transition-duration)
|
|
1824
1856
|
var(--st-transition-ease);
|
|
1825
1857
|
}
|
|
@@ -1919,6 +1951,12 @@ input {
|
|
|
1919
1951
|
overflow: auto;
|
|
1920
1952
|
}
|
|
1921
1953
|
|
|
1954
|
+
/* Enum rows: left-align checkbox + label (full-width row); default .st-checkbox-label is centered */
|
|
1955
|
+
.st-enum-filter-options .st-checkbox-label {
|
|
1956
|
+
justify-content: flex-start;
|
|
1957
|
+
width: 100%;
|
|
1958
|
+
}
|
|
1959
|
+
|
|
1922
1960
|
/* Select All checkbox styling */
|
|
1923
1961
|
.st-enum-select-all {
|
|
1924
1962
|
padding-bottom: var(--st-spacing-small);
|
|
@@ -1943,6 +1981,13 @@ input {
|
|
|
1943
1981
|
user-select: none;
|
|
1944
1982
|
}
|
|
1945
1983
|
|
|
1984
|
+
.st-enum-filter-options .st-enum-option-label {
|
|
1985
|
+
flex: 1;
|
|
1986
|
+
min-width: 0;
|
|
1987
|
+
overflow: hidden;
|
|
1988
|
+
text-overflow: ellipsis;
|
|
1989
|
+
}
|
|
1990
|
+
|
|
1946
1991
|
/* No results message */
|
|
1947
1992
|
.st-enum-no-results {
|
|
1948
1993
|
padding: var(--st-spacing-medium);
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* - Dark gray base with lighter text for reduced eye strain
|
|
6
6
|
* - Hover states with subtle brightness changes
|
|
7
7
|
* - Generous padding (12px) for better readability
|
|
8
|
-
* - Rounded corners (
|
|
8
|
+
* - Rounded corners (4px) for a clean, compact appearance
|
|
9
9
|
* - Modern blue accent (#60a5fa) for interactive elements (lighter for dark mode)
|
|
10
10
|
* - High contrast text for accessibility
|
|
11
11
|
* - Lightweight visual hierarchy
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
*/
|
|
15
15
|
.theme-modern-dark {
|
|
16
16
|
/* Layout/Structure variables - Tighter, more compact */
|
|
17
|
-
--st-border-radius:
|
|
17
|
+
--st-border-radius: 4px;
|
|
18
18
|
--st-cell-padding: 12px;
|
|
19
19
|
|
|
20
20
|
/* Spacing variables - Reduced for cleaner look */
|
|
@@ -205,7 +205,7 @@
|
|
|
205
205
|
|
|
206
206
|
/* Cleaner pagination buttons - more compact */
|
|
207
207
|
.theme-modern-dark .st-page-btn {
|
|
208
|
-
border-radius:
|
|
208
|
+
border-radius: 4px;
|
|
209
209
|
font-size: 13px;
|
|
210
210
|
font-weight: 500;
|
|
211
211
|
color: #d1d5db;
|
|
@@ -226,22 +226,10 @@
|
|
|
226
226
|
font-weight: 600;
|
|
227
227
|
}
|
|
228
228
|
|
|
229
|
-
/* Hide buttons beyond the 9th one to prevent overflow */
|
|
230
|
-
.theme-modern-dark .st-page-btn:nth-child(n+10):not(.active) {
|
|
231
|
-
display: none;
|
|
232
|
-
}
|
|
233
|
-
|
|
234
|
-
/* Always show active button and adjacent buttons */
|
|
235
|
-
.theme-modern-dark .st-page-btn.active,
|
|
236
|
-
.theme-modern-dark .st-page-btn.active + .st-page-btn,
|
|
237
|
-
.theme-modern-dark .st-page-btn:has(+ .st-page-btn.active) {
|
|
238
|
-
display: inline-flex;
|
|
239
|
-
}
|
|
240
|
-
|
|
241
229
|
/* Next/Prev buttons */
|
|
242
230
|
.theme-modern-dark .st-next-prev-btn {
|
|
243
231
|
padding: 6px 8px;
|
|
244
|
-
border-radius:
|
|
232
|
+
border-radius: 4px;
|
|
245
233
|
transition: all 0.15s ease;
|
|
246
234
|
margin-left: 4px;
|
|
247
235
|
flex-shrink: 0;
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* - White backgrounds with minimal color variation
|
|
6
6
|
* - Hover states instead of alternating row colors
|
|
7
7
|
* - Generous padding (12px) for better readability
|
|
8
|
-
* - Rounded corners (
|
|
8
|
+
* - Rounded corners (4px) for a clean, compact appearance
|
|
9
9
|
* - Modern blue accent (#3b82f6) for interactive elements
|
|
10
10
|
* - High contrast text (#111827) for accessibility
|
|
11
11
|
* - Lightweight visual hierarchy
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
*/
|
|
15
15
|
.theme-modern-light {
|
|
16
16
|
/* Layout/Structure variables - Tighter, more compact */
|
|
17
|
-
--st-border-radius:
|
|
17
|
+
--st-border-radius: 4px;
|
|
18
18
|
--st-cell-padding: 12px;
|
|
19
19
|
|
|
20
20
|
/* Spacing variables - Reduced for cleaner look */
|
|
@@ -205,7 +205,7 @@
|
|
|
205
205
|
|
|
206
206
|
/* Cleaner pagination buttons - more compact */
|
|
207
207
|
.theme-modern-light .st-page-btn {
|
|
208
|
-
border-radius:
|
|
208
|
+
border-radius: 4px;
|
|
209
209
|
font-size: 13px;
|
|
210
210
|
font-weight: 500;
|
|
211
211
|
color: #374151;
|
|
@@ -226,22 +226,10 @@
|
|
|
226
226
|
font-weight: 600;
|
|
227
227
|
}
|
|
228
228
|
|
|
229
|
-
/* Hide buttons beyond the 9th one to prevent overflow */
|
|
230
|
-
.theme-modern-light .st-page-btn:nth-child(n + 10):not(.active) {
|
|
231
|
-
display: none;
|
|
232
|
-
}
|
|
233
|
-
|
|
234
|
-
/* Always show active button and adjacent buttons */
|
|
235
|
-
.theme-modern-light .st-page-btn.active,
|
|
236
|
-
.theme-modern-light .st-page-btn.active + .st-page-btn,
|
|
237
|
-
.theme-modern-light .st-page-btn:has(+ .st-page-btn.active) {
|
|
238
|
-
display: inline-flex;
|
|
239
|
-
}
|
|
240
|
-
|
|
241
229
|
/* Next/Prev buttons */
|
|
242
230
|
.theme-modern-light .st-next-prev-btn {
|
|
243
231
|
padding: 6px 8px;
|
|
244
|
-
border-radius:
|
|
232
|
+
border-radius: 4px;
|
|
245
233
|
transition: all 0.15s ease;
|
|
246
234
|
margin-left: 4px;
|
|
247
235
|
flex-shrink: 0;
|
|
@@ -0,0 +1,253 @@
|
|
|
1
|
+
/* theme="custom" baseline — same tokens as modern-light so the grid is never
|
|
2
|
+
* missing CSS variables. Structural rules below use var(--st-*) (not hardcoded
|
|
3
|
+
* light colors) so inline tokens from a theme builder survive higher specificity.
|
|
4
|
+
*/
|
|
5
|
+
.theme-custom {
|
|
6
|
+
/* Layout/Structure variables - Tighter, more compact */
|
|
7
|
+
--st-border-radius: 4px;
|
|
8
|
+
--st-cell-padding: 12px;
|
|
9
|
+
|
|
10
|
+
/* Spacing variables - Reduced for cleaner look */
|
|
11
|
+
--st-spacing-small: 4px;
|
|
12
|
+
--st-spacing-medium: 8px;
|
|
13
|
+
|
|
14
|
+
/* Scrollbar variables - Minimal */
|
|
15
|
+
--st-scrollbar-bg-color: #fafafa;
|
|
16
|
+
--st-scrollbar-thumb-color: #d1d5db;
|
|
17
|
+
--st-scrollbar-width: thin;
|
|
18
|
+
|
|
19
|
+
/* Base/Structural colors - Very subtle borders */
|
|
20
|
+
--st-border-color: #f3f4f6;
|
|
21
|
+
--st-footer-background-color: var(--st-white);
|
|
22
|
+
--st-last-group-row-separator-border-color: #e5e7eb;
|
|
23
|
+
|
|
24
|
+
/* Row colors - Clean white background, subtle hover */
|
|
25
|
+
--st-odd-row-background-color: var(--st-white);
|
|
26
|
+
--st-even-row-background-color: var(--st-white);
|
|
27
|
+
--st-hover-row-background-color: #f9fafb;
|
|
28
|
+
--st-selected-row-background-color: #eff6ff;
|
|
29
|
+
|
|
30
|
+
/* Column colors - No alternating columns by default */
|
|
31
|
+
--st-odd-column-background-color: var(--st-white);
|
|
32
|
+
--st-even-column-background-color: var(--st-white);
|
|
33
|
+
|
|
34
|
+
/* Header colors - Minimal, clean header */
|
|
35
|
+
--st-header-background-color: var(--st-white);
|
|
36
|
+
--st-sub-header-background-color: #fafafa;
|
|
37
|
+
--st-header-label-color: #111827;
|
|
38
|
+
--st-header-icon-color: #6b7280;
|
|
39
|
+
|
|
40
|
+
/* Cell colors - Clean, high contrast text */
|
|
41
|
+
--st-cell-color: #111827;
|
|
42
|
+
--st-cell-odd-row-color: #374151;
|
|
43
|
+
--st-edit-cell-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
44
|
+
--st-sub-cell-background-color: #f9fafb;
|
|
45
|
+
--st-sub-cell-hover-background-color: #f3f4f6;
|
|
46
|
+
|
|
47
|
+
/* Selection colors - Subtle blue tint */
|
|
48
|
+
--st-selected-cell-background-color: #dbeafe;
|
|
49
|
+
--st-selected-first-cell-background-color: #eff6ff;
|
|
50
|
+
--st-selected-cell-color: #111827;
|
|
51
|
+
--st-selected-first-cell-color: #111827;
|
|
52
|
+
--st-selected-sub-cell-background-color: #bfdbfe;
|
|
53
|
+
--st-selected-sub-cell-color: #111827;
|
|
54
|
+
--st-dragging-background-color: #f3f4f6;
|
|
55
|
+
--st-dragging-sub-header-background-color: #e5e7eb;
|
|
56
|
+
|
|
57
|
+
/* Interactive element colors */
|
|
58
|
+
--st-resize-handle-color: #e5e7eb;
|
|
59
|
+
--st-resize-handle-selected-color: #3b82f6;
|
|
60
|
+
|
|
61
|
+
/* Border colors - Modern blue accent */
|
|
62
|
+
--st-selected-border-color: #3b82f6;
|
|
63
|
+
--st-editable-cell-focus-border-color: #3b82f6;
|
|
64
|
+
--st-focus-ring-color: #3b82f6;
|
|
65
|
+
|
|
66
|
+
/* Button colors - Clean, minimal */
|
|
67
|
+
--st-button-hover-background-color: #f3f4f6;
|
|
68
|
+
--st-button-active-background-color: #3b82f6;
|
|
69
|
+
--st-next-prev-btn-color: #6b7280;
|
|
70
|
+
--st-next-prev-btn-disabled-color: #d1d5db;
|
|
71
|
+
--st-page-btn-color: #6b7280;
|
|
72
|
+
--st-page-btn-hover-background-color: #f3f4f6;
|
|
73
|
+
|
|
74
|
+
/* Checkbox colors */
|
|
75
|
+
--st-checkbox-checked-background-color: #3b82f6;
|
|
76
|
+
--st-checkbox-checked-border-color: #3b82f6;
|
|
77
|
+
--st-checkbox-border-color: #d1d5db;
|
|
78
|
+
|
|
79
|
+
/* Column editor colors */
|
|
80
|
+
--st-column-editor-background-color: var(--st-white);
|
|
81
|
+
--st-column-editor-popout-background-color: var(--st-white);
|
|
82
|
+
--st-column-editor-text-color: #6b7280;
|
|
83
|
+
|
|
84
|
+
/* Form element colors */
|
|
85
|
+
--st-datepicker-weekday-color: #6b7280;
|
|
86
|
+
--st-datepicker-other-month-color: #d1d5db;
|
|
87
|
+
--st-filter-button-disabled-background-color: #f3f4f6;
|
|
88
|
+
--st-filter-button-disabled-text-color: #9ca3af;
|
|
89
|
+
|
|
90
|
+
/* Flash/Animation colors */
|
|
91
|
+
--st-cell-flash-color: #dbeafe;
|
|
92
|
+
--st-copy-flash-color: #3b82f6;
|
|
93
|
+
--st-warning-flash-color: #fca5a5;
|
|
94
|
+
|
|
95
|
+
/* Tooltip variables */
|
|
96
|
+
--st-tooltip-background-color: #1f2937;
|
|
97
|
+
--st-tooltip-text-color: var(--st-white);
|
|
98
|
+
--st-tooltip-border-radius: 6px;
|
|
99
|
+
--st-tooltip-padding: 6px 10px;
|
|
100
|
+
--st-tooltip-font-size: 12px;
|
|
101
|
+
--st-tooltip-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
102
|
+
|
|
103
|
+
/* Header selection colors */
|
|
104
|
+
--st-header-selected-background-color: #3b82f6;
|
|
105
|
+
--st-header-selected-label-color: var(--st-white);
|
|
106
|
+
--st-header-selected-icon-color: var(--st-white);
|
|
107
|
+
--st-header-highlight-indicator-color: #dbeafe;
|
|
108
|
+
--st-selection-highlight-indicator-color: #f3f4f6;
|
|
109
|
+
|
|
110
|
+
/* Utility colors */
|
|
111
|
+
--st-loading-skeleton-bg-color: #f3f4f6;
|
|
112
|
+
--st-chart-color: #3b82f6;
|
|
113
|
+
--st-chart-fill-color: #dbeafe;
|
|
114
|
+
|
|
115
|
+
/* Drag and drop colors */
|
|
116
|
+
--st-drag-separator-color: #3b82f6;
|
|
117
|
+
|
|
118
|
+
/* Body background for state rows */
|
|
119
|
+
--st-body-background-color: var(--st-white);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
/* Custom theme structural overrides — colors from tokens only */
|
|
123
|
+
.theme-custom .st-wrapper {
|
|
124
|
+
border: var(--st-border-width) solid var(--st-border-color);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
/* Subtle header border */
|
|
128
|
+
.theme-custom .st-header-pinned-left,
|
|
129
|
+
.theme-custom .st-header-main,
|
|
130
|
+
.theme-custom .st-header-pinned-right {
|
|
131
|
+
border-bottom: var(--st-border-width) solid var(--st-border-color);
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
/* Remove heavy borders on pinned sections */
|
|
135
|
+
.theme-custom .st-header-pinned-left,
|
|
136
|
+
.theme-custom .st-body-pinned-left {
|
|
137
|
+
border-right: var(--st-border-width) solid var(--st-border-color);
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.theme-custom .st-header-pinned-right,
|
|
141
|
+
.theme-custom .st-body-pinned-right {
|
|
142
|
+
border-left: var(--st-border-width) solid var(--st-border-color);
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
/* Cleaner row separators */
|
|
146
|
+
.theme-custom .st-row-separator {
|
|
147
|
+
background-color: var(--st-hover-row-background-color);
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
/* Lighter header cell styling */
|
|
151
|
+
.theme-custom .st-header-cell {
|
|
152
|
+
font-weight: 500;
|
|
153
|
+
font-size: 14px;
|
|
154
|
+
color: var(--st-header-icon-color);
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
/* Cleaner cell text */
|
|
158
|
+
.theme-custom .st-cell-content {
|
|
159
|
+
font-size: 14px;
|
|
160
|
+
color: var(--st-cell-color);
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
/* Subtle hover effect */
|
|
164
|
+
.theme-custom .st-row.hovered {
|
|
165
|
+
transition: background-color 0.15s ease;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
/* Footer uses the same tokens as the rest of the table (not forced light) */
|
|
169
|
+
.theme-custom .st-footer {
|
|
170
|
+
border-top: var(--st-border-width) solid var(--st-border-color);
|
|
171
|
+
background-color: var(--st-footer-background-color);
|
|
172
|
+
padding: 12px 16px;
|
|
173
|
+
gap: 12px;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
/* Footer text styling */
|
|
177
|
+
.theme-custom .st-footer-results-text {
|
|
178
|
+
color: var(--st-cell-color);
|
|
179
|
+
font-size: 14px;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
/* Footer pagination container - hide extra buttons on smaller screens */
|
|
183
|
+
.theme-custom .st-footer-pagination {
|
|
184
|
+
gap: 2px;
|
|
185
|
+
flex-wrap: nowrap;
|
|
186
|
+
overflow: hidden;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
/* Pagination ellipsis */
|
|
190
|
+
.theme-custom .st-page-ellipsis {
|
|
191
|
+
color: var(--st-page-btn-color);
|
|
192
|
+
font-weight: 400;
|
|
193
|
+
padding: 0 4px;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
/* Cleaner pagination buttons - more compact */
|
|
197
|
+
.theme-custom .st-page-btn {
|
|
198
|
+
border-radius: 4px;
|
|
199
|
+
font-size: 13px;
|
|
200
|
+
font-weight: 500;
|
|
201
|
+
color: var(--st-page-btn-color);
|
|
202
|
+
padding: 6px 8px;
|
|
203
|
+
min-width: 36px;
|
|
204
|
+
transition: all 0.15s ease;
|
|
205
|
+
margin-right: 0;
|
|
206
|
+
flex-shrink: 0;
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
.theme-custom .st-page-btn:hover {
|
|
210
|
+
background-color: var(--st-page-btn-hover-background-color);
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
.theme-custom .st-page-btn.active {
|
|
214
|
+
background-color: var(--st-button-active-background-color);
|
|
215
|
+
color: var(--st-header-selected-label-color);
|
|
216
|
+
font-weight: 600;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
/* Next/Prev buttons */
|
|
220
|
+
.theme-custom .st-next-prev-btn {
|
|
221
|
+
padding: 6px 8px;
|
|
222
|
+
border-radius: 4px;
|
|
223
|
+
transition: all 0.15s ease;
|
|
224
|
+
margin-left: 4px;
|
|
225
|
+
flex-shrink: 0;
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
.theme-custom .st-next-prev-btn:not(.disabled):hover {
|
|
229
|
+
background-color: var(--st-page-btn-hover-background-color);
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
/* Modern scrollbar */
|
|
233
|
+
.theme-custom .st-horizontal-scrollbar-container {
|
|
234
|
+
border-top: var(--st-border-width) solid var(--st-border-color);
|
|
235
|
+
background-color: var(--st-scrollbar-bg-color);
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
/* Cleaner group headers */
|
|
239
|
+
.theme-custom .st-group-header {
|
|
240
|
+
border-bottom: var(--st-border-width) solid var(--st-border-color);
|
|
241
|
+
font-weight: 500;
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
/* Modern checkbox styling */
|
|
245
|
+
.theme-custom .st-checkbox-custom {
|
|
246
|
+
border-radius: 4px;
|
|
247
|
+
border: 1.5px solid var(--st-checkbox-border-color);
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
.theme-custom .st-checkbox-custom.st-checked {
|
|
251
|
+
background-color: var(--st-checkbox-checked-background-color);
|
|
252
|
+
border-color: var(--st-checkbox-checked-border-color);
|
|
253
|
+
}
|
|
@@ -1,78 +0,0 @@
|
|
|
1
|
-
import UpdateDataProps from "./UpdateCellProps";
|
|
2
|
-
import HeaderObject, { Accessor } from "./HeaderObject";
|
|
3
|
-
import TableRow from "./TableRow";
|
|
4
|
-
import SortColumn, { SortDirection } from "./SortColumn";
|
|
5
|
-
import { TableFilterState, FilterCondition } from "./FilterTypes";
|
|
6
|
-
import type { PinnedSectionsState } from "./PinnedSectionsState";
|
|
7
|
-
interface SetHeaderRenameProps {
|
|
8
|
-
accessor: Accessor;
|
|
9
|
-
}
|
|
10
|
-
interface ExportToCSVProps {
|
|
11
|
-
filename?: string;
|
|
12
|
-
}
|
|
13
|
-
type TableRefType = {
|
|
14
|
-
updateData: (props: UpdateDataProps) => void;
|
|
15
|
-
setHeaderRename: (props: SetHeaderRenameProps) => void;
|
|
16
|
-
/** Returns the currently visible rows (e.g., current page when paginated) */
|
|
17
|
-
getVisibleRows: () => TableRow[];
|
|
18
|
-
/** Returns all rows (flattened, including nested/grouped rows) */
|
|
19
|
-
getAllRows: () => TableRow[];
|
|
20
|
-
/** Returns the table's header/column definitions */
|
|
21
|
-
getHeaders: () => HeaderObject[];
|
|
22
|
-
exportToCSV: (props?: ExportToCSVProps) => void;
|
|
23
|
-
/** Returns the current sort state */
|
|
24
|
-
getSortState: () => SortColumn | null;
|
|
25
|
-
/** Applies a new sort state to the table. Pass null to clear sort. Direction defaults to cycling through asc -> desc -> null */
|
|
26
|
-
applySortState: (props?: {
|
|
27
|
-
accessor: Accessor;
|
|
28
|
-
direction?: SortDirection;
|
|
29
|
-
}) => Promise<void>;
|
|
30
|
-
/** Ordered root accessors per pin section (left, main/unpinned, right) */
|
|
31
|
-
getPinnedState: () => PinnedSectionsState;
|
|
32
|
-
/** Reorder root columns and set pinned flags; lists must include every root accessor exactly once. Essential order is clamped per section. */
|
|
33
|
-
applyPinnedState: (state: PinnedSectionsState) => Promise<void>;
|
|
34
|
-
/** Returns the current filter state */
|
|
35
|
-
getFilterState: () => TableFilterState;
|
|
36
|
-
/** Applies a filter to a specific column */
|
|
37
|
-
applyFilter: (filter: FilterCondition) => Promise<void>;
|
|
38
|
-
/** Clears a filter for a specific column */
|
|
39
|
-
clearFilter: (accessor: Accessor) => Promise<void>;
|
|
40
|
-
/** Clears all filters */
|
|
41
|
-
clearAllFilters: () => Promise<void>;
|
|
42
|
-
/** Returns the current page number (1-indexed) */
|
|
43
|
-
getCurrentPage: () => number;
|
|
44
|
-
/** Returns the total number of pages */
|
|
45
|
-
getTotalPages: () => number;
|
|
46
|
-
/** Sets the current page (1-indexed) and triggers onPageChange callback */
|
|
47
|
-
setPage: (page: number) => Promise<void>;
|
|
48
|
-
/** Expand all rows at all depths */
|
|
49
|
-
expandAll: () => void;
|
|
50
|
-
/** Collapse all rows at all depths */
|
|
51
|
-
collapseAll: () => void;
|
|
52
|
-
/** Expand all rows at a specific depth (0-indexed) */
|
|
53
|
-
expandDepth: (depth: number) => void;
|
|
54
|
-
/** Collapse all rows at a specific depth (0-indexed) */
|
|
55
|
-
collapseDepth: (depth: number) => void;
|
|
56
|
-
/** Toggle expansion for a specific depth */
|
|
57
|
-
toggleDepth: (depth: number) => void;
|
|
58
|
-
/** Set which depths are expanded (replaces current state) */
|
|
59
|
-
setExpandedDepths: (depths: Set<number>) => void;
|
|
60
|
-
/** Get currently expanded depths */
|
|
61
|
-
getExpandedDepths: () => Set<number>;
|
|
62
|
-
/** Get the grouping property name for a depth index */
|
|
63
|
-
getGroupingProperty: (depth: number) => Accessor | undefined;
|
|
64
|
-
/** Get the depth index for a grouping property name */
|
|
65
|
-
getGroupingDepth: (property: Accessor) => number;
|
|
66
|
-
/** Toggle the column editor menu. Pass true to open, false to close, or no argument to toggle. Only works if editColumns prop is enabled. */
|
|
67
|
-
toggleColumnEditor: (open?: boolean) => void;
|
|
68
|
-
/** Apply column visibility changes. Pass an object with column accessors as keys and boolean visibility as values. */
|
|
69
|
-
applyColumnVisibility: (visibility: {
|
|
70
|
-
[accessor: string]: boolean;
|
|
71
|
-
}) => Promise<void>;
|
|
72
|
-
/** Reset columns to default order and visibility (restores defaultHeaders state). */
|
|
73
|
-
resetColumns: () => void;
|
|
74
|
-
/** Set the quick filter text programmatically. Triggers the onChange callback if provided in quickFilter config. */
|
|
75
|
-
setQuickFilter: (text: string) => void;
|
|
76
|
-
};
|
|
77
|
-
export default TableRefType;
|
|
78
|
-
export type { SetHeaderRenameProps, ExportToCSVProps };
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { SimpleTableConfig } from "../types/SimpleTableConfig";
|
|
2
|
-
/**
|
|
3
|
-
* Checks for deprecated props and logs console errors with helpful migration messages
|
|
4
|
-
* @param props - The SimpleTable props to check
|
|
5
|
-
*/
|
|
6
|
-
export declare const checkDeprecatedProps: (props: SimpleTableConfig) => void;
|
|
7
|
-
/**
|
|
8
|
-
* Export the list of deprecated props for testing or documentation purposes
|
|
9
|
-
*/
|
|
10
|
-
export declare const getDeprecatedPropNames: () => string[];
|
|
@@ -1,78 +0,0 @@
|
|
|
1
|
-
import UpdateDataProps from "./UpdateCellProps";
|
|
2
|
-
import HeaderObject, { Accessor } from "./HeaderObject";
|
|
3
|
-
import TableRow from "./TableRow";
|
|
4
|
-
import SortColumn, { SortDirection } from "./SortColumn";
|
|
5
|
-
import { TableFilterState, FilterCondition } from "./FilterTypes";
|
|
6
|
-
import type { PinnedSectionsState } from "./PinnedSectionsState";
|
|
7
|
-
interface SetHeaderRenameProps {
|
|
8
|
-
accessor: Accessor;
|
|
9
|
-
}
|
|
10
|
-
interface ExportToCSVProps {
|
|
11
|
-
filename?: string;
|
|
12
|
-
}
|
|
13
|
-
type TableRefType = {
|
|
14
|
-
updateData: (props: UpdateDataProps) => void;
|
|
15
|
-
setHeaderRename: (props: SetHeaderRenameProps) => void;
|
|
16
|
-
/** Returns the currently visible rows (e.g., current page when paginated) */
|
|
17
|
-
getVisibleRows: () => TableRow[];
|
|
18
|
-
/** Returns all rows (flattened, including nested/grouped rows) */
|
|
19
|
-
getAllRows: () => TableRow[];
|
|
20
|
-
/** Returns the table's header/column definitions */
|
|
21
|
-
getHeaders: () => HeaderObject[];
|
|
22
|
-
exportToCSV: (props?: ExportToCSVProps) => void;
|
|
23
|
-
/** Returns the current sort state */
|
|
24
|
-
getSortState: () => SortColumn | null;
|
|
25
|
-
/** Applies a new sort state to the table. Pass null to clear sort. Direction defaults to cycling through asc -> desc -> null */
|
|
26
|
-
applySortState: (props?: {
|
|
27
|
-
accessor: Accessor;
|
|
28
|
-
direction?: SortDirection;
|
|
29
|
-
}) => Promise<void>;
|
|
30
|
-
/** Ordered root accessors per pin section (left, main/unpinned, right) */
|
|
31
|
-
getPinnedState: () => PinnedSectionsState;
|
|
32
|
-
/** Reorder root columns and set pinned flags; lists must include every root accessor exactly once. Essential order is clamped per section. */
|
|
33
|
-
applyPinnedState: (state: PinnedSectionsState) => Promise<void>;
|
|
34
|
-
/** Returns the current filter state */
|
|
35
|
-
getFilterState: () => TableFilterState;
|
|
36
|
-
/** Applies a filter to a specific column */
|
|
37
|
-
applyFilter: (filter: FilterCondition) => Promise<void>;
|
|
38
|
-
/** Clears a filter for a specific column */
|
|
39
|
-
clearFilter: (accessor: Accessor) => Promise<void>;
|
|
40
|
-
/** Clears all filters */
|
|
41
|
-
clearAllFilters: () => Promise<void>;
|
|
42
|
-
/** Returns the current page number (1-indexed) */
|
|
43
|
-
getCurrentPage: () => number;
|
|
44
|
-
/** Returns the total number of pages */
|
|
45
|
-
getTotalPages: () => number;
|
|
46
|
-
/** Sets the current page (1-indexed) and triggers onPageChange callback */
|
|
47
|
-
setPage: (page: number) => Promise<void>;
|
|
48
|
-
/** Expand all rows at all depths */
|
|
49
|
-
expandAll: () => void;
|
|
50
|
-
/** Collapse all rows at all depths */
|
|
51
|
-
collapseAll: () => void;
|
|
52
|
-
/** Expand all rows at a specific depth (0-indexed) */
|
|
53
|
-
expandDepth: (depth: number) => void;
|
|
54
|
-
/** Collapse all rows at a specific depth (0-indexed) */
|
|
55
|
-
collapseDepth: (depth: number) => void;
|
|
56
|
-
/** Toggle expansion for a specific depth */
|
|
57
|
-
toggleDepth: (depth: number) => void;
|
|
58
|
-
/** Set which depths are expanded (replaces current state) */
|
|
59
|
-
setExpandedDepths: (depths: Set<number>) => void;
|
|
60
|
-
/** Get currently expanded depths */
|
|
61
|
-
getExpandedDepths: () => Set<number>;
|
|
62
|
-
/** Get the grouping property name for a depth index */
|
|
63
|
-
getGroupingProperty: (depth: number) => Accessor | undefined;
|
|
64
|
-
/** Get the depth index for a grouping property name */
|
|
65
|
-
getGroupingDepth: (property: Accessor) => number;
|
|
66
|
-
/** Toggle the column editor menu. Pass true to open, false to close, or no argument to toggle. Only works if editColumns prop is enabled. */
|
|
67
|
-
toggleColumnEditor: (open?: boolean) => void;
|
|
68
|
-
/** Apply column visibility changes. Pass an object with column accessors as keys and boolean visibility as values. */
|
|
69
|
-
applyColumnVisibility: (visibility: {
|
|
70
|
-
[accessor: string]: boolean;
|
|
71
|
-
}) => Promise<void>;
|
|
72
|
-
/** Reset columns to default order and visibility (restores defaultHeaders state). */
|
|
73
|
-
resetColumns: () => void;
|
|
74
|
-
/** Set the quick filter text programmatically. Triggers the onChange callback if provided in quickFilter config. */
|
|
75
|
-
setQuickFilter: (text: string) => void;
|
|
76
|
-
};
|
|
77
|
-
export default TableRefType;
|
|
78
|
-
export type { SetHeaderRenameProps, ExportToCSVProps };
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { SimpleTableConfig } from "../types/SimpleTableConfig";
|
|
2
|
-
/**
|
|
3
|
-
* Checks for deprecated props and logs console errors with helpful migration messages
|
|
4
|
-
* @param props - The SimpleTable props to check
|
|
5
|
-
*/
|
|
6
|
-
export declare const checkDeprecatedProps: (props: SimpleTableConfig) => void;
|
|
7
|
-
/**
|
|
8
|
-
* Export the list of deprecated props for testing or documentation purposes
|
|
9
|
-
*/
|
|
10
|
-
export declare const getDeprecatedPropNames: () => string[];
|