@nxgt/material 2.6.2 → 2.7.1
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/CHANGELOG.md +28 -0
- package/README.md +1 -1
- package/dist/{_Uint8Array-CDlDeQmw.js → _Uint8Array-JRUmWcRr.js} +1 -1
- package/dist/{_overRest-CWIWQwDJ.js → _overRest-DvC5rm5s.js} +1 -1
- package/dist/{async-slice-Qoen0Mqm.js → async-slice-OftEOtMA.js} +2 -2
- package/dist/{blockDiagram-BEXU5L5S-_6EVgQ2-.js → blockDiagram-BEXU5L5S-BM-gkWAO.js} +2 -2
- package/dist/{chunk-3FUC2YCW-CRQHl-Jx.js → chunk-3FUC2YCW-Cf18L00V.js} +2 -2
- package/dist/{chunk-7M6MHVWA-DqXpf6CM.js → chunk-7M6MHVWA-C3x6E3yT.js} +1 -1
- package/dist/{chunk-GNY47TPC-BgMsLbCS.js → chunk-GNY47TPC-D1E6DHDV.js} +4 -4
- package/dist/{chunk-NETBCI7D-CsyH43bj.js → chunk-NETBCI7D-DJUuN4EY.js} +1 -1
- package/dist/{chunk-Z7XXMR3K-CoCjTVVx.js → chunk-Z7XXMR3K-DMTBxZxM.js} +1 -1
- package/dist/{classDiagram-v2-NBCMYWYE-j4vk04t-.js → classDiagram-v2-NBCMYWYE-BDaxYvDy.js} +2 -2
- package/dist/{components-C3wIUrWw.js → components-DrStgM4J.js} +23243 -23085
- package/dist/components.js +5 -5
- package/dist/{dagre-6A5THRUB-DXq_YBNL.js → dagre-6A5THRUB-DZF0nICj.js} +11 -11
- package/dist/{diagram-22UHCM2B-He8NDldw.js → diagram-22UHCM2B-CVZYpeev.js} +2 -2
- package/dist/{diagram-3UASUU5V-CeILva4U.js → diagram-3UASUU5V-D7MmBJbM.js} +1 -1
- package/dist/dnd.js +1 -1
- package/dist/{elk-276RUBZZ-DFn4kTey.js → elk-276RUBZZ-DI4eicFj.js} +3 -3
- package/dist/{erDiagram-OPXOYQCR-BzVUcUwh.js → erDiagram-OPXOYQCR-CUbpVns3.js} +2 -2
- package/dist/{field-blur-BlrE9fOD.js → field-blur-DWQtxiAe.js} +1 -1
- package/dist/{flowDiagram-KWPJA3E3-B4pJCj2Q.js → flowDiagram-KWPJA3E3-DZxumFfu.js} +3 -3
- package/dist/{ganttDiagram-FUAMR5RP-B4A4UFFi.js → ganttDiagram-FUAMR5RP-D3vmspam.js} +1 -1
- package/dist/{graphlib-CQ3hLS1N.js → graphlib-DLJn7qS3.js} +6 -6
- package/dist/hooks.js +2 -2
- package/dist/{i18n-provider-CbYD2KxP.js → i18n-provider-DBFRz5uH.js} +1 -1
- package/dist/i18n.js +6 -6
- package/dist/{isArrayLikeObject-5rnYwEK7.js → isArrayLikeObject-CO5xeuaJ.js} +3 -3
- package/dist/{isEmpty-DChvniYe.js → isEmpty-DOC38Ces.js} +3 -3
- package/dist/{journeyDiagram-ZHPQQLJL-C91SPPkY.js → journeyDiagram-ZHPQQLJL-Dxvl3oeN.js} +1 -1
- package/dist/lib/components/ui/collections/data-table/data-table-server-footer.d.ts +17 -0
- package/dist/lib/components/ui/collections/data-table/data-table.d.ts +4 -30
- package/dist/lib/components/ui/collections/data-table/index.d.ts +1 -0
- package/dist/lib/components/ui/collections/data-table/partials/data-table-body.d.ts +5 -6
- package/dist/lib/components/ui/collections/data-table/partials/data-table-link.d.ts +4 -0
- package/dist/lib/components/ui/collections/data-table/partials/data-table-page-control.d.ts +13 -0
- package/dist/lib/components/ui/collections/data-table/partials/data-table-row.d.ts +16 -0
- package/dist/lib/components/ui/collections/data-table/types.d.ts +87 -0
- package/dist/lib/components/ui/collections/data-table/use-data-table.d.ts +16 -3
- package/dist/lib/i18n/resources/en/en.d.ts +5 -0
- package/dist/lib/i18n/resources/en/material.json.d.ts +6 -1
- package/dist/lib/i18n/resources/fr/fr.d.ts +5 -0
- package/dist/lib/i18n/resources/fr/material.json.d.ts +6 -1
- package/dist/lib/i18n/resources/resources.d.ts +10 -0
- package/dist/lib/i18n/translator.d.ts +1 -1
- package/dist/lib.js +3 -3
- package/dist/main.js +15 -15
- package/dist/map.js +2 -2
- package/dist/material.css +1 -1
- package/dist/{merge-_Awk4ywA.js → merge-CuDTNgpm.js} +4 -4
- package/dist/{mermaid.core-DciYB1MV.js → mermaid.core-O7mtb1-p.js} +21 -21
- package/dist/{mindmap-definition-NLK3R4M7-Brf_2jIE.js → mindmap-definition-NLK3R4M7-CO0E97EZ.js} +2 -2
- package/dist/{pieDiagram-5QR66LMP-MPh-EWf-.js → pieDiagram-5QR66LMP-BXxVfv5K.js} +1 -1
- package/dist/print.js +2 -2
- package/dist/{quadrantDiagram-O4NWA36T-CwDeE9KB.js → quadrantDiagram-O4NWA36T-BbidZDM8.js} +1 -1
- package/dist/{requirementDiagram-PLB6GJNP-CCP3YtvB.js → requirementDiagram-PLB6GJNP-wFvgSWJP.js} +2 -2
- package/dist/{sankeyDiagram-IPEJSGJF-vgVchd2a.js → sankeyDiagram-IPEJSGJF-Cka5t09q.js} +1 -1
- package/dist/{sortable-provider-CzSnl6It.js → sortable-provider-C5VYhY8u.js} +1 -1
- package/dist/{stateDiagram-v2-GCMORJYK-T-oIXh-8.js → stateDiagram-v2-GCMORJYK-EMa7q3ju.js} +2 -2
- package/dist/{stored-language-DmUUhRb5.js → stored-language-B0o4cBh8.js} +12 -2
- package/dist/{swimlanes-2SLR337P-tW3_wBWO.js → swimlanes-2SLR337P-BtZ7Di5u.js} +3 -3
- package/dist/{swimlanesDiagram-TC7HE7FX-B1lWzHp1.js → swimlanesDiagram-TC7HE7FX-CROh8GTF.js} +3 -3
- package/dist/{timeline-definition-EJHVYXUP-SdA6wt2-.js → timeline-definition-EJHVYXUP-2Z6UABw8.js} +1 -1
- package/dist/{translate-material-DuY12xca.js → translate-material-BCwQrt2G.js} +2 -2
- package/dist/{translator-CaIYjyFP.js → translator-CwpmpI24.js} +1 -1
- package/dist/{use-heading-spy-Crdz4OH5.js → use-heading-spy-BtBJiU63.js} +2 -2
- package/dist/{use-material-translation-Od0QsFPA.js → use-material-translation-DG_7z3Q7.js} +2 -2
- package/dist/{usecaseDiagram-POWQR4AR-B3rBcR4E.js → usecaseDiagram-POWQR4AR-DT56cp_B.js} +2 -2
- package/dist/{xychartDiagram-PMCCYNJV-stQWLgCx.js → xychartDiagram-PMCCYNJV-B2aZlrno.js} +1 -1
- package/docs/components/data-table-filter-and-lists.md +160 -5
- package/docs/roadmap.md +6 -0
- package/docs/troubleshooting.md +61 -0
- package/package.json +2 -2
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { S as e, _ as t, g as n, p as r, v as i, w as a, x as o } from "./translator-
|
|
2
|
-
import { n as s, r as c } from "./_overRest-
|
|
3
|
-
import { a as l, c as u, d, i as f, l as p, n as m, p as h, r as g, t as _, u as v } from "./_Uint8Array-
|
|
4
|
-
import { n as y, r as b, t as x } from "./isArrayLikeObject-
|
|
1
|
+
import { S as e, _ as t, g as n, p as r, v as i, w as a, x as o } from "./translator-CwpmpI24.js";
|
|
2
|
+
import { n as s, r as c } from "./_overRest-DvC5rm5s.js";
|
|
3
|
+
import { a as l, c as u, d, i as f, l as p, n as m, p as h, r as g, t as _, u as v } from "./_Uint8Array-JRUmWcRr.js";
|
|
4
|
+
import { n as y, r as b, t as x } from "./isArrayLikeObject-CO5xeuaJ.js";
|
|
5
5
|
//#region ../../node_modules/lodash-es/_baseCreate.js
|
|
6
6
|
var S = Object.create, C = function() {
|
|
7
7
|
function e() {}
|
|
@@ -8,9 +8,9 @@ import { a as he } from "./chunk-MBY4JIJT-C3RQP_Nk.js";
|
|
|
8
8
|
import "./chunk-7PRAP22T-_Av9vcXz.js";
|
|
9
9
|
import "./chunk-7INBJB4K-BY5n77ka.js";
|
|
10
10
|
import "./chunk-5DYCD2WN-Cja1INgd.js";
|
|
11
|
-
import "./chunk-Z7XXMR3K-
|
|
11
|
+
import "./chunk-Z7XXMR3K-DMTBxZxM.js";
|
|
12
12
|
import "./chunk-UA2S7LBM-BNeHeMx9.js";
|
|
13
|
-
import { n as ge } from "./chunk-GNY47TPC-
|
|
13
|
+
import { n as ge } from "./chunk-GNY47TPC-D1E6DHDV.js";
|
|
14
14
|
import { n as _e, t as ve } from "./chunk-LNGE3PJU-DJjGTS7O.js";
|
|
15
15
|
//#region ../../node_modules/es-toolkit/dist/compat/_internal/isPrototype.mjs
|
|
16
16
|
function ye(e) {
|
|
@@ -302,7 +302,7 @@ var qe = "c4", Je = {
|
|
|
302
302
|
id: Ye,
|
|
303
303
|
detector: /* @__PURE__ */ p((e) => /^\s*(graph|flowchart)/.test(e), "detector"),
|
|
304
304
|
loader: /* @__PURE__ */ p(async () => {
|
|
305
|
-
let { diagram: e } = await import("./flowDiagram-KWPJA3E3-
|
|
305
|
+
let { diagram: e } = await import("./flowDiagram-KWPJA3E3-DZxumFfu.js");
|
|
306
306
|
return {
|
|
307
307
|
id: Ye,
|
|
308
308
|
diagram: e
|
|
@@ -312,7 +312,7 @@ var qe = "c4", Je = {
|
|
|
312
312
|
id: Ze,
|
|
313
313
|
detector: /* @__PURE__ */ p((e) => /^\s*agentflow-beta\b/.test(e), "detector"),
|
|
314
314
|
loader: /* @__PURE__ */ p(async () => {
|
|
315
|
-
let { diagram: e } = await import("./diagram-22UHCM2B-
|
|
315
|
+
let { diagram: e } = await import("./diagram-22UHCM2B-CVZYpeev.js");
|
|
316
316
|
return {
|
|
317
317
|
id: Ze,
|
|
318
318
|
diagram: e
|
|
@@ -322,7 +322,7 @@ var qe = "c4", Je = {
|
|
|
322
322
|
id: $e,
|
|
323
323
|
detector: /* @__PURE__ */ p((e) => /^\s*swimlane-beta\b/.test(e), "detector"),
|
|
324
324
|
loader: /* @__PURE__ */ p(async () => {
|
|
325
|
-
let { diagram: e } = await import("./swimlanesDiagram-TC7HE7FX-
|
|
325
|
+
let { diagram: e } = await import("./swimlanesDiagram-TC7HE7FX-CROh8GTF.js");
|
|
326
326
|
return {
|
|
327
327
|
id: $e,
|
|
328
328
|
diagram: e
|
|
@@ -332,7 +332,7 @@ var qe = "c4", Je = {
|
|
|
332
332
|
id: tt,
|
|
333
333
|
detector: /* @__PURE__ */ p((e) => /^\s*erDiagram/.test(e), "detector"),
|
|
334
334
|
loader: /* @__PURE__ */ p(async () => {
|
|
335
|
-
let { diagram: e } = await import("./erDiagram-OPXOYQCR-
|
|
335
|
+
let { diagram: e } = await import("./erDiagram-OPXOYQCR-CUbpVns3.js");
|
|
336
336
|
return {
|
|
337
337
|
id: tt,
|
|
338
338
|
diagram: e
|
|
@@ -352,7 +352,7 @@ var qe = "c4", Je = {
|
|
|
352
352
|
id: at,
|
|
353
353
|
detector: /* @__PURE__ */ p((e) => /^\s*gantt/.test(e), "detector"),
|
|
354
354
|
loader: /* @__PURE__ */ p(async () => {
|
|
355
|
-
let { diagram: e } = await import("./ganttDiagram-FUAMR5RP-
|
|
355
|
+
let { diagram: e } = await import("./ganttDiagram-FUAMR5RP-D3vmspam.js");
|
|
356
356
|
return {
|
|
357
357
|
id: at,
|
|
358
358
|
diagram: e
|
|
@@ -372,7 +372,7 @@ var qe = "c4", Je = {
|
|
|
372
372
|
id: lt,
|
|
373
373
|
detector: /* @__PURE__ */ p((e) => /^\s*pie/.test(e), "detector"),
|
|
374
374
|
loader: /* @__PURE__ */ p(async () => {
|
|
375
|
-
let { diagram: e } = await import("./pieDiagram-5QR66LMP-
|
|
375
|
+
let { diagram: e } = await import("./pieDiagram-5QR66LMP-BXxVfv5K.js");
|
|
376
376
|
return {
|
|
377
377
|
id: lt,
|
|
378
378
|
diagram: e
|
|
@@ -382,7 +382,7 @@ var qe = "c4", Je = {
|
|
|
382
382
|
id: dt,
|
|
383
383
|
detector: /* @__PURE__ */ p((e) => /^\s*quadrantChart/.test(e), "detector"),
|
|
384
384
|
loader: /* @__PURE__ */ p(async () => {
|
|
385
|
-
let { diagram: e } = await import("./quadrantDiagram-O4NWA36T-
|
|
385
|
+
let { diagram: e } = await import("./quadrantDiagram-O4NWA36T-BbidZDM8.js");
|
|
386
386
|
return {
|
|
387
387
|
id: dt,
|
|
388
388
|
diagram: e
|
|
@@ -392,7 +392,7 @@ var qe = "c4", Je = {
|
|
|
392
392
|
id: pt,
|
|
393
393
|
detector: /* @__PURE__ */ p((e) => /^\s*xychart(-beta)?/.test(e), "detector"),
|
|
394
394
|
loader: /* @__PURE__ */ p(async () => {
|
|
395
|
-
let { diagram: e } = await import("./xychartDiagram-PMCCYNJV-
|
|
395
|
+
let { diagram: e } = await import("./xychartDiagram-PMCCYNJV-B2aZlrno.js");
|
|
396
396
|
return {
|
|
397
397
|
id: pt,
|
|
398
398
|
diagram: e
|
|
@@ -402,7 +402,7 @@ var qe = "c4", Je = {
|
|
|
402
402
|
id: ht,
|
|
403
403
|
detector: /* @__PURE__ */ p((e) => /^\s*requirement(Diagram)?/.test(e), "detector"),
|
|
404
404
|
loader: /* @__PURE__ */ p(async () => {
|
|
405
|
-
let { diagram: e } = await import("./requirementDiagram-PLB6GJNP-
|
|
405
|
+
let { diagram: e } = await import("./requirementDiagram-PLB6GJNP-wFvgSWJP.js");
|
|
406
406
|
return {
|
|
407
407
|
id: ht,
|
|
408
408
|
diagram: e
|
|
@@ -422,7 +422,7 @@ var qe = "c4", Je = {
|
|
|
422
422
|
id: yt,
|
|
423
423
|
detector: /* @__PURE__ */ p((e) => /^\s*classDiagram/.test(e), "detector"),
|
|
424
424
|
loader: /* @__PURE__ */ p(async () => {
|
|
425
|
-
let { diagram: e } = await import("./classDiagram-v2-NBCMYWYE-
|
|
425
|
+
let { diagram: e } = await import("./classDiagram-v2-NBCMYWYE-BDaxYvDy.js");
|
|
426
426
|
return {
|
|
427
427
|
id: yt,
|
|
428
428
|
diagram: e
|
|
@@ -432,7 +432,7 @@ var qe = "c4", Je = {
|
|
|
432
432
|
id: xt,
|
|
433
433
|
detector: /* @__PURE__ */ p((e) => /^\s*stateDiagram/.test(e), "detector"),
|
|
434
434
|
loader: /* @__PURE__ */ p(async () => {
|
|
435
|
-
let { diagram: e } = await import("./stateDiagram-v2-GCMORJYK-
|
|
435
|
+
let { diagram: e } = await import("./stateDiagram-v2-GCMORJYK-EMa7q3ju.js");
|
|
436
436
|
return {
|
|
437
437
|
id: xt,
|
|
438
438
|
diagram: e
|
|
@@ -442,7 +442,7 @@ var qe = "c4", Je = {
|
|
|
442
442
|
id: Ct,
|
|
443
443
|
detector: /* @__PURE__ */ p((e) => /^\s*journey/.test(e), "detector"),
|
|
444
444
|
loader: /* @__PURE__ */ p(async () => {
|
|
445
|
-
let { diagram: e } = await import("./journeyDiagram-ZHPQQLJL-
|
|
445
|
+
let { diagram: e } = await import("./journeyDiagram-ZHPQQLJL-Dxvl3oeN.js");
|
|
446
446
|
return {
|
|
447
447
|
id: Ct,
|
|
448
448
|
diagram: e
|
|
@@ -460,7 +460,7 @@ var qe = "c4", Je = {
|
|
|
460
460
|
id: Ot,
|
|
461
461
|
detector: /* @__PURE__ */ p((e, t = {}) => /^\s*flowchart-elk/.test(e) ? (t.layout = "elk", !0) : !1, "detector"),
|
|
462
462
|
loader: /* @__PURE__ */ p(async () => {
|
|
463
|
-
let { diagram: e } = await import("./flowDiagram-KWPJA3E3-
|
|
463
|
+
let { diagram: e } = await import("./flowDiagram-KWPJA3E3-DZxumFfu.js");
|
|
464
464
|
return {
|
|
465
465
|
id: Ot,
|
|
466
466
|
diagram: e
|
|
@@ -470,7 +470,7 @@ var qe = "c4", Je = {
|
|
|
470
470
|
id: At,
|
|
471
471
|
detector: /* @__PURE__ */ p((e) => /^\s*timeline/.test(e), "detector"),
|
|
472
472
|
loader: /* @__PURE__ */ p(async () => {
|
|
473
|
-
let { diagram: e } = await import("./timeline-definition-EJHVYXUP-
|
|
473
|
+
let { diagram: e } = await import("./timeline-definition-EJHVYXUP-2Z6UABw8.js");
|
|
474
474
|
return {
|
|
475
475
|
id: At,
|
|
476
476
|
diagram: e
|
|
@@ -480,7 +480,7 @@ var qe = "c4", Je = {
|
|
|
480
480
|
id: Mt,
|
|
481
481
|
detector: /* @__PURE__ */ p((e) => /^\s*mindmap/.test(e), "detector"),
|
|
482
482
|
loader: /* @__PURE__ */ p(async () => {
|
|
483
|
-
let { diagram: e } = await import("./mindmap-definition-NLK3R4M7-
|
|
483
|
+
let { diagram: e } = await import("./mindmap-definition-NLK3R4M7-CO0E97EZ.js");
|
|
484
484
|
return {
|
|
485
485
|
id: Mt,
|
|
486
486
|
diagram: e
|
|
@@ -500,7 +500,7 @@ var qe = "c4", Je = {
|
|
|
500
500
|
id: It,
|
|
501
501
|
detector: /* @__PURE__ */ p((e) => /^\s*sankey(-beta)?/.test(e), "detector"),
|
|
502
502
|
loader: /* @__PURE__ */ p(async () => {
|
|
503
|
-
let { diagram: e } = await import("./sankeyDiagram-IPEJSGJF-
|
|
503
|
+
let { diagram: e } = await import("./sankeyDiagram-IPEJSGJF-Cka5t09q.js");
|
|
504
504
|
return {
|
|
505
505
|
id: It,
|
|
506
506
|
diagram: e
|
|
@@ -530,7 +530,7 @@ var qe = "c4", Je = {
|
|
|
530
530
|
id: Ht,
|
|
531
531
|
detector: /* @__PURE__ */ p((e) => /^\s*block(-beta)?/.test(e), "detector"),
|
|
532
532
|
loader: /* @__PURE__ */ p(async () => {
|
|
533
|
-
let { diagram: e } = await import("./blockDiagram-BEXU5L5S-
|
|
533
|
+
let { diagram: e } = await import("./blockDiagram-BEXU5L5S-BM-gkWAO.js");
|
|
534
534
|
return {
|
|
535
535
|
id: Ht,
|
|
536
536
|
diagram: e
|
|
@@ -590,7 +590,7 @@ var qe = "c4", Je = {
|
|
|
590
590
|
id: en,
|
|
591
591
|
detector: /* @__PURE__ */ p((e) => /^\s*treemap/.test(e), "detector"),
|
|
592
592
|
loader: /* @__PURE__ */ p(async () => {
|
|
593
|
-
let { diagram: e } = await import("./diagram-3UASUU5V-
|
|
593
|
+
let { diagram: e } = await import("./diagram-3UASUU5V-D7MmBJbM.js");
|
|
594
594
|
return {
|
|
595
595
|
id: en,
|
|
596
596
|
diagram: e
|
|
@@ -600,7 +600,7 @@ var qe = "c4", Je = {
|
|
|
600
600
|
id: nn,
|
|
601
601
|
detector: /* @__PURE__ */ p((e) => /^\s*usecase-beta(?:\s|$)/.test(e), "detector"),
|
|
602
602
|
loader: /* @__PURE__ */ p(async () => {
|
|
603
|
-
let { diagram: e } = await import("./usecaseDiagram-POWQR4AR-
|
|
603
|
+
let { diagram: e } = await import("./usecaseDiagram-POWQR4AR-DT56cp_B.js");
|
|
604
604
|
return {
|
|
605
605
|
id: nn,
|
|
606
606
|
diagram: e
|
package/dist/{mindmap-definition-NLK3R4M7-Brf_2jIE.js → mindmap-definition-NLK3R4M7-CO0E97EZ.js}
RENAMED
|
@@ -7,11 +7,11 @@ import "./chunk-MBY4JIJT-C3RQP_Nk.js";
|
|
|
7
7
|
import "./chunk-7PRAP22T-_Av9vcXz.js";
|
|
8
8
|
import "./chunk-7INBJB4K-BY5n77ka.js";
|
|
9
9
|
import "./chunk-5DYCD2WN-Cja1INgd.js";
|
|
10
|
-
import "./chunk-Z7XXMR3K-
|
|
10
|
+
import "./chunk-Z7XXMR3K-DMTBxZxM.js";
|
|
11
11
|
import { t as u } from "./chunk-XXDRQBXY-FgXU14Bh.js";
|
|
12
12
|
import { t as d } from "./chunk-WEXAMYUT-CucJfehv.js";
|
|
13
13
|
import "./chunk-UA2S7LBM-BNeHeMx9.js";
|
|
14
|
-
import { r as f, t as p } from "./chunk-GNY47TPC-
|
|
14
|
+
import { r as f, t as p } from "./chunk-GNY47TPC-D1E6DHDV.js";
|
|
15
15
|
//#region ../../node_modules/uuid/dist/stringify.js
|
|
16
16
|
var m = [];
|
|
17
17
|
for (let e = 0; e < 256; ++e) m.push((e + 256).toString(16).slice(1));
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ct as e, ot as t } from "./components-
|
|
1
|
+
import { ct as e, ot as t } from "./components-DrStgM4J.js";
|
|
2
2
|
import { n } from "./src-C9kQSo6K.js";
|
|
3
3
|
import { i as r, p as i } from "./chunk-ZIGJFQKS-C3xUAXJq.js";
|
|
4
4
|
import { t as a } from "./ordinal-DwxdXP1t.js";
|
package/dist/print.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { r as e } from "./i18n-provider-
|
|
2
|
-
import { t } from "./translate-material-
|
|
1
|
+
import { r as e } from "./i18n-provider-DBFRz5uH.js";
|
|
2
|
+
import { t } from "./translate-material-BCwQrt2G.js";
|
|
3
3
|
import { jsx as n, jsxs as r } from "react/jsx-runtime";
|
|
4
4
|
import { Children as i, createContext as a, isValidElement as o, useCallback as s, useContext as c, useEffect as l, useMemo as u, useState as d } from "react";
|
|
5
5
|
import { OBJECT_URL_TTL_MS as f, downloadPdfFile as p } from "@nxgt/material-core/pdf-download";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { rt as e } from "./components-
|
|
1
|
+
import { rt as e } from "./components-DrStgM4J.js";
|
|
2
2
|
import { n as t, t as n } from "./src-C9kQSo6K.js";
|
|
3
3
|
import { n as r } from "./chunk-Y2CYZVJY-BAad7w_K.js";
|
|
4
4
|
import { D as i, H as a, U as o, a as s, c, f as l, q as u, v as d, w as f, x as p, y as m, z as h } from "./chunk-O7XYJQB3-A66QSOPA.js";
|
package/dist/{requirementDiagram-PLB6GJNP-CCP3YtvB.js → requirementDiagram-PLB6GJNP-wFvgSWJP.js}
RENAMED
|
@@ -8,11 +8,11 @@ import "./chunk-7PRAP22T-_Av9vcXz.js";
|
|
|
8
8
|
import { a as p, i as m, o as h, r as g } from "./chunk-J5ZVWO5B-DmRRmhon.js";
|
|
9
9
|
import "./chunk-7INBJB4K-BY5n77ka.js";
|
|
10
10
|
import "./chunk-5DYCD2WN-Cja1INgd.js";
|
|
11
|
-
import "./chunk-Z7XXMR3K-
|
|
11
|
+
import "./chunk-Z7XXMR3K-DMTBxZxM.js";
|
|
12
12
|
import { t as _ } from "./chunk-XXDRQBXY-FgXU14Bh.js";
|
|
13
13
|
import { t as v } from "./chunk-WEXAMYUT-CucJfehv.js";
|
|
14
14
|
import "./chunk-UA2S7LBM-BNeHeMx9.js";
|
|
15
|
-
import { r as y, t as b } from "./chunk-GNY47TPC-
|
|
15
|
+
import { r as y, t as b } from "./chunk-GNY47TPC-D1E6DHDV.js";
|
|
16
16
|
//#region ../../node_modules/mermaid/dist/chunks/mermaid.core/requirementDiagram-PLB6GJNP.mjs
|
|
17
17
|
var x = (function() {
|
|
18
18
|
var e = /* @__PURE__ */ n(function(e, t, n, r) {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { dt as e, t } from "./icon-button-BxySFfrr.js";
|
|
2
2
|
import { t as n } from "./utils-UBn-46YY.js";
|
|
3
|
-
import { t as r } from "./use-material-translation-
|
|
3
|
+
import { t as r } from "./use-material-translation-DG_7z3Q7.js";
|
|
4
4
|
import { GripVertical as i } from "lucide-react";
|
|
5
5
|
import { jsx as a } from "react/jsx-runtime";
|
|
6
6
|
import o, { cloneElement as s, createContext as c, forwardRef as l, memo as u, useCallback as d, useContext as f, useEffect as p, useLayoutEffect as m, useMemo as h, useReducer as g, useRef as _, useState as v } from "react";
|
|
@@ -8,12 +8,12 @@ import "./chunk-7PRAP22T-_Av9vcXz.js";
|
|
|
8
8
|
import { a as h, i as g, o as _, r as v } from "./chunk-J5ZVWO5B-DmRRmhon.js";
|
|
9
9
|
import "./chunk-7INBJB4K-BY5n77ka.js";
|
|
10
10
|
import "./chunk-5DYCD2WN-Cja1INgd.js";
|
|
11
|
-
import "./chunk-Z7XXMR3K-
|
|
11
|
+
import "./chunk-Z7XXMR3K-DMTBxZxM.js";
|
|
12
12
|
import { t as y } from "./chunk-GWA4HPMP-Co-A6dtV.js";
|
|
13
13
|
import { t as b } from "./chunk-XXDRQBXY-FgXU14Bh.js";
|
|
14
14
|
import { t as x } from "./chunk-WEXAMYUT-CucJfehv.js";
|
|
15
15
|
import "./chunk-UA2S7LBM-BNeHeMx9.js";
|
|
16
|
-
import { r as S, t as C } from "./chunk-GNY47TPC-
|
|
16
|
+
import { r as S, t as C } from "./chunk-GNY47TPC-D1E6DHDV.js";
|
|
17
17
|
//#region ../../node_modules/mermaid/dist/chunks/mermaid.core/stateDiagram-v2-GCMORJYK.mjs
|
|
18
18
|
var w = (function() {
|
|
19
19
|
var e = /* @__PURE__ */ i(function(e, t, n, r) {
|
|
@@ -336,7 +336,12 @@ var e = {
|
|
|
336
336
|
"go-to-last-page": "Go to last page",
|
|
337
337
|
"rows-per-page": "Rows per page",
|
|
338
338
|
"rows-selected": "{count} of {total} {count, plural, =0 {row selected} one {row selected} other {rows selected} }",
|
|
339
|
-
"page-of": "Page {page} of {total}"
|
|
339
|
+
"page-of": "Page {page} of {total}",
|
|
340
|
+
label: "Pagination",
|
|
341
|
+
range: "{from}–{to} of {total}",
|
|
342
|
+
"range-open": "{from}–{to}",
|
|
343
|
+
total: "{total, plural, one {# row} other {# rows}}",
|
|
344
|
+
selected: "{count, plural, one {# row selected} other {# rows selected}}"
|
|
340
345
|
},
|
|
341
346
|
"delete-confirm": {
|
|
342
347
|
title: "Delete {count} item(s)?",
|
|
@@ -1515,7 +1520,12 @@ var e = {
|
|
|
1515
1520
|
"go-to-last-page": "Aller à la dernière page",
|
|
1516
1521
|
"rows-per-page": "Lignes par page",
|
|
1517
1522
|
"rows-selected": "{count} sur {total} {count, plural, =0 {ligne sélectionnée} one {ligne sélectionnée} other {lignes sélectionnées} }",
|
|
1518
|
-
"page-of": "Page {page} sur {total}"
|
|
1523
|
+
"page-of": "Page {page} sur {total}",
|
|
1524
|
+
label: "Pagination",
|
|
1525
|
+
range: "{from}–{to} sur {total}",
|
|
1526
|
+
"range-open": "{from}–{to}",
|
|
1527
|
+
total: "{total, plural, one {# ligne} other {# lignes}}",
|
|
1528
|
+
selected: "{count, plural, one {# ligne sélectionnée} other {# lignes sélectionnées}}"
|
|
1519
1529
|
},
|
|
1520
1530
|
"delete-confirm": {
|
|
1521
1531
|
title: "Supprimer {count} élément(s) ?",
|
|
@@ -7,10 +7,10 @@ import "./chunk-MBY4JIJT-C3RQP_Nk.js";
|
|
|
7
7
|
import "./chunk-7PRAP22T-_Av9vcXz.js";
|
|
8
8
|
import "./chunk-7INBJB4K-BY5n77ka.js";
|
|
9
9
|
import "./chunk-5DYCD2WN-Cja1INgd.js";
|
|
10
|
-
import "./chunk-Z7XXMR3K-
|
|
10
|
+
import "./chunk-Z7XXMR3K-DMTBxZxM.js";
|
|
11
11
|
import "./chunk-UA2S7LBM-BNeHeMx9.js";
|
|
12
|
-
import { r as n } from "./chunk-3FUC2YCW-
|
|
13
|
-
import { t as r } from "./chunk-NETBCI7D-
|
|
12
|
+
import { r as n } from "./chunk-3FUC2YCW-Cf18L00V.js";
|
|
13
|
+
import { t as r } from "./chunk-NETBCI7D-DJUuN4EY.js";
|
|
14
14
|
//#region ../../node_modules/mermaid/dist/chunks/mermaid.core/swimlanes-2SLR337P.mjs
|
|
15
15
|
function i(e, { measure: t }) {
|
|
16
16
|
let n = e.config?.swimlane?.lineHops;
|
package/dist/{swimlanesDiagram-TC7HE7FX-B1lWzHp1.js → swimlanesDiagram-TC7HE7FX-CROh8GTF.js}
RENAMED
|
@@ -7,14 +7,14 @@ import "./chunk-MBY4JIJT-C3RQP_Nk.js";
|
|
|
7
7
|
import "./chunk-7PRAP22T-_Av9vcXz.js";
|
|
8
8
|
import "./chunk-7INBJB4K-BY5n77ka.js";
|
|
9
9
|
import "./chunk-5DYCD2WN-Cja1INgd.js";
|
|
10
|
-
import "./chunk-Z7XXMR3K-
|
|
10
|
+
import "./chunk-Z7XXMR3K-DMTBxZxM.js";
|
|
11
11
|
import "./chunk-GWA4HPMP-Co-A6dtV.js";
|
|
12
12
|
import "./chunk-XXDRQBXY-FgXU14Bh.js";
|
|
13
13
|
import "./chunk-WEXAMYUT-CucJfehv.js";
|
|
14
14
|
import "./chunk-UA2S7LBM-BNeHeMx9.js";
|
|
15
|
-
import "./chunk-GNY47TPC-
|
|
15
|
+
import "./chunk-GNY47TPC-D1E6DHDV.js";
|
|
16
16
|
import "./chunk-LNGE3PJU-DJjGTS7O.js";
|
|
17
|
-
import { r as t, t as n } from "./chunk-7M6MHVWA-
|
|
17
|
+
import { r as t, t as n } from "./chunk-7M6MHVWA-C3x6E3yT.js";
|
|
18
18
|
//#region ../../node_modules/mermaid/dist/chunks/mermaid.core/swimlanesDiagram-TC7HE7FX.mjs
|
|
19
19
|
var r = n({ styles: /* @__PURE__ */ e((e) => `${t(e)}
|
|
20
20
|
.swimlane.cluster:not([data-color-id]) rect {
|
package/dist/{timeline-definition-EJHVYXUP-SdA6wt2-.js → timeline-definition-EJHVYXUP-2Z6UABw8.js}
RENAMED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ct as e } from "./components-
|
|
1
|
+
import { ct as e } from "./components-DrStgM4J.js";
|
|
2
2
|
import { n as t, t as n } from "./src-C9kQSo6K.js";
|
|
3
3
|
import { p as r } from "./chunk-ZIGJFQKS-C3xUAXJq.js";
|
|
4
4
|
import { n as i, t as a } from "./chunk-Y2CYZVJY-BAad7w_K.js";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import "./stored-language-
|
|
2
|
-
import { E as e, r as t } from "./translator-
|
|
1
|
+
import "./stored-language-B0o4cBh8.js";
|
|
2
|
+
import { E as e, r as t } from "./translator-CwpmpI24.js";
|
|
3
3
|
//#region lib/i18n/translate-material.ts
|
|
4
4
|
function n(n, r, i, a) {
|
|
5
5
|
if (n) for (let e of /* @__PURE__ */ new Set([n, n.split("-")[0]])) {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { a as e, i as t, o as n, t as r } from "./stored-language-
|
|
1
|
+
import { a as e, i as t, o as n, t as r } from "./stored-language-B0o4cBh8.js";
|
|
2
2
|
//#region ../../node_modules/@formatjs/fast-memoize/index.js
|
|
3
3
|
function i(e, t) {
|
|
4
4
|
let n = t && t.cache ? t.cache : ne, r = t && t.serializer ? t.serializer : ee;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { n as e } from "./stored-language-
|
|
2
|
-
import { r as t } from "./i18n-provider-
|
|
1
|
+
import { n as e } from "./stored-language-B0o4cBh8.js";
|
|
2
|
+
import { r as t } from "./i18n-provider-DBFRz5uH.js";
|
|
3
3
|
import { _ as n, g as r, h as i, n as a, v as o, y as s } from "./number.utils-BiBN2hWJ.js";
|
|
4
4
|
import { useCallback as c, useEffect as l, useMemo as u, useSyncExternalStore as d } from "react";
|
|
5
5
|
//#region lib/hooks/use-ssr-media-query.ts
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { r as e } from "./i18n-provider-
|
|
2
|
-
import { t } from "./translate-material-
|
|
1
|
+
import { r as e } from "./i18n-provider-DBFRz5uH.js";
|
|
2
|
+
import { t } from "./translate-material-BCwQrt2G.js";
|
|
3
3
|
import { useCallback as n } from "react";
|
|
4
4
|
//#region lib/i18n/use-material-translation.ts
|
|
5
5
|
function r() {
|
|
@@ -8,11 +8,11 @@ import "./chunk-7PRAP22T-_Av9vcXz.js";
|
|
|
8
8
|
import { a as g, i as _, o as v, r as y } from "./chunk-J5ZVWO5B-DmRRmhon.js";
|
|
9
9
|
import "./chunk-7INBJB4K-BY5n77ka.js";
|
|
10
10
|
import "./chunk-5DYCD2WN-Cja1INgd.js";
|
|
11
|
-
import "./chunk-Z7XXMR3K-
|
|
11
|
+
import "./chunk-Z7XXMR3K-DMTBxZxM.js";
|
|
12
12
|
import { t as ee } from "./chunk-XXDRQBXY-FgXU14Bh.js";
|
|
13
13
|
import { t as te } from "./chunk-WEXAMYUT-CucJfehv.js";
|
|
14
14
|
import "./chunk-UA2S7LBM-BNeHeMx9.js";
|
|
15
|
-
import { r as ne, t as re } from "./chunk-GNY47TPC-
|
|
15
|
+
import { r as ne, t as re } from "./chunk-GNY47TPC-D1E6DHDV.js";
|
|
16
16
|
//#region ../../node_modules/chevrotain/node_modules/lodash-es/_freeGlobal.js
|
|
17
17
|
var ie = typeof global == "object" && global && global.Object === Object && global, ae = typeof self == "object" && self && self.Object === Object && self, b = ie || ae || Function("return this")(), oe = b.Symbol, se = Object.prototype, ce = se.hasOwnProperty, le = se.toString, ue = oe ? oe.toStringTag : void 0;
|
|
18
18
|
function de(e) {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { at as e, rt as t, st as n } from "./components-
|
|
1
|
+
import { at as e, rt as t, st as n } from "./components-DrStgM4J.js";
|
|
2
2
|
import { n as r } from "./src-C9kQSo6K.js";
|
|
3
3
|
import { i } from "./chunk-ZIGJFQKS-C3xUAXJq.js";
|
|
4
4
|
import { n as a } from "./chunk-Y2CYZVJY-BAad7w_K.js";
|
|
@@ -12,7 +12,7 @@ each other, so either can be used alone.
|
|
|
12
12
|
|
|
13
13
|
| | Component | What it does |
|
|
14
14
|
| --- | --- | --- |
|
|
15
|
-
| <img src="../previews/data-table-filter-lists-datatable.webp" width="96" alt=""> | [DataTable](#datatable) | TanStack Table v9 with sorting, selection, expansion and pagination |
|
|
15
|
+
| <img src="../previews/data-table-filter-lists-datatable.webp" width="96" alt=""> | [DataTable](#datatable) | TanStack Table v9 with sorting, selection, expansion and pagination, client-side or one server page at a time |
|
|
16
16
|
| <img src="../previews/data-table-filter-lists-filter.webp" width="96" alt=""> | [Filter](#filter) | Schema-driven filters with chips, presets and persistence |
|
|
17
17
|
| <img src="../previews/data-table-filter-lists-filter.webp" width="96" alt=""> | [FilterInline, FilterPopover…](#filterinline-filterpopover-filterdialog-filtersheet-filterdrawer) | The filter panel inline or in an overlay |
|
|
18
18
|
| <img src="../previews/data-table-filter-lists-pagination.webp" width="96" alt=""> | [Pagination](#pagination) | Pagination primitives and `PaginationBar` |
|
|
@@ -23,7 +23,7 @@ each other, so either can be used alone.
|
|
|
23
23
|
|
|
24
24
|

|
|
25
25
|
|
|
26
|
-
TanStack Table v9 with sorting, filtering, selection, expandable rows, pagination or load-more, column visibility, skeleton rows while loading and your own empty state.
|
|
26
|
+
TanStack Table v9 with sorting, filtering, selection, expandable rows, pagination or load-more, column visibility, skeleton rows while loading and your own empty state — or one server page at a time, with controlled sorting and selection, cursor Previous / Next links and row links.
|
|
27
27
|
|
|
28
28
|
```tsx
|
|
29
29
|
import {
|
|
@@ -51,8 +51,9 @@ function PeopleTable({ people }: { people: Person[] }) {
|
|
|
51
51
|
```
|
|
52
52
|
|
|
53
53
|
Parts: `DataTable`; `DataTableColumnHeader` (a sortable header with a hide
|
|
54
|
-
action); `DataTablePagination
|
|
55
|
-
|
|
54
|
+
action); `DataTablePagination`, `DataTableServerFooter` and
|
|
55
|
+
`DataTableViewOptions` (used by the table, exported for a table or a
|
|
56
|
+
`footer` of your own; both footers take `disabled`);
|
|
56
57
|
`useColumnHelpers<T>()` returns a
|
|
57
58
|
`columnHelper` bound to the table's features and `predefinedColumns()` —
|
|
58
59
|
`select` (checkboxes) and `expand` (a toggle for `renderExpandedRow`, named
|
|
@@ -75,6 +76,15 @@ table enables, for typing your own column defs.
|
|
|
75
76
|
| `loading` | `boolean` | `false` | skeleton rows, or the current rows dimmed; `aria-busy`; controls disabled |
|
|
76
77
|
| `loadingRows` | `number` | the page size | how many skeleton rows |
|
|
77
78
|
| `empty` | `ReactNode \| ({ filtered }) => ReactNode` | icon and "No data available" | content of the empty row, spanning every visible column |
|
|
79
|
+
| `manual` | `boolean` | `false` | `data` is one server page: no client filtering, sorting or paging; the footer is the server footer ([server-side data](#server-side-data)) |
|
|
80
|
+
| `sorting` / `onSortingChange` | `SortingState` / `(sorting) => void` | held inside | controlled sorting; the callback gets the new state, not an updater |
|
|
81
|
+
| `getRowId` | `(row, index) => string` | the index | the row's id, the key of `rowSelection` |
|
|
82
|
+
| `rowSelection` / `onRowSelectionChange` | `RowSelectionState` / `(selection) => void` | held inside | controlled selection, by id; may hold rows of other pages |
|
|
83
|
+
| `pagination` | `{ totalCount?, offset?, previous?, next? }` | — | the server footer's range ("41–60 of 133") and Previous / Next: an href (a link) or a callback (a button) |
|
|
84
|
+
| `footer` | `false \| (table) => ReactNode` | the pagination | replaces the footer, or removes it |
|
|
85
|
+
| `getRowHref` | `(row) => string \| undefined` | — | the first data cell links to the row's page; a click elsewhere on the row follows it |
|
|
86
|
+
| `onRowClick` | `(row, event) => void` | — | a click on the row (not on a control); alone (without `getRowHref`), it makes the row focusable and Enter calls it |
|
|
87
|
+
| `linkComponent` | `ComponentType<{ href, className?, children?, rel?, 'aria-label'? }>` | `<a>` | the link for `getRowHref` and the page links: wrap your router's |
|
|
78
88
|
|
|
79
89
|
### Loading and empty states
|
|
80
90
|
|
|
@@ -128,10 +138,155 @@ default, or your own content, told whether rows exist but none matches the
|
|
|
128
138
|
filters (`filtered`); content that renders nothing gets the default.
|
|
129
139
|
`DataTableEmpty` and `DataTableEmptyState` type the prop and its argument.
|
|
130
140
|
|
|
141
|
+
### Server-side data
|
|
142
|
+
|
|
143
|
+
When the server filters, sorts and pages, hand the table **one page** and
|
|
144
|
+
turn on `manual`: the rows are rendered as given — no client slicing,
|
|
145
|
+
sorting or filtering — and the footer becomes the server footer. Keep the
|
|
146
|
+
query (sorting, cursors, filters) in the URL, so the page renders on the
|
|
147
|
+
server, survives a reload and works with no JavaScript.
|
|
148
|
+
|
|
149
|
+
```tsx
|
|
150
|
+
// app/routes/students.tsx (React Router, framework mode)
|
|
151
|
+
import {
|
|
152
|
+
Button,
|
|
153
|
+
DataTable,
|
|
154
|
+
DataTableColumnHeader,
|
|
155
|
+
type DataTableLinkProps,
|
|
156
|
+
useColumnHelpers,
|
|
157
|
+
} from '@nxgt/material/components';
|
|
158
|
+
import type { RowSelectionState } from '@tanstack/react-table';
|
|
159
|
+
import { useState } from 'react';
|
|
160
|
+
import { Form, Link, useLoaderData, useNavigation, useSearchParams } from 'react-router';
|
|
161
|
+
import type { Route } from './+types/students';
|
|
162
|
+
|
|
163
|
+
type Student = { id: string; name: string; email: string };
|
|
164
|
+
const PAGE_SIZE = 20;
|
|
165
|
+
|
|
166
|
+
export async function loader({ request }: Route.LoaderArgs) {
|
|
167
|
+
const url = new URL(request.url);
|
|
168
|
+
// The cursors of the pages before this one: Previous drops the last.
|
|
169
|
+
const trail = url.searchParams.getAll('after');
|
|
170
|
+
const [sort = 'name', dir = 'asc'] = (url.searchParams.get('sort') ?? '').split('.');
|
|
171
|
+
// { nodes, endCursor, hasNextPage, totalCount }
|
|
172
|
+
const page = await api.students({ first: PAGE_SIZE, after: trail.at(-1), sort, dir });
|
|
173
|
+
return { ...page, trail, sorting: [{ id: sort, desc: dir === 'desc' }] };
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
// Declared once, outside the page: React Router's `Link` takes `to`.
|
|
177
|
+
function RouterLink({ href, ...props }: DataTableLinkProps) {
|
|
178
|
+
return <Link to={href} {...props} />;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
export default function Students() {
|
|
182
|
+
const { nodes, endCursor, hasNextPage, totalCount, trail, sorting } =
|
|
183
|
+
useLoaderData<typeof loader>();
|
|
184
|
+
const [params, setParams] = useSearchParams();
|
|
185
|
+
const navigation = useNavigation();
|
|
186
|
+
const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
|
|
187
|
+
const selected = Object.keys(rowSelection).filter((id) => rowSelection[id]);
|
|
188
|
+
|
|
189
|
+
const { columnHelper, predefinedColumns } = useColumnHelpers<Student>();
|
|
190
|
+
const columns = [
|
|
191
|
+
predefinedColumns().select,
|
|
192
|
+
columnHelper.accessor('name', {
|
|
193
|
+
header: ({ column }) => <DataTableColumnHeader column={column} title="Name" />,
|
|
194
|
+
}),
|
|
195
|
+
columnHelper.accessor('email', { header: 'Email' }),
|
|
196
|
+
];
|
|
197
|
+
|
|
198
|
+
const pageHref = (cursors: string[]) => {
|
|
199
|
+
const next = new URLSearchParams(params);
|
|
200
|
+
next.delete('after');
|
|
201
|
+
for (const cursor of cursors) next.append('after', cursor);
|
|
202
|
+
return `?${next}`;
|
|
203
|
+
};
|
|
204
|
+
|
|
205
|
+
return (
|
|
206
|
+
<DataTable
|
|
207
|
+
manual
|
|
208
|
+
data={nodes}
|
|
209
|
+
columns={columns}
|
|
210
|
+
loading={navigation.state === 'loading'}
|
|
211
|
+
sorting={sorting}
|
|
212
|
+
onSortingChange={([sort]) =>
|
|
213
|
+
setParams((p) => {
|
|
214
|
+
p.set('sort', `${sort?.id ?? 'name'}.${sort?.desc ? 'desc' : 'asc'}`);
|
|
215
|
+
p.delete('after'); // a new order starts at the first page
|
|
216
|
+
return p;
|
|
217
|
+
})
|
|
218
|
+
}
|
|
219
|
+
getRowId={(student) => student.id}
|
|
220
|
+
rowSelection={rowSelection}
|
|
221
|
+
onRowSelectionChange={setRowSelection}
|
|
222
|
+
getRowHref={(student) => `/students/${student.id}`}
|
|
223
|
+
linkComponent={RouterLink}
|
|
224
|
+
pagination={{
|
|
225
|
+
totalCount,
|
|
226
|
+
offset: trail.length * PAGE_SIZE,
|
|
227
|
+
previous: trail.length ? pageHref(trail.slice(0, -1)) : null,
|
|
228
|
+
next: hasNextPage ? pageHref([...trail, endCursor]) : null,
|
|
229
|
+
}}
|
|
230
|
+
actions={() => (
|
|
231
|
+
<Form method="post" onSubmit={() => setRowSelection({})}>
|
|
232
|
+
{selected.map((id) => (
|
|
233
|
+
<input key={id} type="hidden" name="id" value={id} />
|
|
234
|
+
))}
|
|
235
|
+
<Button type="submit" name="intent" value="archive" disabled={!selected.length}>
|
|
236
|
+
Archive {selected.length} selected
|
|
237
|
+
</Button>
|
|
238
|
+
</Form>
|
|
239
|
+
)}
|
|
240
|
+
/>
|
|
241
|
+
);
|
|
242
|
+
}
|
|
243
|
+
```
|
|
244
|
+
|
|
245
|
+
- **Paging.** `pagination.previous` and `next` are each an href, rendered as
|
|
246
|
+
a link (`rel="prev"` / `rel="next"`, through `linkComponent`), or a
|
|
247
|
+
callback, rendered as a button; absent or `null`, the button is disabled,
|
|
248
|
+
and so are both while `loading`. `totalCount` and `offset` (the 0-based
|
|
249
|
+
index of the page's first row) make the range: "41–60 of 133"
|
|
250
|
+
(`material.table.pagination.range`), "41–60" without a total, "133 rows"
|
|
251
|
+
without an offset. Cursor paging knows the offset from the trail's length
|
|
252
|
+
times the page size; leave it out if pages can be short.
|
|
253
|
+
- **Sorting** is controlled: the headers show `sorting`, and
|
|
254
|
+
`onSortingChange` receives the new `SortingState` (not TanStack's updater)
|
|
255
|
+
for you to put in the URL. Filters work the same way: render them in
|
|
256
|
+
`actions` and keep their values in the URL; `manual` turns client
|
|
257
|
+
filtering off.
|
|
258
|
+
- **Selection** is keyed by `getRowId`, so it survives a page change: ids
|
|
259
|
+
of other pages stay in `rowSelection`, and the footer counts them all
|
|
260
|
+
("3 rows selected", `material.table.pagination.selected`). `actions(table)`
|
|
261
|
+
reads it too (`table.store.state.rowSelection`). To keep it across a
|
|
262
|
+
reload, put it in the URL or `sessionStorage`.
|
|
263
|
+
- **Row links.** With `getRowHref`, the first data column's cell is a real
|
|
264
|
+
link to the row's page — a tab stop, opened by Enter, in a new tab by
|
|
265
|
+
Ctrl/Cmd+click, followed with no JavaScript. A click anywhere else on the
|
|
266
|
+
row follows the same link, except on a control (a checkbox, a button, a
|
|
267
|
+
link, a menu, a field, or anything marked `data-row-click-ignore`) and at
|
|
268
|
+
the end of a text selection. The link wraps what the first data column
|
|
269
|
+
renders, so that column must render plain content, not a link or a
|
|
270
|
+
button of its own. `onRowClick(row, event)` is for what is not a
|
|
271
|
+
navigation (opening a sheet). Alone, it makes the row focusable and Enter
|
|
272
|
+
calls it; with `getRowHref`, the link stays the keyboard target, and
|
|
273
|
+
calling `event.preventDefault()` in it stops a mouse click from following
|
|
274
|
+
the link. A focusable row has no role of its own: for anything a screen
|
|
275
|
+
reader user must reach, prefer `getRowHref` or a button in a cell.
|
|
276
|
+
- **Your own footer.** `footer={(table) => …}` replaces the footer —
|
|
277
|
+
`<DataTableServerFooter table={table} pagination={…} />` is the default
|
|
278
|
+
one, to wrap or reuse — and `footer={false}` removes it.
|
|
279
|
+
- **Loading and empty** behave as above: keep `loading` on while a
|
|
280
|
+
navigation is pending, and the current rows stay in place, dimmed.
|
|
281
|
+
|
|
282
|
+
The server footer's strings are `material.table.pagination.*`
|
|
283
|
+
(`previous`, `next`, `label`, `range`, `range-open`, `total`, `selected`),
|
|
284
|
+
in English and French.
|
|
285
|
+
|
|
131
286
|
For the TanStack API itself (column helpers, features, row models), see
|
|
132
287
|
[TanStack Table v9](https://tanstack.com/table/latest).
|
|
133
288
|
|
|
134
|
-
**Storybook:** `Data table, filter & lists/DataTable` · **Vue:** `DataTable`, `DataTableColumnHeader`, `DataTablePagination`, `DataTableViewOptions`
|
|
289
|
+
**Storybook:** `Data table, filter & lists/DataTable`, `…/DataTable/Server-side data` · **Vue:** `DataTable`, `DataTableColumnHeader`, `DataTablePagination`, `DataTableServerFooter`, `DataTableViewOptions`
|
|
135
290
|
|
|
136
291
|
---
|
|
137
292
|
|
package/docs/roadmap.md
CHANGED
|
@@ -85,6 +85,12 @@ Nothing in progress right now; see Next.
|
|
|
85
85
|
|
|
86
86
|
## Shipped
|
|
87
87
|
|
|
88
|
+
- **DataTable server-side data** — hand the table one page from your loader
|
|
89
|
+
(`manual`): no client paging or sorting, controlled sorting and selection by
|
|
90
|
+
row id (`sorting`, `rowSelection`, `getRowId`), a footer with "41–60 of 133"
|
|
91
|
+
and Previous / Next as links that work with no JavaScript (`pagination`,
|
|
92
|
+
`DataTableServerFooter`, `footer`), and rows that link to their page
|
|
93
|
+
(`getRowHref`, `onRowClick`, `linkComponent`). 2.7.0.
|
|
88
94
|
- **TreeSelectField** — pick one or several items from a tree inside a form
|
|
89
95
|
field, as chips when several, with an optional filter that keeps each match
|
|
90
96
|
under its ancestors (`TreeSelectField`, `TreeSelectFormField`). 2.6.0.
|