@nxgt/material-vue 0.25.2 → 0.26.1

package/dist/{pdf-outline-sidebar-jJfhNjnN.js → pdf-outline-sidebar-D3vq2qfS.js}

@@ -1,7 +1,7 @@
 import { n as e } from "./rolldown-runtime-CWhphoD1.js";
 import { t } from "./utils-CykWQ0iJ.js";
-import { Ef as n } from "./components-DRBKkOqk.js";
-import { t as r } from "./use-material-translation-B6sIk0mF.js";
+import { Ef as n } from "./components-CCWod7cJ.js";
+import { t as r } from "./use-material-translation-CONqD9wJ.js";
 import { Fragment as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, defineComponent as u, normalizeClass as d, normalizeStyle as f, openBlock as p, ref as m, renderList as h, toDisplayString as g, unref as _, withCtx as v } from "vue";
 //#region lib/components/ui/media/pdf-viewer/partials/pdf-outline-row.vue?vue&type=script&setup=true&lang.ts
 var y = {

package/dist/{pdf-page-BW1hXzPu.js → pdf-page-BrJbyjQj.js}

@@ -1,5 +1,5 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { Op as t } from "./components-DRBKkOqk.js";
+import { Op as t } from "./components-CCWod7cJ.js";
 import { computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, defineComponent as s, nextTick as c, normalizeClass as l, normalizeStyle as u, onBeforeUnmount as d, openBlock as f, ref as p, shallowRef as m, unref as h, watch as g } from "vue";
 import { DEFAULT_PAGE_SIZE as _, escapeHtml as v, findTextMatches as y, highlightItemHtml as b, placeholderSize as x, rotatedSize as S } from "@nxgt/material-core/pdf-viewer";
 //#region lib/components/ui/media/pdf-viewer/pdf-note-icons.ts

package/dist/{pdf-page-list-D277RtWS.js → pdf-page-list-BCgYEszV.js}

@@ -1,6 +1,6 @@
 import { n as e } from "./rolldown-runtime-CWhphoD1.js";
-import { Ef as t } from "./components-DRBKkOqk.js";
-import { t as n } from "./pdf-page-BW1hXzPu.js";
+import { Ef as t } from "./components-CCWod7cJ.js";
+import { t as n } from "./pdf-page-BrJbyjQj.js";
 import { Fragment as r, createBlock as i, createElementBlock as a, createElementVNode as o, defineComponent as s, openBlock as c, renderList as l, withCtx as u } from "vue";
 //#region lib/components/ui/media/pdf-viewer/partials/pdf-page-list.vue?vue&type=script&setup=true&lang.ts
 var d = { class: "flex flex-col items-center gap-4 px-4 py-4" }, f = /*@__PURE__*/ s({

package/dist/{pdf-reader-BReUTsn_.js → pdf-reader-BAzevSJU.js}

@@ -1,12 +1,12 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { On as t } from "./components-DRBKkOqk.js";
-import { t as n } from "./use-material-translation-B6sIk0mF.js";
-import { t as r } from "./Button-C1aaI0Gw.js";
-import { o as i } from "./HoverCardTrigger-JtHn0IFQ.js";
-import { n as a } from "./pdf-page-BW1hXzPu.js";
-import { t as o } from "./pdf-page-list-D277RtWS.js";
-import { t as s } from "./pdf-sidebar-Bk6PowY1.js";
-import { t as c } from "./pdf-toolbar-CHjaMhH9.js";
+import { On as t } from "./components-CCWod7cJ.js";
+import { t as n } from "./use-material-translation-CONqD9wJ.js";
+import { t as r } from "./Button-16J7vTpE.js";
+import { o as i } from "./HoverCardTrigger-C41002JS.js";
+import { n as a } from "./pdf-page-BrJbyjQj.js";
+import { t as o } from "./pdf-page-list-BCgYEszV.js";
+import { t as s } from "./pdf-sidebar-DSh2Mend.js";
+import { t as c } from "./pdf-toolbar-BcL7HlfS.js";
 import { computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createTextVNode as m, createVNode as h, defineComponent as g, nextTick as _, normalizeClass as v, onBeforeUnmount as y, onMounted as b, openBlock as x, reactive as S, ref as C, shallowRef as w, toDisplayString as T, toRef as E, unref as D, useId as O, watch as k, withCtx as A } from "vue";
 import { AlertCircle as j, FileX2 as M, KeyRound as N, Loader2 as P } from "@lucide/vue";
 import { pdfSourceKey as F, toPdfjsParams as I } from "@nxgt/material-core/pdf-source";

package/dist/{pdf-sidebar-Bk6PowY1.js → pdf-sidebar-DSh2Mend.js}

@@ -1,8 +1,8 @@
 import { n as e } from "./rolldown-runtime-CWhphoD1.js";
 import { t } from "./utils-CykWQ0iJ.js";
-import { t as n } from "./use-material-translation-B6sIk0mF.js";
-import { t as r } from "./pdf-outline-sidebar-jJfhNjnN.js";
-import { t as i } from "./pdf-thumbnail-sidebar-BcNDFsks.js";
+import { t as n } from "./use-material-translation-CONqD9wJ.js";
+import { t as r } from "./pdf-outline-sidebar-D3vq2qfS.js";
+import { t as i } from "./pdf-thumbnail-sidebar-D_EMcbKF.js";
 import { createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, normalizeClass as l, openBlock as u, toDisplayString as d, unref as f, useId as p, useTemplateRef as m } from "vue";
 //#region lib/components/ui/media/pdf-viewer/partials/pdf-sidebar.vue?vue&type=script&setup=true&lang.ts
 var h = ["aria-label"], g = ["aria-label"], _ = [

package/dist/{pdf-thumbnail-sidebar-BcNDFsks.js → pdf-thumbnail-sidebar-D_EMcbKF.js}

@@ -1,8 +1,8 @@
 import { n as e } from "./rolldown-runtime-CWhphoD1.js";
 import { t } from "./utils-CykWQ0iJ.js";
-import { Ef as n } from "./components-DRBKkOqk.js";
-import { t as r } from "./use-material-translation-B6sIk0mF.js";
-import { t as i } from "./pdf-page-BW1hXzPu.js";
+import { Ef as n } from "./components-CCWod7cJ.js";
+import { t as r } from "./use-material-translation-CONqD9wJ.js";
+import { t as i } from "./pdf-page-BrJbyjQj.js";
 import { Fragment as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, normalizeClass as d, openBlock as f, renderList as p, toDisplayString as m, unref as h, withCtx as g } from "vue";
 //#region lib/components/ui/media/pdf-viewer/partials/pdf-thumbnail-sidebar.vue?vue&type=script&setup=true&lang.ts
 var _ = ["aria-label"], v = {

package/dist/{pdf-toolbar-CHjaMhH9.js → pdf-toolbar-BcL7HlfS.js}

@@ -1,10 +1,10 @@
 import { n as e } from "./rolldown-runtime-CWhphoD1.js";
 import { t } from "./utils-CykWQ0iJ.js";
-import { t as n } from "./use-material-translation-B6sIk0mF.js";
-import { s as r } from "./Button-C1aaI0Gw.js";
-import { t as i } from "./icon-button-B2FQtIHS.js";
+import { t as n } from "./use-material-translation-CONqD9wJ.js";
+import { s as r } from "./Button-16J7vTpE.js";
+import { t as i } from "./icon-button-CDdNsZuZ.js";
 import { a, i as o, n as s, o as c, r as l, t as u } from "./DropdownMenuTrigger-BHAhXGUO.js";
-import { o as d } from "./HoverCardTrigger-JtHn0IFQ.js";
+import { o as d } from "./HoverCardTrigger-C41002JS.js";
 import { Fragment as f, computed as p, createBlock as m, createCommentVNode as h, createElementBlock as g, createElementVNode as _, createTextVNode as v, createVNode as y, defineComponent as b, nextTick as x, normalizeClass as S, openBlock as C, ref as w, renderList as T, toDisplayString as E, unref as D, useTemplateRef as O, watch as k, withCtx as A } from "vue";
 import { ChevronDown as j, ChevronLeft as M, ChevronRight as N, ChevronUp as P, Download as F, Maximize2 as I, Minimize2 as L, Moon as R, Printer as z, RotateCw as B, Search as V, Sidebar as H, ZoomIn as U, ZoomOut as W } from "@lucide/vue";
 //#region lib/components/ui/media/pdf-viewer/partials/pdf-toolbar-search.vue?vue&type=script&setup=true&lang.ts

package/dist/pdf.js

@@ -1,5 +1,5 @@
-import { n as e, t } from "./use-material-translation-B6sIk0mF.js";
-import { t as n } from "./Button-C1aaI0Gw.js";
+import { n as e, t } from "./use-material-translation-CONqD9wJ.js";
+import { t as n } from "./Button-16J7vTpE.js";
 import { computed as r, createBlock as i, createTextVNode as a, defineComponent as o, getCurrentInstance as s, nextTick as c, onMounted as l, onScopeDispose as u, openBlock as d, ref as f, renderSlot as p, shallowRef as m, toDisplayString as ee, toValue as h, unref as g, watch as te, withCtx as ne } from "vue";
 import { contentDisposition as re, pdfBytesResponse as ie, toWebStream as ae } from "@nxgt/material-core/pdf/http";
 import { badge as oe, dataTable as se, defaultPdfTheme as ce, definePdfDocument as _, divider as v, header as y, heading as b, image as x, keyValue as S, keyValueOf as C, link as w, metric as T, page as E, pageBreak as D, pageNumber as O, pdfDocument as k, resolvePdfColor as A, resolvePdfTheme as j, row as M, section as N, spacer as P, stack as F, table as I, text as L, totals as R } from "@nxgt/material-core/pdf/model";

package/dist/{sortable-provider-C83VBfGl.js → sortable-provider-DMpmM7Ke.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { t } from "./use-material-translation-B6sIk0mF.js";
-import { t as n } from "./icon-button-B2FQtIHS.js";
+import { t } from "./use-material-translation-CONqD9wJ.js";
+import { t as n } from "./icon-button-CDdNsZuZ.js";
 import { Teleport as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createVNode as c, defineComponent as l, inject as u, mergeProps as d, normalizeStyle as f, onUnmounted as p, openBlock as m, provide as h, reactive as g, ref as _, renderSlot as v, toValue as y, unref as b, useAttrs as x, watch as S, watchEffect as C, withCtx as w, withModifiers as T } from "vue";
 import { GripVertical as E } from "@lucide/vue";
 import { Primitive as D } from "reka-ui";

package/dist/{stored-language-CC_vdcCN.js → stored-language-Bxhsx4iB.js}

@@ -341,7 +341,12 @@ var e = {
 				"go-to-last-page": "Go to last page",
 				"rows-per-page": "Rows per page",
 				"rows-selected": "{count} of {total} {count, plural, =0 {row selected} one {row selected} other {rows selected} }",
-				"page-of": "Page {page} of {total}"
+				"page-of": "Page {page} of {total}",
+				label: "Pagination",
+				range: "{from}–{to} of {total}",
+				"range-open": "{from}–{to}",
+				total: "{total, plural, one {# row} other {# rows}}",
+				selected: "{count, plural, one {# row selected} other {# rows selected}}"
 			},
 			"delete-confirm": {
 				title: "Delete {count} item(s)?",
@@ -1512,7 +1517,12 @@ var e = {
 				"go-to-last-page": "Aller à la dernière page",
 				"rows-per-page": "Lignes par page",
 				"rows-selected": "{count} sur {total} {count, plural, =0 {ligne sélectionnée} one {ligne sélectionnée} other {lignes sélectionnées} }",
-				"page-of": "Page {page} sur {total}"
+				"page-of": "Page {page} sur {total}",
+				label: "Pagination",
+				range: "{from}–{to} sur {total}",
+				"range-open": "{from}–{to}",
+				total: "{total, plural, one {# ligne} other {# lignes}}",
+				selected: "{count, plural, one {# ligne sélectionnée} other {# lignes sélectionnées}}"
 			},
 			"delete-confirm": {
 				title: "Supprimer {count} élément(s) ?",

package/dist/{stx-player-BMQ1D2Li.js → stx-player-MldK_ZAZ.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./utils-CykWQ0iJ.js";
-import { $t as t, Jt as n, Qt as r, Yt as i, Zt as a, en as o, jp as s, qt as c } from "./components-DRBKkOqk.js";
-import { t as l } from "./use-material-translation-B6sIk0mF.js";
+import { $t as t, Jt as n, Mp as r, Qt as i, Yt as a, Zt as o, en as s, qt as c } from "./components-CCWod7cJ.js";
+import { t as l } from "./use-material-translation-CONqD9wJ.js";
 import { createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createTextVNode as m, createVNode as h, defineComponent as g, normalizeClass as _, openBlock as v, toDisplayString as y, unref as b, withCtx as x } from "vue";
 //#region lib/components/ui/media/stx-player/partials/stx-player-frame.vue?vue&type=script&setup=true&lang.ts
 var S = ["data-layout", "aria-label"], C = {
@@ -19,26 +19,26 @@ var S = ["data-layout", "aria-label"], C = {
 			Array
 		] }
 	},
-	setup(i) {
-		let { containerRef: g, state: w } = o();
+	setup(a) {
+		let { containerRef: g, state: w } = s();
 		function T(e) {
 			g.value = e instanceof HTMLElement ? e : null;
 		}
 		let { t: E } = l();
-		return (o, l) => (v(), f("section", {
+		return (s, l) => (v(), f("section", {
 			ref: T,
 			"data-slot": "stx-player",
-			"data-layout": i.layout,
+			"data-layout": a.layout,
 			"aria-label": b(w).current?.title ?? b(E)("material.stx-player.label", "Media player"),
-			class: _(b(e)("@container rounded outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50", o.$props.class))
-		}, [i.layout === "mini" ? (v(), u(a, { key: 0 })) : (v(), f("div", {
+			class: _(b(e)("@container rounded outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50", s.$props.class))
+		}, [a.layout === "mini" ? (v(), u(o, { key: 0 })) : (v(), f("div", {
 			key: 1,
-			class: _(b(e)("grid gap-3", i.showQueue && "@min-[768px]:grid-cols-[minmax(0,1fr)_18rem] @min-[768px]:items-stretch"))
+			class: _(b(e)("grid gap-3", a.showQueue && "@min-[768px]:grid-cols-[minmax(0,1fr)_18rem] @min-[768px]:items-stretch"))
 		}, [p("div", { class: _(b(e)("bg-card overflow-hidden rounded border", b(w).current?.kind === "audio" && "flex flex-col gap-4 p-6")) }, [
-			b(w).current?.kind === "audio" ? (v(), f("div", C, [h(s, { variant: "title-medium" }, {
+			b(w).current?.kind === "audio" ? (v(), f("div", C, [h(r, { variant: "title-medium" }, {
 				default: x(() => [m(y(b(w).current.title), 1)]),
 				_: 1
-			}), b(w).current.artist ? (v(), u(s, {
+			}), b(w).current.artist ? (v(), u(r, {
 				key: 0,
 				class: "text-muted-foreground"
 			}, {
@@ -50,7 +50,7 @@ var S = ["data-layout", "aria-label"], C = {
 					key: 0,
 					tone: "overlay"
 				}, {
-					trailing: x(() => [h(r, { tone: "overlay" })]),
+					trailing: x(() => [h(i, { tone: "overlay" })]),
 					_: 1
 				}))]),
 				_: 1
@@ -59,10 +59,10 @@ var S = ["data-layout", "aria-label"], C = {
 				key: 1,
 				tone: "surface"
 			}, {
-				trailing: x(() => [h(r, { tone: "surface" })]),
+				trailing: x(() => [h(i, { tone: "surface" })]),
 				_: 1
 			})) : d("", !0)
-		], 2), i.showQueue ? (v(), u(n, {
+		], 2), a.showQueue ? (v(), u(n, {
 			key: 0,
 			class: "min-h-72"
 		})) : d("", !0)], 2))], 10, S));
@@ -99,16 +99,16 @@ var S = ["data-layout", "aria-label"], C = {
 	emits: ["trackChange"],
 	setup(e, { emit: t }) {
 		let n = e, r = t;
-		function a(e, t) {
+		function i(e, t) {
 			n.onTrackChange?.(e, t), r("trackChange", e, t);
 		}
-		return (t, r) => (v(), u(i, {
+		return (t, r) => (v(), u(a, {
 			tracks: e.tracks,
 			"current-index": e.currentIndex,
 			"default-index": e.defaultIndex,
 			"auto-play": e.autoPlay,
 			loop: e.loop,
-			"on-track-change": a
+			"on-track-change": i
 		}, {
 			default: x(() => [h(w, {
 				layout: e.layout,

package/dist/{translator-B-X_1taI.js → translator-CLI_7Crg.js}

@@ -1,4 +1,4 @@
-import { a as e, i as t, r as n, t as r } from "./stored-language-CC_vdcCN.js";
+import { a as e, i as t, r as n, t as r } from "./stored-language-Bxhsx4iB.js";
 import { t as i } from "./get-CTzJAwfc.js";
 //#region ../../node_modules/@formatjs/fast-memoize/index.js
 function a(e, t) {

package/dist/{use-heading-spy-C_ySuvTl.js → use-heading-spy-VPuFj2Gt.js}

@@ -1,4 +1,4 @@
-import { a as e } from "./i18n-provider-D0oYv0XS.js";
+import { a as e } from "./i18n-provider-CaaZCmaR.js";
 import { c as t, d as n, f as r, l as i, n as a, u as o } from "./number.utils-Cy1z6qI7.js";
 import { computed as s, getCurrentInstance as c, onMounted as l, ref as u, toValue as d } from "vue";
 import { useIntersectionObserver as f, useMediaQuery as p, useSSRWidth as m, useStorage as h } from "@vueuse/core";

package/dist/{use-material-translation-B6sIk0mF.js → use-material-translation-CONqD9wJ.js}

@@ -1,6 +1,6 @@
-import "./stored-language-CC_vdcCN.js";
-import { a as e } from "./i18n-provider-D0oYv0XS.js";
-import { i as t, r as n } from "./translator-B-X_1taI.js";
+import "./stored-language-Bxhsx4iB.js";
+import { a as e } from "./i18n-provider-CaaZCmaR.js";
+import { i as t, r as n } from "./translator-CLI_7Crg.js";
 //#region lib/i18n/translate-material.ts
 function r(e, r, i, a) {
 	if (e) for (let t of /* @__PURE__ */ new Set([e, e.split("-")[0]])) {

package/docs/components/data-table-filter-and-lists.md

@@ -12,7 +12,7 @@ each other, so either can be used alone.
 
 | | Component | What it does |
 | --- | --- | --- |
-| <img src="../previews/data-table-filter-lists-datatable.webp" width="96" alt=""> | [DataTable](#datatable) | TanStack Table v9 with sorting, selection, expansion and pagination |
+| <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 |
 | <img src="../previews/data-table-filter-lists-filter.webp" width="96" alt=""> | [Filter](#filter) | Schema-driven filters with chips, presets and persistence |
 | <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 |
 | <img src="../previews/data-table-filter-lists-pagination.webp" width="96" alt=""> | [Pagination](#pagination) | Pagination primitives |
@@ -23,7 +23,7 @@ each other, so either can be used alone.
 
 ![DataTable](../previews/data-table-filter-lists-datatable.webp)
 
-TanStack Table v9 with sorting, filtering, selection, expandable rows, pagination or load-more, column visibility, skeleton rows while loading and your own empty state.
+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.
 
 ```vue
 <script setup lang="ts">
@@ -58,8 +58,9 @@ const columns = columnHelper.columns([
 ```
 
 Parts: `DataTable`; `DataTableColumnHeader` (a sortable header with a hide
-action); `DataTablePagination` and `DataTableViewOptions` (used by the table,
-exported for a table of your own; `DataTablePagination` takes `disabled`);
+action); `DataTablePagination`, `DataTableServerFooter` and
+`DataTableViewOptions` (used by the table, exported for a table or a footer
+of your own; both footers take `disabled`);
 `useColumnHelpers<T>()` returns a
 `columnHelper` bound to the table's features and `predefinedColumns()` —
 `select` (checkboxes) and `expand` (a toggle for the expanded row, named
@@ -82,6 +83,15 @@ table enables, for typing your own column defs.
 | `loading` | `boolean` | `false` | skeleton rows, or the current rows dimmed; `aria-busy`; controls disabled |
 | `loadingRows` | `number` | the page size | how many skeleton rows |
 | `#empty="{ filtered }"` | slot | icon and "No data available" | content of the empty row, spanning every visible column |
+| `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)) |
+| `v-model:sorting` | `SortingState` | held inside | controlled sorting; `update:sorting` gets the new state |
+| `getRowId` | `(row, index) => string` | the index | the row's id, the key of the row selection |
+| `v-model:row-selection` | `RowSelectionState` | held inside | controlled selection, by id; may hold rows of other pages |
+| `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) |
+| `#footer="{ table }"` / `footer` | slot / `false \| (table) => VNode` | the pagination | replaces the footer; `false` removes it |
+| `getRowHref` | `(row) => string \| undefined` | — | the first data cell links to the row's page; a click elsewhere on the row follows it |
+| `@row-click` / `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 |
+| `linkComponent` | `Component` (given `href`) | `<a>` | the link for `getRowHref` and the page links: wrap your router's |
 
 ### Loading and empty states
 
@@ -132,10 +142,168 @@ default, or the `#empty` slot, told whether rows exist but none matches the
 filters (`filtered`); content that renders nothing gets the default.
 `DataTableEmptyState` types the slot props.
 
+### Server-side data
+
+When the server filters, sorts and pages, hand the table **one page** and
+turn on `manual`: the rows are rendered as given — no client slicing,
+sorting or filtering — and the footer becomes the server footer. Keep the
+query (sorting, cursors, filters) in the URL, so the page renders on the
+server, survives a reload and works with no JavaScript.
+
+```vue
+<!-- pages/students.vue (vue-router; Nuxt's useFetch works the same way) -->
+<script setup lang="ts">
+import type { RowSelectionState, SortingState } from '@tanstack/vue-table';
+import { computed, defineComponent, h, ref, watch } from 'vue';
+import { RouterLink as Link, useRoute, useRouter } from 'vue-router';
+import {
+  Button,
+  DataTable,
+  DataTableColumnHeader,
+  useColumnHelpers,
+} from '@nxgt/material-vue/components';
+
+type Student = { id: string; name: string; email: string };
+type Page = { nodes: Student[]; endCursor: string; hasNextPage: boolean; totalCount: number };
+const PAGE_SIZE = 20;
+
+// RouterLink takes `to`; the table hands its links an `href`.
+const RouterLink = defineComponent({
+  props: { href: { type: String, required: true } },
+  setup: (props, { slots }) => () => h(Link, { to: props.href }, slots),
+});
+
+const route = useRoute();
+const router = useRouter();
+// The cursors of the pages before this one: Previous drops the last.
+const trail = computed(() => [route.query.after ?? []].flat() as string[]);
+const sorting = computed<SortingState>(() => {
+  const [id = 'name', dir = 'asc'] = String(route.query.sort ?? '').split('.');
+  return [{ id, desc: dir === 'desc' }];
+});
+const page = ref<Page>({ nodes: [], endCursor: '', hasNextPage: false, totalCount: 0 });
+const loading = ref(true);
+watch(
+  () => route.fullPath,
+  async () => {
+    loading.value = true;
+    const [sort] = sorting.value;
+    page.value = await api.students({
+      first: PAGE_SIZE,
+      after: trail.value.at(-1),
+      sort: sort.id,
+      dir: sort.desc ? 'desc' : 'asc',
+    });
+    loading.value = false;
+  },
+  { immediate: true },
+);
+
+const rowSelection = ref<RowSelectionState>({});
+const selected = computed(() =>
+  Object.keys(rowSelection.value).filter((id) => rowSelection.value[id]),
+);
+
+const { columnHelper, predefinedColumns } = useColumnHelpers<Student>();
+const columns = columnHelper.columns([
+  predefinedColumns().select,
+  columnHelper.accessor('name', {
+    header: ({ column }) => h(DataTableColumnHeader, { column, title: 'Name' }),
+  }),
+  columnHelper.accessor('email', { header: 'Email' }),
+]);
+
+const pageHref = (cursors: string[]) =>
+  router.resolve({ query: { ...route.query, after: cursors } }).href;
+const pagination = computed(() => ({
+  totalCount: page.value.totalCount,
+  offset: trail.value.length * PAGE_SIZE,
+  previous: trail.value.length ? pageHref(trail.value.slice(0, -1)) : null,
+  next: page.value.hasNextPage ? pageHref([...trail.value, page.value.endCursor]) : null,
+}));
+function sortBy([sort]: SortingState) {
+  // A new order starts at the first page.
+  router.push({
+    query: { ...route.query, sort: `${sort?.id ?? 'name'}.${sort?.desc ? 'desc' : 'asc'}`, after: [] },
+  });
+}
+async function archive() {
+  await api.archiveStudents(selected.value);
+  rowSelection.value = {};
+}
+</script>
+
+<template>
+  <DataTable
+    manual
+    :data="page.nodes"
+    :columns="columns"
+    :loading="loading"
+    :sorting="sorting"
+    @update:sorting="sortBy"
+    :get-row-id="(student) => student.id"
+    v-model:row-selection="rowSelection"
+    :get-row-href="(student) => `/students/${student.id}`"
+    :link-component="RouterLink"
+    :pagination="pagination"
+  >
+    <template #actions>
+      <Button :disabled="!selected.length" @click="archive">
+        Archive {{ selected.length }} selected
+      </Button>
+    </template>
+  </DataTable>
+</template>
+```
+
+- **Paging.** `pagination.previous` and `next` are each an href, rendered as
+  a link (`rel="prev"` / `rel="next"`, through `linkComponent`), or a
+  callback, rendered as a button; absent or `null`, the button is disabled,
+  and so are both while `loading`. `totalCount` and `offset` (the 0-based
+  index of the page's first row) make the range: "41–60 of 133"
+  (`material.table.pagination.range`), "41–60" without a total, "133 rows"
+  without an offset. Cursor paging knows the offset from the trail's length
+  times the page size; leave it out if pages can be short.
+- **Sorting** is `v-model:sorting`: the headers show it, and
+  `update:sorting` hands you the new `SortingState` to put in the URL.
+  Filters work the same way: render them in `#actions` and keep their values
+  in the URL; `manual` turns client filtering off.
+- **Selection** is `v-model:row-selection`, keyed by `getRowId`, so it
+  survives a page change: ids of other pages stay in it, and the footer
+  counts them all ("3 rows selected", `material.table.pagination.selected`).
+  `#actions="{ table }"` reads it too (`table.store.state.rowSelection`). To
+  keep it across a reload, put it in the URL or `sessionStorage`. Unbound,
+  both models are held inside, as before. Bind both halves (`v-model`, or
+  the prop with its `update:` listener): Vue keeps a local copy of a model
+  whose listener is missing, so `:sorting` alone is not read-only, unlike
+  React's `sorting` without `onSortingChange`.
+- **Row links.** With `getRowHref`, the first data column's cell is a real
+  link to the row's page — a tab stop, opened by Enter, in a new tab by
+  Ctrl/Cmd+click, followed with no JavaScript. A click anywhere else on the
+  row follows the same link, except on a control (a checkbox, a button, a
+  link, a menu, a field, or anything marked `data-row-click-ignore`) and at
+  the end of a text selection. The link wraps what the first data column
+  renders, so that column must render plain content, not a link or a
+  button of its own. `@row-click="(row, event) => …"` is for what is not a
+  navigation (opening a sheet). Alone, it makes the row focusable and Enter
+  calls it; with `getRowHref`, the link stays the keyboard target, and
+  calling `event.preventDefault()` in it stops a mouse click from following
+  the link. A focusable row has no role of its own: for anything a screen
+  reader user must reach, prefer `getRowHref` or a button in a cell.
+- **Your own footer.** The `#footer="{ table }"` slot or the `footer` prop
+  (`(table) => VNode`) replaces the footer — `DataTableServerFooter` is the
+  default one, to wrap or reuse — and `:footer="false"` removes it.
+- **Loading and empty** behave as above: keep `loading` on while the next
+  page is fetched, and the current rows stay in place, dimmed.
+
+The server footer's strings are `material.table.pagination.*`
+(`previous`, `next`, `label`, `range`, `range-open`, `total`, `selected`),
+in English and French.
+
 For the TanStack API itself (column helpers, features, row models), see
 [TanStack Table v9](https://tanstack.com/table/latest).
 
-**Storybook:** `Data table, filter & lists/DataTable` · **React:** `DataTable`, `DataTableColumnHeader`, `DataTablePagination`, `DataTableViewOptions`
+**Storybook:** `Data table, filter & lists/DataTable`, `…/DataTable/Server-side data` · **React:** `DataTable`, `DataTableColumnHeader`, `DataTablePagination`, `DataTableServerFooter`, `DataTableViewOptions`
 
 ---
 

package/docs/roadmap.md

@@ -92,6 +92,12 @@ Nothing in progress right now; see Next.
 
 ## Shipped
 
+- **DataTable server-side data** — hand the table one page from your loader
+  (`manual`): no client paging or sorting, `v-model:sorting` and
+  `v-model:row-selection` by row id (`getRowId`), a footer with "41–60 of 133"
+  and Previous / Next as links that work with no JavaScript (`pagination`,
+  `DataTableServerFooter`, `#footer`), and rows that link to their page
+  (`getRowHref`, `@row-click`, `linkComponent`). 0.26.0.
 - **TreeSelectField** — pick one or several items from a tree inside a form
   field, as chips when several, with an optional filter that keeps each match
   under its ancestors (`TreeSelectField`, `TreeSelectFormField`). 0.25.0.

package/docs/troubleshooting.md

@@ -118,6 +118,10 @@ words in your error.
 - [A `RichTextEditor` became editable after upgrading](#a-richtexteditor-became-editable-after-upgrading)
 - [Focus falls to `<body>` when a controlled `Drawer` closes](#focus-falls-to-body-when-a-controlled-drawer-closes)
 - [A `TimePicker` test expects AM / PM to add 12 hours, or a click on the pressed half to switch to PM](#a-timepicker-test-expects-am--pm-to-add-12-hours-or-a-click-on-the-pressed-half-to-switch-to-pm)
+- [A link or button in the first column of a `DataTable` with `getRowHref`](#a-link-or-button-in-the-first-column-of-a-datatable-with-getrowhref)
+- [A row does not navigate after `@row-click` ran](#a-row-does-not-navigate-after-row-click-ran)
+- [A `DataTable` Previous or Next button is disabled](#a-datatable-previous-or-next-button-is-disabled)
+- [A `DataTable` shows a sorting or a selection the URL never got](#a-datatable-shows-a-sorting-or-a-selection-the-url-never-got)
 
 **PDF reader**
 
@@ -2101,6 +2105,84 @@ expect(onChange).toHaveBeenLastCalledWith(new Date(2026, 0, 1, 21, 30)); // from
 await userEvent.type(canvas.getByRole('spinbutton', { name: 'Hours' }), '10');
 ```
 
+### A link or button in the first column of a `DataTable` with `getRowHref`
+
+**When:** a `DataTable` has `getRowHref`, and the cell of its first data column (the first visible column with an accessor; without one, the first that is not `select` or `expand`) renders a link or a button of its own.
+**Why:** with `getRowHref` that cell's content is wrapped in the row's link, so a link or button inside it is interactive content nested in a link: a nested `<a>` is invalid HTML, so server and client markup can disagree (a hydration warning in an SSR app), and a click or Enter lands on the inner control or the outer link depending on the target. The row's click handling skips clicks on any control, so the row does not follow its link from there either.
+**Fix:** keep that column plain, and put the control in another column:
+
+```vue
+<DataTable
+  manual
+  :data="rows"
+  :columns="columns"
+  :get-row-href="(student) => `/students/${student.id}`"
+  :link-component="RouterLink"
+/>
+```
+```ts
+// columns: the first accessor column renders plain content
+columnHelper.accessor('name', { header: 'Name' }),
+// the control goes in a column of its own, after it
+columnHelper.display({
+  id: 'open',
+  cell: ({ row }) => h(Button, { onClick: () => openSheet(row.original) }, () => 'Quick view'),
+}),
+```
+
+Anything else that must not make the row follow its link on a click (a custom widget that is not a button, link or field) can carry `data-row-click-ignore`.
+
+### A row does not navigate after `@row-click` ran
+
+**When:** a `DataTable` has both `getRowHref` and `@row-click`; the handler runs, and a mouse click does not go to the row's page.
+**Why:** the handler runs first, and the row follows its link only if the click's `defaultPrevented` is still false after it. A handler that calls `event.preventDefault()` therefore stops the navigation by design, which is how a handler cancels it (for a row that opens a sheet instead). Ctrl/Cmd+click on the link, and Enter on it, do not go through the row handler.
+**Fix:** do not call `preventDefault()` in the handler when the row should still navigate:
+
+```vue
+<DataTable
+  manual
+  :data="rows"
+  :columns="columns"
+  :get-row-href="(row) => `/students/${row.id}`"
+  @row-click="(row, event) => openSheet(row)"
+/>
+```
+
+### A `DataTable` Previous or Next button is disabled
+
+**When:** a server-mode `DataTable` (`manual`) renders its footer with Previous or Next greyed out, though the server has more pages.
+**Why:** each button is enabled only when `pagination.previous` / `pagination.next` is an href string or a function, and the table is not `loading`. An absent or `null` value gives a disabled button, and both buttons are disabled while `loading` is true, so a `loading` that stays on (a flag never reset after the navigation ended) leaves them disabled. A `pagination` that is not passed renders no buttons at all.
+**Fix:** pass a target on each side that has a page, and turn `loading` off when the page has arrived:
+
+```vue
+<DataTable
+  manual
+  :data="rows"
+  :columns="columns"
+  :loading="navigating"
+  :pagination="{ previous: hasPrevious ? previousHref : null, next: hasNext ? nextHref : null, totalCount, offset }"
+/>
+```
+
+### A `DataTable` shows a sorting or a selection the URL never got
+
+**When:** a `DataTable` has `:sorting` (or `:row-selection`) bound to state you derive from the URL, with no `@update:sorting` (or `@update:row-selection`), and clicking a header changes the arrow while the rows and the URL stay as they were.
+**Why:** `sorting` and `rowSelection` are `defineModel`s. Vue keeps a local copy and applies a change to it unless the parent binds both the prop and its `update:` listener, so a one-way `:sorting` is a starting value the table then overrides, until the prop changes.
+**Fix:** bind both halves, and write the new value where the data comes from:
+
+```vue
+<DataTable
+  manual
+  :data="rows"
+  :columns="columns"
+  :sorting="sorting"
+  @update:sorting="(next) => router.push({ query: { ...route.query, sort: toQuery(next) } })"
+  v-model:row-selection="rowSelection"
+/>
+```
+
+---
+
 ---
 
 ## PDF reader

package/lib/nuxt/component-names.ts

@@ -160,6 +160,7 @@ export const COMPONENT_NAMES = [
 	'DataTable',
 	'DataTableColumnHeader',
 	'DataTablePagination',
+	'DataTableServerFooter',
 	'DataTableViewOptions',
 	'DateField',
 	'DateFormField',

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material-vue",
-	"version": "0.25.2",
+	"version": "0.26.1",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"
@@ -119,7 +119,7 @@
 		"docs:previews": "vitest run --project previews"
 	},
 	"dependencies": {
-		"@nxgt/material-core": "^0.3.2",
+		"@nxgt/material-core": "^0.4.0",
 		"@floating-ui/dom": "^1.8.0",
 		"@fortawesome/fontawesome-common-types": "7.3.1",
 		"@lucide/vue": "^1.45.0",