Table
Example
1import {
2 createColumnHelper,
3 flexRender,
4 getCoreRowModel,
5 useReactTable,
6 RowData,
7} from '@tanstack/react-table'
8
9declare module '@tanstack/react-table' {
10 interface ColumnMeta<TData extends RowData, TValue> {
11 className?: string
12 }
13}
14
15const data: Ranking[] = [
16 { rank: '1', user: 'powz', score: 5054.25054 },
17 { rank: '2', user: 'Bijak', score: 3605.23605 },
18 { rank: '3', user: 'ShockOLatte', score: 2518.72518 },
19 { rank: '4', user: 'Ludie', score: 2517.32517 },
20 { rank: '5', user: 'Chamsae', score: 2434.42434 },
21 { rank: '6', user: 'Salome', score: 2107.12107 },
22 { rank: '7', user: 'mmmm', score: 2060.1206 },
23 { rank: '8', user: 'Yaku', score: 1667.21667 },
24 { rank: '9', user: 'Socks', score: 1635.81635 },
25 { rank: '10', user: 'clair', score: 1592.91592 },
26]
27
28interface Ranking {
29 rank: string
30 user: string
31 score: number
32}
33
34const columnHelper = createColumnHelper<Ranking>()
35
36const columns = [
37 columnHelper.accessor('rank', {
38 header: () => 'Rank',
39 size: 5,
40 meta: {
41 className: 'justify-center',
42 },
43 }),
44 columnHelper.accessor('user', {
45 header: () => 'User',
46 }),
47 columnHelper.accessor('score', {
48 header: () => 'Score',
49 size: 20,
50 cell: info => Math.round(info.getValue()),
51 meta: {
52 className: 'justify-end text-right',
53 },
54 }),
55]
56
57function ExampleTable() {
58 const table = useReactTable({
59 defaultColumn: {
60 minSize: 0,
61 size: 0,
62 },
63 data,
64 columns,
65 getCoreRowModel: getCoreRowModel(),
66 })
67
68 return (
69 <table className="w-full border-collapse">
70 <thead>
71 {table.getHeaderGroups().map(headerGroup => (
72 <tr key={headerGroup.id}>
73 {headerGroup.headers.map(header => (
74 <th
75 key={header.id}
76 style={{
77 width: header.getSize() !== 0 ? header.getSize() : undefined,
78 }}
79 className={`subtitle px-4 h-14 inline-flex items-center text-left ${
80 header.column.columnDef.meta?.className
81 }`}
82 >
83 {header.isPlaceholder
84 ? null
85 : flexRender(
86 header.column.columnDef.header,
87 header.getContext(),
88 )}
89 </th>
90 ))}
91 </tr>
92 ))}
93 </thead>
94 <tbody>
95 {table.getRowModel().rows.map(row => (
96 <tr
97 key={row.id}
98 className="font-bold text-xl hover:bg-primary hover:text-white h-14"
99 >
100 {row.getVisibleCells().map(cell => (
101 <td key={cell.id} className="border-0 p-0">
102 <a
103 href={`#${row.renderValue('rank')}`}
104 className={`reset h-14 px-4 flex items-center ${
105 cell.column.columnDef.meta?.className
106 }`}
107 >
108 {flexRender(cell.column.columnDef.cell, cell.getContext())}
109 </a>
110 </td>
111 ))}
112 </tr>
113 ))}
114 </tbody>
115 </table>
116 )
117}