@payfit/unity-components 3.1.27 → 3.1.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payfit/unity-components",
-  "version": "3.1.27",
+  "version": "3.1.29",
   "module": "./dist/esm/index.js",
   "type": "module",
   "sideEffects": false,
@@ -103,7 +103,7 @@
     "@formatjs/intl": "4.1.12",
     "@internationalized/date": "3.12.4",
     "minimatch": "10.2.5",
-    "@payfit/unity-illustrations": "3.1.27",
+    "@payfit/unity-illustrations": "3.1.29",
     "@radix-ui/react-avatar": "1.2.6",
     "@radix-ui/react-slot": "1.3.3",
     "@react-aria/interactions": "3.28.1",
@@ -133,8 +133,8 @@
   },
   "peerDependencies": {
     "@hookform/devtools": "4.4.0",
-    "@payfit/unity-icons": "3.1.27",
-    "@payfit/unity-themes": "3.1.27",
+    "@payfit/unity-icons": "3.1.29",
+    "@payfit/unity-themes": "3.1.29",
     "@storybook/react-vite": "^10",
     "@tanstack/react-query": "^5",
     "@tanstack/form-core": "1.33.5",
@@ -157,9 +157,9 @@
     "@payfit/storybook-addon-console-errors": "0.0.0-use.local",
     "@payfit/storybook-addon-datadog-rum": "0.0.0-use.local",
     "@payfit/storybook-config": "0.0.0-use.local",
-    "@payfit/unity-icons": "3.1.27",
-    "@payfit/unity-illustrations": "3.1.27",
-    "@payfit/unity-themes": "3.1.27",
+    "@payfit/unity-icons": "3.1.29",
+    "@payfit/unity-illustrations": "3.1.29",
+    "@payfit/unity-themes": "3.1.29",
     "@payfit/vite-configs": "0.0.0-use.local",
     "@storybook/addon-a11y": "10.6.0",
     "@storybook/addon-designs": "11.1.4",
@@ -188,7 +188,7 @@
     "eslint-plugin-storybook": "10.3.2",
     "glob": "11.1.0",
     "msw": "2.14.6",
-    "msw-storybook-addon": "3.0.0",
+    "msw-storybook-addon": "3.0.3",
     "playwright": "1.55.1",
     "prettier": "3.8.3",
     "react-docgen-typescript": "2.2.2",

package/skills/unity-data-table/SKILL.md

@@ -29,7 +29,7 @@ stable across renders. Define static columns outside the component or memoize
 them; memoize derived data when its source would otherwise create a new array.
 
 ```tsx
-import { useMemo, useState } from 'react'
+import { useMemo } from 'react'
 
 import {
   DataTable,
@@ -39,10 +39,11 @@ import {
 } from '@payfit/unity-components'
 import {
   createColumnHelper,
+  createPaginatedRowModel,
   flexRender,
-  getCoreRowModel,
-  getPaginationRowModel,
-  useReactTable,
+  rowPaginationFeature,
+  tableFeatures,
+  useTable,
 } from '@tanstack/react-table'
 
 type Employee = {
@@ -52,11 +53,14 @@ type Employee = {
   status: 'active' | 'inactive'
 }
 
-const columnHelper = createColumnHelper<Employee>()
+const features = tableFeatures({
+  rowPaginationFeature,
+  paginatedRowModel: createPaginatedRowModel(),
+})
+
+const columnHelper = createColumnHelper<typeof features, Employee>()
 
 export function EmployeeTable({ employees }: { employees: Employee[] }) {
-  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 })
-
   const columns = useMemo(
     () => [
       columnHelper.accessor('name', {
@@ -71,14 +75,10 @@ export function EmployeeTable({ employees }: { employees: Employee[] }) {
 
   const data = useMemo(() => employees, [employees])
 
-  const table = useReactTable({
+  const table = useTable({
+    features,
     data,
     columns,
-    getRowId: row => row.id,
-    state: { pagination },
-    onPaginationChange: setPagination,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
   })
 
   return (
@@ -125,7 +125,7 @@ function MyTable() {
     { accessorKey: 'name', header: 'Name' },
     { accessorKey: 'status', header: 'Status' },
   ]
-  const table = useReactTable({ data, columns, ... })
+  const table = useTable({ features, data, columns, ... })
   return <DataTable table={table}>{row => ...}</DataTable>
 }
 ```
@@ -138,7 +138,7 @@ function MyTable() {
     { accessorKey: 'name', header: 'Name' },
     { accessorKey: 'status', header: 'Status' },
   ], [])
