@guiexpert/table 1.0.13 → 1.1.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.
Files changed (23) hide show
  1. package/README.md +10 -11
  2. package/css/main.css +27 -28
  3. package/css/table-color-vars.css +27 -28
  4. package/index.cjs +40 -40
  5. package/index.d.ts +1 -0
  6. package/index.js +1172 -1119
  7. package/lib/table/data/common/checkbox-column-def.d.ts +1 -0
  8. package/lib/table/data/common/event/input/table-cell-update-event.d.ts +6 -1
  9. package/lib/table/data/common/event/input/table-cell-update-event.if.d.ts +3 -0
  10. package/lib/table/data/common/tree-row-if.d.ts +3 -3
  11. package/lib/table/data/common/tree-row.d.ts +1 -0
  12. package/lib/table/data/tablemodel/areamodel/area-model-tree.d.ts +8 -6
  13. package/lib/table/data/tablemodel/areamodel/area-model.if.d.ts +1 -1
  14. package/lib/table/factory/tree-factory.d.ts +4 -4
  15. package/lib/table/instanceof-workaround.d.ts +3 -0
  16. package/lib/table/render-scope.d.ts +5 -1
  17. package/lib/table/service/convenience-dom.service.d.ts +1 -0
  18. package/lib/table/service/dom-service.if.d.ts +1 -0
  19. package/lib/table/service/simple-dom-service.d.ts +1 -0
  20. package/lib/table/service/tree-row.service.d.ts +3 -3
  21. package/lib/table/table-api.d.ts +1 -1
  22. package/lib/table/table-scope.d.ts +2 -1
  23. package/package.json +7 -2
package/README.md CHANGED
@@ -13,7 +13,7 @@ This is the UI-agnostic table component for your next web app. 😊
13
13
  - Handle large datasets easily
14
14
  - Excellent performance for large tables by vertical and horizontal virtual scrolling
15
15
  - Fully-featured (advanced sorting and filtering)
16
- - Highly customizable data grid
16
+ - Highly customizable orderData grid
17
17
  - Outstanding performance
18
18
  - No third-party dependencies
19
19
  - UI-agnostic
@@ -77,16 +77,15 @@ Finally, call firstInit() at least once.
77
77
  In this example, you will see the plain TS version. For plain JS, remove ': TableModelIf'.
78
78
 
