@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.cjs
CHANGED
|
@@ -222,7 +222,35 @@ const indexOfRowIn = (rows, rowOriginal, rowId) => {
|
|
|
222
222
|
};
|
|
223
223
|
//#endregion
|
|
224
224
|
//#region src/DataTable.tsx
|
|
225
|
-
(0, _rozie_runtime_solid.__rozieInjectStyle)("DataTable-d5dcab4c",
|
|
225
|
+
(0, _rozie_runtime_solid.__rozieInjectStyle)("DataTable-d5dcab4c", `[data-rozie-s-d5dcab4c]:host {
|
|
226
|
+
--rdt-font: var(--rozie-data-table-font);
|
|
227
|
+
--rdt-color: var(--rozie-data-table-fg);
|
|
228
|
+
--rdt-cell-padding: var(--rozie-data-table-cell-padding);
|
|
229
|
+
--rdt-border: 1px solid var(--rozie-data-table-border-color);
|
|
230
|
+
--rdt-header-bg: var(--rozie-data-table-header-bg);
|
|
231
|
+
--rdt-header-weight: var(--rozie-data-table-header-weight);
|
|
232
|
+
--rdt-sort-ind-opacity: var(--rozie-data-table-sort-indicator-opacity);
|
|
233
|
+
--rdt-filter-border: 1px solid var(--rozie-data-table-control-border-color);
|
|
234
|
+
--rdt-filter-radius: var(--rozie-data-table-radius);
|
|
235
|
+
--rdt-page-btn-border: 1px solid var(--rozie-data-table-control-border-color);
|
|
236
|
+
--rdt-page-btn-radius: var(--rozie-data-table-radius);
|
|
237
|
+
--rdt-page-btn-disabled-opacity: var(--rozie-data-table-disabled-opacity);
|
|
238
|
+
--rdt-page-size-border: 1px solid var(--rozie-data-table-control-border-color);
|
|
239
|
+
--rdt-page-size-radius: var(--rozie-data-table-radius);
|
|
240
|
+
--rdt-resize-grip-color: var(--rozie-data-table-resize-grip-color);
|
|
241
|
+
--rdt-resize-grip-active: var(--rozie-data-table-resize-grip-active);
|
|
242
|
+
--rdt-pin-btn-border: 1px solid var(--rozie-data-table-control-border-color);
|
|
243
|
+
--rdt-pin-btn-radius: var(--rozie-data-table-radius);
|
|
244
|
+
--rdt-pin-btn-active-bg: var(--rozie-data-table-pin-active-bg);
|
|
245
|
+
--rdt-colvis-summary-border: 1px solid var(--rozie-data-table-control-border-color);
|
|
246
|
+
--rdt-colvis-summary-radius: var(--rozie-data-table-radius);
|
|
247
|
+
--rdt-colvis-menu-border: 1px solid var(--rozie-data-table-border-color);
|
|
248
|
+
--rdt-colvis-menu-radius: var(--rozie-data-table-radius);
|
|
249
|
+
--rdt-colvis-menu-bg: var(--rozie-data-table-menu-bg);
|
|
250
|
+
--rdt-colvis-menu-shadow: var(--rozie-data-table-menu-shadow);
|
|
251
|
+
--rdt-select-accent: var(--rozie-data-table-select-accent);
|
|
252
|
+
}
|
|
253
|
+
.rozie-data-table[data-rozie-s-d5dcab4c] {
|
|
226
254
|
border-collapse: collapse;
|
|
227
255
|
width: 100%;
|
|
228
256
|
font: var(--rdt-font, 14px system-ui, sans-serif);
|
|
@@ -710,6 +738,7 @@ function DataTable(_props) {
|
|
|
710
738
|
const [liveAnnounce, setLiveAnnounce] = (0, Solid_js.createSignal)("");
|
|
711
739
|
(0, Solid_js.onMount)(() => {
|
|
712
740
|
setDataDefault(data() || []);
|
|
741
|
+
seedColumnPinning();
|
|
713
742
|
table = (0, _tanstack_table_core.createTable)({
|
|
714
743
|
data: currentData(),
|
|
715
744
|
columns: tableColumns(),
|
|
@@ -803,6 +832,7 @@ function DataTable(_props) {
|
|
|
803
832
|
}
|
|
804
833
|
if (colsWindowed()) {
|
|
805
834
|
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");
|
|
835
|
+
bumpWindowVer();
|
|
806
836
|
}
|
|
807
837
|
};
|
|
808
838
|
if (typeof requestAnimationFrame === "function") requestAnimationFrame(() => requestAnimationFrame(afterFirstFrame));
|
|
@@ -852,6 +882,7 @@ function DataTable(_props) {
|
|
|
852
882
|
local.columns,
|
|
853
883
|
colReg()
|
|
854
884
|
], (v) => (0, Solid_js.untrack)(() => (() => {
|
|
885
|
+
seedColumnPinning();
|
|
855
886
|
reFeed();
|
|
856
887
|
maybeClearHistoryOnExternalSwap();
|
|
857
888
|
})()), { defer: true }));
|
|
@@ -900,6 +931,34 @@ function DataTable(_props) {
|
|
|
900
931
|
left: rail.concat(deduped)
|
|
901
932
|
};
|
|
902
933
|
}
|
|
934
|
+
let pinSeedApplied = false;
|
|
935
|
+
function seedColumnPinning() {
|
|
936
|
+
if (pinSeedApplied) return;
|
|
937
|
+
const live = columnPinning() != null ? columnPinning() : columnPinningDefault();
|
|
938
|
+
const isRealPin = (id) => id !== SELECT_COL_ID && id !== EXPANDER_COL_ID;
|
|
939
|
+
if ((live && live.left ? live.left : []).filter(isRealPin).length > 0 || (live && live.right ? live.right : []).filter(isRealPin).length > 0) {
|
|
940
|
+
pinSeedApplied = true;
|
|
941
|
+
return;
|
|
942
|
+
}
|
|
943
|
+
const defs = columnDefs();
|
|
944
|
+
if (!defs.length) return;
|
|
945
|
+
const left = [];
|
|
946
|
+
const right = [];
|
|
947
|
+
for (let i = 0; i < defs.length; i++) {
|
|
948
|
+
const def = defs[i];
|
|
949
|
+
if (!def) continue;
|
|
950
|
+
if (def.pinned === "left") left.push(def.id);
|
|
951
|
+
else if (def.pinned === "right") right.push(def.id);
|
|
952
|
+
}
|
|
953
|
+
if (!left.length && !right.length) return;
|
|
954
|
+
pinSeedApplied = true;
|
|
955
|
+
const seeded = {
|
|
956
|
+
left,
|
|
957
|
+
right
|
|
958
|
+
};
|
|
959
|
+
setColumnPinningDefault(seeded);
|
|
960
|
+
setColumnPinning(seeded);
|
|
961
|
+
}
|
|
903
962
|
function currentState() {
|
|
904
963
|
return {
|
|
905
964
|
sorting: sorting() != null ? sorting() : sortingDefault(),
|
|
@@ -1258,9 +1317,12 @@ function DataTable(_props) {
|
|
|
1258
1317
|
function onColumnPinningChangeCb(updater) {
|
|
1259
1318
|
writeColumnPinning(applyUpdater(updater, currentState().columnPinning));
|
|
1260
1319
|
}
|
|
1320
|
+
let columnSizingInfoSync = null;
|
|
1261
1321
|
function onColumnSizingInfoChangeCb(updater) {
|
|
1262
|
-
const next = applyUpdater(updater, columnSizingInfo());
|
|
1263
|
-
|
|
1322
|
+
const next = applyUpdater(updater, columnSizingInfoSync != null ? columnSizingInfoSync : columnSizingInfo());
|
|
1323
|
+
if (next == null) return;
|
|
1324
|
+
columnSizingInfoSync = next;
|
|
1325
|
+
setColumnSizingInfo(next);
|
|
1264
1326
|
}
|
|
1265
1327
|
function resolveVirtual() {
|
|
1266
1328
|
const v = local.virtual;
|
|
@@ -1757,12 +1819,6 @@ function DataTable(_props) {
|
|
|
1757
1819
|
const m = editMetaOf(colId);
|
|
1758
1820
|
return m && m.editorOptions != null ? m.editorOptions : [];
|
|
1759
1821
|
}
|
|
1760
|
-
function hasEditorSlot(colId) {
|
|
1761
|
-
return editorTypeOf(colId) === "custom" && !!(_props.editorSlot ?? _props.slots?.["editor"]);
|
|
1762
|
-
}
|
|
1763
|
-
function hasFilterSlot() {
|
|
1764
|
-
return !!(_props.filterSlot ?? _props.slots?.["filter"]);
|
|
1765
|
-
}
|
|
1766
1822
|
function columnIsFilterable(colId) {
|
|
1767
1823
|
const d = defFor(colId);
|
|
1768
1824
|
return !!(d && d.filterable);
|
|
@@ -1771,11 +1827,9 @@ function DataTable(_props) {
|
|
|
1771
1827
|
const d = defFor(colId);
|
|
1772
1828
|
return d ? d.header : colId;
|
|
1773
1829
|
}
|
|
1774
|
-
function headerWidth(
|
|
1775
|
-
if (tick() < 0 || !
|
|
1776
|
-
const
|
|
1777
|
-
if (!col) return null;
|
|
1778
|
-
const w = col.getSize();
|
|
1830
|
+
function headerWidth(header) {
|
|
1831
|
+
if (tick() < 0 || !header || typeof header.getSize !== "function") return null;
|
|
1832
|
+
const w = header.getSize();
|
|
1779
1833
|
return w != null && w > 0 ? w + "px" : null;
|
|
1780
1834
|
}
|
|
1781
1835
|
function onResizeStart(colId, evt) {
|
|
@@ -1839,11 +1893,11 @@ function DataTable(_props) {
|
|
|
1839
1893
|
if (side === "right") return "position:sticky;right:" + (col.getAfter ? col.getAfter("right") : 0) + "px;z-index:" + zIndex + ";";
|
|
1840
1894
|
return "";
|
|
1841
1895
|
}
|
|
1842
|
-
function thStyle(
|
|
1896
|
+
function thStyle(header) {
|
|
1843
1897
|
let s = "";
|
|
1844
|
-
const w = headerWidth(
|
|
1898
|
+
const w = headerWidth(header);
|
|
1845
1899
|
if (w) s += "width:" + w + ";";
|
|
1846
|
-
s += pinStyle(
|
|
1900
|
+
s += pinStyle(header && header.column ? header.column.id : null, 2);
|
|
1847
1901
|
return s;
|
|
1848
1902
|
}
|
|
1849
1903
|
function onGlobalFilterInput(evt) {
|
|
@@ -3199,8 +3253,9 @@ function DataTable(_props) {
|
|
|
3199
3253
|
fillEdgeScrollRaf = null;
|
|
3200
3254
|
}
|
|
3201
3255
|
}
|
|
3202
|
-
|
|
3203
|
-
|
|
3256
|
+
const FILL_HITTEST_PROBE_RADIUS_PX = 8;
|
|
3257
|
+
const FILL_HITTEST_PROBE_STEP_PX = 2;
|
|
3258
|
+
function resolveCellAt(clientX, clientY) {
|
|
3204
3259
|
let el = document.elementFromPoint(clientX, clientY);
|
|
3205
3260
|
while (el && el.shadowRoot && el.shadowRoot.elementFromPoint) {
|
|
3206
3261
|
const inner = el.shadowRoot.elementFromPoint(clientX, clientY);
|
|
@@ -3221,6 +3276,18 @@ function DataTable(_props) {
|
|
|
3221
3276
|
c
|
|
3222
3277
|
};
|
|
3223
3278
|
}
|
|
3279
|
+
function cellIndexFromPoint(clientX, clientY) {
|
|
3280
|
+
if (typeof document === "undefined" || !document.elementFromPoint) return null;
|
|
3281
|
+
const direct = resolveCellAt(clientX, clientY);
|
|
3282
|
+
if (direct) return direct;
|
|
3283
|
+
for (let d = FILL_HITTEST_PROBE_STEP_PX; d <= FILL_HITTEST_PROBE_RADIUS_PX; d += FILL_HITTEST_PROBE_STEP_PX) {
|
|
3284
|
+
const right = resolveCellAt(clientX + d, clientY);
|
|
3285
|
+
if (right) return right;
|
|
3286
|
+
const left = resolveCellAt(clientX - d, clientY);
|
|
3287
|
+
if (left) return left;
|
|
3288
|
+
}
|
|
3289
|
+
return null;
|
|
3290
|
+
}
|
|
3224
3291
|
function onFillHandlePointerDown(e) {
|
|
3225
3292
|
if (!e) return;
|
|
3226
3293
|
if (e.preventDefault) e.preventDefault();
|
|
@@ -3393,12 +3460,24 @@ function DataTable(_props) {
|
|
|
3393
3460
|
const row = (rows() || [])[editingRow()];
|
|
3394
3461
|
return row ? row.id : null;
|
|
3395
3462
|
}
|
|
3396
|
-
function
|
|
3463
|
+
function resolveEditFocusCellEl(rowIndex, colIndex) {
|
|
3464
|
+
if (rowIndex == null || colIndex == null || rowIndex < 0 || colIndex < 0) return null;
|
|
3465
|
+
return resolveCellEl(String(rowIndex), colIndex);
|
|
3466
|
+
}
|
|
3467
|
+
function focusEditorWhenReady(rowIndex, colIndex, selectAll = true) {
|
|
3397
3468
|
if (!gridRoot) return;
|
|
3398
|
-
if (editFocusColId() != null && hasEditorSlot(editFocusColId())) return;
|
|
3399
3469
|
let attempts = 0;
|
|
3400
3470
|
const tryFocus = () => {
|
|
3401
|
-
const
|
|
3471
|
+
const cellEl = resolveEditFocusCellEl(rowIndex, colIndex);
|
|
3472
|
+
const el = cellEl && cellEl.querySelector ? cellEl.querySelector("[data-editing-cell][data-builtin-editor]") : null;
|
|
3473
|
+
if (!el) {
|
|
3474
|
+
if (cellEl && cellEl.querySelector ? cellEl.querySelector("[data-editing-cell]") : null) return;
|
|
3475
|
+
attempts = attempts + 1;
|
|
3476
|
+
if (attempts >= 30) return;
|
|
3477
|
+
if (typeof requestAnimationFrame === "function") requestAnimationFrame(tryFocus);
|
|
3478
|
+
else setTimeout(tryFocus, 16);
|
|
3479
|
+
return;
|
|
3480
|
+
}
|
|
3402
3481
|
const ae = gridRoot && gridRoot.getRootNode ? gridRoot.getRootNode().activeElement : null;
|
|
3403
3482
|
if (ae && el && ae !== el && ae.closest && gridRoot.contains(ae) && ae.hasAttribute && ae.hasAttribute("data-editing-cell")) {
|
|
3404
3483
|
const aeCell = ae.closest("[data-grid-cell]");
|
|
@@ -3407,17 +3486,10 @@ function DataTable(_props) {
|
|
|
3407
3486
|
const elCol = elCell ? elCell.getAttribute("data-col-index") : null;
|
|
3408
3487
|
if (aeCol != null && aeCol !== elCol) return;
|
|
3409
3488
|
}
|
|
3410
|
-
|
|
3411
|
-
|
|
3412
|
-
|
|
3413
|
-
|
|
3414
|
-
} catch (e) {}
|
|
3415
|
-
return;
|
|
3416
|
-
}
|
|
3417
|
-
attempts = attempts + 1;
|
|
3418
|
-
if (attempts >= 30) return;
|
|
3419
|
-
if (typeof requestAnimationFrame === "function") requestAnimationFrame(tryFocus);
|
|
3420
|
-
else setTimeout(tryFocus, 16);
|
|
3489
|
+
el.focus();
|
|
3490
|
+
if (selectAll && el.select) try {
|
|
3491
|
+
el.select();
|
|
3492
|
+
} catch (e) {}
|
|
3421
3493
|
};
|
|
3422
3494
|
if (typeof requestAnimationFrame === "function") requestAnimationFrame(tryFocus);
|
|
3423
3495
|
else setTimeout(tryFocus, 0);
|
|
@@ -3448,7 +3520,7 @@ function DataTable(_props) {
|
|
|
3448
3520
|
setActiveInControl(true);
|
|
3449
3521
|
setEditVer(editVer() + 1);
|
|
3450
3522
|
setEditFocusColId(colId);
|
|
3451
|
-
focusEditorWhenReady(seed == null);
|
|
3523
|
+
focusEditorWhenReady(rowIndex, colIndex, seed == null);
|
|
3452
3524
|
}
|
|
3453
3525
|
function focusCellWhenReady(row, col) {
|
|
3454
3526
|
if (!gridRoot) return;
|
|
@@ -3456,6 +3528,11 @@ function DataTable(_props) {
|
|
|
3456
3528
|
const tryFocus = () => {
|
|
3457
3529
|
const el = resolveCellEl(String(row), col);
|
|
3458
3530
|
if (el) {
|
|
3531
|
+
const ae = gridRoot && gridRoot.getRootNode ? gridRoot.getRootNode().activeElement : null;
|
|
3532
|
+
if (ae && ae !== el && gridRoot.contains && gridRoot.contains(ae) && ae.closest) {
|
|
3533
|
+
const aeCell = ae.closest("[data-grid-cell]");
|
|
3534
|
+
if (aeCell && aeCell !== el) return;
|
|
3535
|
+
}
|
|
3459
3536
|
el.focus();
|
|
3460
3537
|
return;
|
|
3461
3538
|
}
|
|
@@ -3516,7 +3593,7 @@ function DataTable(_props) {
|
|
|
3516
3593
|
const err = runValidator(colId, newValue, rowOriginal);
|
|
3517
3594
|
if (err !== true) {
|
|
3518
3595
|
setInvalid(err);
|
|
3519
|
-
focusEditorWhenReady();
|
|
3596
|
+
focusEditorWhenReady(editingRow(), editingCol());
|
|
3520
3597
|
return false;
|
|
3521
3598
|
}
|
|
3522
3599
|
setInvalid("");
|
|
@@ -3609,12 +3686,10 @@ function DataTable(_props) {
|
|
|
3609
3686
|
}
|
|
3610
3687
|
function focusRowEditorAt(rowIndex, colIndex) {
|
|
3611
3688
|
if (!gridRoot) return;
|
|
3612
|
-
const colId = columnIdAt(rowIndex, colIndex);
|
|
3613
|
-
if (colId != null && hasEditorSlot(colId)) return;
|
|
3614
3689
|
let attempts = 0;
|
|
3615
3690
|
const tryFocus = () => {
|
|
3616
3691
|
const cellEl = resolveCellEl(String(rowIndex), colIndex);
|
|
3617
|
-
const ed = cellEl && cellEl.querySelector ? cellEl.querySelector("[data-editing-cell]") : null;
|
|
3692
|
+
const ed = cellEl && cellEl.querySelector ? cellEl.querySelector("[data-editing-cell][data-builtin-editor]") : null;
|
|
3618
3693
|
if (ed) {
|
|
3619
3694
|
ed.focus();
|
|
3620
3695
|
if (ed.select) try {
|
|
@@ -3622,6 +3697,7 @@ function DataTable(_props) {
|
|
|
3622
3697
|
} catch (e) {}
|
|
3623
3698
|
return;
|
|
3624
3699
|
}
|
|
3700
|
+
if (cellEl && cellEl.querySelector ? cellEl.querySelector("[data-editing-cell]") : null) return;
|
|
3625
3701
|
attempts = attempts + 1;
|
|
3626
3702
|
if (attempts >= 30) return;
|
|
3627
3703
|
if (typeof requestAnimationFrame === "function") requestAnimationFrame(tryFocus);
|
|
@@ -3653,7 +3729,7 @@ function DataTable(_props) {
|
|
|
3653
3729
|
setActiveInControl(true);
|
|
3654
3730
|
setEditVer(editVer() + 1);
|
|
3655
3731
|
setEditFocusColId(editable[0].colId);
|
|
3656
|
-
focusEditorWhenReady();
|
|
3732
|
+
focusEditorWhenReady(rowIndex, editable[0].colIndex);
|
|
3657
3733
|
}
|
|
3658
3734
|
function commitRow() {
|
|
3659
3735
|
if (editingRowIndex() == null) return false;
|
|
@@ -4105,8 +4181,12 @@ function DataTable(_props) {
|
|
|
4105
4181
|
|
|
4106
4182
|
{<Solid_js.Show when={local.groupable}><div class={"rdt-group-bar-host"} data-rozie-s-d5dcab4c="">
|
|
4107
4183
|
{(_props.groupBarSlot ?? _props.slots?.["groupBar"])?.({
|
|
4108
|
-
grouping
|
|
4109
|
-
|
|
4184
|
+
get grouping() {
|
|
4185
|
+
return groupingKeys();
|
|
4186
|
+
},
|
|
4187
|
+
get groupableColumns() {
|
|
4188
|
+
return groupableColumns();
|
|
4189
|
+
},
|
|
4110
4190
|
applyGrouping,
|
|
4111
4191
|
clearGrouping
|
|
4112
4192
|
}) ?? <_solid_primitives_keyed.Key each={groupingKeys()} by={(gk) => gk}>{(gk) => <span class={"rdt-group-token"} data-group-token="" data-rozie-s-d5dcab4c="">{(0, _rozie_runtime_solid.rozieDisplay)(gk())}</span>}</_solid_primitives_keyed.Key>}
|
|
@@ -4130,17 +4210,33 @@ function DataTable(_props) {
|
|
|
4130
4210
|
"rdt-expander-th": isExpanderColumn(header().column.id),
|
|
4131
4211
|
"rdt-th-resizing": columnIsResizing(header().column.id),
|
|
4132
4212
|
"rdt-cell-active": isActiveCell("__header", headerColIndexOf(hg(), header()), hgLevel())
|
|
4133
|
-
})} role="columnheader" data-col={(0, _rozie_runtime_solid.rozieAttr)(header().column.id)} data-grid-cell="" data-row="__header" data-header-level={(0, _rozie_runtime_solid.rozieAttr)(hgLevel())} colSpan={(0, _rozie_runtime_solid.rozieAttr)(header().colSpan > 1 ? header().colSpan : null)} data-col-index={(0, _rozie_runtime_solid.rozieAttr)(headerColIndexOf(hg(), header()))} tabIndex={(0, _rozie_runtime_solid.rozieAttr)(cellTabindex("__header", headerColIndexOf(hg(), header()), hgLevel()))} aria-sort={(0, _rozie_runtime_solid.rozieAttr)(ariaSortFor(header().column.id))} style={(0, _rozie_runtime_solid.parseInlineStyle)(thStyle(header()
|
|
4213
|
+
})} role="columnheader" data-col={(0, _rozie_runtime_solid.rozieAttr)(header().column.id)} data-grid-cell="" data-row="__header" data-header-level={(0, _rozie_runtime_solid.rozieAttr)(hgLevel())} colSpan={(0, _rozie_runtime_solid.rozieAttr)(header().colSpan > 1 ? header().colSpan : null)} data-col-index={(0, _rozie_runtime_solid.rozieAttr)(headerColIndexOf(hg(), header()))} tabIndex={(0, _rozie_runtime_solid.rozieAttr)(cellTabindex("__header", headerColIndexOf(hg(), header()), hgLevel()))} aria-sort={(0, _rozie_runtime_solid.rozieAttr)(ariaSortFor(header().column.id))} style={(0, _rozie_runtime_solid.parseInlineStyle)(thStyle(header()))} data-rozie-s-d5dcab4c="">
|
|
4134
4214
|
|
|
4135
4215
|
|
|
4136
4216
|
{<Solid_js.Show when={isSelectColumn(header().column.id)} fallback={<Solid_js.Show when={isExpanderColumn(header().column.id)} fallback={<span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
|
|
4137
4217
|
|
|
4138
4218
|
{<Solid_js.Show when={header().column.getCanSort && header().column.getCanSort()} fallback={<span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
|
|
4139
4219
|
<span class={"rdt-header-label"} data-rozie-s-d5dcab4c="">
|
|
4140
|
-
{
|
|
4141
|
-
columnId
|
|
4142
|
-
|
|
4143
|
-
|
|
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
|
+
}
|
|
4144
4240
|
}) ?? (0, _rozie_runtime_solid.rozieDisplay)(headerLabel(header().column.id))}
|
|
4145
4241
|
</span>
|
|
4146
4242
|
</span>}><button type="button" class={"rdt-sort-btn"} onClick={($event) => {
|
|
@@ -4148,10 +4244,26 @@ function DataTable(_props) {
|
|
|
4148
4244
|
}} data-rozie-s-d5dcab4c="">
|
|
4149
4245
|
|
|
4150
4246
|
<span class={"rdt-header-label"} data-rozie-s-d5dcab4c="">
|
|
4151
|
-
{
|
|
4152
|
-
columnId
|
|
4153
|
-
|
|
4154
|
-
|
|
4247
|
+
{_props.slots?.[`colHeader-${header().column.id}`]?.({
|
|
4248
|
+
get columnId() {
|
|
4249
|
+
return header().column.id;
|
|
4250
|
+
},
|
|
4251
|
+
get column() {
|
|
4252
|
+
return header().column;
|
|
4253
|
+
},
|
|
4254
|
+
get label() {
|
|
4255
|
+
return headerLabel(header().column.id);
|
|
4256
|
+
}
|
|
4257
|
+
}) ?? (_props.colHeaderSlot ?? _props.slots?.["colHeader"])?.({
|
|
4258
|
+
get columnId() {
|
|
4259
|
+
return header().column.id;
|
|
4260
|
+
},
|
|
4261
|
+
get column() {
|
|
4262
|
+
return header().column;
|
|
4263
|
+
},
|
|
4264
|
+
get label() {
|
|
4265
|
+
return headerLabel(header().column.id);
|
|
4266
|
+
}
|
|
4155
4267
|
}) ?? (0, _rozie_runtime_solid.rozieDisplay)(headerLabel(header().column.id))}
|
|
4156
4268
|
</span>
|
|
4157
4269
|
<span class={"rdt-sort-ind"} aria-hidden="true" data-rozie-s-d5dcab4c="">{(0, _rozie_runtime_solid.rozieDisplay)(sortIndicator(header().column.id))}</span>
|
|
@@ -4180,9 +4292,15 @@ function DataTable(_props) {
|
|
|
4180
4292
|
}} data-rozie-s-d5dcab4c=""><span class={"rdt-resize-grip"} aria-hidden="true" data-rozie-s-d5dcab4c="" /></button>
|
|
4181
4293
|
</span>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Solid_js.Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
|
|
4182
4294
|
{(_props.selectAllSlot ?? _props.slots?.["selectAll"])?.({
|
|
4183
|
-
checked
|
|
4184
|
-
|
|
4185
|
-
|
|
4295
|
+
get checked() {
|
|
4296
|
+
return isAllRowsSelected();
|
|
4297
|
+
},
|
|
4298
|
+
get indeterminate() {
|
|
4299
|
+
return isSomeRowsSelected();
|
|
4300
|
+
},
|
|
4301
|
+
get toggle() {
|
|
4302
|
+
return onToggleAllRows;
|
|
4303
|
+
}
|
|
4186
4304
|
}) ?? <Solid_js.Show when={local.selectionMode === "multiple"}><input type="checkbox" aria-label="Select all rows" class={"rdt-select-all"} checked={isAllRowsSelected()} onChange={($event) => {
|
|
4187
4305
|
onToggleAllRows($event);
|
|
4188
4306
|
}} data-rozie-s-d5dcab4c="" /></Solid_js.Show>}
|
|
@@ -4192,18 +4310,44 @@ function DataTable(_props) {
|
|
|
4192
4310
|
{<Solid_js.Show when={hasAnyFilterableColumn()}><tr class={"rdt-filter-row"} data-rozie-s-d5dcab4c="">
|
|
4193
4311
|
<_solid_primitives_keyed.Key each={headerGroups()[headerGroups().length - 1].headers} by={(header) => header.id}>{(header) => <th class={"rdt-filter-cell"} role="presentation" style={(0, _rozie_runtime_solid.parseInlineStyle)(pinStyle(header().column.id))} data-rozie-s-d5dcab4c="">
|
|
4194
4312
|
{<Solid_js.Show when={isSelectColumn(header().column.id)} fallback={<Solid_js.Show when={isExpanderColumn(header().column.id)} fallback={<span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
|
|
4195
|
-
{<Solid_js.Show when={columnIsFilterable(header().column.id)
|
|
4313
|
+
{<Solid_js.Show when={columnIsFilterable(header().column.id)}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
|
|
4314
|
+
{_props.slots?.[`filter-${header().column.id}`]?.({
|
|
4315
|
+
get columnId() {
|
|
4316
|
+
return header().column.id;
|
|
4317
|
+
},
|
|
4318
|
+
get value() {
|
|
4319
|
+
return columnFilterValue(header().column.id);
|
|
4320
|
+
},
|
|
4321
|
+
get uniqueValues() {
|
|
4322
|
+
return getFacetedUniqueValues(header().column.id);
|
|
4323
|
+
},
|
|
4324
|
+
get minMax() {
|
|
4325
|
+
return getFacetedMinMaxValues(header().column.id);
|
|
4326
|
+
},
|
|
4327
|
+
get setFilter() {
|
|
4328
|
+
return setColumnFilter;
|
|
4329
|
+
}
|
|
4330
|
+
}) ?? (_props.filterSlot ?? _props.slots?.["filter"])?.({
|
|
4331
|
+
get columnId() {
|
|
4332
|
+
return header().column.id;
|
|
4333
|
+
},
|
|
4334
|
+
get value() {
|
|
4335
|
+
return columnFilterValue(header().column.id);
|
|
4336
|
+
},
|
|
4337
|
+
get uniqueValues() {
|
|
4338
|
+
return getFacetedUniqueValues(header().column.id);
|
|
4339
|
+
},
|
|
4340
|
+
get minMax() {
|
|
4341
|
+
return getFacetedMinMaxValues(header().column.id);
|
|
4342
|
+
},
|
|
4343
|
+
get setFilter() {
|
|
4344
|
+
return setColumnFilter;
|
|
4345
|
+
}
|
|
4346
|
+
}) ?? <input type="text" aria-label={(0, _rozie_runtime_solid.rozieAttr)("Filter " + headerLabel(header().column.id))} class={"rdt-col-filter"} value={columnFilterValue(header().column.id)} onInput={($event) => {
|
|
4196
4347
|
onColumnFilterInput(header().column.id, $event);
|
|
4197
4348
|
}} onClick={($event) => {
|
|
4198
4349
|
stopEvent($event);
|
|
4199
|
-
}} data-rozie-s-d5dcab4c=""
|
|
4200
|
-
{(_props.filterSlot ?? _props.slots?.["filter"])?.({
|
|
4201
|
-
columnId: header().column.id,
|
|
4202
|
-
value: columnFilterValue(header().column.id),
|
|
4203
|
-
uniqueValues: getFacetedUniqueValues(header().column.id),
|
|
4204
|
-
minMax: getFacetedMinMaxValues(header().column.id),
|
|
4205
|
-
setFilter: setColumnFilter
|
|
4206
|
-
})}
|
|
4350
|
+
}} data-rozie-s-d5dcab4c="" />}
|
|
4207
4351
|
</span></Solid_js.Show>}</span>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Solid_js.Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Solid_js.Show>}</th>}</_solid_primitives_keyed.Key>
|
|
4208
4352
|
</tr></Solid_js.Show>}</thead>
|
|
4209
4353
|
|
|
@@ -4219,26 +4363,99 @@ function DataTable(_props) {
|
|
|
4219
4363
|
})} role={(0, _rozie_runtime_solid.rozieAttr)(cellRole())} data-col={(0, _rozie_runtime_solid.rozieAttr)(cell().column.id)} data-grid-cell="" data-row={(0, _rozie_runtime_solid.rozieAttr)(rowIndexOf(row()))} data-col-index={(0, _rozie_runtime_solid.rozieAttr)(colIndexOf(row(), cell()))} tabIndex={(0, _rozie_runtime_solid.rozieAttr)(cellTabindex(String(rowIndexOf(row())), colIndexOf(row(), cell())))} style={(0, _rozie_runtime_solid.parseInlineStyle)(bodyCellStyle(row(), cell().column.id))} aria-invalid={(0, _rozie_runtime_solid.rozieAttr)(cellAriaInvalid(rowIndexOf(row()), colIndexOf(row(), cell())))} data-in-range={(0, _rozie_runtime_solid.rozieAttr)(inRange(rowIndexOf(row()), colIndexOf(row(), cell())) ? "true" : null)} data-agg-cell={(0, _rozie_runtime_solid.rozieAttr)(cellIsAggregated(cell()) ? cell().column.id : null)} data-rozie-s-d5dcab4c="">
|
|
4220
4364
|
|
|
4221
4365
|
{<Solid_js.Show when={isExpanderColumn(cell().column.id)} fallback={<Solid_js.Show when={isSelectColumn(cell().column.id)} fallback={<Solid_js.Show when={cellIsGrouped(cell())} fallback={<Solid_js.Show when={isEditing(rowIndexOf(row()), colIndexOf(row(), cell()))} fallback={<Solid_js.Show when={cellIsPlaceholder(cell())} fallback={<span class={"rdt-cell-value"} data-rozie-s-d5dcab4c="">
|
|
4222
|
-
{
|
|
4223
|
-
columnId
|
|
4224
|
-
|
|
4225
|
-
|
|
4226
|
-
|
|
4366
|
+
{_props.slots?.[`cell-${cell().column.id}`]?.({
|
|
4367
|
+
get columnId() {
|
|
4368
|
+
return cell().column.id;
|
|
4369
|
+
},
|
|
4370
|
+
get column() {
|
|
4371
|
+
return cell().column;
|
|
4372
|
+
},
|
|
4373
|
+
get row() {
|
|
4374
|
+
return cellSlotRow(row());
|
|
4375
|
+
},
|
|
4376
|
+
get value() {
|
|
4377
|
+
return cell().getValue();
|
|
4378
|
+
}
|
|
4379
|
+
}) ?? (_props.cellSlot ?? _props.slots?.["cell"])?.({
|
|
4380
|
+
get columnId() {
|
|
4381
|
+
return cell().column.id;
|
|
4382
|
+
},
|
|
4383
|
+
get column() {
|
|
4384
|
+
return cell().column;
|
|
4385
|
+
},
|
|
4386
|
+
get row() {
|
|
4387
|
+
return cellSlotRow(row());
|
|
4388
|
+
},
|
|
4389
|
+
get value() {
|
|
4390
|
+
return cell().getValue();
|
|
4391
|
+
}
|
|
4227
4392
|
}) ?? (0, _rozie_runtime_solid.rozieDisplay)(cell().getValue())}
|
|
4228
4393
|
</span>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Solid_js.Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
|
|
4229
|
-
{<Solid_js.Show when={
|
|
4394
|
+
{<Solid_js.Show when={editorTypeOf(cell().column.id) === "number"} fallback={<Solid_js.Show when={editorTypeOf(cell().column.id) === "select"} fallback={<Solid_js.Show when={editorTypeOf(cell().column.id) === "checkbox"} fallback={<Solid_js.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) => {
|
|
4395
|
+
onCellEditorInput(cell().column.id, $event);
|
|
4396
|
+
}} onKeyDown={($event) => {
|
|
4397
|
+
onEditorKeyDown($event);
|
|
4398
|
+
}} onBlur={($event) => {
|
|
4399
|
+
onEditorBlur($event);
|
|
4400
|
+
}} data-rozie-s-d5dcab4c="" />}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
|
|
4401
|
+
{_props.slots?.[`editor-${cell().column.id}`]?.({
|
|
4402
|
+
get columnId() {
|
|
4403
|
+
return cell().column.id;
|
|
4404
|
+
},
|
|
4405
|
+
get column() {
|
|
4406
|
+
return cell().column;
|
|
4407
|
+
},
|
|
4408
|
+
get row() {
|
|
4409
|
+
return cellSlotRow(row());
|
|
4410
|
+
},
|
|
4411
|
+
get value() {
|
|
4412
|
+
return editorValueFor(cell().column.id);
|
|
4413
|
+
},
|
|
4414
|
+
get commit() {
|
|
4415
|
+
return editorCommitFor(cell().column.id);
|
|
4416
|
+
},
|
|
4417
|
+
get cancel() {
|
|
4418
|
+
return editorCancelFor();
|
|
4419
|
+
},
|
|
4420
|
+
get autofocus() {
|
|
4421
|
+
return editorAutofocusFor(cell().column.id, rowIndexOf(row()));
|
|
4422
|
+
}
|
|
4423
|
+
}) ?? (_props.editorSlot ?? _props.slots?.["editor"])?.({
|
|
4424
|
+
get columnId() {
|
|
4425
|
+
return cell().column.id;
|
|
4426
|
+
},
|
|
4427
|
+
get column() {
|
|
4428
|
+
return cell().column;
|
|
4429
|
+
},
|
|
4430
|
+
get row() {
|
|
4431
|
+
return cellSlotRow(row());
|
|
4432
|
+
},
|
|
4433
|
+
get value() {
|
|
4434
|
+
return editorValueFor(cell().column.id);
|
|
4435
|
+
},
|
|
4436
|
+
get commit() {
|
|
4437
|
+
return editorCommitFor(cell().column.id);
|
|
4438
|
+
},
|
|
4439
|
+
get cancel() {
|
|
4440
|
+
return editorCancelFor();
|
|
4441
|
+
},
|
|
4442
|
+
get autofocus() {
|
|
4443
|
+
return editorAutofocusFor(cell().column.id, rowIndexOf(row()));
|
|
4444
|
+
}
|
|
4445
|
+
}) ?? <input type="text" data-editing-cell="" data-builtin-editor="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event) => {
|
|
4230
4446
|
onCellEditorInput(cell().column.id, $event);
|
|
4231
4447
|
}} onKeyDown={($event) => {
|
|
4232
4448
|
onEditorKeyDown($event);
|
|
4233
4449
|
}} onBlur={($event) => {
|
|
4234
4450
|
onEditorBlur($event);
|
|
4235
|
-
}} data-rozie-s-d5dcab4c="" />}
|
|
4451
|
+
}} data-rozie-s-d5dcab4c="" />}
|
|
4452
|
+
</span></Solid_js.Show>}><input type="checkbox" data-editing-cell="" data-builtin-editor="" class={"rdt-cell-editor"} checked={editorCheckedFor(cell().column.id)} onChange={($event) => {
|
|
4236
4453
|
onCellEditorCheckbox(cell().column.id, $event);
|
|
4237
4454
|
}} onKeyDown={($event) => {
|
|
4238
4455
|
onEditorKeyDown($event);
|
|
4239
4456
|
}} onBlur={($event) => {
|
|
4240
4457
|
onEditorBlur($event);
|
|
4241
|
-
}} data-rozie-s-d5dcab4c="" /></Solid_js.Show>}><select data-editing-cell="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onChange={($event) => {
|
|
4458
|
+
}} data-rozie-s-d5dcab4c="" /></Solid_js.Show>}><select data-editing-cell="" data-builtin-editor="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onChange={($event) => {
|
|
4242
4459
|
onCellEditorInput(cell().column.id, $event);
|
|
4243
4460
|
}} onKeyDown={($event) => {
|
|
4244
4461
|
onEditorKeyDown($event);
|
|
@@ -4246,39 +4463,54 @@ function DataTable(_props) {
|
|
|
4246
4463
|
onEditorBlur($event);
|
|
4247
4464
|
}} data-rozie-s-d5dcab4c="">
|
|
4248
4465
|
<_solid_primitives_keyed.Key each={editorOptionsOf(cell().column.id)} by={(opt) => opt.value}>{(opt) => <option value={(0, _rozie_runtime_solid.rozieAttr)(opt().value)} data-rozie-s-d5dcab4c="">{(0, _rozie_runtime_solid.rozieDisplay)(opt().label)}</option>}</_solid_primitives_keyed.Key>
|
|
4249
|
-
</select></Solid_js.Show>}><input type="number" data-editing-cell="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event) => {
|
|
4466
|
+
</select></Solid_js.Show>}><input type="number" data-editing-cell="" data-builtin-editor="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event) => {
|
|
4250
4467
|
onCellEditorInput(cell().column.id, $event);
|
|
4251
4468
|
}} onKeyDown={($event) => {
|
|
4252
4469
|
onEditorKeyDown($event);
|
|
4253
4470
|
}} onBlur={($event) => {
|
|
4254
4471
|
onEditorBlur($event);
|
|
4255
|
-
}} data-rozie-s-d5dcab4c="" /></Solid_js.Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
|
|
4256
|
-
{(_props.editorSlot ?? _props.slots?.["editor"])?.({
|
|
4257
|
-
columnId: cell().column.id,
|
|
4258
|
-
column: cell().column,
|
|
4259
|
-
row: cellSlotRow(row()),
|
|
4260
|
-
value: editorValueFor(cell().column.id),
|
|
4261
|
-
commit: editorCommitFor(cell().column.id),
|
|
4262
|
-
cancel: editorCancelFor(),
|
|
4263
|
-
autofocus: editorAutofocusFor(cell().column.id, rowIndexOf(row()))
|
|
4264
|
-
})}
|
|
4265
|
-
</span></Solid_js.Show>}</span></Solid_js.Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
|
|
4472
|
+
}} data-rozie-s-d5dcab4c="" /></Solid_js.Show>}</span></Solid_js.Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
|
|
4266
4473
|
<button type="button" data-expander="" aria-expanded={!!rowIsExpanded(row())} aria-label={(0, _rozie_runtime_solid.rozieAttr)(rowIsExpanded(row()) ? "Collapse group" : "Expand group")} class={"rdt-expander rdt-group-toggle"} onClick={($event) => {
|
|
4267
4474
|
onToggleExpand(row(), $event);
|
|
4268
4475
|
}} data-rozie-s-d5dcab4c="">{(0, _rozie_runtime_solid.rozieDisplay)(rowIsExpanded(row()) ? "▾" : "▸")}</button>
|
|
4269
4476
|
<span class={"rdt-group-value"} data-rozie-s-d5dcab4c="">
|
|
4270
|
-
{
|
|
4271
|
-
columnId
|
|
4272
|
-
|
|
4273
|
-
|
|
4274
|
-
|
|
4477
|
+
{_props.slots?.[`cell-${cell().column.id}`]?.({
|
|
4478
|
+
get columnId() {
|
|
4479
|
+
return cell().column.id;
|
|
4480
|
+
},
|
|
4481
|
+
get column() {
|
|
4482
|
+
return cell().column;
|
|
4483
|
+
},
|
|
4484
|
+
get row() {
|
|
4485
|
+
return cellSlotRow(row());
|
|
4486
|
+
},
|
|
4487
|
+
get value() {
|
|
4488
|
+
return cell().getValue();
|
|
4489
|
+
}
|
|
4490
|
+
}) ?? (_props.cellSlot ?? _props.slots?.["cell"])?.({
|
|
4491
|
+
get columnId() {
|
|
4492
|
+
return cell().column.id;
|
|
4493
|
+
},
|
|
4494
|
+
get column() {
|
|
4495
|
+
return cell().column;
|
|
4496
|
+
},
|
|
4497
|
+
get row() {
|
|
4498
|
+
return cellSlotRow(row());
|
|
4499
|
+
},
|
|
4500
|
+
get value() {
|
|
4501
|
+
return cell().getValue();
|
|
4502
|
+
}
|
|
4275
4503
|
}) ?? (0, _rozie_runtime_solid.rozieDisplay)(cell().getValue())}
|
|
4276
4504
|
</span>
|
|
4277
4505
|
<span class={"rdt-group-count"} data-rozie-s-d5dcab4c="">{(0, _rozie_runtime_solid.rozieDisplay)("(" + groupSubRowCount(row()) + ")")}</span>
|
|
4278
4506
|
</span></Solid_js.Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
|
|
4279
4507
|
{(_props.selectCellSlot ?? _props.slots?.["selectCell"])?.({
|
|
4280
|
-
|
|
4281
|
-
|
|
4508
|
+
get row() {
|
|
4509
|
+
return cellSlotRow(row());
|
|
4510
|
+
},
|
|
4511
|
+
get checked() {
|
|
4512
|
+
return rowIsSelected(row());
|
|
4513
|
+
},
|
|
4282
4514
|
toggle: (e) => onToggleRow(row(), e)
|
|
4283
4515
|
}) ?? <input type="checkbox" aria-label="Select row" class={"rdt-select-row"} checked={rowIsSelected(row())} onChange={($event) => {
|
|
4284
4516
|
onToggleRow(row(), $event);
|
|
@@ -4293,7 +4525,9 @@ function DataTable(_props) {
|
|
|
4293
4525
|
|
|
4294
4526
|
{<Solid_js.Show when={rowShowsDetail(row())}><tr class={"rdt-detail-row"} role="row" data-detail-row={(0, _rozie_runtime_solid.rozieAttr)(row().id)} data-rozie-s-d5dcab4c="">
|
|
4295
4527
|
<td class={"rdt-detail-cell"} colSpan={(0, _rozie_runtime_solid.rozieAttr)(visibleColCount())} data-rozie-s-d5dcab4c="">
|
|
4296
|
-
{(_props.detailSlot ?? _props.slots?.["detail"])?.({
|
|
4528
|
+
{(_props.detailSlot ?? _props.slots?.["detail"])?.({ get row() {
|
|
4529
|
+
return row().original;
|
|
4530
|
+
} })}
|
|
4297
4531
|
</td>
|
|
4298
4532
|
</tr></Solid_js.Show>}</>}</_solid_primitives_keyed.Key>
|
|
4299
4533
|
</tbody>
|
|
@@ -4322,24 +4556,56 @@ function DataTable(_props) {
|
|
|
4322
4556
|
"rdt-expander-th": isExpanderColumn(wh().header.column.id),
|
|
4323
4557
|
"rdt-th-resizing": columnIsResizing(wh().header.column.id),
|
|
4324
4558
|
"rdt-cell-active": isActiveCell("__header", headerColIndexOf(hg(), wh().header), hgLevel())
|
|
4325
|
-
})} role="columnheader" data-col={(0, _rozie_runtime_solid.rozieAttr)(wh().header.column.id)} data-grid-cell="" data-row="__header" data-header-level={(0, _rozie_runtime_solid.rozieAttr)(hgLevel())} colSpan={(0, _rozie_runtime_solid.rozieAttr)(wh().span > 1 ? wh().span : null)} data-col-index={(0, _rozie_runtime_solid.rozieAttr)(headerColIndexOf(hg(), wh().header))} tabIndex={(0, _rozie_runtime_solid.rozieAttr)(cellTabindex("__header", headerColIndexOf(hg(), wh().header), hgLevel()))} aria-sort={(0, _rozie_runtime_solid.rozieAttr)(ariaSortFor(wh().header.column.id))} style={(0, _rozie_runtime_solid.parseInlineStyle)(thStyle(wh().header
|
|
4559
|
+
})} role="columnheader" data-col={(0, _rozie_runtime_solid.rozieAttr)(wh().header.column.id)} data-grid-cell="" data-row="__header" data-header-level={(0, _rozie_runtime_solid.rozieAttr)(hgLevel())} colSpan={(0, _rozie_runtime_solid.rozieAttr)(wh().span > 1 ? wh().span : null)} data-col-index={(0, _rozie_runtime_solid.rozieAttr)(headerColIndexOf(hg(), wh().header))} tabIndex={(0, _rozie_runtime_solid.rozieAttr)(cellTabindex("__header", headerColIndexOf(hg(), wh().header), hgLevel()))} aria-sort={(0, _rozie_runtime_solid.rozieAttr)(ariaSortFor(wh().header.column.id))} style={(0, _rozie_runtime_solid.parseInlineStyle)(thStyle(wh().header))} data-rozie-s-d5dcab4c="">
|
|
4326
4560
|
{<Solid_js.Show when={isSelectColumn(wh().header.column.id)} fallback={<Solid_js.Show when={isExpanderColumn(wh().header.column.id)} fallback={<span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
|
|
4327
4561
|
{<Solid_js.Show when={wh().header.column.getCanSort && wh().header.column.getCanSort()} fallback={<span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
|
|
4328
4562
|
<span class={"rdt-header-label"} data-rozie-s-d5dcab4c="">
|
|
4329
|
-
{
|
|
4330
|
-
columnId
|
|
4331
|
-
|
|
4332
|
-
|
|
4563
|
+
{_props.slots?.[`colHeader-${wh().header.column.id}`]?.({
|
|
4564
|
+
get columnId() {
|
|
4565
|
+
return wh().header.column.id;
|
|
4566
|
+
},
|
|
4567
|
+
get column() {
|
|
4568
|
+
return wh().header.column;
|
|
4569
|
+
},
|
|
4570
|
+
get label() {
|
|
4571
|
+
return headerLabel(wh().header.column.id);
|
|
4572
|
+
}
|
|
4573
|
+
}) ?? (_props.colHeaderSlot ?? _props.slots?.["colHeader"])?.({
|
|
4574
|
+
get columnId() {
|
|
4575
|
+
return wh().header.column.id;
|
|
4576
|
+
},
|
|
4577
|
+
get column() {
|
|
4578
|
+
return wh().header.column;
|
|
4579
|
+
},
|
|
4580
|
+
get label() {
|
|
4581
|
+
return headerLabel(wh().header.column.id);
|
|
4582
|
+
}
|
|
4333
4583
|
}) ?? (0, _rozie_runtime_solid.rozieDisplay)(headerLabel(wh().header.column.id))}
|
|
4334
4584
|
</span>
|
|
4335
4585
|
</span>}><button type="button" class={"rdt-sort-btn"} onClick={($event) => {
|
|
4336
4586
|
onHeaderSort(wh().header.column.id, $event);
|
|
4337
4587
|
}} data-rozie-s-d5dcab4c="">
|
|
4338
4588
|
<span class={"rdt-header-label"} data-rozie-s-d5dcab4c="">
|
|
4339
|
-
{
|
|
4340
|
-
columnId
|
|
4341
|
-
|
|
4342
|
-
|
|
4589
|
+
{_props.slots?.[`colHeader-${wh().header.column.id}`]?.({
|
|
4590
|
+
get columnId() {
|
|
4591
|
+
return wh().header.column.id;
|
|
4592
|
+
},
|
|
4593
|
+
get column() {
|
|
4594
|
+
return wh().header.column;
|
|
4595
|
+
},
|
|
4596
|
+
get label() {
|
|
4597
|
+
return headerLabel(wh().header.column.id);
|
|
4598
|
+
}
|
|
4599
|
+
}) ?? (_props.colHeaderSlot ?? _props.slots?.["colHeader"])?.({
|
|
4600
|
+
get columnId() {
|
|
4601
|
+
return wh().header.column.id;
|
|
4602
|
+
},
|
|
4603
|
+
get column() {
|
|
4604
|
+
return wh().header.column;
|
|
4605
|
+
},
|
|
4606
|
+
get label() {
|
|
4607
|
+
return headerLabel(wh().header.column.id);
|
|
4608
|
+
}
|
|
4343
4609
|
}) ?? (0, _rozie_runtime_solid.rozieDisplay)(headerLabel(wh().header.column.id))}
|
|
4344
4610
|
</span>
|
|
4345
4611
|
<span class={"rdt-sort-ind"} aria-hidden="true" data-rozie-s-d5dcab4c="">{(0, _rozie_runtime_solid.rozieDisplay)(sortIndicator(wh().header.column.id))}</span>
|
|
@@ -4367,9 +4633,15 @@ function DataTable(_props) {
|
|
|
4367
4633
|
}} data-rozie-s-d5dcab4c=""><span class={"rdt-resize-grip"} aria-hidden="true" data-rozie-s-d5dcab4c="" /></button>
|
|
4368
4634
|
</span>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Solid_js.Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
|
|
4369
4635
|
{(_props.selectAllSlot ?? _props.slots?.["selectAll"])?.({
|
|
4370
|
-
checked
|
|
4371
|
-
|
|
4372
|
-
|
|
4636
|
+
get checked() {
|
|
4637
|
+
return isAllRowsSelected();
|
|
4638
|
+
},
|
|
4639
|
+
get indeterminate() {
|
|
4640
|
+
return isSomeRowsSelected();
|
|
4641
|
+
},
|
|
4642
|
+
get toggle() {
|
|
4643
|
+
return onToggleAllRows;
|
|
4644
|
+
}
|
|
4373
4645
|
}) ?? <Solid_js.Show when={local.selectionMode === "multiple"}><input type="checkbox" aria-label="Select all rows" class={"rdt-select-all"} checked={isAllRowsSelected()} onChange={($event) => {
|
|
4374
4646
|
onToggleAllRows($event);
|
|
4375
4647
|
}} data-rozie-s-d5dcab4c="" /></Solid_js.Show>}
|
|
@@ -4380,18 +4652,44 @@ function DataTable(_props) {
|
|
|
4380
4652
|
{<Solid_js.Show when={hasAnyFilterableColumn()}><tr class={"rdt-filter-row"} data-rozie-s-d5dcab4c="">
|
|
4381
4653
|
{<Solid_js.Show when={colsWindowed()}><th class={"rdt-col-spacer"} aria-hidden="true" style={(0, _rozie_runtime_solid.parseInlineStyle)("width:" + colPadLeft() + "px;padding:0;border:0")} data-rozie-s-d5dcab4c="" /></Solid_js.Show>}<_solid_primitives_keyed.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={(0, _rozie_runtime_solid.rozieAttr)(wh().header.column.id)} style={(0, _rozie_runtime_solid.parseInlineStyle)(pinStyle(wh().header.column.id))} data-rozie-s-d5dcab4c="">
|
|
4382
4654
|
{<Solid_js.Show when={isSelectColumn(wh().header.column.id)} fallback={<Solid_js.Show when={isExpanderColumn(wh().header.column.id)} fallback={<span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
|
|
4383
|
-
{<Solid_js.Show when={columnIsFilterable(wh().header.column.id)
|
|
4655
|
+
{<Solid_js.Show when={columnIsFilterable(wh().header.column.id)}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
|
|
4656
|
+
{_props.slots?.[`filter-${wh().header.column.id}`]?.({
|
|
4657
|
+
get columnId() {
|
|
4658
|
+
return wh().header.column.id;
|
|
4659
|
+
},
|
|
4660
|
+
get value() {
|
|
4661
|
+
return columnFilterValue(wh().header.column.id);
|
|
4662
|
+
},
|
|
4663
|
+
get uniqueValues() {
|
|
4664
|
+
return getFacetedUniqueValues(wh().header.column.id);
|
|
4665
|
+
},
|
|
4666
|
+
get minMax() {
|
|
4667
|
+
return getFacetedMinMaxValues(wh().header.column.id);
|
|
4668
|
+
},
|
|
4669
|
+
get setFilter() {
|
|
4670
|
+
return setColumnFilter;
|
|
4671
|
+
}
|
|
4672
|
+
}) ?? (_props.filterSlot ?? _props.slots?.["filter"])?.({
|
|
4673
|
+
get columnId() {
|
|
4674
|
+
return wh().header.column.id;
|
|
4675
|
+
},
|
|
4676
|
+
get value() {
|
|
4677
|
+
return columnFilterValue(wh().header.column.id);
|
|
4678
|
+
},
|
|
4679
|
+
get uniqueValues() {
|
|
4680
|
+
return getFacetedUniqueValues(wh().header.column.id);
|
|
4681
|
+
},
|
|
4682
|
+
get minMax() {
|
|
4683
|
+
return getFacetedMinMaxValues(wh().header.column.id);
|
|
4684
|
+
},
|
|
4685
|
+
get setFilter() {
|
|
4686
|
+
return setColumnFilter;
|
|
4687
|
+
}
|
|
4688
|
+
}) ?? <input type="text" aria-label={(0, _rozie_runtime_solid.rozieAttr)("Filter " + headerLabel(wh().header.column.id))} class={"rdt-col-filter"} value={columnFilterValue(wh().header.column.id)} onInput={($event) => {
|
|
4384
4689
|
onColumnFilterInput(wh().header.column.id, $event);
|
|
4385
4690
|
}} onClick={($event) => {
|
|
4386
4691
|
stopEvent($event);
|
|
4387
|
-
}} data-rozie-s-d5dcab4c=""
|
|
4388
|
-
{(_props.filterSlot ?? _props.slots?.["filter"])?.({
|
|
4389
|
-
columnId: wh().header.column.id,
|
|
4390
|
-
value: columnFilterValue(wh().header.column.id),
|
|
4391
|
-
uniqueValues: getFacetedUniqueValues(wh().header.column.id),
|
|
4392
|
-
minMax: getFacetedMinMaxValues(wh().header.column.id),
|
|
4393
|
-
setFilter: setColumnFilter
|
|
4394
|
-
})}
|
|
4692
|
+
}} data-rozie-s-d5dcab4c="" />}
|
|
4395
4693
|
</span></Solid_js.Show>}</span>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Solid_js.Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Solid_js.Show>}</th>}</_solid_primitives_keyed.Key>
|
|
4396
4694
|
{<Solid_js.Show when={colsWindowed()}><th class={"rdt-col-spacer"} aria-hidden="true" style={(0, _rozie_runtime_solid.parseInlineStyle)("width:" + colPadRight() + "px;padding:0;border:0")} data-rozie-s-d5dcab4c="" /></Solid_js.Show>}</tr></Solid_js.Show>}</thead>
|
|
4397
4695
|
|
|
@@ -4415,26 +4713,99 @@ function DataTable(_props) {
|
|
|
4415
4713
|
})} role={(0, _rozie_runtime_solid.rozieAttr)(cellRole())} data-col={(0, _rozie_runtime_solid.rozieAttr)(cell().column.id)} data-grid-cell="" data-row={(0, _rozie_runtime_solid.rozieAttr)(wr().vi.index)} data-col-index={(0, _rozie_runtime_solid.rozieAttr)(colIndexOf(wr().row, cell()))} tabIndex={(0, _rozie_runtime_solid.rozieAttr)(cellTabindex(String(wr().vi.index), colIndexOf(wr().row, cell())))} style={(0, _rozie_runtime_solid.parseInlineStyle)(bodyCellStyle(wr().row, cell().column.id))} aria-invalid={(0, _rozie_runtime_solid.rozieAttr)(cellAriaInvalid(wr().vi.index, colIndexOf(wr().row, cell())))} data-in-range={(0, _rozie_runtime_solid.rozieAttr)(inRange(wr().vi.index, colIndexOf(wr().row, cell())) ? "true" : null)} data-agg-cell={(0, _rozie_runtime_solid.rozieAttr)(cellIsAggregated(cell()) ? cell().column.id : null)} data-rozie-s-d5dcab4c="">
|
|
4416
4714
|
|
|
4417
4715
|
{<Solid_js.Show when={isExpanderColumn(cell().column.id)} fallback={<Solid_js.Show when={isSelectColumn(cell().column.id)} fallback={<Solid_js.Show when={cellIsGrouped(cell())} fallback={<Solid_js.Show when={isEditing(wr().vi.index, colIndexOf(wr().row, cell()))} fallback={<Solid_js.Show when={cellIsPlaceholder(cell())} fallback={<span class={"rdt-cell-value"} data-rozie-s-d5dcab4c="">
|
|
4418
|
-
{
|
|
4419
|
-
columnId
|
|
4420
|
-
|
|
4421
|
-
|
|
4422
|
-
|
|
4716
|
+
{_props.slots?.[`cell-${cell().column.id}`]?.({
|
|
4717
|
+
get columnId() {
|
|
4718
|
+
return cell().column.id;
|
|
4719
|
+
},
|
|
4720
|
+
get column() {
|
|
4721
|
+
return cell().column;
|
|
4722
|
+
},
|
|
4723
|
+
get row() {
|
|
4724
|
+
return cellSlotRow(wr().row);
|
|
4725
|
+
},
|
|
4726
|
+
get value() {
|
|
4727
|
+
return cell().getValue();
|
|
4728
|
+
}
|
|
4729
|
+
}) ?? (_props.cellSlot ?? _props.slots?.["cell"])?.({
|
|
4730
|
+
get columnId() {
|
|
4731
|
+
return cell().column.id;
|
|
4732
|
+
},
|
|
4733
|
+
get column() {
|
|
4734
|
+
return cell().column;
|
|
4735
|
+
},
|
|
4736
|
+
get row() {
|
|
4737
|
+
return cellSlotRow(wr().row);
|
|
4738
|
+
},
|
|
4739
|
+
get value() {
|
|
4740
|
+
return cell().getValue();
|
|
4741
|
+
}
|
|
4423
4742
|
}) ?? (0, _rozie_runtime_solid.rozieDisplay)(cell().getValue())}
|
|
4424
4743
|
</span>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="" /></Solid_js.Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
|
|
4425
|
-
{<Solid_js.Show when={
|
|
4744
|
+
{<Solid_js.Show when={editorTypeOf(cell().column.id) === "number"} fallback={<Solid_js.Show when={editorTypeOf(cell().column.id) === "select"} fallback={<Solid_js.Show when={editorTypeOf(cell().column.id) === "checkbox"} fallback={<Solid_js.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) => {
|
|
4426
4745
|
onCellEditorInput(cell().column.id, $event);
|
|
4427
4746
|
}} onKeyDown={($event) => {
|
|
4428
4747
|
onEditorKeyDown($event);
|
|
4429
4748
|
}} onBlur={($event) => {
|
|
4430
4749
|
onEditorBlur($event);
|
|
4431
|
-
}} data-rozie-s-d5dcab4c="" />}><
|
|
4750
|
+
}} data-rozie-s-d5dcab4c="" />}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
|
|
4751
|
+
{_props.slots?.[`editor-${cell().column.id}`]?.({
|
|
4752
|
+
get columnId() {
|
|
4753
|
+
return cell().column.id;
|
|
4754
|
+
},
|
|
4755
|
+
get column() {
|
|
4756
|
+
return cell().column;
|
|
4757
|
+
},
|
|
4758
|
+
get row() {
|
|
4759
|
+
return cellSlotRow(wr().row);
|
|
4760
|
+
},
|
|
4761
|
+
get value() {
|
|
4762
|
+
return editorValueFor(cell().column.id);
|
|
4763
|
+
},
|
|
4764
|
+
get commit() {
|
|
4765
|
+
return editorCommitFor(cell().column.id);
|
|
4766
|
+
},
|
|
4767
|
+
get cancel() {
|
|
4768
|
+
return editorCancelFor();
|
|
4769
|
+
},
|
|
4770
|
+
get autofocus() {
|
|
4771
|
+
return editorAutofocusFor(cell().column.id, wr().vi.index);
|
|
4772
|
+
}
|
|
4773
|
+
}) ?? (_props.editorSlot ?? _props.slots?.["editor"])?.({
|
|
4774
|
+
get columnId() {
|
|
4775
|
+
return cell().column.id;
|
|
4776
|
+
},
|
|
4777
|
+
get column() {
|
|
4778
|
+
return cell().column;
|
|
4779
|
+
},
|
|
4780
|
+
get row() {
|
|
4781
|
+
return cellSlotRow(wr().row);
|
|
4782
|
+
},
|
|
4783
|
+
get value() {
|
|
4784
|
+
return editorValueFor(cell().column.id);
|
|
4785
|
+
},
|
|
4786
|
+
get commit() {
|
|
4787
|
+
return editorCommitFor(cell().column.id);
|
|
4788
|
+
},
|
|
4789
|
+
get cancel() {
|
|
4790
|
+
return editorCancelFor();
|
|
4791
|
+
},
|
|
4792
|
+
get autofocus() {
|
|
4793
|
+
return editorAutofocusFor(cell().column.id, wr().vi.index);
|
|
4794
|
+
}
|
|
4795
|
+
}) ?? <input type="text" data-editing-cell="" data-builtin-editor="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event) => {
|
|
4796
|
+
onCellEditorInput(cell().column.id, $event);
|
|
4797
|
+
}} onKeyDown={($event) => {
|
|
4798
|
+
onEditorKeyDown($event);
|
|
4799
|
+
}} onBlur={($event) => {
|
|
4800
|
+
onEditorBlur($event);
|
|
4801
|
+
}} data-rozie-s-d5dcab4c="" />}
|
|
4802
|
+
</span></Solid_js.Show>}><input type="checkbox" data-editing-cell="" data-builtin-editor="" class={"rdt-cell-editor"} checked={editorCheckedFor(cell().column.id)} onChange={($event) => {
|
|
4432
4803
|
onCellEditorCheckbox(cell().column.id, $event);
|
|
4433
4804
|
}} onKeyDown={($event) => {
|
|
4434
4805
|
onEditorKeyDown($event);
|
|
4435
4806
|
}} onBlur={($event) => {
|
|
4436
4807
|
onEditorBlur($event);
|
|
4437
|
-
}} data-rozie-s-d5dcab4c="" /></Solid_js.Show>}><select data-editing-cell="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onChange={($event) => {
|
|
4808
|
+
}} data-rozie-s-d5dcab4c="" /></Solid_js.Show>}><select data-editing-cell="" data-builtin-editor="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onChange={($event) => {
|
|
4438
4809
|
onCellEditorInput(cell().column.id, $event);
|
|
4439
4810
|
}} onKeyDown={($event) => {
|
|
4440
4811
|
onEditorKeyDown($event);
|
|
@@ -4442,39 +4813,54 @@ function DataTable(_props) {
|
|
|
4442
4813
|
onEditorBlur($event);
|
|
4443
4814
|
}} data-rozie-s-d5dcab4c="">
|
|
4444
4815
|
<_solid_primitives_keyed.Key each={editorOptionsOf(cell().column.id)} by={(opt) => opt.value}>{(opt) => <option value={(0, _rozie_runtime_solid.rozieAttr)(opt().value)} data-rozie-s-d5dcab4c="">{(0, _rozie_runtime_solid.rozieDisplay)(opt().label)}</option>}</_solid_primitives_keyed.Key>
|
|
4445
|
-
</select></Solid_js.Show>}><input type="number" data-editing-cell="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event) => {
|
|
4816
|
+
</select></Solid_js.Show>}><input type="number" data-editing-cell="" data-builtin-editor="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event) => {
|
|
4446
4817
|
onCellEditorInput(cell().column.id, $event);
|
|
4447
4818
|
}} onKeyDown={($event) => {
|
|
4448
4819
|
onEditorKeyDown($event);
|
|
4449
4820
|
}} onBlur={($event) => {
|
|
4450
4821
|
onEditorBlur($event);
|
|
4451
|
-
}} data-rozie-s-d5dcab4c="" /></Solid_js.Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
|
|
4452
|
-
{(_props.editorSlot ?? _props.slots?.["editor"])?.({
|
|
4453
|
-
columnId: cell().column.id,
|
|
4454
|
-
column: cell().column,
|
|
4455
|
-
row: cellSlotRow(wr().row),
|
|
4456
|
-
value: editorValueFor(cell().column.id),
|
|
4457
|
-
commit: editorCommitFor(cell().column.id),
|
|
4458
|
-
cancel: editorCancelFor(),
|
|
4459
|
-
autofocus: editorAutofocusFor(cell().column.id, wr().vi.index)
|
|
4460
|
-
})}
|
|
4461
|
-
</span></Solid_js.Show>}</span></Solid_js.Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
|
|
4822
|
+
}} data-rozie-s-d5dcab4c="" /></Solid_js.Show>}</span></Solid_js.Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
|
|
4462
4823
|
<button type="button" data-expander="" aria-expanded={!!rowIsExpanded(wr().row)} aria-label={(0, _rozie_runtime_solid.rozieAttr)(rowIsExpanded(wr().row) ? "Collapse group" : "Expand group")} class={"rdt-expander rdt-group-toggle"} onClick={($event) => {
|
|
4463
4824
|
onToggleExpand(wr().row, $event);
|
|
4464
4825
|
}} data-rozie-s-d5dcab4c="">{(0, _rozie_runtime_solid.rozieDisplay)(rowIsExpanded(wr().row) ? "▾" : "▸")}</button>
|
|
4465
4826
|
<span class={"rdt-group-value"} data-rozie-s-d5dcab4c="">
|
|
4466
|
-
{
|
|
4467
|
-
columnId
|
|
4468
|
-
|
|
4469
|
-
|
|
4470
|
-
|
|
4827
|
+
{_props.slots?.[`cell-${cell().column.id}`]?.({
|
|
4828
|
+
get columnId() {
|
|
4829
|
+
return cell().column.id;
|
|
4830
|
+
},
|
|
4831
|
+
get column() {
|
|
4832
|
+
return cell().column;
|
|
4833
|
+
},
|
|
4834
|
+
get row() {
|
|
4835
|
+
return cellSlotRow(wr().row);
|
|
4836
|
+
},
|
|
4837
|
+
get value() {
|
|
4838
|
+
return cell().getValue();
|
|
4839
|
+
}
|
|
4840
|
+
}) ?? (_props.cellSlot ?? _props.slots?.["cell"])?.({
|
|
4841
|
+
get columnId() {
|
|
4842
|
+
return cell().column.id;
|
|
4843
|
+
},
|
|
4844
|
+
get column() {
|
|
4845
|
+
return cell().column;
|
|
4846
|
+
},
|
|
4847
|
+
get row() {
|
|
4848
|
+
return cellSlotRow(wr().row);
|
|
4849
|
+
},
|
|
4850
|
+
get value() {
|
|
4851
|
+
return cell().getValue();
|
|
4852
|
+
}
|
|
4471
4853
|
}) ?? (0, _rozie_runtime_solid.rozieDisplay)(cell().getValue())}
|
|
4472
4854
|
</span>
|
|
4473
4855
|
<span class={"rdt-group-count"} data-rozie-s-d5dcab4c="">{(0, _rozie_runtime_solid.rozieDisplay)("(" + groupSubRowCount(wr().row) + ")")}</span>
|
|
4474
4856
|
</span></Solid_js.Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
|
|
4475
4857
|
{(_props.selectCellSlot ?? _props.slots?.["selectCell"])?.({
|
|
4476
|
-
row
|
|
4477
|
-
|
|
4858
|
+
get row() {
|
|
4859
|
+
return cellSlotRow(wr().row);
|
|
4860
|
+
},
|
|
4861
|
+
get checked() {
|
|
4862
|
+
return rowIsSelected(wr().row);
|
|
4863
|
+
},
|
|
4478
4864
|
toggle: (e) => onToggleRow(wr().row, e)
|
|
4479
4865
|
}) ?? <input type="checkbox" aria-label="Select row" class={"rdt-select-row"} checked={rowIsSelected(wr().row)} onChange={($event) => {
|
|
4480
4866
|
onToggleRow(wr().row, $event);
|
|
@@ -4490,7 +4876,9 @@ function DataTable(_props) {
|
|
|
4490
4876
|
|
|
4491
4877
|
{<Solid_js.Show when={rowShowsDetail(wr().row)}><tr class={"rdt-detail-row"} role="row" data-detail-row={(0, _rozie_runtime_solid.rozieAttr)(wr().row.id)} data-rozie-s-d5dcab4c="">
|
|
4492
4878
|
<td class={"rdt-detail-cell"} colSpan={(0, _rozie_runtime_solid.rozieAttr)(windowedColSpan())} data-rozie-s-d5dcab4c="">
|
|
4493
|
-
{(_props.detailSlot ?? _props.slots?.["detail"])?.({ row
|
|
4879
|
+
{(_props.detailSlot ?? _props.slots?.["detail"])?.({ get row() {
|
|
4880
|
+
return wr().row.original;
|
|
4881
|
+
} })}
|
|
4494
4882
|
</td>
|
|
4495
4883
|
</tr></Solid_js.Show>}</>}</_solid_primitives_keyed.Key>
|
|
4496
4884
|
|