@nxgt/material 2.6.2 → 2.7.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @nxgt/material
 
+## 2.7.0
+
+### Minor Changes
+
+- [#431](https://github.com/softistx/nxgt-material/pull/431) [`bd58a6f`](https://github.com/softistx/nxgt-material/commit/bd58a6f67bdc25d4b4d0d7d88c52784869ad1529) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `DataTable` renders server-side data: one page from a loader, with the query in the URL. Everything is opt-in; a table that sets none of the new props renders and behaves as before.
+  
+  - `manual`: `data` is one server page, rendered as given — no client paging, sorting or filtering — and the footer becomes `DataTableServerFooter` (exported).
+  - `pagination={{ totalCount, offset, previous, next }}`: the server footer's range ("41–60 of 133", `material.table.pagination.range`) and Previous / Next, each an href (a real link, `rel="prev"` / `rel="next"`, that works with no JavaScript) or a callback (a button); disabled when absent and while `loading`.
+  - Controlled sorting: `sorting` + `onSortingChange(sorting)` in React, `v-model:sorting` in Vue. The headers show the sorting they are given; the callback receives the new `SortingState`, not an updater.
+  - `getRowId(row, index)` and controlled selection by id: `rowSelection` + `onRowSelectionChange(selection)` in React, `v-model:row-selection` in Vue. Ids of other pages are kept, and the server footer counts them all.
+  - `getRowHref(row)`: the first data cell becomes a link to the row's page, and a click anywhere else on the row (but on a control, in a portal, or at the end of a text selection) follows it. `onRowClick(row, event)` (`@row-click` in Vue) makes the row focusable and activatable with Enter.
+  - `linkComponent`: the link rendered for row and page links, given `href` (wrap React Router's `Link` or vue-router's `RouterLink`, which take `to`). Default: a plain `<a>`.
+  - `footer`: a render function (React, Vue) or the `#footer` slot (Vue) replaces the footer; `footer={false}` removes it.
+  - New `material.table.pagination.*` strings, in English and French: `label`, `range`, `range-open`, `total`, `selected`.
+  
+  `@nxgt/material-core` gains `/row-activation` (`isRowActivation`, `followRowLink`, `ROW_CONTROL_SELECTOR`, `ROW_LINK_SELECTOR`, `RowClick`): the clickable-row rule both libraries' `DataTable` use.
+
+### Patch Changes
+
+- Updated dependencies [[`bd58a6f`](https://github.com/softistx/nxgt-material/commit/bd58a6f67bdc25d4b4d0d7d88c52784869ad1529)]:
+  - @nxgt/material-core@0.4.0
+
 ## 2.6.2
 
 ### Patch Changes

package/README.md

@@ -403,7 +403,7 @@ React-only today: `Combobox` (not planned in Vue) and `StepperIndicator`.
 
 | Preview | Component | What it does | @nxgt/material-vue |
 | --- | --- | --- | --- |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/data-table-filter-lists-datatable.webp" width="120" alt="DataTable"> | [`DataTable`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/data-table-filter-and-lists.md#datatable), `DataTableColumnHeader`, `DataTablePagination`, `DataTableViewOptions` | TanStack Table v9 with sorting, filtering, selection, expandable rows, pagination or load-more, column visibility, skeleton rows while loading and your own empty state. | `DataTable`, `DataTableColumnHeader`, `DataTablePagination`, `DataTableViewOptions` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/data-table-filter-lists-datatable.webp" width="120" alt="DataTable"> | [`DataTable`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/data-table-filter-and-lists.md#datatable), `DataTableColumnHeader`, `DataTablePagination`, `DataTableServerFooter`, `DataTableViewOptions` | 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. | `DataTable`, `DataTableColumnHeader`, `DataTablePagination`, `DataTableServerFooter`, `DataTableViewOptions` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/data-table-filter-lists-filter.webp" width="120" alt="Filter"> | [`Filter`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/data-table-filter-and-lists.md#filter), `FilterProvider`, `FilterContent`, `FilterChips`, `FilterPresets` · `FilterFormField` | Schema-driven filters with chips, presets, validation, and URL or storage persistence. | `Filter`, `FilterProvider`, `FilterContent`, `FilterChips`, `FilterPresets`, `FilterFormField` |
 | — | [`FilterInline`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/data-table-filter-and-lists.md#filterinline-filterpopover-filterdialog-filtersheet-filterdrawer), `FilterPopover`, `FilterDialog`, `FilterSheet`, `FilterDrawer` | The filter panel shown inline, or in a popover, dialog, sheet or drawer. | `FilterInline`, `FilterPopover`, `FilterDialog`, `FilterSheet`, `FilterDrawer` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/previews/data-table-filter-lists-pagination.webp" width="120" alt="Pagination"> | [`Pagination`](https://cdn.jsdelivr.net/npm/@nxgt/material@2/docs/components/data-table-filter-and-lists.md#pagination), `PaginationContent`, `PaginationItem`, `PaginationFirst`, `PaginationLast`, `PaginationLink`, `PaginationBar`, `paginationItems`… | Pagination primitives, with first / last links. `PaginationBar` adds a sibling window with ellipses. | `Pagination` (parts), `PaginationFirst`, `PaginationLast`, `PaginationLink`, `PaginationBar`, `paginationItems` |

package/dist/{_Uint8Array-CDlDeQmw.js → _Uint8Array-JRUmWcRr.js}

@@ -1,4 +1,4 @@
-import { S as e, T as t, d as n, g as r, l as i, u as a, v as o, w as s, x as c } from "./translator-CaIYjyFP.js";
+import { S as e, T as t, d as n, g as r, l as i, u as a, v as o, w as s, x as c } from "./translator-CwpmpI24.js";
 //#region ../../node_modules/lodash-es/_isIndex.js
 var l = 9007199254740991, u = /^(?:0|[1-9]\d*)$/;
 function d(e, t) {

package/dist/{_overRest-CWIWQwDJ.js → _overRest-DvC5rm5s.js}

@@ -1,4 +1,4 @@
-import { m as e, p as t } from "./translator-CaIYjyFP.js";
+import { m as e, p as t } from "./translator-CwpmpI24.js";
 //#region ../../node_modules/lodash-es/identity.js
 function n(e) {
 	return e;

package/dist/{async-slice-Qoen0Mqm.js → async-slice-OftEOtMA.js}

@@ -1,5 +1,5 @@
-import { C as e, S as t, h as n, l as r, m as i, p as a, u as o, v as s, w as c, x as l } from "./translator-CaIYjyFP.js";
-import { a as u, c as d, d as f, i as p, n as m, r as h, t as g, u as _ } from "./_Uint8Array-CDlDeQmw.js";
+import { C as e, S as t, h as n, l as r, m as i, p as a, u as o, v as s, w as c, x as l } from "./translator-CwpmpI24.js";
+import { a as u, c as d, d as f, i as p, n as m, r as h, t as g, u as _ } from "./_Uint8Array-JRUmWcRr.js";
 import { L as v } from "./number.utils-BiBN2hWJ.js";
 import { Suspense as y, createContext as b, createElement as x, useContext as ee, useEffect as te, useMemo as S, useReducer as ne, useState as re, useSyncExternalStore as ie } from "react";
 import { asyncThunkCreator as ae, buildCreateSlice as oe } from "@reduxjs/toolkit";

package/dist/{blockDiagram-BEXU5L5S-_6EVgQ2-.js → blockDiagram-BEXU5L5S-BM-gkWAO.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./graphlib-CQ3hLS1N.js";
+import { t as e } from "./graphlib-DLJn7qS3.js";
 import { n as t, t as n } from "./src-C9kQSo6K.js";
 import { A as r, B as i, C as a, D as o, E as s, F as c, G as l, H as u, I as d, L as f, M as p, N as m, O as h, P as g, R as _, T as v, U as ee, V as y, W as b, b as x, j as S, k as C, l as w, v as T, w as E, z as D } from "./chunk-ZIGJFQKS-C3xUAXJq.js";
 import { n as O } from "./chunk-Y2CYZVJY-BAad7w_K.js";
@@ -12,7 +12,7 @@ import "./chunk-7PRAP22T-_Av9vcXz.js";
 import { i as se, n as ce, o as le, r as ue, s as de } from "./chunk-J5ZVWO5B-DmRRmhon.js";
 import "./chunk-7INBJB4K-BY5n77ka.js";
 import { i as fe, r as pe } from "./chunk-5DYCD2WN-Cja1INgd.js";
-import { a as me, c as he, i as ge, l as _e } from "./chunk-Z7XXMR3K-CoCjTVVx.js";
+import { a as me, c as he, i as ge, l as _e } from "./chunk-Z7XXMR3K-DMTBxZxM.js";
 //#region ../../node_modules/es-toolkit/dist/compat/predicate/isArray.mjs
 function ve(e) {
 	return Array.isArray(e);

package/dist/{chunk-3FUC2YCW-CRQHl-Jx.js → chunk-3FUC2YCW-Cf18L00V.js}

@@ -1,11 +1,11 @@
-import { t as e } from "./graphlib-CQ3hLS1N.js";
+import { t as e } from "./graphlib-DLJn7qS3.js";
 import { n as t } from "./src-C9kQSo6K.js";
 import { g as n } from "./chunk-ZIGJFQKS-C3xUAXJq.js";
 import { n as r } from "./chunk-Y2CYZVJY-BAad7w_K.js";
 import { b as i, x as a } from "./chunk-O7XYJQB3-A66QSOPA.js";
 import { o } from "./chunk-7INBJB4K-BY5n77ka.js";
 import { i as s, n as c, r as l, t as u } from "./chunk-5DYCD2WN-Cja1INgd.js";
-import { a as d, c as f, i as p, n as m, r as h, t as g, u as _ } from "./chunk-Z7XXMR3K-CoCjTVVx.js";
+import { a as d, c as f, i as p, n as m, r as h, t as g, u as _ } from "./chunk-Z7XXMR3K-DMTBxZxM.js";
 import { r as v, t as y } from "./chunk-UA2S7LBM-BNeHeMx9.js";
 //#region ../../node_modules/mermaid/dist/chunks/mermaid.core/chunk-3FUC2YCW.mjs
 function b(e, { edgePathsClass: t = "edges edgePaths" } = {}) {

package/dist/{chunk-7M6MHVWA-DqXpf6CM.js → chunk-7M6MHVWA-C3x6E3yT.js}

@@ -9,7 +9,7 @@ import { a as b } from "./chunk-7INBJB4K-BY5n77ka.js";
 import { t as x } from "./chunk-GWA4HPMP-Co-A6dtV.js";
 import { t as S } from "./chunk-XXDRQBXY-FgXU14Bh.js";
 import { t as C } from "./chunk-WEXAMYUT-CucJfehv.js";
-import { r as w, t as T } from "./chunk-GNY47TPC-BgMsLbCS.js";
+import { r as w, t as T } from "./chunk-GNY47TPC-D1E6DHDV.js";
 import { n as E, t as D } from "./chunk-LNGE3PJU-DJjGTS7O.js";
 //#region ../../node_modules/mermaid/dist/chunks/mermaid.core/chunk-7M6MHVWA.mjs
 var ie = "flowchart-", ae = class {

package/dist/{chunk-GNY47TPC-BgMsLbCS.js → chunk-GNY47TPC-D1E6DHDV.js}

@@ -5,7 +5,7 @@ import { b as r, s as i } from "./chunk-O7XYJQB3-A66QSOPA.js";
 import { t as a } from "./chunk-DUW6YSOI-9R-v-IIp.js";
 import { o } from "./chunk-7INBJB4K-BY5n77ka.js";
 import { r as s } from "./chunk-5DYCD2WN-Cja1INgd.js";
-import { a as c, c as l, i as u, l as d } from "./chunk-Z7XXMR3K-CoCjTVVx.js";
+import { a as c, c as l, i as u, l as d } from "./chunk-Z7XXMR3K-DMTBxZxM.js";
 import { r as f } from "./chunk-UA2S7LBM-BNeHeMx9.js";
 //#region ../../node_modules/mermaid/dist/chunks/mermaid.core/chunk-GNY47TPC.mjs
 var p = {
@@ -30,7 +30,7 @@ var p = {
 ], h = /* @__PURE__ */ Object.create(null), g = /* @__PURE__ */ n((e) => {
 	for (let t of e) h[t.name] = t;
 }, "registerLayoutLoaders"), _ = /* @__PURE__ */ n(() => {
-	let e = /* @__PURE__ */ n(async () => await import("./elk-276RUBZZ-DFn4kTey.js"), "loader");
+	let e = /* @__PURE__ */ n(async () => await import("./elk-276RUBZZ-DI4eicFj.js"), "loader");
 	return [{
 		name: "elk",
 		loader: e,
@@ -45,11 +45,11 @@ var p = {
 	g([
 		{
 			name: "dagre",
-			loader: /* @__PURE__ */ n(async () => await import("./dagre-6A5THRUB-DXq_YBNL.js"), "loader")
+			loader: /* @__PURE__ */ n(async () => await import("./dagre-6A5THRUB-DZF0nICj.js"), "loader")
 		},
 		{
 			name: "swimlane",
-			loader: /* @__PURE__ */ n(async () => await import("./swimlanes-2SLR337P-tW3_wBWO.js"), "loader")
+			loader: /* @__PURE__ */ n(async () => await import("./swimlanes-2SLR337P-BtZ7Di5u.js"), "loader")
 		},
 		{
 			name: "cose-bilkent",

package/dist/{chunk-NETBCI7D-CsyH43bj.js → chunk-NETBCI7D-DJUuN4EY.js}

@@ -1,5 +1,5 @@
 import { n as e } from "./chunk-Y2CYZVJY-BAad7w_K.js";
-import { o as t } from "./chunk-Z7XXMR3K-CoCjTVVx.js";
+import { o as t } from "./chunk-Z7XXMR3K-DMTBxZxM.js";
 //#region ../../node_modules/mermaid/dist/chunks/mermaid.core/chunk-NETBCI7D.mjs
 var n = 5, r = 1e-5, i = 2, a = .6, o = 1e-6;
 function s(e) {

package/dist/{chunk-Z7XXMR3K-CoCjTVVx.js → chunk-Z7XXMR3K-DMTBxZxM.js}

@@ -1,4 +1,4 @@
-import { st as e } from "./components-C3wIUrWw.js";
+import { st as e } from "./components-DrStgM4J.js";
 import { n as t, t as n } from "./src-C9kQSo6K.js";
 import { _ as r, a as i, i as a, n as o, o as s, p as c, r as l, t as u, u as d, v as f } from "./step-Dt43c9X4.js";
 import { K as p, g as m, q as h, u as g } from "./chunk-ZIGJFQKS-C3xUAXJq.js";

package/dist/{classDiagram-v2-NBCMYWYE-j4vk04t-.js → classDiagram-v2-NBCMYWYE-BDaxYvDy.js}

@@ -9,12 +9,12 @@ import "./chunk-7PRAP22T-_Av9vcXz.js";
 import { i as v, n as y, o as b, r as x } from "./chunk-J5ZVWO5B-DmRRmhon.js";
 import "./chunk-7INBJB4K-BY5n77ka.js";
 import "./chunk-5DYCD2WN-Cja1INgd.js";
-import "./chunk-Z7XXMR3K-CoCjTVVx.js";
+import "./chunk-Z7XXMR3K-DMTBxZxM.js";
 import { t as S } from "./chunk-GWA4HPMP-Co-A6dtV.js";
 import { t as C } from "./chunk-XXDRQBXY-FgXU14Bh.js";
 import { t as w } from "./chunk-WEXAMYUT-CucJfehv.js";
 import "./chunk-UA2S7LBM-BNeHeMx9.js";
-import { r as T, t as E } from "./chunk-GNY47TPC-BgMsLbCS.js";
+import { r as T, t as E } from "./chunk-GNY47TPC-D1E6DHDV.js";
 //#region ../../node_modules/mermaid/dist/chunks/mermaid.core/classDiagram-v2-NBCMYWYE.mjs
 var D = (function() {
 	var e = /* @__PURE__ */ i(function(e, t, n, r) {