@nxgt/material 3.22.0 → 3.23.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @nxgt/material
 
+## 3.23.0
+
+### Minor Changes
+
+- [#1617](https://github.com/softistx/nxgt-material/pull/1617) [`fe1a728`](https://github.com/softistx/nxgt-material/commit/fe1a728d019f7ce548b238202706e82c9175fe79) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `ServerTable` and `DataTable` paging, band and touch fixes ([#1609](https://github.com/softistx/nxgt-material/issues/1609), [#1611](https://github.com/softistx/nxgt-material/issues/1611), [#1612](https://github.com/softistx/nxgt-material/issues/1612), [#1599](https://github.com/softistx/nxgt-material/issues/1599)).
+  
+  - **Focus ([#1609](https://github.com/softistx/nxgt-material/issues/1609)).** Previous / Next keep the focus while the next page loads: the control stays the same element, `aria-disabled` (a click on it does nothing), instead of being swapped for a disabled button that dropped the focus to `<body>`. When a control goes (Next on the last page), the focus moves to its counterpart, or to the pagination `<nav>` (`tabindex="-1"`). The selected count of the server footer is a polite status.
+  - **No reserved bulk row ([#1611](https://github.com/softistx/nxgt-material/issues/1611)).** New `DataTable` prop `reserveActions` (default `true`, unchanged); `ServerTable` passes `false`: no empty 68px row under the band while nothing is selected, the bulk bar arrives with the first selection (a short grow, none under reduced motion).
+  - **Phone actions ([#1612](https://github.com/softistx/nxgt-material/issues/1612)).** New `ServerTable` prop `bandActions: 'stacked' | 'inline'` (default `'stacked'`, unchanged): `'inline'` keeps a lone icon action on the search's row below 768px.
+  - **44px page controls ([#1599](https://github.com/softistx/nxgt-material/issues/1599)).** `pageControls="icon"` Previous / Next are 44x44 boxes on a coarse pointer (painted 32px, layout unchanged).
+  
+  **Visual change:** a `ServerTable` with `bulkActions` no longer shows an empty row under its band; its rows move down by the bar's height on the first selection.
+
 ## 3.22.0
 
 ### Minor Changes

package/README.md

@@ -627,7 +627,7 @@ Not components: what the stylesheet gives any element.
 | Preview | Component | What it does | @nxgt/material-vue |
 | --- | --- | --- | --- |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-datatable.webp" width="120" alt="DataTable"> | [`DataTable`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/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. On a phone it keeps its header row and scrolls sideways in a keyboard-reachable region; the page does not. Or cards and tiles instead of the table (`layout`, `renderCard`, `renderTile`), and `layout={{ phone: 'tiles', wide: 'table' }}` for tiles on a phone ([cards and tiles guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/cards-and-tiles.md)). Long lists render only the rows in view (`virtual`). | `DataTable`, `DataTableColumnHeader`, `DataTablePagination`, `DataTableServerFooter`, `DataTableViewOptions` |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-servertable.webp" width="120" alt="ServerTable"> | [`ServerTable`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#servertable), `createSorting`, `tableFilters`, `defineFilterModel`, `parseFilterQuery`, `serializeFilterQuery`, `paramsFromQuery`, `serverPagination`… | A server-mode `DataTable` driven by the URL's search params, for any router: the Filter in its top band with the page's title (optional), description and actions, the sort, forward cursor paging, a selection reset on a new query, the empty page (a scene and an action for "nothing yet", the filters as removable chips), a compact band (`bandDensity`), icon-only Previous / Next (`pageControls`), a `filterRef` to focus the Filter, a page past the last (rows deleted) that says so and links back to the first, an error state with Retry for a failed fetch (`error`, `onRetry`), and one count announced. | `ServerTable`, `createSorting`, `tableFilters`, `serverPagination` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-servertable.webp" width="120" alt="ServerTable"> | [`ServerTable`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#servertable), `createSorting`, `tableFilters`, `defineFilterModel`, `parseFilterQuery`, `serializeFilterQuery`, `paramsFromQuery`, `serverPagination`… | A server-mode `DataTable` driven by the URL's search params, for any router: the Filter in its top band with the page's title (optional), description and actions, the sort, forward cursor paging, a selection reset on a new query, the empty page (a scene and an action for "nothing yet", the filters as removable chips), a compact band (`bandDensity`), icon-only Previous / Next (`pageControls`, 44px targets on a touch screen, focus kept while a page loads), actions that stay on the search's row on a phone (`bandActions`), a bulk bar that reserves no row until a selection, a `filterRef` to focus the Filter, a page past the last (rows deleted) that says so and links back to the first, an error state with Retry for a failed fetch (`error`, `onRetry`), and one count announced. | `ServerTable`, `createSorting`, `tableFilters`, `serverPagination` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-listempty.webp" width="120" alt="ListEmpty"> | [`ListEmpty`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#listempty) | A list's empty page: nothing yet (a title, or a scene, a line and an action), or nothing matches with what narrows it and a way out (a button or a link); its title is an `h2` (`headingLevel`). | `ListEmpty` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-datagrid.webp" width="120" alt="DataGrid"> | [`DataGrid`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#datagrid) | An editable grid over `DataTable`'s columns: spreadsheet keys, a selected range, editors for text, numbers (with codes such as "abs"), options, dates and checkboxes, or your own; paste from Excel or Sheets, a fill handle that continues series, resizable, hideable and reorderable columns, undo, totals, and saving per cell, per row or in a batch with versions and conflicts ([guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/data-grid.md)). Long grids render only what is in view; on a phone it is a list of rows that open a panel. | — (later) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-daygroupedlist.webp" width="120" alt="DayGroupedList"> | [`DayGroupedList`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#daygroupedlist), `groupByDay` | A list split by day — Today, Yesterday, This week, Earlier — under headings that stick while their items scroll. | — (later) |