this repo has no description
basic pokemon
+196
-3
+1
package.json
+1
package.json
···
18
18
"@tanstack/react-query-devtools": "^5.66.5",
19
19
"@tanstack/react-router": "^1.114.3",
20
20
"@tanstack/react-router-devtools": "^1.114.3",
21
+
"@tanstack/react-table": "^8.21.3",
21
22
"@tanstack/router-plugin": "^1.114.3",
22
23
"class-variance-authority": "^0.7.1",
23
24
"clsx": "^2.1.1",
+22
pnpm-lock.yaml
+22
pnpm-lock.yaml
···
23
23
'@tanstack/react-router-devtools':
24
24
specifier: ^1.114.3
25
25
version: 1.119.1(@tanstack/react-router@1.119.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(@tanstack/router-core@1.119.0)(csstype@3.1.3)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(tiny-invariant@1.3.3)
26
+
'@tanstack/react-table':
27
+
specifier: ^8.21.3
28
+
version: 8.21.3(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
26
29
'@tanstack/router-plugin':
27
30
specifier: ^1.114.3
28
31
version: 1.119.0(@tanstack/react-router@1.119.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(vite@6.3.4(jiti@2.4.2)(lightningcss@1.29.2)(tsx@4.19.4))
···
676
679
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
677
680
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
678
681
682
+
'@tanstack/react-table@8.21.3':
683
+
resolution: {integrity: sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww==}
684
+
engines: {node: '>=12'}
685
+
peerDependencies:
686
+
react: '>=16.8'
687
+
react-dom: '>=16.8'
688
+
679
689
'@tanstack/router-core@1.119.0':
680
690
resolution: {integrity: sha512-3dZYP5cCq3jJYgnRDzKR3w4sYzrXP5sw1st303ye87VV26r31I8UaIuUEs7kiJaxgWBvqHglWCiygBWQODZXVw==}
681
691
engines: {node: '>=12'}
···
728
738
729
739
'@tanstack/store@0.7.0':
730
740
resolution: {integrity: sha512-CNIhdoUsmD2NolYuaIs8VfWM467RK6oIBAW4nPEKZhg1smZ+/CwtCdpURgp7nxSqOaV9oKkzdWD80+bC66F/Jg==}
741
+
742
+
'@tanstack/table-core@8.21.3':
743
+
resolution: {integrity: sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==}
744
+
engines: {node: '>=12'}
731
745
732
746
'@tanstack/virtual-file-routes@1.115.0':
733
747
resolution: {integrity: sha512-XLUh1Py3AftcERrxkxC5Y5m5mfllRH3YR6YVlyjFgI2Tc2Ssy2NKmQFQIafoxfW459UJ8Dn81nWKETEIJifE4g==}
···
1985
1999
react-dom: 19.1.0(react@19.1.0)
1986
2000
use-sync-external-store: 1.5.0(react@19.1.0)
1987
2001
2002
+
'@tanstack/react-table@8.21.3(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
2003
+
dependencies:
2004
+
'@tanstack/table-core': 8.21.3
2005
+
react: 19.1.0
2006
+
react-dom: 19.1.0(react@19.1.0)
2007
+
1988
2008
'@tanstack/router-core@1.119.0':
1989
2009
dependencies:
1990
2010
'@tanstack/history': 1.115.0
···
2043
2063
diff: 7.0.0
2044
2064
2045
2065
'@tanstack/store@0.7.0': {}
2066
+
2067
+
'@tanstack/table-core@8.21.3': {}
2046
2068
2047
2069
'@tanstack/virtual-file-routes@1.115.0': {}
2048
2070
+114
src/components/ui/table.tsx
+114
src/components/ui/table.tsx
···
1
+
import * as React from "react"
2
+
3
+
import { cn } from "~/lib/utils"
4
+
5
+
function Table({ className, ...props }: React.ComponentProps<"table">) {
6
+
return (
7
+
<div
8
+
data-slot="table-container"
9
+
className="relative w-full overflow-x-auto"
10
+
>
11
+
<table
12
+
data-slot="table"
13
+
className={cn("w-full caption-bottom text-sm", className)}
14
+
{...props}
15
+
/>
16
+
</div>
17
+
)
18
+
}
19
+
20
+
function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
21
+
return (
22
+
<thead
23
+
data-slot="table-header"
24
+
className={cn("[&_tr]:border-b", className)}
25
+
{...props}
26
+
/>
27
+
)
28
+
}
29
+
30
+
function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
31
+
return (
32
+
<tbody
33
+
data-slot="table-body"
34
+
className={cn("[&_tr:last-child]:border-0", className)}
35
+
{...props}
36
+
/>
37
+
)
38
+
}
39
+
40
+
function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
41
+
return (
42
+
<tfoot
43
+
data-slot="table-footer"
44
+
className={cn(
45
+
"bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
46
+
className
47
+
)}
48
+
{...props}
49
+
/>
50
+
)
51
+
}
52
+
53
+
function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
54
+
return (
55
+
<tr
56
+
data-slot="table-row"
57
+
className={cn(
58
+
"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
59
+
className
60
+
)}
61
+
{...props}
62
+
/>
63
+
)
64
+
}
65
+
66
+
function TableHead({ className, ...props }: React.ComponentProps<"th">) {
67
+
return (
68
+
<th
69
+
data-slot="table-head"
70
+
className={cn(
71
+
"text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
72
+
className
73
+
)}
74
+
{...props}
75
+
/>
76
+
)
77
+
}
78
+
79
+
function TableCell({ className, ...props }: React.ComponentProps<"td">) {
80
+
return (
81
+
<td
82
+
data-slot="table-cell"
83
+
className={cn(
84
+
"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
85
+
className
86
+
)}
87
+
{...props}
88
+
/>
89
+
)
90
+
}
91
+
92
+
function TableCaption({
93
+
className,
94
+
...props
95
+
}: React.ComponentProps<"caption">) {
96
+
return (
97
+
<caption
98
+
data-slot="table-caption"
99
+
className={cn("text-muted-foreground mt-4 text-sm", className)}
100
+
{...props}
101
+
/>
102
+
)
103
+
}
104
+
105
+
export {
106
+
Table,
107
+
TableHeader,
108
+
TableBody,
109
+
TableFooter,
110
+
TableHead,
111
+
TableRow,
112
+
TableCell,
113
+
TableCaption,
114
+
}
+1
-1
src/data/client.ts
+1
-1
src/data/client.ts
+57
-1
src/routes/basic.tsx
+57
-1
src/routes/basic.tsx
···
1
1
import { createFileRoute } from '@tanstack/react-router'
2
+
import { useQuery } from '@tanstack/react-query'
3
+
import { $pokeApiClient } from '../data/client'
4
+
import {
5
+
Table,
6
+
TableHeader,
7
+
TableBody,
8
+
TableHead,
9
+
TableRow,
10
+
TableCell,
11
+
} from '~/components/ui/table'
2
12
3
13
export const Route = createFileRoute('/basic')({
4
14
component: RouteComponent,
5
15
})
16
+
17
+
interface PokemonListResult {
18
+
name: string;
19
+
url: string;
20
+
}
6
21
7
22
function RouteComponent() {
8
-
return <div>Hello "/basic"!</div>
23
+
// Use the generated hook from openapi-react-query
24
+
// const { data, isLoading, error } = $pokeApiClient.pokemon_list.useQuery({
25
+
// query: { limit: 50, offset: 0 },
26
+
// })
27
+
28
+
const { data, isLoading, error } = useQuery($pokeApiClient.queryOptions('get', '/api/v2/pokemon/' ))
29
+
30
+
if (isLoading) return <div>Loading...</div>
31
+
if (error) return <div>Error loading Pokémon.</div>
32
+
33
+
return (
34
+
<div className="p-4">
35
+
<h1 className="text-2xl font-bold mb-4">National Pokédex: Pokémon 1-50</h1>
36
+
<Table>
37
+
<TableHeader>
38
+
<TableRow>
39
+
<TableHead>#</TableHead>
40
+
<TableHead>Name</TableHead>
41
+
<TableHead>Details</TableHead>
42
+
</TableRow>
43
+
</TableHeader>
44
+
<TableBody>
45
+
{data?.results?.map((pokemon: PokemonListResult, idx: number) => (
46
+
<TableRow key={pokemon.name}>
47
+
<TableCell>{idx + 1}</TableCell>
48
+
<TableCell className="capitalize">{pokemon.name}</TableCell>
49
+
<TableCell>
50
+
<a
51
+
href={pokemon.url}
52
+
target="_blank"
53
+
rel="noopener noreferrer"
54
+
className="text-blue-600 underline"
55
+
>
56
+
View
57
+
</a>
58
+
</TableCell>
59
+
</TableRow>
60
+
))}
61
+
</TableBody>
62
+
</Table>
63
+
</div>
64
+
)
9
65
}