amir/full-stack-fastapi-template
1
0
Fork 0
mirror of https://github.com/fastapi/full-stack-fastapi-template.git synced 2026-11-03 12:29:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

⬆️ Migrate @tanstack/react-table to 9.x (#2509)

Browse Source
This commit is contained in:
Yurii Motov
2026-10-08 17:50:25 +02:00
committed by GitHub
parent f27b472150
commit 0007f609ec
5 changed files with 34 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
bun.lock
+3 -3
View File
@@ -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=="],
frontend/package.json
+1 -1
View File
@@ -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",
frontend/src/components/Admin/columns.tsx
+2 -1
View File
@@ -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<UserTableData>[] = [
export const columns: ColumnDef<DataTableFeatures, UserTableData>[] = [
{
accessorKey: "full_name",
header: "Full Name",
frontend/src/components/Common/DataTable.tsx
+26 -20
View File
@@ -1,9 +1,11 @@
import {
type ColumnDef,
createPaginatedRowModel,
flexRender,
getCoreRowModel,
getPaginationRowModel,
useReactTable,
type RowData,
rowPaginationFeature,
tableFeatures,
useTable,
} from "@tanstack/react-table"
import {
ChevronLeft,
@@ -29,20 +31,26 @@ import {
TableRow,
} from "@/components/ui/table"
interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[]
const dataTableFeatures = tableFeatures({
rowPaginationFeature,
paginatedRowModel: createPaginatedRowModel(),
})
export type DataTableFeatures = typeof dataTableFeatures
interface DataTableProps<TData extends RowData> {
columns: ColumnDef<DataTableFeatures, TData>[]
data: TData[]
}
export function DataTable<TData, TValue>({
export function DataTable<TData extends RowData>({
columns,
data,
}: DataTableProps<TData, TValue>) {
const table = useReactTable({
}: DataTableProps<TData>) {
const table = useTable({
features: dataTableFeatures,
data,
columns,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
})
return (
@@ -70,7 +78,7 @@ export function DataTable<TData, TValue>({
{table.getRowModel().rows.length ? (
table.getRowModel().rows.map((row) => (
<TableRow key={row.id}>
{row.getVisibleCells().map((cell) => (
{row.getAllCells().map((cell) => (
<TableCell key={cell.id}>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</TableCell>
@@ -95,13 +103,13 @@ export function DataTable<TData, TValue>({
<div className="flex flex-col sm:flex-row sm:items-center gap-4">
<div className="text-sm text-muted-foreground">
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 +119,13 @@ export function DataTable<TData, TValue>({
<div className="flex items-center gap-x-2">
<p className="text-sm text-muted-foreground">Rows per page</p>
<Select
value={`${table.getState().pagination.pageSize}`}
value={`${table.state.pagination.pageSize}`}
onValueChange={(value) => {
table.setPageSize(Number(value))
}}
>
<SelectTrigger className="h-8 w-[70px]">
<SelectValue
placeholder={table.getState().pagination.pageSize}
/>
<SelectValue placeholder={table.state.pagination.pageSize} />
</SelectTrigger>
<SelectContent side="top">
{[5, 10, 25, 50].map((pageSize) => (
@@ -136,7 +142,7 @@ export function DataTable<TData, TValue>({
<div className="flex items-center gap-x-1 text-sm text-muted-foreground">
<span>Page</span>
<span className="font-medium text-foreground">
{table.getState().pagination.pageIndex + 1}
{table.state.pagination.pageIndex + 1}
</span>
<span>of</span>
<span className="font-medium text-foreground">
frontend/src/components/Items/columns.tsx
+2 -1
View File
@@ -2,6 +2,7 @@ import type { ColumnDef } from "@tanstack/react-table"
import { Check, Copy } from "lucide-react"
import type { ItemPublic } from "@/client"
import type { DataTableFeatures } from "@/components/Common/DataTable"
import { Button } from "@/components/ui/button"
import { useCopyToClipboard } from "@/hooks/useCopyToClipboard"
import { cn } from "@/lib/utils"
@@ -31,7 +32,7 @@ function CopyId({ id }: { id: string }) {
)
}
export const columns: ColumnDef<ItemPublic>[] = [
export const columns: ColumnDef<DataTableFeatures, ItemPublic>[] = [
{
accessorKey: "id",
header: "ID",