@nxgt/material 2.7.0 → 2.7.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nxgt/material
 
+## 2.7.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.
+
 ## 2.7.0
 
 ### Minor Changes

package/docs/troubleshooting.md

@@ -115,6 +115,9 @@ words in your error.
 - [Keys typed right after opening a dialog, sheet or drawer land inside it](#keys-typed-right-after-opening-a-dialog-sheet-or-drawer-land-inside-it)
 - [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)
 - [Focus is no longer in a `Tree` after it renders](#focus-is-no-longer-in-a-tree-after-it-renders)
+- [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 `onRowClick` ran](#a-row-does-not-navigate-after-onrowclick-ran)
+- [A `DataTable` Previous or Next button is disabled](#a-datatable-previous-or-next-button-is-disabled)
 
 **PDF reader**
 
@@ -2140,6 +2143,64 @@ await userEvent.click(canvas.getByRole('treeitem', { name: /Docs/ }));
 await userEvent.keyboard('{ArrowDown}');
 ```
 
+### 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: React warns of a nested anchor (`<a> cannot be a descendant of <a>`) and the markup may not hydrate, 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:
+
+```tsx
+const 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 }) => <Button onClick={() => openSheet(row.original)}>Quick view</Button>,
+  }),
+];
+
+<DataTable manual data={rows} columns={columns} getRowHref={(row) => `/students/${row.id}`} linkComponent={RouterLink} />;
+```
+
+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 `onRowClick` ran
+
+**When:** a `DataTable` has both `getRowHref` and `onRowClick`; 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:
+
+```tsx
+<DataTable
+  manual
+  data={rows}
+  columns={columns}
+  getRowHref={(row) => `/students/${row.id}`}
+  onRowClick={(row, event) => {
+    openSheet(row); // no event.preventDefault(): the link is still followed
+  }}
+/>
+```
+
+### 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:
+
+```tsx
+<DataTable
+  manual
+  data={rows}
+  columns={columns}
+  loading={navigation.state === 'loading'}
+  pagination={{ previous: hasPrevious ? previousHref : null, next: hasNext ? nextHref : null, totalCount, offset }}
+/>
+```
+
+---
+
 ---
 
 ## PDF reader

package/package.json

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