@nxgt/material-vue 0.26.0 → 0.26.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nxgt/material-vue
 
+## 0.26.1
+
+### Patch Changes
+
+- [#433](https://github.com/softistx/nxgt-material/pull/433) [`620527a`](https://github.com/softistx/nxgt-material/commit/620527a02ac7f8136e271bc51c32dd28a6d99a25) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Troubleshooting entries for the DataTable server mode: a link or button in the first column of a `getRowHref` table, a row that does not navigate after `onRowClick` / `@row-click`, a disabled Previous or Next, and (Vue) a `:sorting` or `:row-selection` bound without its `update:` half.
+
 ## 0.26.0
 
 ### Minor Changes

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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material-vue",
-	"version": "0.26.0",
+	"version": "0.26.1",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"