diff --git a/package.json b/package.json index 0deec0ef..ebc128b1 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ "@docusaurus/preset-classic": "^3.10.2", "@docusaurus/theme-common": "^3.10.2", "@mdx-js/react": "^3.1.1", - "@tanstack/react-table": "^8.21.3", + "@tanstack/react-table": "^9.1.2", "clsx": "^2.1.1", "prism-react-renderer": "^2.4.1", "react": "^19.2.7", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5454eca5..31666115 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -31,8 +31,8 @@ importers: specifier: ^3.1.1 version: 3.1.1(@types/react@19.2.18)(react@19.2.8) '@tanstack/react-table': - specifier: ^8.21.3 - version: 8.21.3(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + specifier: ^9.1.2 + version: 9.1.2(react-dom@19.2.8(react@19.2.8))(react@19.2.8) clsx: specifier: ^2.1.1 version: 2.1.1 @@ -1854,16 +1854,24 @@ packages: resolution: {integrity: sha512-+PmQX0PiAYPMeVYe237LJAYvOMYW1j2rH5YROyS3b4CTVJum34HfRvKvAzozHAQG0TnHNdUfY9nCeUyRAs//cw==} engines: {node: '>=14.16'} - '@tanstack/react-table@8.21.3': - resolution: {integrity: sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww==} - engines: {node: '>=12'} + '@tanstack/react-store@0.11.1': + resolution: {integrity: sha512-HaIGKI3YLmjBYIvy5DFDY23oNaYZIsTZfngey07Uh5iLVJgM3bIGCnZeOFOqzjFld9JHWcaHJnasD/bKoGKwJQ==} peerDependencies: - react: '>=16.8' - react-dom: '>=16.8' + react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 - '@tanstack/table-core@8.21.3': - resolution: {integrity: sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==} - engines: {node: '>=12'} + '@tanstack/react-table@9.1.2': + resolution: {integrity: sha512-YQPZFJ1nIi/bjjwsPZVouABgahDcl7Gdm33CdTStUJBn0DjEVJ2uhSTVmIoWt9MVKdQziXGAsXipSzy949Hygg==} + engines: {node: '>=20'} + peerDependencies: + react: '>=18' + + '@tanstack/store@0.11.1': + resolution: {integrity: sha512-mzTOBhypOuDJAy/D8n2MfUZ1HFkXnmSETviRyhqEC8LUE7/IZQExOTxMANj3KjTofYTkFNpBY67qaVrT41YccA==} + + '@tanstack/table-core@9.1.2': + resolution: {integrity: sha512-ONpWQeass1sfg80CWF1NSwQ8r3GiqxA2lT/EdqIcrDEPZ0Z+0mM94eQoFYLPN0Kztzj8TQVb2+PrSZSItqA61g==} + engines: {node: '>=20'} '@tybys/wasm-util@0.10.3': resolution: {integrity: sha512-F3fo1MYrRJYL3zER0OUOmkutjr1Vp23m7OsSgp7nq4SP6OqX6C/56XFIPAl5bt3zaBRjmW7SGz3u/6LwFpYcOg==} @@ -5291,6 +5299,11 @@ packages: file-loader: optional: true + use-sync-external-store@1.6.0: + resolution: {integrity: sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==} + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 + util-deprecate@1.0.2: resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==} @@ -8436,13 +8449,26 @@ snapshots: dependencies: defer-to-connect: 2.0.1 - '@tanstack/react-table@8.21.3(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': + '@tanstack/react-store@0.11.1(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': dependencies: - '@tanstack/table-core': 8.21.3 + '@tanstack/store': 0.11.1 react: 19.2.8 react-dom: 19.2.8(react@19.2.8) + use-sync-external-store: 1.6.0(react@19.2.8) - '@tanstack/table-core@8.21.3': {} + '@tanstack/react-table@9.1.2(react-dom@19.2.8(react@19.2.8))(react@19.2.8)': + dependencies: + '@tanstack/react-store': 0.11.1(react-dom@19.2.8(react@19.2.8))(react@19.2.8) + '@tanstack/table-core': 9.1.2 + react: 19.2.8 + transitivePeerDependencies: + - react-dom + + '@tanstack/store@0.11.1': {} + + '@tanstack/table-core@9.1.2': + dependencies: + '@tanstack/store': 0.11.1 '@tybys/wasm-util@0.10.3': dependencies: @@ -12413,6 +12439,10 @@ snapshots: optionalDependencies: file-loader: 6.2.0(webpack@5.109.2(@swc/core@1.15.47)(postcss@8.5.26)) + use-sync-external-store@1.6.0(react@19.2.8): + dependencies: + react: 19.2.8 + util-deprecate@1.0.2: {} utila@0.4.0: {} diff --git a/src/components/PesterDataTable/PesterDataTable.js b/src/components/PesterDataTable/PesterDataTable.js index 8523c58e..a768345c 100644 --- a/src/components/PesterDataTable/PesterDataTable.js +++ b/src/components/PesterDataTable/PesterDataTable.js @@ -1,18 +1,33 @@ import React from "react"; -import { flexRender, useReactTable, getCoreRowModel, getSortedRowModel } from '@tanstack/react-table' +import { + createSortedRowModel, + rowSortingFeature, + sortFn_alphanumeric, + sortFn_text, + tableFeatures, + useTable, +} from '@tanstack/react-table' import "./style.css"; +const features = tableFeatures({ + rowSortingFeature, + sortedRowModel: createSortedRowModel(), + sortFns: { + alphanumeric: sortFn_alphanumeric, + text: sortFn_text, + }, +}); + // our pester.dev specific react-table const PesterDataTable = ({ columns, data, }) => { - const table = useReactTable( + const table = useTable( { + features, columns, data, - getCoreRowModel: getCoreRowModel(), - getSortedRowModel: getSortedRowModel(), }, ); @@ -31,7 +46,7 @@ const PesterDataTable = ({ style={{ cursor: "pointer" }} onClick={header.column.getToggleSortingHandler()} > - {flexRender(header.column.columnDef.header, header.getContext())} +