79
79
  ```
80
- const tableModel: TableModelIf = TableModelFactory
81
- .createByArrayOfArraysParams<any>(param: {
82
- columnLabels: [
83
- ['Header 1', 'Header 2']
84
- ],
85
- data: [
86
- ['Text 1a', 'Text 2a'],
87
- ['Text 1b', 'Text 2b'],
88
- ]
89
- };
80
+ const tableModel: TableModelIf = TableFactory.createTableModel({
81
+ headerData: [
82
+ ['Header 1', 'Header 2']
83
+ ],
84
+ bodyData: [
85
+ ['Text 1a', 'Text 2a'],
86
+ ['Text 1b', 'Text 2b'],
87
+ ]
88
+ });
90
89
 
91
90
  const ele = document.querySelector(".container-div") as HTMLDivElement;
92
91
 
package/css/main.css CHANGED
@@ -130,8 +130,7 @@
130
130
  .ge-table-cell-editor-input:focus-within {
131
131
  border: none;
132
132
  }
133
- html,
134
- :root [data-theme= "light"] {
133
+ html, html[data-theme="light"] {
135
134
  --ge-table-bg: #fff;
136
135
  --ge-table-header-west-bg: var(--ge-table-header-center-bg);
137
136
  --ge-table-header-center-bg: rgba(233, 233, 233, 0.5);
@@ -216,35 +215,35 @@ html,
216
215
 
217
216
 
218
217
 
219
- :root [data-theme= "dark"] {
220
- --ge-table-bg: #000;
221
- --ge-table-header-west-bg: oklch(0% 0 0);
222
- --ge-table-header-center-bg: oklch(0% 0 0);
223
- --ge-table-header-east-bg: oklch(0% 0 0);
218
+ html[data-theme="dark"] {
219
+ --ge-table-bg: #111827;
220
+ --ge-table-header-west-bg: #111827;
221
+ --ge-table-header-center-bg: #111827;
222
+ --ge-table-header-east-bg: #111827;
224
223
  --ge-table-header-west-text: oklch(100% 0 0);
225
224
  --ge-table-header-center-text: oklch(100% 0 0);
226
225
  --ge-table-header-east-text: oklch(100% 0 0);
227
- --ge-table-header-west-horizontal-border: oklch(30% 0 0);
226
+ --ge-table-header-west-horizontal-border: #313641;
228
227
  --ge-table-header-west-vertical-border: oklch(32% 0 0);
229
- --ge-table-header-center-horizontal-border: oklch(30% 0 0);
228
+ --ge-table-header-center-horizontal-border: #313641;
230
229
  --ge-table-header-center-vertical-border: oklch(32% 0 0);
231
- --ge-table-header-east-horizontal-border: oklch(30% 0 0);
230
+ --ge-table-header-east-horizontal-border: #313641;
232
231
  --ge-table-header-east-vertical-border: oklch(32% 0 0);
233
- --ge-table-body-west-bg: oklch(0% 0 0);
234
- --ge-table-body-center-bg: oklch(0% 0 0);
235
- --ge-table-body-east-bg: oklch(0% 0 0);
232
+ --ge-table-body-west-bg: #23272e;
233
+ --ge-table-body-center-bg: #23272e55;
234
+ --ge-table-body-east-bg: #23272e;
236
235
  --ge-table-body-west-text: oklch(100% 0 0);
237
236
  --ge-table-body-center-text: oklch(100% 0 0);
238
237
  --ge-table-body-east-text: oklch(100% 0 0);
239
- --ge-table-body-west-horizontal-border: oklch(30% 0 0);
238
+ --ge-table-body-west-horizontal-border: #313641;
240
239
  --ge-table-body-west-vertical-border: oklch(32% 0 0);
241
- --ge-table-body-center-horizontal-border: oklch(30% 0 0);
240
+ --ge-table-body-center-horizontal-border: #313641;
242
241
  --ge-table-body-center-vertical-border: oklch(32% 0 0);
243
- --ge-table-body-east-horizontal-border: oklch(30% 0 0);
242
+ --ge-table-body-east-horizontal-border: #313641;
244
243
  --ge-table-body-east-vertical-border: oklch(32% 0 0);
245
- --ge-table-footer-west-bg: oklch(0% 0 0);
246
- --ge-table-footer-center-bg: oklch(0% 0 0);
247
- --ge-table-footer-east-bg: oklch(0% 0 0);
244
+ --ge-table-footer-west-bg: #111827;
245
+ --ge-table-footer-center-bg: #111827;
246
+ --ge-table-footer-east-bg: #111827;
248
247
  --ge-table-footer-west-text: var(--ge-table-header-center-text);;
249
248
  --ge-table-footer-center-text: var(--ge-table-header-center-text);;
250
249
  --ge-table-footer-east-text: var(--ge-table-header-center-text);;
@@ -255,12 +254,12 @@ html,
255
254
  --ge-table-footer-east-horizontal-border: oklch(30% 0 0);
256
255
  --ge-table-footer-east-vertical-border: oklch(32% 0 0);
257
256
  --ge-table-border: oklch(32% 0 0);
258
- --ge-table-row-odd-bg: oklch(0% 0 0);
259
- --ge-table-row-even-bg: oklch(0% 0 0);
260
- --ge-table-column-odd-bg: oklch(0% 0 0);
261
- --ge-table-column-even-bg: oklch(0% 0 0);
262
- --ge-table-hover-column-bg: oklch(0% 0 0);
263
- --ge-table-hover-row-bg: oklch(0% 0 0);
257
+ --ge-table-row-odd-bg: #11151F55;
258
+ --ge-table-row-even-bg: #1A202F55;
259
+ --ge-table-column-odd-bg: transparent;
260
+ --ge-table-column-even-bg: transparent;
261
+ --ge-table-hover-column-bg: rgba(0, 224, 255, 0.27);
262
+ --ge-table-hover-row-bg: rgba(0, 224, 255, 0.27);
264
263
  --ge-table-focus-border: rgb(0, 255, 255);;
265
264
  --ge-table-color-error-text: #ffa8b5;
266
265
  --ge-table-tree-arrow-collapsed-color: #ffa8b5;
@@ -273,9 +272,9 @@ html,
273
272
  --ge-table-body-west-selected-range-bg: oklch(19% 0.2 205.2);
274
273
  --ge-table-body-center-selected-range-bg: oklch(19% 0.2 205.2);
275
274
  --ge-table-body-east-selected-range-bg: oklch(19% 0.2 205.2);
276
- --ge-table-body-west-selected-range-text: #000;
277
- --ge-table-body-center-selected-range-text: #000;
278
- --ge-table-body-east-selected-range-text: #000;
275
+ --ge-table-body-west-selected-range-text: #0098db;
276
+ --ge-table-body-center-selected-range-text: #0098db;
277
+ --ge-table-body-east-selected-range-text: #0098db;
279
278
 
280
279
  --ge-table-color-col-resize-handle-hover-bg: cyan;
281
280
  --ge-table-color-dragged-col-div-bg: #fafafa;
package/css/table-color-vars.css CHANGED
@@ -1,5 +1,4 @@
1
- html,
2
- :root [data-theme= "light"] {
1
+ html, html[data-theme="light"] {
3
2
  --ge-table-bg: #fff;
4
3
  --ge-table-header-west-bg: var(--ge-table-header-center-bg);
5
4
  --ge-table-header-center-bg: rgba(233, 233, 233, 0.5);
@@ -84,35 +83,35 @@ html,
84
83
 
85
84
 
86
85
 
87
- :root [data-theme= "dark"] {
88
- --ge-table-bg: #000;
89
- --ge-table-header-west-bg: oklch(0% 0 0);
90
- --ge-table-header-center-bg: oklch(0% 0 0);
91
- --ge-table-header-east-bg: oklch(0% 0 0);
86
+ html[data-theme="dark"] {
87
+ --ge-table-bg: #111827;
88
+ --ge-table-header-west-bg: #111827;
89
+ --ge-table-header-center-bg: #111827;
90
+ --ge-table-header-east-bg: #111827;
92
91
  --ge-table-header-west-text: oklch(100% 0 0);
93
92
  --ge-table-header-center-text: oklch(100% 0 0);
94
93
  --ge-table-header-east-text: oklch(100% 0 0);
95
- --ge-table-header-west-horizontal-border: oklch(30% 0 0);
94
+ --ge-table-header-west-horizontal-border: #313641;
96
95
  --ge-table-header-west-vertical-border: oklch(32% 0 0);
97
- --ge-table-header-center-horizontal-border: oklch(30% 0 0);
96
+ --ge-table-header-center-horizontal-border: #313641;
98
97
  --ge-table-header-center-vertical-border: oklch(32% 0 0);
99
- --ge-table-header-east-horizontal-border: oklch(30% 0 0);
98
+ --ge-table-header-east-horizontal-border: #313641;
100
99
  --ge-table-header-east-vertical-border: oklch(32% 0 0);
101
- --ge-table-body-west-bg: oklch(0% 0 0);
102
- --ge-table-body-center-bg: oklch(0% 0 0);
103
- --ge-table-body-east-bg: oklch(0% 0 0);
100
+ --ge-table-body-west-bg: #23272e;
101
+ --ge-table-body-center-bg: #23272e55;
102
+ --ge-table-body-east-bg: #23272e;
104
103
  --ge-table-body-west-text: oklch(100% 0 0);
105
104
  --ge-table-body-center-text: oklch(100% 0 0);
106
105
  --ge-table-body-east-text: oklch(100% 0 0);
107
- --ge-table-body-west-horizontal-border: oklch(30% 0 0);
106
+ --ge-table-body-west-horizontal-border: #313641;
108
107
  --ge-table-body-west-vertical-border: oklch(32% 0 0);
109
- --ge-table-body-center-horizontal-border: oklch(30% 0 0);
108
+ --ge-table-body-center-horizontal-border: #313641;
110
109
  --ge-table-body-center-vertical-border: oklch(32% 0 0);
111
- --ge-table-body-east-horizontal-border: oklch(30% 0 0);
110
+ --ge-table-body-east-horizontal-border: #313641;
112
111
  --ge-table-body-east-vertical-border: oklch(32% 0 0);
113
- --ge-table-footer-west-bg: oklch(0% 0 0);
114
- --ge-table-footer-center-bg: oklch(0% 0 0);
115
- --ge-table-footer-east-bg: oklch(0% 0 0);
112
+ --ge-table-footer-west-bg: #111827;
113
+ --ge-table-footer-center-bg: #111827;
114
+ --ge-table-footer-east-bg: #111827;
116
115
  --ge-table-footer-west-text: var(--ge-table-header-center-text);;
117
116
  --ge-table-footer-center-text: var(--ge-table-header-center-text);;
118
117
  --ge-table-footer-east-text: var(--ge-table-header-center-text);;
@@ -123,12 +122,12 @@ html,
123
122
  --ge-table-footer-east-horizontal-border: oklch(30% 0 0);
124
123
  --ge-table-footer-east-vertical-border: oklch(32% 0 0);
125
124
  --ge-table-border: oklch(32% 0 0);
126
- --ge-table-row-odd-bg: oklch(0% 0 0);
127
- --ge-table-row-even-bg: oklch(0% 0 0);
128
- --ge-table-column-odd-bg: oklch(0% 0 0);
129
- --ge-table-column-even-bg: oklch(0% 0 0);
130
- --ge-table-hover-column-bg: oklch(0% 0 0);
131
- --ge-table-hover-row-bg: oklch(0% 0 0);
125
+ --ge-table-row-odd-bg: #11151F55;
126
+ --ge-table-row-even-bg: #1A202F55;
127
+ --ge-table-column-odd-bg: transparent;
128
+ --ge-table-column-even-bg: transparent;
129
+ --ge-table-hover-column-bg: rgba(0, 224, 255, 0.27);
130
+ --ge-table-hover-row-bg: rgba(0, 224, 255, 0.27);
132
131
  --ge-table-focus-border: rgb(0, 255, 255);;
133
132
  --ge-table-color-error-text: #ffa8b5;
134
133
  --ge-table-tree-arrow-collapsed-color: #ffa8b5;
@@ -141,9 +140,9 @@ html,
141
140
  --ge-table-body-west-selected-range-bg: oklch(19% 0.2 205.2);
142
141
  --ge-table-body-center-selected-range-bg: oklch(19% 0.2 205.2);
143
142
  --ge-table-body-east-selected-range-bg: oklch(19% 0.2 205.2);
144
- --ge-table-body-west-selected-range-text: #000;
145
- --ge-table-body-center-selected-range-text: #000;
146
- --ge-table-body-east-selected-range-text: #000;
143
+ --ge-table-body-west-selected-range-text: #0098db;
144
+ --ge-table-body-center-selected-range-text: #0098db;
145
+ --ge-table-body-east-selected-range-text: #0098db;
147
146
 
148
147
  --ge-table-color-col-resize-handle-hover-bg: cyan;
149
148
  --ge-table-color-dragged-col-div-bg: #fafafa;