@rozie-ui/data-table-solid 0.3.2 → 0.5.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 +99 -44
- package/dist/index.cjs +527 -139
- package/dist/index.d.cts +47 -18
- package/dist/index.d.mts +47 -18
- package/dist/index.mjs +527 -139
- package/package.json +2 -2
- package/src/Column.tsx +2 -2
- package/src/DataTable.tsx +397 -119
- package/src/themes/base.css +38 -25
- package/src/themes/bootstrap.css +11 -0
- package/src/themes/material.css +11 -0
- package/src/themes/shadcn.css +11 -0
package/dist/index.mjs
CHANGED
|
@@ -195,7 +195,35 @@ const indexOfRowIn = (rows, rowOriginal, rowId) => {
|
|
|
195
195
|
};
|
|
196
196
|
//#endregion
|
|
197
197
|
//#region src/DataTable.tsx
|
|
198
|
-
__rozieInjectStyle("DataTable-d5dcab4c",
|
|
198
|
+
__rozieInjectStyle("DataTable-d5dcab4c", `[data-rozie-s-d5dcab4c]:host {
|
|
199
|
+
--rdt-font: var(--rozie-data-table-font);
|
|
200
|
+
--rdt-color: var(--rozie-data-table-fg);
|
|
201
|
+
--rdt-cell-padding: var(--rozie-data-table-cell-padding);
|
|
202
|
+
--rdt-border: 1px solid var(--rozie-data-table-border-color);
|
|
203
|
+
--rdt-header-bg: var(--rozie-data-table-header-bg);
|
|
204
|
+
--rdt-header-weight: var(--rozie-data-table-header-weight);
|
|
205
|
+
--rdt-sort-ind-opacity: var(--rozie-data-table-sort-indicator-opacity);
|
|
206
|
+
--rdt-filter-border: 1px solid var(--rozie-data-table-control-border-color);
|
|
207
|
+
--rdt-filter-radius: var(--rozie-data-table-radius);
|
|
208
|
+
--rdt-page-btn-border: 1px solid var(--rozie-data-table-control-border-color);
|
|
209
|
+
--rdt-page-btn-radius: var(--rozie-data-table-radius);
|
|
210
|
+
--rdt-page-btn-disabled-opacity: var(--rozie-data-table-disabled-opacity);
|
|
211
|
+
--rdt-page-size-border: 1px solid var(--rozie-data-table-control-border-color);
|
|
212
|
+
--rdt-page-size-radius: var(--rozie-data-table-radius);
|
|
213
|
+
--rdt-resize-grip-color: var(--rozie-data-table-resize-grip-color);
|
|
214
|
+
--rdt-resize-grip-active: var(--rozie-data-table-resize-grip-active);
|
|
215
|
+
--rdt-pin-btn-border: 1px solid var(--rozie-data-table-control-border-color);
|
|
216
|
+
--rdt-pin-btn-radius: var(--rozie-data-table-radius);
|
|
217
|
+
--rdt-pin-btn-active-bg: var(--rozie-data-table-pin-active-bg);
|
|
218
|
+
--rdt-colvis-summary-border: 1px solid var(--rozie-data-table-control-border-color);
|
|
219
|
+
--rdt-colvis-summary-radius: var(--rozie-data-table-radius);
|
|
220
|
+
--rdt-colvis-menu-border: 1px solid var(--rozie-data-table-border-color);
|
|
221
|
+
--rdt-colvis-menu-radius: var(--rozie-data-table-radius);
|
|
222
|
+
--rdt-colvis-menu-bg: var(--rozie-data-table-menu-bg);
|
|
223
|
+
--rdt-colvis-menu-shadow: var(--rozie-data-table-menu-shadow);
|
|
224
|
+
--rdt-select-accent: var(--rozie-data-table-select-accent);
|
|
225
|
+
}
|
|
226
|
+
.rozie-data-table[data-rozie-s-d5dcab4c] {
|
|
199
227
|
border-collapse: collapse;
|
|
200
228
|
width: 100%;
|
|
201
229
|
font: var(--rdt-font, 14px system-ui, sans-serif);
|
|
@@ -683,6 +711,7 @@ function DataTable(_props) {
|
|
|
683
711
|
const [liveAnnounce, setLiveAnnounce] = createSignal("");
|
|
684
712
|
onMount(() => {
|
|
685
713
|
setDataDefault(data() || []);
|
|
714
|
+
seedColumnPinning();
|
|
686
715
|
table = createTable({
|
|
687
716
|
data: currentData(),
|
|
688
717
|
columns: tableColumns(),
|
|
@@ -776,6 +805,7 @@ function DataTable(_props) {
|
|
|
776
805
|
}
|
|
777
806
|
if (colsWindowed()) {
|
|
778
807
|
if (!(gridScrollEl ? gridScrollEl.clientWidth : 0)) console.warn("[rozie-data-table] virtual is on for columns but the scroll container has no bounded width; set a CSS width on an ancestor so the column window can be measured");
|
|
808
|
+
bumpWindowVer();
|
|
779
809
|
}
|
|
780
810
|
};
|
|
781
811
|
if (typeof requestAnimationFrame === "function") requestAnimationFrame(() => requestAnimationFrame(afterFirstFrame));
|
|
@@ -825,6 +855,7 @@ function DataTable(_props) {
|
|
|
825
855
|
local.columns,
|
|
826
856
|
colReg()
|
|
827
857
|
], (v) => untrack(() => (() => {
|
|
858
|
+
seedColumnPinning();
|
|
828
859
|
reFeed();
|
|
829
860
|
maybeClearHistoryOnExternalSwap();
|
|
830
861
|
})()), { defer: true }));
|
|
@@ -873,6 +904,34 @@ function DataTable(_props) {
|
|
|
873
904
|
left: rail.concat(deduped)
|
|
874
905
|
};
|
|
875
906
|
}
|
|
907
|
+
let pinSeedApplied = false;
|
|
908
|
+
function seedColumnPinning() {
|
|
909
|
+
if (pinSeedApplied) return;
|
|
910
|
+
const live = columnPinning() != null ? columnPinning() : columnPinningDefault();
|
|
911
|
+
const isRealPin = (id) => id !== SELECT_COL_ID && id !== EXPANDER_COL_ID;
|
|
912
|
+
if ((live && live.left ? live.left : []).filter(isRealPin).length > 0 || (live && live.right ? live.right : []).filter(isRealPin).length > 0) {
|
|
913
|
+
pinSeedApplied = true;
|
|
914
|
+
return;
|
|
915
|
+
}
|
|
916
|
+
const defs = columnDefs();
|
|
917
|
+
if (!defs.length) return;
|
|
918
|
+
const left = [];
|
|
919
|
+
const right = [];
|
|
920
|
+
for (let i = 0; i < defs.length; i++) {
|
|
921
|
+
const def = defs[i];
|
|
922
|
+
if (!def) continue;
|
|
923
|
+
if (def.pinned === "left") left.push(def.id);
|
|
924
|
+
else if (def.pinned === "right") right.push(def.id);
|
|
925
|
+
}
|
|
926
|
+
if (!left.length && !right.length) return;
|
|
927
|
+
pinSeedApplied = true;
|
|
928
|
+
const seeded = {
|
|
929
|
+
left,
|
|
930
|
+
right
|
|
931
|
+
};
|
|
932
|
+
setColumnPinningDefault(seeded);
|
|
933
|
+
setColumnPinning(seeded);
|
|
934
|
+
}
|
|
876
935
|
function currentState() {
|
|
877
936
|
return {
|
|
878
937
|
sorting: sorting() != null ? sorting() : sortingDefault(),
|
|
@@ -1231,9 +1290,12 @@ function DataTable(_props) {
|
|
|
1231
1290
|
function onColumnPinningChangeCb(updater) {
|
|
1232
1291
|
writeColumnPinning(applyUpdater(updater, currentState().columnPinning));
|
|
1233
1292
|
}
|
|
1293
|
+
let columnSizingInfoSync = null;
|
|
1234
1294
|
function onColumnSizingInfoChangeCb(updater) {
|
|
1235
|
-
const next = applyUpdater(updater, columnSizingInfo());
|
|
1236
|
-
|
|
1295
|
+
const next = applyUpdater(updater, columnSizingInfoSync != null ? columnSizingInfoSync : columnSizingInfo());
|
|
1296
|
+
if (next == null) return;
|
|
1297
|
+
columnSizingInfoSync = next;
|
|
1298
|
+
setColumnSizingInfo(next);
|
|
1237
1299
|
}
|
|
1238
1300
|
function resolveVirtual() {
|
|
1239
1301
|
const v = local.virtual;
|
|
@@ -1730,12 +1792,6 @@ function DataTable(_props) {
|
|
|
1730
1792
|
const m = editMetaOf(colId);
|
|
1731
1793
|
return m && m.editorOptions != null ? m.editorOptions : [];
|
|
1732
1794
|
}
|
|
1733
|
-
function hasEditorSlot(colId) {
|
|
1734
|
-
return editorTypeOf(colId) === "custom" && !!(_props.editorSlot ?? _props.slots?.["editor"]);
|
|
1735
|
-
}
|
|
1736
|
-
function hasFilterSlot() {
|
|
1737
|
-
return !!(_props.filterSlot ?? _props.slots?.["filter"]);
|
|
1738
|
-
}
|
|
1739
1795
|
function columnIsFilterable(colId) {
|
|
1740
1796
|
const d = defFor(colId);
|
|
1741
1797
|
return !!(d && d.filterable);
|
|
@@ -1744,11 +1800,9 @@ function DataTable(_props) {
|
|
|
1744
1800
|
const d = defFor(colId);
|
|
1745
1801
|
return d ? d.header : colId;
|
|
1746
1802
|
}
|
|
1747
|
-
function headerWidth(
|
|
1748
|
-
if (tick() < 0 || !
|
|
1749
|
-
const
|
|
1750
|
-
if (!col) return null;
|
|
1751
|
-
const w = col.getSize();
|
|
1803
|
+
function headerWidth(header) {
|
|
1804
|
+
if (tick() < 0 || !header || typeof header.getSize !== "function") return null;
|
|
1805
|
+
const w = header.getSize();
|
|
1752
1806
|
return w != null && w > 0 ? w + "px" : null;
|
|
1753
1807
|
}
|
|
1754
1808
|
function onResizeStart(colId, evt) {
|
|
@@ -1812,11 +1866,11 @@ function DataTable(_props) {
|
|
|
1812
1866
|
if (side === "right") return "position:sticky;right:" + (col.getAfter ? col.getAfter("right") : 0) + "px;z-index:" + zIndex + ";";
|
|
1813
1867
|
return "";
|
|
1814
1868
|
}
|
|
1815
|
-
function thStyle(
|
|
1869
|
+
function thStyle(header) {
|
|
1816
1870
|
let s = "";
|
|
1817
|
-
const w = headerWidth(
|
|
1871
|
+
const w = headerWidth(header);
|
|
1818
1872
|
if (w) s += "width:" + w + ";";
|
|
1819
|
-
s += pinStyle(
|
|
1873
|
+
s += pinStyle(header && header.column ? header.column.id : null, 2);
|
|
1820
1874
|
return s;
|
|
1821
1875
|
}
|
|
1822
1876
|
function onGlobalFilterInput(evt) {
|
|
@@ -3172,8 +3226,9 @@ function DataTable(_props) {
|
|
|
3172
3226
|
fillEdgeScrollRaf = null;
|
|
3173
3227
|
}
|
|
3174
3228
|
}
|
|
3175
|
-
|
|
3176
|
-
|
|
3229
|
+
const FILL_HITTEST_PROBE_RADIUS_PX = 8;
|
|
3230
|
+
const FILL_HITTEST_PROBE_STEP_PX = 2;
|
|
3231
|
+
function resolveCellAt(clientX, clientY) {
|
|
3177
3232
|
let el = document.elementFromPoint(clientX, clientY);
|
|
3178
3233
|
while (el && el.shadowRoot && el.shadowRoot.elementFromPoint) {
|
|
3179
3234
|
const inner = el.shadowRoot.elementFromPoint(clientX, clientY);
|
|
@@ -3194,6 +3249,18 @@ function DataTable(_props) {
|
|
|
3194
3249
|
c
|
|
3195
3250
|
};
|
|
3196
3251
|
}
|
|
3252
|
+
function cellIndexFromPoint(clientX, clientY) {
|
|
3253
|
+
if (typeof document === "undefined" || !document.elementFromPoint) return null;
|
|
3254
|
+
const direct = resolveCellAt(clientX, clientY);
|
|
3255
|
+
if (direct) return direct;
|
|
3256
|
+
for (let d = FILL_HITTEST_PROBE_STEP_PX; d <= FILL_HITTEST_PROBE_RADIUS_PX; d += FILL_HITTEST_PROBE_STEP_PX) {
|
|
3257
|
+
const right = resolveCellAt(clientX + d, clientY);
|
|
3258
|
+
if (right) return right;
|
|
3259
|
+
const left = resolveCellAt(clientX - d, clientY);
|
|
3260
|
+
if (left) return left;
|
|
3261
|
+
}
|
|
3262
|
+
return null;
|
|
3263
|
+
}
|
|
3197
3264
|
function onFillHandlePointerDown(e) {
|
|
3198
3265
|
if (!e) return;
|
|
3199
3266
|
if (e.preventDefault) e.preventDefault();
|
|
@@ -3366,12 +3433,24 @@ function DataTable(_props) {
|
|
|
3366
3433
|
const row = (rows() || [])[editingRow()];
|
|
3367
3434
|
return row ? row.id : null;
|
|
3368
3435
|
}
|
|
3369
|
-
function
|
|
3436
|
+
function resolveEditFocusCellEl(rowIndex, colIndex) {
|
|
3437
|
+
if (rowIndex == null || colIndex == null || rowIndex < 0 || colIndex < 0) return null;
|
|
3438
|
+
return resolveCellEl(String(rowIndex), colIndex);
|
|
3439
|
+
}
|
|
3440
|
+
function focusEditorWhenReady(rowIndex, colIndex, selectAll = true) {
|
|
3370
3441
|
if (!gridRoot) return;
|
|
3371
|
-
if (editFocusColId() != null && hasEditorSlot(editFocusColId())) return;
|
|
3372
3442
|
let attempts = 0;
|
|
3373
3443
|
const tryFocus = () => {
|
|
3374
|
-
const
|
|
3444
|
+
const cellEl = resolveEditFocusCellEl(rowIndex, colIndex);
|
|
3445
|
+
const el = cellEl && cellEl.querySelector ? cellEl.querySelector("[data-editing-cell][data-builtin-editor]") : null;
|
|
3446
|
+
if (!el) {
|
|
3447
|
+
if (cellEl && cellEl.querySelector ? cellEl.querySelector("[data-editing-cell]") : null) return;
|
|
3448
|
+
attempts = attempts + 1;
|
|
3449
|
+
if (attempts >= 30) return;
|
|
3450
|
+
if (typeof requestAnimationFrame === "function") requestAnimationFrame(tryFocus);
|
|
3451
|
+
else setTimeout(tryFocus, 16);
|
|
3452
|
+
return;
|
|
3453
|
+
}
|
|
3375
3454
|
const ae = gridRoot && gridRoot.getRootNode ? gridRoot.getRootNode().activeElement : null;
|
|
3376
3455
|
if (ae && el && ae !== el && ae.closest && gridRoot.contains(ae) && ae.hasAttribute && ae.hasAttribute("data-editing-cell")) {
|
|
3377
3456
|
const aeCell = ae.closest("[data-grid-cell]");
|
|
@@ -3380,17 +3459,10 @@ function DataTable(_props) {
|
|
|
3380
3459
|
const elCol = elCell ? elCell.getAttribute("data-col-index") : null;
|
|
3381
3460
|
if (aeCol != null && aeCol !== elCol) return;
|
|
3382
3461
|
}
|
|
3383
|
-
|
|
3384
|
-
|
|
3385
|
-
|
|
3386
|
-
|
|
3387
|
-
} catch (e) {}
|
|
3388
|
-
return;
|
|
3389
|
-
}
|
|
3390
|
-
attempts = attempts + 1;
|
|
3391
|
-
if (attempts >= 30) return;
|
|
3392
|
-
if (typeof requestAnimationFrame === "function") requestAnimationFrame(tryFocus);
|
|
3393
|
-
else setTimeout(tryFocus, 16);
|
|
3462
|
+
el.focus();
|
|
3463
|
+
if (selectAll && el.select) try {
|
|
3464
|
+
el.select();
|
|
3465
|
+
} catch (e) {}
|
|
3394
3466
|
};
|
|
3395
3467
|
if (typeof requestAnimationFrame === "function") requestAnimationFrame(tryFocus);
|
|
3396
3468
|
else setTimeout(tryFocus, 0);
|
|
@@ -3421,7 +3493,7 @@ function DataTable(_props) {
|
|
|
3421
3493
|
setActiveInControl(true);
|
|
3422
3494
|
setEditVer(editVer() + 1);
|
|
3423
3495
|
setEditFocusColId(colId);
|
|
3424
|
-
focusEditorWhenReady(seed == null);
|
|
3496
|
+
focusEditorWhenReady(rowIndex, colIndex, seed == null);
|
|
3425
3497
|
}
|
|
3426
3498
|
function focusCellWhenReady(row, col) {
|
|
3427
3499
|
if (!gridRoot) return;
|
|
@@ -3429,6 +3501,11 @@ function DataTable(_props) {
|
|
|
3429
3501
|
const tryFocus = () => {
|
|
3430
3502
|
const el = resolveCellEl(String(row), col);
|
|
3431
3503
|
if (el) {
|
|
3504
|
+
const ae = gridRoot && gridRoot.getRootNode ? gridRoot.getRootNode().activeElement : null;
|
|
3505
|
+
if (ae && ae !== el && gridRoot.contains && gridRoot.contains(ae) && ae.closest) {
|
|
3506
|
+
const aeCell = ae.closest("[data-grid-cell]");
|
|
3507
|
+
if (aeCell && aeCell !== el) return;
|
|
3508
|
+
}
|
|
3432
3509
|
el.focus();
|
|
3433
3510
|
return;
|
|
3434
3511
|
}
|
|
@@ -3489,7 +3566,7 @@ function DataTable(_props) {
|
|
|
3489
3566
|
const err = runValidator(colId, newValue, rowOriginal);
|
|
3490
3567
|
if (err !== true) {
|
|
3491
3568
|
setInvalid(err);
|
|
3492
|
-
focusEditorWhenReady();
|
|
3569
|
+
focusEditorWhenReady(editingRow(), editingCol());
|
|
3493
3570
|
return false;
|
|
3494
3571
|
}
|
|
3495
3572
|
setInvalid("");
|
|
@@ -3582,12 +3659,10 @@ function DataTable(_props) {
|
|
|
3582
3659
|
}
|
|
3583
3660
|
function focusRowEditorAt(rowIndex, colIndex) {
|
|
3584
3661
|
if (!gridRoot) return;
|
|
3585
|
-
const colId = columnIdAt(rowIndex, colIndex);
|
|
3586
|
-
if (colId != null && hasEditorSlot(colId)) return;
|
|
3587
3662
|
let attempts = 0;
|
|
3588
3663
|
const tryFocus = () => {
|
|
3589
3664
|
const cellEl = resolveCellEl(String(rowIndex), colIndex);
|
|
3590
|
-
const ed = cellEl && cellEl.querySelector ? cellEl.querySelector("[data-editing-cell]") : null;
|
|
3665
|
+
const ed = cellEl && cellEl.querySelector ? cellEl.querySelector("[data-editing-cell][data-builtin-editor]") : null;
|
|
3591
3666
|
if (ed) {
|
|
3592
3667
|
ed.focus();
|
|
3593
3668
|
if (ed.select) try {
|
|
@@ -3595,6 +3670,7 @@ function DataTable(_props) {
|
|
|
3595
3670
|
} catch (e) {}
|
|
3596
3671
|
return;
|
|
3597
3672
|
}
|
|
3673
|
+
if (cellEl && cellEl.querySelector ? cellEl.querySelector("[data-editing-cell]") : null) return;
|
|
3598
3674
|
attempts = attempts + 1;
|
|
3599
3675
|
if (attempts >= 30) return;
|
|
3600
3676
|
if (typeof requestAnimationFrame === "function") requestAnimationFrame(tryFocus);
|
|
@@ -3626,7 +3702,7 @@ function DataTable(_props) {
|
|
|
3626
3702
|
setActiveInControl(true);
|
|
3627
3703
|
setEditVer(editVer() + 1);
|
|
3628
3704
|
setEditFocusColId(editable[0].colId);
|
|
3629
|
-
focusEditorWhenReady();
|
|
3705
|
+
focusEditorWhenReady(rowIndex, editable[0].colIndex);
|
|
3630
3706
|
}
|
|
3631
3707
|
function commitRow() {
|
|
3632
3708
|
if (editingRowIndex() == null) return false;
|
|
@@ -4078,8 +4154,12 @@ function DataTable(_props) {
|
|
|
4078
4154
|
|
|
4079
4155
|
{<Show when={local.groupable}><div class={"rdt-group-bar-host"} data-rozie-s-d5dcab4c="">
|
|
4080
4156
|
{(_props.groupBarSlot ?? _props.slots?.["groupBar"])?.({
|
|
4081
|
-
grouping
|
|
4082
|
-
|
|
4157
|
+
get grouping() {
|
|
4158
|
+
return groupingKeys();
|
|
4159
|
+
},
|
|
4160
|
+
get groupableColumns() {
|
|
4161
|
+
return groupableColumns();
|
|
4162
|
+
},
|
|
4083
4163
|
applyGrouping,
|
|
4084
4164
|
clearGrouping
|
|
4085
4165
|
}) ?? <Key each={groupingKeys()} by={(gk) => gk}>{(gk) => <span class={"rdt-group-token"} data-group-token="" data-rozie-s-d5dcab4c="">{rozieDisplay(gk())}</span>}</Key>}
|
|
@@ -4103,17 +4183,33 @@ function DataTable(_props) {
|
|
|
4103
4183
|
"rdt-expander-th": isExpanderColumn(header().column.id),
|
|
4104
4184
|
"rdt-th-resizing": columnIsResizing(header().column.id),
|
|
4105
4185
|
"rdt-cell-active": isActiveCell("__header", headerColIndexOf(hg(), header()), hgLevel())
|
|
4106
|
-
})} role="columnheader" data-col={rozieAttr(header().column.id)} data-grid-cell="" data-row="__header" data-header-level={rozieAttr(hgLevel())} colSpan={rozieAttr(header().colSpan > 1 ? header().colSpan : null)} data-col-index={rozieAttr(headerColIndexOf(hg(), header()))} tabIndex={rozieAttr(cellTabindex("__header", headerColIndexOf(hg(), header()), hgLevel()))} aria-sort={rozieAttr(ariaSortFor(header().column.id))} style={parseInlineStyle(thStyle(header()
|
|
4186
|
+
})} role="columnheader" data-col={rozieAttr(header().column.id)} data-grid-cell="" data-row="__header" data-header-level={rozieAttr(hgLevel())} colSpan={rozieAttr(header().colSpan > 1 ? header().colSpan : null)} data-col-index={rozieAttr(headerColIndexOf(hg(), header()))} tabIndex={rozieAttr(cellTabindex("__header", headerColIndexOf(hg(), header()), hgLevel()))} aria-sort={rozieAttr(ariaSortFor(header().column.id))} style={parseInlineStyle(thStyle(header()))} data-rozie-s-d5dcab4c="">
|
|
4107
4187
|
|
|
4108
4188
|
|
|
4109
4189
|
{<Show when={isSelectColumn(header().column.id)} fallback={<Show when={isExpanderColumn(header().column.id)} fallback={<span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
|
|
4110
4190
|
|
|
4111
4191
|
{<Show when={header().column.getCanSort && header().column.getCanSort()} fallback={<span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
|
|
4112
4192
|
<span class={"rdt-header-label"} data-rozie-s-d5dcab4c="">
|
|
4113
|
-
{
|
|
4114
|
-
columnId
|
|
4115
|
-
|
|
4116
|
-
|
|
4193
|
+
{_props.slots?.[`colHeader-${header().column.id}`]?.({
|
|
4194
|
+
get columnId() {
|
|
4195
|
+
return header().column.id;
|
|
4196
|
+
},
|
|
4197
|
+
get column() {
|
|
4198
|
+
return header().column;
|
|
4199
|
+
},
|
|
4200
|
+
get label() {
|
|
4201
|
+
return headerLabel(header().column.id);
|
|
4202
|
+
}
|
|
4203
|
+
}) ?? (_props.colHeaderSlot ?? _props.slots?.["colHeader"])?.({
|
|
4204
|
+
get columnId() {
|
|
4205
|
+
return header().column.id;
|
|
4206
|
+
},
|
|
4207
|
+
get column() {
|
|
4208
|
+
return header().column;
|
|
4209
|
+
},
|
|
4210
|
+
get label() {
|
|
4211
|
+
return headerLabel(header().column.id);
|
|
4212
|
+
}
|
|
4117
4213
|
}) ?? rozieDisplay(headerLabel(header().column.id))}
|
|
4118
4214
|
</span>
|
|
4119
4215
|
</span>}><button type="button" class={"rdt-sort-btn"} onClick={($event) => {
|
|
@@ -4121,10 +4217,26 @@ function DataTable(_props) {
|
|
|
4121
4217
|
}} data-rozie-s-d5dcab4c="">
|
|
4122
4218
|
|
|
4123
4219
|
<span class={"rdt-header-label"} data-rozie-s-d5dcab4c="">
|
|
4124
|
-
{
|
|
4125
|
-
columnId
|
|
4126
|
-
|
|
4127
|
-
|
|
4220
|
+
{_props.slots?.[`colHeader-${header().column.id}`]?.({
|
|
4221
|
+
get columnId() {
|
|
4222
|
+
return header().column.id;
|
|
4223
|
+
},
|
|
4224
|
+
get column() {
|
|
4225
|
+
return header().column;
|
|
4226
|
+
},
|
|
4227
|
+
get label() {
|
|
4228
|
+
return headerLabel(header().column.id);
|
|
4229
|
+
}
|
|
4230
|
+
}) ?? (_props.colHeaderSlot ?? _props.slots?.["colHeader"])?.({
|
|
4231
|
+
get columnId() {
|
|
4232
|
+
return header().column.id;
|
|
4233
|
+
},
|
|
4234
|
+
get column() {
|
|
4235
|
+
return header().column;
|
|
4236
|
+
},
|
|
4237
|
+
get label() {
|
|
4238
|
+
return headerLabel(header().column.id);
|
|
4239
|
+
}
|
|
4128
4240
|
}) ?? rozieDisplay(headerLabel(header().column.id))}
|
|
4129
4241
|
</span>
|
|
4130
4242
|
<span class={"rdt-sort-ind"} aria-hidden="true" data-rozie-s-d5dcab4c="">{rozieDisplay(sortIndicator(header().column.id))}</span>
|
|
@@ -4153,9 +4265,15 @@ function DataTable(_props) {
|
|
|
4153
4265
|
}} data-rozie-s-d5dcab4c=""><span class={"rdt-resize-grip"} aria-hidden="true" data-rozie-s-d5dcab4c="" /></button>
|
|
4154
4266
|
</span>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
|
|
4155
4267
|
{(_props.selectAllSlot ?? _props.slots?.["selectAll"])?.({
|
|
4156
|
-
checked
|
|
4157
|
-
|
|
4158
|
-
|
|
4268
|
+
get checked() {
|
|
4269
|
+
return isAllRowsSelected();
|
|
4270
|
+
},
|
|
4271
|
+
get indeterminate() {
|
|
4272
|
+
return isSomeRowsSelected();
|
|
4273
|
+
},
|
|
4274
|
+
get toggle() {
|
|
4275
|
+
return onToggleAllRows;
|
|
4276
|
+
}
|
|
4159
4277
|
}) ?? <Show when={local.selectionMode === "multiple"}><input type="checkbox" aria-label="Select all rows" class={"rdt-select-all"} checked={isAllRowsSelected()} onChange={($event) => {
|
|
4160
4278
|
onToggleAllRows($event);
|
|
4161
4279
|
}} data-rozie-s-d5dcab4c="" /></Show>}
|
|
@@ -4165,18 +4283,44 @@ function DataTable(_props) {
|
|
|
4165
4283
|
{<Show when={hasAnyFilterableColumn()}><tr class={"rdt-filter-row"} data-rozie-s-d5dcab4c="">
|
|
4166
4284
|
<Key each={headerGroups()[headerGroups().length - 1].headers} by={(header) => header.id}>{(header) => <th class={"rdt-filter-cell"} role="presentation" style={parseInlineStyle(pinStyle(header().column.id))} data-rozie-s-d5dcab4c="">
|
|
4167
4285
|
{<Show when={isSelectColumn(header().column.id)} fallback={<Show when={isExpanderColumn(header().column.id)} fallback={<span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
|
|
4168
|
-
{<Show when={columnIsFilterable(header().column.id)
|
|
4286
|
+
{<Show when={columnIsFilterable(header().column.id)}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
|
|
4287
|
+
{_props.slots?.[`filter-${header().column.id}`]?.({
|
|
4288
|
+
get columnId() {
|
|
4289
|
+
return header().column.id;
|
|
4290
|
+
},
|
|
4291
|
+
get value() {
|
|
4292
|
+
return columnFilterValue(header().column.id);
|
|
4293
|
+
},
|
|
4294
|
+
get uniqueValues() {
|
|
4295
|
+
return getFacetedUniqueValues$1(header().column.id);
|
|
4296
|
+
},
|
|
4297
|
+
get minMax() {
|
|
4298
|
+
return getFacetedMinMaxValues$1(header().column.id);
|
|
4299
|
+
},
|
|
4300
|
+
get setFilter() {
|
|
4301
|
+
return setColumnFilter;
|
|
4302
|
+
}
|
|
4303
|
+
}) ?? (_props.filterSlot ?? _props.slots?.["filter"])?.({
|
|
4304
|
+
get columnId() {
|
|
4305
|
+
return header().column.id;
|
|
4306
|
+
},
|
|
4307
|
+
get value() {
|
|
4308
|
+
return columnFilterValue(header().column.id);
|
|
4309
|
+
},
|
|
4310
|
+
get uniqueValues() {
|
|
4311
|
+
return getFacetedUniqueValues$1(header().column.id);
|
|
4312
|
+
},
|
|
4313
|
+
get minMax() {
|
|
4314
|
+
return getFacetedMinMaxValues$1(header().column.id);
|
|
4315
|
+
},
|
|
4316
|
+
get setFilter() {
|
|
4317
|
+
return setColumnFilter;
|
|
4318
|
+
}
|
|
4319
|
+
}) ?? <input type="text" aria-label={rozieAttr("Filter " + headerLabel(header().column.id))} class={"rdt-col-filter"} value={columnFilterValue(header().column.id)} onInput={($event) => {
|
|
4169
4320
|
onColumnFilterInput(header().column.id, $event);
|
|
4170
4321
|
}} onClick={($event) => {
|
|
4171
4322
|
stopEvent($event);
|
|
4172
|
-
}} data-rozie-s-d5dcab4c=""
|
|
4173
|
-
{(_props.filterSlot ?? _props.slots?.["filter"])?.({
|
|
4174
|
-
columnId: header().column.id,
|
|
4175
|
-
value: columnFilterValue(header().column.id),
|
|
4176
|
-
uniqueValues: getFacetedUniqueValues$1(header().column.id),
|
|
4177
|
-
minMax: getFacetedMinMaxValues$1(header().column.id),
|
|
4178
|
-
setFilter: setColumnFilter
|
|
4179
|
-
})}
|
|
4323
|
+
}} data-rozie-s-d5dcab4c="" />}
|
|
4180
4324
|
</span></Show>}</span>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Show>}</th>}</Key>
|
|
4181
4325
|
</tr></Show>}</thead>
|
|
4182
4326
|
|
|
@@ -4192,26 +4336,99 @@ function DataTable(_props) {
|
|
|
4192
4336
|
})} role={rozieAttr(cellRole())} data-col={rozieAttr(cell().column.id)} data-grid-cell="" data-row={rozieAttr(rowIndexOf(row()))} data-col-index={rozieAttr(colIndexOf(row(), cell()))} tabIndex={rozieAttr(cellTabindex(String(rowIndexOf(row())), colIndexOf(row(), cell())))} style={parseInlineStyle(bodyCellStyle(row(), cell().column.id))} aria-invalid={rozieAttr(cellAriaInvalid(rowIndexOf(row()), colIndexOf(row(), cell())))} data-in-range={rozieAttr(inRange(rowIndexOf(row()), colIndexOf(row(), cell())) ? "true" : null)} data-agg-cell={rozieAttr(cellIsAggregated(cell()) ? cell().column.id : null)} data-rozie-s-d5dcab4c="">
|
|
4193
4337
|
|
|
4194
4338
|
{<Show when={isExpanderColumn(cell().column.id)} fallback={<Show when={isSelectColumn(cell().column.id)} fallback={<Show when={cellIsGrouped(cell())} fallback={<Show when={isEditing(rowIndexOf(row()), colIndexOf(row(), cell()))} fallback={<Show when={cellIsPlaceholder(cell())} fallback={<span class={"rdt-cell-value"} data-rozie-s-d5dcab4c="">
|
|
4195
|
-
{
|
|
4196
|
-
columnId
|
|
4197
|
-
|
|
4198
|
-
|
|
4199
|
-
|
|
4339
|
+
{_props.slots?.[`cell-${cell().column.id}`]?.({
|
|
4340
|
+
get columnId() {
|
|
4341
|
+
return cell().column.id;
|
|
4342
|
+
},
|
|
4343
|
+
get column() {
|
|
4344
|
+
return cell().column;
|
|
4345
|
+
},
|
|
4346
|
+
get row() {
|
|
4347
|
+
return cellSlotRow(row());
|
|
4348
|
+
},
|
|
4349
|
+
get value() {
|
|
4350
|
+
return cell().getValue();
|
|
4351
|
+
}
|
|
4352
|
+
}) ?? (_props.cellSlot ?? _props.slots?.["cell"])?.({
|
|
4353
|
+
get columnId() {
|
|
4354
|
+
return cell().column.id;
|
|
4355
|
+
},
|
|
4356
|
+
get column() {
|
|
4357
|
+
return cell().column;
|
|
4358
|
+
},
|
|
4359
|
+
get row() {
|
|
4360
|
+
return cellSlotRow(row());
|
|
4361
|
+
},
|
|
4362
|
+
get value() {
|
|
4363
|
+
return cell().getValue();
|
|
4364
|
+
}
|
|
4200
4365
|
}) ?? rozieDisplay(cell().getValue())}
|
|
4201
4366
|
</span>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
|
|
4202
|
-
{<Show when={
|
|
4367
|
+
{<Show when={editorTypeOf(cell().column.id) === "number"} fallback={<Show when={editorTypeOf(cell().column.id) === "select"} fallback={<Show when={editorTypeOf(cell().column.id) === "checkbox"} fallback={<Show when={editorTypeOf(cell().column.id) === "custom"} fallback={<input type="text" data-editing-cell="" data-builtin-editor="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event) => {
|
|
4368
|
+
onCellEditorInput(cell().column.id, $event);
|
|
4369
|
+
}} onKeyDown={($event) => {
|
|
4370
|
+
onEditorKeyDown($event);
|
|
4371
|
+
}} onBlur={($event) => {
|
|
4372
|
+
onEditorBlur($event);
|
|
4373
|
+
}} data-rozie-s-d5dcab4c="" />}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
|
|
4374
|
+
{_props.slots?.[`editor-${cell().column.id}`]?.({
|
|
4375
|
+
get columnId() {
|
|
4376
|
+
return cell().column.id;
|
|
4377
|
+
},
|
|
4378
|
+
get column() {
|
|
4379
|
+
return cell().column;
|
|
4380
|
+
},
|
|
4381
|
+
get row() {
|
|
4382
|
+
return cellSlotRow(row());
|
|
4383
|
+
},
|
|
4384
|
+
get value() {
|
|
4385
|
+
return editorValueFor(cell().column.id);
|
|
4386
|
+
},
|
|
4387
|
+
get commit() {
|
|
4388
|
+
return editorCommitFor(cell().column.id);
|
|
4389
|
+
},
|
|
4390
|
+
get cancel() {
|
|
4391
|
+
return editorCancelFor();
|
|
4392
|
+
},
|
|
4393
|
+
get autofocus() {
|
|
4394
|
+
return editorAutofocusFor(cell().column.id, rowIndexOf(row()));
|
|
4395
|
+
}
|
|
4396
|
+
}) ?? (_props.editorSlot ?? _props.slots?.["editor"])?.({
|
|
4397
|
+
get columnId() {
|
|
4398
|
+
return cell().column.id;
|
|
4399
|
+
},
|
|
4400
|
+
get column() {
|
|
4401
|
+
return cell().column;
|
|
4402
|
+
},
|
|
4403
|
+
get row() {
|
|
4404
|
+
return cellSlotRow(row());
|
|
4405
|
+
},
|
|
4406
|
+
get value() {
|
|
4407
|
+
return editorValueFor(cell().column.id);
|
|
4408
|
+
},
|
|
4409
|
+
get commit() {
|
|
4410
|
+
return editorCommitFor(cell().column.id);
|
|
4411
|
+
},
|
|
4412
|
+
get cancel() {
|
|
4413
|
+
return editorCancelFor();
|
|
4414
|
+
},
|
|
4415
|
+
get autofocus() {
|
|
4416
|
+
return editorAutofocusFor(cell().column.id, rowIndexOf(row()));
|
|
4417
|
+
}
|
|
4418
|
+
}) ?? <input type="text" data-editing-cell="" data-builtin-editor="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event) => {
|
|
4203
4419
|
onCellEditorInput(cell().column.id, $event);
|
|
4204
4420
|
}} onKeyDown={($event) => {
|
|
4205
4421
|
onEditorKeyDown($event);
|
|
4206
4422
|
}} onBlur={($event) => {
|
|
4207
4423
|
onEditorBlur($event);
|
|
4208
|
-
}} data-rozie-s-d5dcab4c="" />}
|
|
4424
|
+
}} data-rozie-s-d5dcab4c="" />}
|
|
4425
|
+
</span></Show>}><input type="checkbox" data-editing-cell="" data-builtin-editor="" class={"rdt-cell-editor"} checked={editorCheckedFor(cell().column.id)} onChange={($event) => {
|
|
4209
4426
|
onCellEditorCheckbox(cell().column.id, $event);
|
|
4210
4427
|
}} onKeyDown={($event) => {
|
|
4211
4428
|
onEditorKeyDown($event);
|
|
4212
4429
|
}} onBlur={($event) => {
|
|
4213
4430
|
onEditorBlur($event);
|
|
4214
|
-
}} data-rozie-s-d5dcab4c="" /></Show>}><select data-editing-cell="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onChange={($event) => {
|
|
4431
|
+
}} data-rozie-s-d5dcab4c="" /></Show>}><select data-editing-cell="" data-builtin-editor="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onChange={($event) => {
|
|
4215
4432
|
onCellEditorInput(cell().column.id, $event);
|
|
4216
4433
|
}} onKeyDown={($event) => {
|
|
4217
4434
|
onEditorKeyDown($event);
|
|
@@ -4219,39 +4436,54 @@ function DataTable(_props) {
|
|
|
4219
4436
|
onEditorBlur($event);
|
|
4220
4437
|
}} data-rozie-s-d5dcab4c="">
|
|
4221
4438
|
<Key each={editorOptionsOf(cell().column.id)} by={(opt) => opt.value}>{(opt) => <option value={rozieAttr(opt().value)} data-rozie-s-d5dcab4c="">{rozieDisplay(opt().label)}</option>}</Key>
|
|
4222
|
-
</select></Show>}><input type="number" data-editing-cell="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event) => {
|
|
4439
|
+
</select></Show>}><input type="number" data-editing-cell="" data-builtin-editor="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event) => {
|
|
4223
4440
|
onCellEditorInput(cell().column.id, $event);
|
|
4224
4441
|
}} onKeyDown={($event) => {
|
|
4225
4442
|
onEditorKeyDown($event);
|
|
4226
4443
|
}} onBlur={($event) => {
|
|
4227
4444
|
onEditorBlur($event);
|
|
4228
|
-
}} data-rozie-s-d5dcab4c="" /></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
|
|
4229
|
-
{(_props.editorSlot ?? _props.slots?.["editor"])?.({
|
|
4230
|
-
columnId: cell().column.id,
|
|
4231
|
-
column: cell().column,
|
|
4232
|
-
row: cellSlotRow(row()),
|
|
4233
|
-
value: editorValueFor(cell().column.id),
|
|
4234
|
-
commit: editorCommitFor(cell().column.id),
|
|
4235
|
-
cancel: editorCancelFor(),
|
|
4236
|
-
autofocus: editorAutofocusFor(cell().column.id, rowIndexOf(row()))
|
|
4237
|
-
})}
|
|
4238
|
-
</span></Show>}</span></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
|
|
4445
|
+
}} data-rozie-s-d5dcab4c="" /></Show>}</span></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
|
|
4239
4446
|
<button type="button" data-expander="" aria-expanded={!!rowIsExpanded(row())} aria-label={rozieAttr(rowIsExpanded(row()) ? "Collapse group" : "Expand group")} class={"rdt-expander rdt-group-toggle"} onClick={($event) => {
|
|
4240
4447
|
onToggleExpand(row(), $event);
|
|
4241
4448
|
}} data-rozie-s-d5dcab4c="">{rozieDisplay(rowIsExpanded(row()) ? "▾" : "▸")}</button>
|
|
4242
4449
|
<span class={"rdt-group-value"} data-rozie-s-d5dcab4c="">
|
|
4243
|
-
{
|
|
4244
|
-
columnId
|
|
4245
|
-
|
|
4246
|
-
|
|
4247
|
-
|
|
4450
|
+
{_props.slots?.[`cell-${cell().column.id}`]?.({
|
|
4451
|
+
get columnId() {
|
|
4452
|
+
return cell().column.id;
|
|
4453
|
+
},
|
|
4454
|
+
get column() {
|
|
4455
|
+
return cell().column;
|
|
4456
|
+
},
|
|
4457
|
+
get row() {
|
|
4458
|
+
return cellSlotRow(row());
|
|
4459
|
+
},
|
|
4460
|
+
get value() {
|
|
4461
|
+
return cell().getValue();
|
|
4462
|
+
}
|
|
4463
|
+
}) ?? (_props.cellSlot ?? _props.slots?.["cell"])?.({
|
|
4464
|
+
get columnId() {
|
|
4465
|
+
return cell().column.id;
|
|
4466
|
+
},
|
|
4467
|
+
get column() {
|
|
4468
|
+
return cell().column;
|
|
4469
|
+
},
|
|
4470
|
+
get row() {
|
|
4471
|
+
return cellSlotRow(row());
|
|
4472
|
+
},
|
|
4473
|
+
get value() {
|
|
4474
|
+
return cell().getValue();
|
|
4475
|
+
}
|
|
4248
4476
|
}) ?? rozieDisplay(cell().getValue())}
|
|
4249
4477
|
</span>
|
|
4250
4478
|
<span class={"rdt-group-count"} data-rozie-s-d5dcab4c="">{rozieDisplay("(" + groupSubRowCount(row()) + ")")}</span>
|
|
4251
4479
|
</span></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
|
|
4252
4480
|
{(_props.selectCellSlot ?? _props.slots?.["selectCell"])?.({
|
|
4253
|
-
|
|
4254
|
-
|
|
4481
|
+
get row() {
|
|
4482
|
+
return cellSlotRow(row());
|
|
4483
|
+
},
|
|
4484
|
+
get checked() {
|
|
4485
|
+
return rowIsSelected(row());
|
|
4486
|
+
},
|
|
4255
4487
|
toggle: (e) => onToggleRow(row(), e)
|
|
4256
4488
|
}) ?? <input type="checkbox" aria-label="Select row" class={"rdt-select-row"} checked={rowIsSelected(row())} onChange={($event) => {
|
|
4257
4489
|
onToggleRow(row(), $event);
|
|
@@ -4266,7 +4498,9 @@ function DataTable(_props) {
|
|
|
4266
4498
|
|
|
4267
4499
|
{<Show when={rowShowsDetail(row())}><tr class={"rdt-detail-row"} role="row" data-detail-row={rozieAttr(row().id)} data-rozie-s-d5dcab4c="">
|
|
4268
4500
|
<td class={"rdt-detail-cell"} colSpan={rozieAttr(visibleColCount())} data-rozie-s-d5dcab4c="">
|
|
4269
|
-
{(_props.detailSlot ?? _props.slots?.["detail"])?.({
|
|
4501
|
+
{(_props.detailSlot ?? _props.slots?.["detail"])?.({ get row() {
|
|
4502
|
+
return row().original;
|
|
4503
|
+
} })}
|
|
4270
4504
|
</td>
|
|
4271
4505
|
</tr></Show>}</>}</Key>
|
|
4272
4506
|
</tbody>
|
|
@@ -4295,24 +4529,56 @@ function DataTable(_props) {
|
|
|
4295
4529
|
"rdt-expander-th": isExpanderColumn(wh().header.column.id),
|
|
4296
4530
|
"rdt-th-resizing": columnIsResizing(wh().header.column.id),
|
|
4297
4531
|
"rdt-cell-active": isActiveCell("__header", headerColIndexOf(hg(), wh().header), hgLevel())
|
|
4298
|
-
})} role="columnheader" data-col={rozieAttr(wh().header.column.id)} data-grid-cell="" data-row="__header" data-header-level={rozieAttr(hgLevel())} colSpan={rozieAttr(wh().span > 1 ? wh().span : null)} data-col-index={rozieAttr(headerColIndexOf(hg(), wh().header))} tabIndex={rozieAttr(cellTabindex("__header", headerColIndexOf(hg(), wh().header), hgLevel()))} aria-sort={rozieAttr(ariaSortFor(wh().header.column.id))} style={parseInlineStyle(thStyle(wh().header
|
|
4532
|
+
})} role="columnheader" data-col={rozieAttr(wh().header.column.id)} data-grid-cell="" data-row="__header" data-header-level={rozieAttr(hgLevel())} colSpan={rozieAttr(wh().span > 1 ? wh().span : null)} data-col-index={rozieAttr(headerColIndexOf(hg(), wh().header))} tabIndex={rozieAttr(cellTabindex("__header", headerColIndexOf(hg(), wh().header), hgLevel()))} aria-sort={rozieAttr(ariaSortFor(wh().header.column.id))} style={parseInlineStyle(thStyle(wh().header))} data-rozie-s-d5dcab4c="">
|
|
4299
4533
|
{<Show when={isSelectColumn(wh().header.column.id)} fallback={<Show when={isExpanderColumn(wh().header.column.id)} fallback={<span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
|
|
4300
4534
|
{<Show when={wh().header.column.getCanSort && wh().header.column.getCanSort()} fallback={<span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
|
|
4301
4535
|
<span class={"rdt-header-label"} data-rozie-s-d5dcab4c="">
|
|
4302
|
-
{
|
|
4303
|
-
columnId
|
|
4304
|
-
|
|
4305
|
-
|
|
4536
|
+
{_props.slots?.[`colHeader-${wh().header.column.id}`]?.({
|
|
4537
|
+
get columnId() {
|
|
4538
|
+
return wh().header.column.id;
|
|
4539
|
+
},
|
|
4540
|
+
get column() {
|
|
4541
|
+
return wh().header.column;
|
|
4542
|
+
},
|
|
4543
|
+
get label() {
|
|
4544
|
+
return headerLabel(wh().header.column.id);
|
|
4545
|
+
}
|
|
4546
|
+
}) ?? (_props.colHeaderSlot ?? _props.slots?.["colHeader"])?.({
|
|
4547
|
+
get columnId() {
|
|
4548
|
+
return wh().header.column.id;
|
|
4549
|
+
},
|
|
4550
|
+
get column() {
|
|
4551
|
+
return wh().header.column;
|
|
4552
|
+
},
|
|
4553
|
+
get label() {
|
|
4554
|
+
return headerLabel(wh().header.column.id);
|
|
4555
|
+
}
|
|
4306
4556
|
}) ?? rozieDisplay(headerLabel(wh().header.column.id))}
|
|
4307
4557
|
</span>
|
|
4308
4558
|
</span>}><button type="button" class={"rdt-sort-btn"} onClick={($event) => {
|
|
4309
4559
|
onHeaderSort(wh().header.column.id, $event);
|
|
4310
4560
|
}} data-rozie-s-d5dcab4c="">
|
|
4311
4561
|
<span class={"rdt-header-label"} data-rozie-s-d5dcab4c="">
|
|
4312
|
-
{
|
|
4313
|
-
columnId
|
|
4314
|
-
|
|
4315
|
-
|
|
4562
|
+
{_props.slots?.[`colHeader-${wh().header.column.id}`]?.({
|
|
4563
|
+
get columnId() {
|
|
4564
|
+
return wh().header.column.id;
|
|
4565
|
+
},
|
|
4566
|
+
get column() {
|
|
4567
|
+
return wh().header.column;
|
|
4568
|
+
},
|
|
4569
|
+
get label() {
|
|
4570
|
+
return headerLabel(wh().header.column.id);
|
|
4571
|
+
}
|
|
4572
|
+
}) ?? (_props.colHeaderSlot ?? _props.slots?.["colHeader"])?.({
|
|
4573
|
+
get columnId() {
|
|
4574
|
+
return wh().header.column.id;
|
|
4575
|
+
},
|
|
4576
|
+
get column() {
|
|
4577
|
+
return wh().header.column;
|
|
4578
|
+
},
|
|
4579
|
+
get label() {
|
|
4580
|
+
return headerLabel(wh().header.column.id);
|
|
4581
|
+
}
|
|
4316
4582
|
}) ?? rozieDisplay(headerLabel(wh().header.column.id))}
|
|
4317
4583
|
</span>
|
|
4318
4584
|
<span class={"rdt-sort-ind"} aria-hidden="true" data-rozie-s-d5dcab4c="">{rozieDisplay(sortIndicator(wh().header.column.id))}</span>
|
|
@@ -4340,9 +4606,15 @@ function DataTable(_props) {
|
|
|
4340
4606
|
}} data-rozie-s-d5dcab4c=""><span class={"rdt-resize-grip"} aria-hidden="true" data-rozie-s-d5dcab4c="" /></button>
|
|
4341
4607
|
</span>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
|
|
4342
4608
|
{(_props.selectAllSlot ?? _props.slots?.["selectAll"])?.({
|
|
4343
|
-
checked
|
|
4344
|
-
|
|
4345
|
-
|
|
4609
|
+
get checked() {
|
|
4610
|
+
return isAllRowsSelected();
|
|
4611
|
+
},
|
|
4612
|
+
get indeterminate() {
|
|
4613
|
+
return isSomeRowsSelected();
|
|
4614
|
+
},
|
|
4615
|
+
get toggle() {
|
|
4616
|
+
return onToggleAllRows;
|
|
4617
|
+
}
|
|
4346
4618
|
}) ?? <Show when={local.selectionMode === "multiple"}><input type="checkbox" aria-label="Select all rows" class={"rdt-select-all"} checked={isAllRowsSelected()} onChange={($event) => {
|
|
4347
4619
|
onToggleAllRows($event);
|
|
4348
4620
|
}} data-rozie-s-d5dcab4c="" /></Show>}
|
|
@@ -4353,18 +4625,44 @@ function DataTable(_props) {
|
|
|
4353
4625
|
{<Show when={hasAnyFilterableColumn()}><tr class={"rdt-filter-row"} data-rozie-s-d5dcab4c="">
|
|
4354
4626
|
{<Show when={colsWindowed()}><th class={"rdt-col-spacer"} aria-hidden="true" style={parseInlineStyle("width:" + colPadLeft() + "px;padding:0;border:0")} data-rozie-s-d5dcab4c="" /></Show>}<Key each={windowedHeadersFor(headerGroups()[headerGroups().length - 1], headerGroups().length - 1)} by={(wh) => wh.header.id}>{(wh) => <th class={"rdt-filter-cell"} role="presentation" data-col={rozieAttr(wh().header.column.id)} style={parseInlineStyle(pinStyle(wh().header.column.id))} data-rozie-s-d5dcab4c="">
|
|
4355
4627
|
{<Show when={isSelectColumn(wh().header.column.id)} fallback={<Show when={isExpanderColumn(wh().header.column.id)} fallback={<span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
|
|
4356
|
-
{<Show when={columnIsFilterable(wh().header.column.id)
|
|
4628
|
+
{<Show when={columnIsFilterable(wh().header.column.id)}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
|
|
4629
|
+
{_props.slots?.[`filter-${wh().header.column.id}`]?.({
|
|
4630
|
+
get columnId() {
|
|
4631
|
+
return wh().header.column.id;
|
|
4632
|
+
},
|
|
4633
|
+
get value() {
|
|
4634
|
+
return columnFilterValue(wh().header.column.id);
|
|
4635
|
+
},
|
|
4636
|
+
get uniqueValues() {
|
|
4637
|
+
return getFacetedUniqueValues$1(wh().header.column.id);
|
|
4638
|
+
},
|
|
4639
|
+
get minMax() {
|
|
4640
|
+
return getFacetedMinMaxValues$1(wh().header.column.id);
|
|
4641
|
+
},
|
|
4642
|
+
get setFilter() {
|
|
4643
|
+
return setColumnFilter;
|
|
4644
|
+
}
|
|
4645
|
+
}) ?? (_props.filterSlot ?? _props.slots?.["filter"])?.({
|
|
4646
|
+
get columnId() {
|
|
4647
|
+
return wh().header.column.id;
|
|
4648
|
+
},
|
|
4649
|
+
get value() {
|
|
4650
|
+
return columnFilterValue(wh().header.column.id);
|
|
4651
|
+
},
|
|
4652
|
+
get uniqueValues() {
|
|
4653
|
+
return getFacetedUniqueValues$1(wh().header.column.id);
|
|
4654
|
+
},
|
|
4655
|
+
get minMax() {
|
|
4656
|
+
return getFacetedMinMaxValues$1(wh().header.column.id);
|
|
4657
|
+
},
|
|
4658
|
+
get setFilter() {
|
|
4659
|
+
return setColumnFilter;
|
|
4660
|
+
}
|
|
4661
|
+
}) ?? <input type="text" aria-label={rozieAttr("Filter " + headerLabel(wh().header.column.id))} class={"rdt-col-filter"} value={columnFilterValue(wh().header.column.id)} onInput={($event) => {
|
|
4357
4662
|
onColumnFilterInput(wh().header.column.id, $event);
|
|
4358
4663
|
}} onClick={($event) => {
|
|
4359
4664
|
stopEvent($event);
|
|
4360
|
-
}} data-rozie-s-d5dcab4c=""
|
|
4361
|
-
{(_props.filterSlot ?? _props.slots?.["filter"])?.({
|
|
4362
|
-
columnId: wh().header.column.id,
|
|
4363
|
-
value: columnFilterValue(wh().header.column.id),
|
|
4364
|
-
uniqueValues: getFacetedUniqueValues$1(wh().header.column.id),
|
|
4365
|
-
minMax: getFacetedMinMaxValues$1(wh().header.column.id),
|
|
4366
|
-
setFilter: setColumnFilter
|
|
4367
|
-
})}
|
|
4665
|
+
}} data-rozie-s-d5dcab4c="" />}
|
|
4368
4666
|
</span></Show>}</span>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Show>}</th>}</Key>
|
|
4369
4667
|
{<Show when={colsWindowed()}><th class={"rdt-col-spacer"} aria-hidden="true" style={parseInlineStyle("width:" + colPadRight() + "px;padding:0;border:0")} data-rozie-s-d5dcab4c="" /></Show>}</tr></Show>}</thead>
|
|
4370
4668
|
|
|
@@ -4388,26 +4686,99 @@ function DataTable(_props) {
|
|
|
4388
4686
|
})} role={rozieAttr(cellRole())} data-col={rozieAttr(cell().column.id)} data-grid-cell="" data-row={rozieAttr(wr().vi.index)} data-col-index={rozieAttr(colIndexOf(wr().row, cell()))} tabIndex={rozieAttr(cellTabindex(String(wr().vi.index), colIndexOf(wr().row, cell())))} style={parseInlineStyle(bodyCellStyle(wr().row, cell().column.id))} aria-invalid={rozieAttr(cellAriaInvalid(wr().vi.index, colIndexOf(wr().row, cell())))} data-in-range={rozieAttr(inRange(wr().vi.index, colIndexOf(wr().row, cell())) ? "true" : null)} data-agg-cell={rozieAttr(cellIsAggregated(cell()) ? cell().column.id : null)} data-rozie-s-d5dcab4c="">
|
|
4389
4687
|
|
|
4390
4688
|
{<Show when={isExpanderColumn(cell().column.id)} fallback={<Show when={isSelectColumn(cell().column.id)} fallback={<Show when={cellIsGrouped(cell())} fallback={<Show when={isEditing(wr().vi.index, colIndexOf(wr().row, cell()))} fallback={<Show when={cellIsPlaceholder(cell())} fallback={<span class={"rdt-cell-value"} data-rozie-s-d5dcab4c="">
|
|
4391
|
-
{
|
|
4392
|
-
columnId
|
|
4393
|
-
|
|
4394
|
-
|
|
4395
|
-
|
|
4689
|
+
{_props.slots?.[`cell-${cell().column.id}`]?.({
|
|
4690
|
+
get columnId() {
|
|
4691
|
+
return cell().column.id;
|
|
4692
|
+
},
|
|
4693
|
+
get column() {
|
|
4694
|
+
return cell().column;
|
|
4695
|
+
},
|
|
4696
|
+
get row() {
|
|
4697
|
+
return cellSlotRow(wr().row);
|
|
4698
|
+
},
|
|
4699
|
+
get value() {
|
|
4700
|
+
return cell().getValue();
|
|
4701
|
+
}
|
|
4702
|
+
}) ?? (_props.cellSlot ?? _props.slots?.["cell"])?.({
|
|
4703
|
+
get columnId() {
|
|
4704
|
+
return cell().column.id;
|
|
4705
|
+
},
|
|
4706
|
+
get column() {
|
|
4707
|
+
return cell().column;
|
|
4708
|
+
},
|
|
4709
|
+
get row() {
|
|
4710
|
+
return cellSlotRow(wr().row);
|
|
4711
|
+
},
|
|
4712
|
+
get value() {
|
|
4713
|
+
return cell().getValue();
|
|
4714
|
+
}
|
|
4396
4715
|
}) ?? rozieDisplay(cell().getValue())}
|
|
4397
4716
|
</span>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
|
|
4398
|
-
{<Show when={
|
|
4717
|
+
{<Show when={editorTypeOf(cell().column.id) === "number"} fallback={<Show when={editorTypeOf(cell().column.id) === "select"} fallback={<Show when={editorTypeOf(cell().column.id) === "checkbox"} fallback={<Show when={editorTypeOf(cell().column.id) === "custom"} fallback={<input type="text" data-editing-cell="" data-builtin-editor="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event) => {
|
|
4399
4718
|
onCellEditorInput(cell().column.id, $event);
|
|
4400
4719
|
}} onKeyDown={($event) => {
|
|
4401
4720
|
onEditorKeyDown($event);
|
|
4402
4721
|
}} onBlur={($event) => {
|
|
4403
4722
|
onEditorBlur($event);
|
|
4404
|
-
}} data-rozie-s-d5dcab4c="" />}><
|
|
4723
|
+
}} data-rozie-s-d5dcab4c="" />}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
|
|
4724
|
+
{_props.slots?.[`editor-${cell().column.id}`]?.({
|
|
4725
|
+
get columnId() {
|
|
4726
|
+
return cell().column.id;
|
|
4727
|
+
},
|
|
4728
|
+
get column() {
|
|
4729
|
+
return cell().column;
|
|
4730
|
+
},
|
|
4731
|
+
get row() {
|
|
4732
|
+
return cellSlotRow(wr().row);
|
|
4733
|
+
},
|
|
4734
|
+
get value() {
|
|
4735
|
+
return editorValueFor(cell().column.id);
|
|
4736
|
+
},
|
|
4737
|
+
get commit() {
|
|
4738
|
+
return editorCommitFor(cell().column.id);
|
|
4739
|
+
},
|
|
4740
|
+
get cancel() {
|
|
4741
|
+
return editorCancelFor();
|
|
4742
|
+
},
|
|
4743
|
+
get autofocus() {
|
|
4744
|
+
return editorAutofocusFor(cell().column.id, wr().vi.index);
|
|
4745
|
+
}
|
|
4746
|
+
}) ?? (_props.editorSlot ?? _props.slots?.["editor"])?.({
|
|
4747
|
+
get columnId() {
|
|
4748
|
+
return cell().column.id;
|
|
4749
|
+
},
|
|
4750
|
+
get column() {
|
|
4751
|
+
return cell().column;
|
|
4752
|
+
},
|
|
4753
|
+
get row() {
|
|
4754
|
+
return cellSlotRow(wr().row);
|
|
4755
|
+
},
|
|
4756
|
+
get value() {
|
|
4757
|
+
return editorValueFor(cell().column.id);
|
|
4758
|
+
},
|
|
4759
|
+
get commit() {
|
|
4760
|
+
return editorCommitFor(cell().column.id);
|
|
4761
|
+
},
|
|
4762
|
+
get cancel() {
|
|
4763
|
+
return editorCancelFor();
|
|
4764
|
+
},
|
|
4765
|
+
get autofocus() {
|
|
4766
|
+
return editorAutofocusFor(cell().column.id, wr().vi.index);
|
|
4767
|
+
}
|
|
4768
|
+
}) ?? <input type="text" data-editing-cell="" data-builtin-editor="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event) => {
|
|
4769
|
+
onCellEditorInput(cell().column.id, $event);
|
|
4770
|
+
}} onKeyDown={($event) => {
|
|
4771
|
+
onEditorKeyDown($event);
|
|
4772
|
+
}} onBlur={($event) => {
|
|
4773
|
+
onEditorBlur($event);
|
|
4774
|
+
}} data-rozie-s-d5dcab4c="" />}
|
|
4775
|
+
</span></Show>}><input type="checkbox" data-editing-cell="" data-builtin-editor="" class={"rdt-cell-editor"} checked={editorCheckedFor(cell().column.id)} onChange={($event) => {
|
|
4405
4776
|
onCellEditorCheckbox(cell().column.id, $event);
|
|
4406
4777
|
}} onKeyDown={($event) => {
|
|
4407
4778
|
onEditorKeyDown($event);
|
|
4408
4779
|
}} onBlur={($event) => {
|
|
4409
4780
|
onEditorBlur($event);
|
|
4410
|
-
}} data-rozie-s-d5dcab4c="" /></Show>}><select data-editing-cell="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onChange={($event) => {
|
|
4781
|
+
}} data-rozie-s-d5dcab4c="" /></Show>}><select data-editing-cell="" data-builtin-editor="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onChange={($event) => {
|
|
4411
4782
|
onCellEditorInput(cell().column.id, $event);
|
|
4412
4783
|
}} onKeyDown={($event) => {
|
|
4413
4784
|
onEditorKeyDown($event);
|
|
@@ -4415,39 +4786,54 @@ function DataTable(_props) {
|
|
|
4415
4786
|
onEditorBlur($event);
|
|
4416
4787
|
}} data-rozie-s-d5dcab4c="">
|
|
4417
4788
|
<Key each={editorOptionsOf(cell().column.id)} by={(opt) => opt.value}>{(opt) => <option value={rozieAttr(opt().value)} data-rozie-s-d5dcab4c="">{rozieDisplay(opt().label)}</option>}</Key>
|
|
4418
|
-
</select></Show>}><input type="number" data-editing-cell="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event) => {
|
|
4789
|
+
</select></Show>}><input type="number" data-editing-cell="" data-builtin-editor="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event) => {
|
|
4419
4790
|
onCellEditorInput(cell().column.id, $event);
|
|
4420
4791
|
}} onKeyDown={($event) => {
|
|
4421
4792
|
onEditorKeyDown($event);
|
|
4422
4793
|
}} onBlur={($event) => {
|
|
4423
4794
|
onEditorBlur($event);
|
|
4424
|
-
}} data-rozie-s-d5dcab4c="" /></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
|
|
4425
|
-
{(_props.editorSlot ?? _props.slots?.["editor"])?.({
|
|
4426
|
-
columnId: cell().column.id,
|
|
4427
|
-
column: cell().column,
|
|
4428
|
-
row: cellSlotRow(wr().row),
|
|
4429
|
-
value: editorValueFor(cell().column.id),
|
|
4430
|
-
commit: editorCommitFor(cell().column.id),
|
|
4431
|
-
cancel: editorCancelFor(),
|
|
4432
|
-
autofocus: editorAutofocusFor(cell().column.id, wr().vi.index)
|
|
4433
|
-
})}
|
|
4434
|
-
</span></Show>}</span></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
|
|
4795
|
+
}} data-rozie-s-d5dcab4c="" /></Show>}</span></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
|
|
4435
4796
|
<button type="button" data-expander="" aria-expanded={!!rowIsExpanded(wr().row)} aria-label={rozieAttr(rowIsExpanded(wr().row) ? "Collapse group" : "Expand group")} class={"rdt-expander rdt-group-toggle"} onClick={($event) => {
|
|
4436
4797
|
onToggleExpand(wr().row, $event);
|
|
4437
4798
|
}} data-rozie-s-d5dcab4c="">{rozieDisplay(rowIsExpanded(wr().row) ? "▾" : "▸")}</button>
|
|
4438
4799
|
<span class={"rdt-group-value"} data-rozie-s-d5dcab4c="">
|
|
4439
|
-
{
|
|
4440
|
-
columnId
|
|
4441
|
-
|
|
4442
|
-
|
|
4443
|
-
|
|
4800
|
+
{_props.slots?.[`cell-${cell().column.id}`]?.({
|
|
4801
|
+
get columnId() {
|
|
4802
|
+
return cell().column.id;
|
|
4803
|
+
},
|
|
4804
|
+
get column() {
|
|
4805
|
+
return cell().column;
|
|
4806
|
+
},
|
|
4807
|
+
get row() {
|
|
4808
|
+
return cellSlotRow(wr().row);
|
|
4809
|
+
},
|
|
4810
|
+
get value() {
|
|
4811
|
+
return cell().getValue();
|
|
4812
|
+
}
|
|
4813
|
+
}) ?? (_props.cellSlot ?? _props.slots?.["cell"])?.({
|
|
4814
|
+
get columnId() {
|
|
4815
|
+
return cell().column.id;
|
|
4816
|
+
},
|
|
4817
|
+
get column() {
|
|
4818
|
+
return cell().column;
|
|
4819
|
+
},
|
|
4820
|
+
get row() {
|
|
4821
|
+
return cellSlotRow(wr().row);
|
|
4822
|
+
},
|
|
4823
|
+
get value() {
|
|
4824
|
+
return cell().getValue();
|
|
4825
|
+
}
|
|
4444
4826
|
}) ?? rozieDisplay(cell().getValue())}
|
|
4445
4827
|
</span>
|
|
4446
4828
|
<span class={"rdt-group-count"} data-rozie-s-d5dcab4c="">{rozieDisplay("(" + groupSubRowCount(wr().row) + ")")}</span>
|
|
4447
4829
|
</span></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
|
|
4448
4830
|
{(_props.selectCellSlot ?? _props.slots?.["selectCell"])?.({
|
|
4449
|
-
row
|
|
4450
|
-
|
|
4831
|
+
get row() {
|
|
4832
|
+
return cellSlotRow(wr().row);
|
|
4833
|
+
},
|
|
4834
|
+
get checked() {
|
|
4835
|
+
return rowIsSelected(wr().row);
|
|
4836
|
+
},
|
|
4451
4837
|
toggle: (e) => onToggleRow(wr().row, e)
|
|
4452
4838
|
}) ?? <input type="checkbox" aria-label="Select row" class={"rdt-select-row"} checked={rowIsSelected(wr().row)} onChange={($event) => {
|
|
4453
4839
|
onToggleRow(wr().row, $event);
|
|
@@ -4463,7 +4849,9 @@ function DataTable(_props) {
|
|
|
4463
4849
|
|
|
4464
4850
|
{<Show when={rowShowsDetail(wr().row)}><tr class={"rdt-detail-row"} role="row" data-detail-row={rozieAttr(wr().row.id)} data-rozie-s-d5dcab4c="">
|
|
4465
4851
|
<td class={"rdt-detail-cell"} colSpan={rozieAttr(windowedColSpan())} data-rozie-s-d5dcab4c="">
|
|
4466
|
-
{(_props.detailSlot ?? _props.slots?.["detail"])?.({ row
|
|
4852
|
+
{(_props.detailSlot ?? _props.slots?.["detail"])?.({ get row() {
|
|
4853
|
+
return wr().row.original;
|
|
4854
|
+
} })}
|
|
4467
4855
|
</td>
|
|
4468
4856
|
</tr></Show>}</>}</Key>
|
|
4469
4857
|
|