simple-table-core 3.0.0-beta.9 → 3.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (97) hide show
  1. package/README.md +20 -17
  2. package/dist/cjs/index.js +1 -1
  3. package/dist/cjs/src/core/SimpleTableVanilla.d.ts +2 -0
  4. package/dist/cjs/src/core/initialization/TableInitializer.d.ts +4 -1
  5. package/dist/cjs/src/core/rendering/RenderOrchestrator.d.ts +7 -0
  6. package/dist/cjs/src/core/rendering/TableRenderer.d.ts +1 -0
  7. package/dist/cjs/src/index.d.ts +3 -2
  8. package/dist/cjs/src/managers/DimensionManager.d.ts +3 -0
  9. package/dist/cjs/src/managers/SelectionManager/SelectionManager.d.ts +7 -0
  10. package/dist/cjs/src/managers/SelectionManager/mouseUtils.d.ts +2 -1
  11. package/dist/cjs/src/managers/SelectionManager/types.d.ts +6 -0
  12. package/dist/cjs/src/types/ColumnEditorConfig.d.ts +5 -2
  13. package/dist/cjs/src/types/ColumnEditorCustomRendererProps.d.ts +14 -0
  14. package/dist/cjs/src/types/CustomTheme.d.ts +2 -0
  15. package/dist/cjs/src/types/HeaderObject.d.ts +1 -1
  16. package/dist/cjs/src/types/SimpleTableConfig.d.ts +0 -2
  17. package/dist/cjs/src/types/SimpleTableProps.d.ts +0 -13
  18. package/dist/cjs/src/utils/asRows.d.ts +7 -0
  19. package/dist/cjs/src/utils/bodyCell/expansion.d.ts +9 -1
  20. package/dist/cjs/src/utils/columnEditor/createColumnEditor.d.ts +0 -1
  21. package/dist/cjs/src/utils/columnEditor/createColumnEditorPopout.d.ts +0 -1
  22. package/dist/cjs/src/utils/columnEditor/createColumnEditorRow.d.ts +8 -1
  23. package/dist/cjs/src/utils/filters/createDropdown.d.ts +17 -0
  24. package/dist/cjs/src/utils/filters/createFilterActions.d.ts +1 -0
  25. package/dist/cjs/src/utils/headerCell/collapsing.d.ts +1 -1
  26. package/dist/cjs/src/utils/headerCell/eventTracking.d.ts +3 -0
  27. package/dist/cjs/src/utils/headerCell/resizing.d.ts +1 -1
  28. package/dist/cjs/src/utils/headerCell/styling.d.ts +3 -3
  29. package/dist/cjs/src/utils/headerCell/types.d.ts +2 -0
  30. package/dist/cjs/src/utils/headerWidthUtils.d.ts +4 -2
  31. package/dist/cjs/src/utils/horizontalScrollbarRenderer.d.ts +5 -0
  32. package/dist/cjs/src/utils/pinnedColumnUtils.d.ts +5 -1
  33. package/dist/cjs/src/utils/resizeUtils/index.d.ts +18 -1
  34. package/dist/cjs/src/utils/rowSeparatorRenderer.d.ts +4 -0
  35. package/dist/cjs/stories/SimpleTable.stories.d.ts +1 -0
  36. package/dist/cjs/stories/examples/infrastructure/InfrastructureExample.d.ts +1 -0
  37. package/dist/cjs/stories/examples/spreadsheet/SpreadsheetExample.d.ts +4 -0
  38. package/dist/cjs/stories/tests/07-RowSelectionTests.stories.d.ts +1 -0
  39. package/dist/cjs/stories/tests/10-ColumnPinningTests.stories.d.ts +9 -0
  40. package/dist/cjs/stories/tests/13-ColumnResizeTests.stories.d.ts +39 -0
  41. package/dist/cjs/stories/tests/37-TableRefMethodsTests.stories.d.ts +1 -1
  42. package/dist/cjs/stories/tests/39-AutoExpandColumnsTests.stories.d.ts +127 -0
  43. package/dist/cjs/stories/tests/testUtils.d.ts +2 -0
  44. package/dist/cjs/styles.css +1 -1
  45. package/dist/index.es.js +1 -1
  46. package/dist/src/core/SimpleTableVanilla.d.ts +2 -0
  47. package/dist/src/core/initialization/TableInitializer.d.ts +4 -1
  48. package/dist/src/core/rendering/RenderOrchestrator.d.ts +7 -0
  49. package/dist/src/core/rendering/TableRenderer.d.ts +1 -0
  50. package/dist/src/index.d.ts +3 -2
  51. package/dist/src/managers/DimensionManager.d.ts +3 -0
  52. package/dist/src/managers/SelectionManager/SelectionManager.d.ts +7 -0
  53. package/dist/src/managers/SelectionManager/mouseUtils.d.ts +2 -1
  54. package/dist/src/managers/SelectionManager/types.d.ts +6 -0
  55. package/dist/src/types/ColumnEditorConfig.d.ts +5 -2
  56. package/dist/src/types/ColumnEditorCustomRendererProps.d.ts +14 -0
  57. package/dist/src/types/CustomTheme.d.ts +2 -0
  58. package/dist/src/types/HeaderObject.d.ts +1 -1
  59. package/dist/src/types/SimpleTableConfig.d.ts +0 -2
  60. package/dist/src/types/SimpleTableProps.d.ts +0 -13
  61. package/dist/src/utils/asRows.d.ts +7 -0
  62. package/dist/src/utils/bodyCell/expansion.d.ts +9 -1
  63. package/dist/src/utils/columnEditor/createColumnEditor.d.ts +0 -1
  64. package/dist/src/utils/columnEditor/createColumnEditorPopout.d.ts +0 -1
  65. package/dist/src/utils/columnEditor/createColumnEditorRow.d.ts +8 -1
  66. package/dist/src/utils/filters/createDropdown.d.ts +17 -0
  67. package/dist/src/utils/filters/createFilterActions.d.ts +1 -0
  68. package/dist/src/utils/headerCell/collapsing.d.ts +1 -1
  69. package/dist/src/utils/headerCell/eventTracking.d.ts +3 -0
  70. package/dist/src/utils/headerCell/resizing.d.ts +1 -1
  71. package/dist/src/utils/headerCell/styling.d.ts +3 -3
  72. package/dist/src/utils/headerCell/types.d.ts +2 -0
  73. package/dist/src/utils/headerWidthUtils.d.ts +4 -2
  74. package/dist/src/utils/horizontalScrollbarRenderer.d.ts +5 -0
  75. package/dist/src/utils/pinnedColumnUtils.d.ts +5 -1
  76. package/dist/src/utils/resizeUtils/index.d.ts +18 -1
  77. package/dist/src/utils/rowSeparatorRenderer.d.ts +4 -0
  78. package/dist/stories/SimpleTable.stories.d.ts +1 -0
  79. package/dist/stories/examples/infrastructure/InfrastructureExample.d.ts +1 -0
  80. package/dist/stories/examples/spreadsheet/SpreadsheetExample.d.ts +4 -0
  81. package/dist/stories/tests/07-RowSelectionTests.stories.d.ts +1 -0
  82. package/dist/stories/tests/10-ColumnPinningTests.stories.d.ts +9 -0
  83. package/dist/stories/tests/13-ColumnResizeTests.stories.d.ts +39 -0
  84. package/dist/stories/tests/37-TableRefMethodsTests.stories.d.ts +1 -1
  85. package/dist/stories/tests/39-AutoExpandColumnsTests.stories.d.ts +127 -0
  86. package/dist/stories/tests/testUtils.d.ts +2 -0
  87. package/dist/styles.css +1 -1
  88. package/package.json +2 -2
  89. package/src/styles/all-themes.css +1 -0
  90. package/src/styles/base.css +61 -16
  91. package/src/styles/themes/modern-dark.css +4 -16
  92. package/src/styles/themes/modern-light.css +4 -16
  93. package/src/styles/themes/theme-custom.css +253 -0
  94. package/dist/cjs/src/types/TableRefType.d.ts +0 -78
  95. package/dist/cjs/src/utils/deprecatedPropsWarnings.d.ts +0 -10
  96. package/dist/src/types/TableRefType.d.ts +0 -78
  97. package/dist/src/utils/deprecatedPropsWarnings.d.ts +0 -10
@@ -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: 100%;
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
- /* Position variants */
1493
- .st-dropdown-bottom-left {
1494
- margin-top: 4px;
1495
- }
1496
-
1497
- .st-dropdown-bottom-right {
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
- .st-dropdown-top-left {
1502
- margin-bottom: 4px;
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-bottom: 4px;
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: -2px;
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 (8px) for a softer appearance
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: 8px;
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: 6px;
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: 6px;
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 (8px) for a softer appearance
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: 8px;
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: 6px;
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: 6px;
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[];