hallaine.com
this repo has no description
hallaine.com
1"use client";
2
3import {
4 type ColumnDef,
5 flexRender,
6 getCoreRowModel,
7 getPaginationRowModel,
8 getSortedRowModel,
9 type SortingState,
10 useReactTable,
11 type VisibilityState,
12} from "@tanstack/react-table";
13import * as React from "react";
14
15import { Button } from "@/components/ui/button";
16import {
17 Table,
18 TableBody,
19 TableCell,
20 TableHead,
21 TableHeader,
22 TableRow,
23} from "@/components/ui/table";
24
25interface DataTableProps<TData, TValue> {
26 columns: ColumnDef<TData, TValue>[];
27 data: TData[];
28}
29
30export function DataTable<TData, TValue>({
31 columns,
32 data,
33}: DataTableProps<TData, TValue>) {
34 const [sorting, setSorting] = React.useState<SortingState>([]);
35 const [columnVisibility, setColumnVisibility] =
36 React.useState<VisibilityState>({});
37
38 const table = useReactTable({
39 data,
40 columns,
41 getCoreRowModel: getCoreRowModel(),
42 getPaginationRowModel: getPaginationRowModel(),
43 onSortingChange: setSorting,
44 getSortedRowModel: getSortedRowModel(),
45 onColumnVisibilityChange: setColumnVisibility,
46 state: {
47 sorting,
48 columnVisibility,
49 },
50 });
51
52 return (
53 <div>
54 <div className="overflow-hidden rounded-md border">
55 <Table>
56 <TableHeader>
57 {table.getHeaderGroups().map((headerGroup) => (
58 <TableRow key={headerGroup.id}>
59 {headerGroup.headers.map((header) => {
60 return (
61 <TableHead key={header.id}>
62 {header.isPlaceholder
63 ? null
64 : flexRender(
65 header.column.columnDef.header,
66 header.getContext(),
67 )}
68 </TableHead>
69 );
70 })}
71 </TableRow>
72 ))}
73 </TableHeader>
74 <TableBody>
75 {table.getRowModel().rows?.length ? (
76 table.getRowModel().rows.map((row) => (
77 <TableRow
78 key={row.id}
79 data-state={row.getIsSelected() && "selected"}
80 >
81 {row.getVisibleCells().map((cell) => (
82 <TableCell key={cell.id}>
83 {flexRender(
84 cell.column.columnDef.cell,
85 cell.getContext(),
86 )}
87 </TableCell>
88 ))}
89 </TableRow>
90 ))
91 ) : (
92 <TableRow>
93 <TableCell
94 colSpan={columns.length}
95 className="h-24 text-center"
96 >
97 No results.
98 </TableCell>
99 </TableRow>
100 )}
101 </TableBody>
102 </Table>
103 </div>
104 <div className="flex items-center justify-end space-x-2 py-4">
105 <Button
106 variant="outline"
107 size="sm"
108 onClick={() => table.previousPage()}
109 disabled={!table.getCanPreviousPage()}
110 >
111 Previous
112 </Button>
113 <Button
114 variant="outline"
115 size="sm"
116 onClick={() => table.nextPage()}
117 disabled={!table.getCanNextPage()}
118 >
119 Next
120 </Button>
121 </div>
122 </div>
123 );
124}