From ae58e2cc0bf5427113bc43a17deb81851dec7ffd Mon Sep 17 00:00:00 2001 From: Yurii Motov Date: Wed, 7 Oct 2026 10:51:19 +0200 Subject: [PATCH 1/3] Bump `@tanstack/react-table` to 9.2.4 --- bun.lock | 6 +++--- frontend/package.json | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/bun.lock b/bun.lock index b44a4071c8..dedccef9b6 100644 --- a/bun.lock +++ b/bun.lock @@ -27,7 +27,7 @@ "@tanstack/react-query-devtools": "^5.104.0", "@tanstack/react-router": "^1.170.39", "@tanstack/react-router-devtools": "^1.167.2", - "@tanstack/react-table": "^8.21.3", + "@tanstack/react-table": "^9.2.4", "axios": "1.20.0", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", @@ -567,7 +567,7 @@ "@tanstack/react-store": ["@tanstack/react-store@0.11.2", "", { "dependencies": { "@tanstack/store": "0.11.2", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "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" } }, "sha512-oj5O5DmiMWE+ih+SioX2ayC1kbK7d3fpLx0B75fPJr9nY3zU+hoW010yr64qXsY/9fyiLVE2bn5mGNV3owm8RQ=="], - "@tanstack/react-table": ["@tanstack/react-table@8.21.3", "", { "dependencies": { "@tanstack/table-core": "8.21.3" }, "peerDependencies": { "react": ">=16.8", "react-dom": ">=16.8" } }, "sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww=="], + "@tanstack/react-table": ["@tanstack/react-table@9.2.4", "", { "dependencies": { "@tanstack/react-store": "^0.11.1", "@tanstack/table-core": "9.2.4" }, "peerDependencies": { "react": ">=18" } }, "sha512-Rzp1Q4e0/nIgEjmISYR5HeEgLTNtrG+C7NFZf/AbCxPO5hg+zC3yNGwcoECigUk8SFzzvhXbd2rFdtP2ZiGrfA=="], "@tanstack/router-core": ["@tanstack/router-core@1.171.32", "", { "dependencies": { "@tanstack/history": "1.162.4", "cookie-es": "^3.0.0", "seroval": "^1.6.2", "seroval-plugins": "^1.6.2" } }, "sha512-X86Jqk3vB2KJcUfS6oLi7B7yxbaa59QEhZRPPP1fRx3k+Jw/Fu1UYVBcRtdwK/OccQnrlQdVoKvNO3QXmyEBOw=="], @@ -583,7 +583,7 @@ "@tanstack/store": ["@tanstack/store@0.11.2", "", {}, "sha512-sJ4mjol8uQsHV0gOJzzjwXfh2Fwm+Sz0+8deqiTm4jGbMdjzNSW+xZCFm0kUa870uhd8yi+DpKnZb5Kc4apa0Q=="], - "@tanstack/table-core": ["@tanstack/table-core@8.21.3", "", {}, "sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg=="], + "@tanstack/table-core": ["@tanstack/table-core@9.2.4", "", { "dependencies": { "@tanstack/store": "^0.11.1" } }, "sha512-GwdDyGGr6UXAtubF14yAwcXvdaogqfsQgIk89Suebjxob/Rjq2xvfmXsjDF1rQmKmhHsJm9TOY7myxv3i6geJw=="], "@tanstack/virtual-file-routes": ["@tanstack/virtual-file-routes@1.162.0", "", {}, "sha512-uhOeFyxLcU41HzvrxsGpiWdcMbScY1EDgbZ5K7DVRMYInbLYWAC0EA/kx9wXAoSM8q82bUG2hRl8+EAjE6XAbA=="], diff --git a/frontend/package.json b/frontend/package.json index 2fbbb4449e..ee63147cfa 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -31,7 +31,7 @@ "@tanstack/react-query-devtools": "^5.104.0", "@tanstack/react-router": "^1.170.39", "@tanstack/react-router-devtools": "^1.167.2", - "@tanstack/react-table": "^8.21.3", + "@tanstack/react-table": "^9.2.4", "axios": "1.20.0", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", From 6cce57e1b1376f38bfc58197a8de4158d62a6ae6 Mon Sep 17 00:00:00 2001 From: Yurii Motov Date: Wed, 7 Oct 2026 12:41:28 +0200 Subject: [PATCH 2/3] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Migrate=20tables=20to?= =?UTF-8?q?=20TanStack=20Table=20v9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Admin/columns.tsx | 3 +- frontend/src/components/Common/DataTable.tsx | 46 ++++++++++++-------- frontend/src/components/Items/columns.tsx | 3 +- 3 files changed, 31 insertions(+), 21 deletions(-) diff --git a/frontend/src/components/Admin/columns.tsx b/frontend/src/components/Admin/columns.tsx index 8b0fa13eef..c77a2cf8ec 100644 --- a/frontend/src/components/Admin/columns.tsx +++ b/frontend/src/components/Admin/columns.tsx @@ -1,6 +1,7 @@ import type { ColumnDef } from "@tanstack/react-table" import type { UserPublic } from "@/client" +import type { DataTableFeatures } from "@/components/Common/DataTable" import { Badge } from "@/components/ui/badge" import { cn } from "@/lib/utils" import { UserActionsMenu } from "./UserActionsMenu" @@ -9,7 +10,7 @@ export type UserTableData = UserPublic & { isCurrentUser: boolean } -export const columns: ColumnDef[] = [ +export const columns: ColumnDef[] = [ { accessorKey: "full_name", header: "Full Name", diff --git a/frontend/src/components/Common/DataTable.tsx b/frontend/src/components/Common/DataTable.tsx index e5bf2ae129..92601bcbbf 100644 --- a/frontend/src/components/Common/DataTable.tsx +++ b/frontend/src/components/Common/DataTable.tsx @@ -1,9 +1,12 @@ import { type ColumnDef, + columnVisibilityFeature, + createPaginatedRowModel, flexRender, - getCoreRowModel, - getPaginationRowModel, - useReactTable, + type RowData, + rowPaginationFeature, + tableFeatures, + useTable, } from "@tanstack/react-table" import { ChevronLeft, @@ -29,20 +32,27 @@ import { TableRow, } from "@/components/ui/table" -interface DataTableProps { - columns: ColumnDef[] +const dataTableFeatures = tableFeatures({ + columnVisibilityFeature, + rowPaginationFeature, + paginatedRowModel: createPaginatedRowModel(), +}) + +export type DataTableFeatures = typeof dataTableFeatures + +interface DataTableProps { + columns: ColumnDef[] data: TData[] } -export function DataTable({ +export function DataTable({ columns, data, -}: DataTableProps) { - const table = useReactTable({ +}: DataTableProps) { + const table = useTable({ + features: dataTableFeatures, data, columns, - getCoreRowModel: getCoreRowModel(), - getPaginationRowModel: getPaginationRowModel(), }) return ( @@ -95,13 +105,13 @@ export function DataTable({
Showing{" "} - {table.getState().pagination.pageIndex * - table.getState().pagination.pageSize + + {table.state.pagination.pageIndex * + table.state.pagination.pageSize + 1}{" "} to{" "} {Math.min( - (table.getState().pagination.pageIndex + 1) * - table.getState().pagination.pageSize, + (table.state.pagination.pageIndex + 1) * + table.state.pagination.pageSize, data.length, )}{" "} of{" "} @@ -111,15 +121,13 @@ export function DataTable({

Rows per page