-  const table = useReactTable({ data, columns, ... })
+  const table = useTable({ features, data, columns, ... })
   return <DataTable table={table}>{row => ...}</DataTable>
 }
 ```
@@ -182,8 +182,11 @@ Wrong:
 Correct:
 
 ```tsx
-const table = useReactTable({ data, columns, getCoreRowModel(),
-  getPaginationRowModel(), state: { pagination }, onPaginationChange: setPagination })
+const features = tableFeatures({
+  rowPaginationFeature,
+  paginatedRowModel: createPaginatedRowModel(),
+})
+const table = useTable({ features, data, columns })
 <DataTableRoot>
   <DataTable table={table}>{row => /* ... */}</DataTable>
 </DataTableRoot>
@@ -206,9 +209,12 @@ Correct:
 ```tsx
 const [columnFilters, setColumnFilters] = useState([])
 const [globalFilter, setGlobalFilter] = useState('')
-const table = useReactTable({ /* … */ state: { columnFilters, globalFilter },
-  onGlobalFilterChange: setGlobalFilter, onColumnFiltersChange: setColumnFilters,
-  getFilteredRowModel() })
+const features = tableFeatures({
+  columnFilteringFeature,
+  globalFilteringFeature,
+  filteredRowModel: createFilteredRowModel(),
+})
+const table = useTable({ features, data, columns })
 <FilterToolbar filterDefs={…} onChange={mapToTableState(setColumnFilters, setGlobalFilter)} />
 ```
 
@@ -219,24 +225,29 @@ FilterToolbar.onChange emits AppliedFilter[]. Agent stores them locally without
 Wrong:
 
 ```tsx
-useReactTable({
+useTable({
+  features: tableFeatures({ rowPaginationFeature }),
   data: allEmployees,
   manualPagination: true,
-  pageCount: Math.ceil(allEmployees.length / 10),
+  rowCount: allEmployees.length,
 })
 ```
 
 Correct for locally held data:
 
 ```tsx
+import { useMemo, useState } from 'react'
+
+const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 })
 const currentData = useMemo(() => {
   const start = pagination.pageIndex * pagination.pageSize
   return allEmployees.slice(start, start + pagination.pageSize)
 }, [pagination])
-useReactTable({
+useTable({
+  features: tableFeatures({ rowPaginationFeature }),
   data: currentData,
   manualPagination: true,
-  pageCount: Math.ceil(allEmployees.length / pagination.pageSize),
+  rowCount: allEmployees.length,
   state: { pagination },
   onPaginationChange: setPagination,
 })
@@ -245,9 +256,9 @@ useReactTable({
 manualPagination: true tells Tanstack not to slice. Agents pass the full dataset and expect TanStack to paginate anyway.
 
 For server-side pagination, fetch and pass only the current server page and
-set `pageCount` from the server's total count. When all rows are local and
-TanStack should paginate them automatically, omit `manualPagination` and use
-`getPaginationRowModel()` instead.
+set `rowCount` or `pageCount` from the server response. When all rows are local
+and TanStack should paginate them automatically, omit `manualPagination` and
+register `paginatedRowModel: createPaginatedRowModel()` in `tableFeatures`.
 
 ### MEDIUM Render large datasets without enableVirtualization
 

package/skills/unity-data-table/references/patterns.md

@@ -9,9 +9,23 @@ checkboxes), `helperText` (renders a tooltip next to the header), and
 
 ```tsx
 import { Badge } from '@payfit/unity-components'
-import { createColumnHelper } from '@tanstack/react-table'
+import {
+  columnFilteringFeature,
+  createColumnHelper,
+  createFilteredRowModel,
+  createSortedRowModel,
+  filterFn_equalsString,
+  rowSortingFeature,
+  tableFeatures,
+} from '@tanstack/react-table'
 
-const columnHelper = createColumnHelper<Employee>()
+const features = tableFeatures({
+  columnFilteringFeature,
+  filteredRowModel: createFilteredRowModel(),
+  rowSortingFeature,
+  sortedRowModel: createSortedRowModel(),
+})
+const columnHelper = createColumnHelper<typeof features, Employee>()
 
 export const employeeColumns = [
   columnHelper.accessor('name', {
@@ -23,7 +37,7 @@ export const employeeColumns = [
   columnHelper.accessor('status', {
     header: 'Status',
     enableColumnFilter: true,
-    filterFn: 'arrIncludesSome',
+    filterFn: filterFn_equalsString,
     cell: info => {
       const status = info.getValue()
       return (
@@ -46,12 +60,16 @@ export const employeeColumns = [
 ### Server-side pagination
 
 `manualPagination: true` disables Tanstack's internal slicing. Pass only the
-current page's slice as `data` and supply `pageCount`.
+current page's slice as `data` and supply `rowCount` or `pageCount`.
 
 ```tsx
 import { useMemo, useState } from 'react'
 
-import { getCoreRowModel, useReactTable } from '@tanstack/react-table'
+import {
+  rowPaginationFeature,
+  tableFeatures,
+  useTable,
+} from '@tanstack/react-table'
 
 export function ServerTable({ totalCount, fetchPage }: Props) {
   const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 20 })
@@ -63,14 +81,15 @@ export function ServerTable({ totalCount, fetchPage }: Props) {
   const columns = useMemo(() => employeeColumns, [])
   const data = useMemo(() => pageRows, [pageRows])
 
-  const table = useReactTable({
+  const features = tableFeatures({ rowPaginationFeature })
+  const table = useTable({
+    features,
     data,
     columns,
-    manualPagination: true,
-    pageCount: Math.ceil(totalCount / pagination.pageSize),
     state: { pagination },
     onPaginationChange: setPagination,
-    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+    rowCount: totalCount,
   })
 
   return (
@@ -102,7 +121,12 @@ multi-selects, text fields, etc.
 import type { FilterDef } from '@payfit/unity-components'
 
 import { FilterToolbar, Select, SelectItem } from '@payfit/unity-components'
-import { getFilteredRowModel } from '@tanstack/react-table'
+import {
+  columnFilteringFeature,
+  createFilteredRowModel,
+  tableFeatures,
+  useTable,
+} from '@tanstack/react-table'
 
 const filterDefs: FilterDef[] = [
   {
@@ -119,17 +143,14 @@ const filterDefs: FilterDef[] = [
 ]
 
 export function FilteredTable() {
-  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
-
-  const table = useReactTable({
+  const features = tableFeatures({
+    columnFilteringFeature,
+    filteredRowModel: createFilteredRowModel(),
+  })
+  const table = useTable({
+    features,
     data,
     columns,
-    state: { columnFilters, pagination },
-    onColumnFiltersChange: setColumnFilters,
-    onPaginationChange: setPagination,
-    getCoreRowModel: getCoreRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
   })
 
   return (
@@ -137,7 +158,9 @@ export function FilteredTable() {
       <FilterToolbar
         filterDefs={filterDefs}
         onChange={applied =>
-          setColumnFilters(applied.map(f => ({ id: f.id, value: f.value })))
+          table.setColumnFilters(
+            applied.map(f => ({ id: f.id, value: f.value })),
+          )
         }
       />
       <DataTableRoot>
@@ -198,17 +221,13 @@ const checkboxColumn = columnHelper.display({
 })
 
 export function BulkTable() {
-  const [rowSelection, setRowSelection] = useState({})
   const columns = useMemo(() => [checkboxColumn, ...employeeColumns], [])
-  const table = useReactTable({
+  const features = tableFeatures({ rowSelectionFeature, rowPaginationFeature })
+  const table = useTable({
+    features,
     data,
     columns,
-    state: { rowSelection, pagination },
-    onRowSelectionChange: setRowSelection,
-    onPaginationChange: setPagination,
     enableRowSelection: true,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
   })
 
   return (