Data Table

1"use client";
2 
3import * as React from "react";
4import {
5	flexRender,
6	getCoreRowModel,
7	getFilteredRowModel,
8	getPaginationRowModel,
9	getSortedRowModel,
10	useReactTable,
11} from "@tanstack/react-table";
12 
13import {
14	Table,
15	TableBody,
16	TableCell,
17	TableHead,
18	TableHeader,
19	TableRow,
20} from "@/registry/optics/table";
21 
22function DataTable({ columns = [], data = [], ...props }) {
23	const [sorting, setSorting] = React.useState([]);
24	const [columnFilters, setColumnFilters] = React.useState([]);
25	const [columnVisibility, setColumnVisibility] = React.useState({});
26	const [rowSelection, setRowSelection] = React.useState({});
27 
28	const table = useReactTable({
29		data,
30		columns,
31		onSortingChange: setSorting,
32		onColumnFiltersChange: setColumnFilters,
33		getCoreRowModel: getCoreRowModel(),
34		getPaginationRowModel: getPaginationRowModel(),
35		getSortedRowModel: getSortedRowModel(),
36		getFilteredRowModel: getFilteredRowModel(),
37		onColumnVisibilityChange: setColumnVisibility,
38		onRowSelectionChange: setRowSelection,
39		state: {
40			sorting,
41			columnFilters,
42			columnVisibility,
43			rowSelection,
44		},
45		...props,
46	});
47 
48	return (
49		<div className="w-full">
50			<div className="overflow-hidden rounded-md border">
51				<Table>
52					<TableHeader>
53						{table.getHeaderGroups().map((headerGroup) => (
54							<TableRow key={headerGroup.id}>
55								{headerGroup.headers.map((header) => {
56									return (
57										<TableHead key={header.id}>
58											{header.isPlaceholder
59												? null
60												: flexRender(
61														header.column.columnDef.header,
62														header.getContext(),
63													)}
64										</TableHead>
65									);
66								})}
67							</TableRow>
68						))}
69					</TableHeader>
70					<TableBody>
71						{table.getRowModel().rows?.length ? (
72							table.getRowModel().rows.map((row) => (
73								<TableRow
74									key={row.id}
75									data-state={row.getIsSelected() && "selected"}
76								>
77									{row.getVisibleCells().map((cell) => (
78										<TableCell key={cell.id}>
79											{flexRender(
80												cell.column.columnDef.cell,
81												cell.getContext(),
82											)}
83										</TableCell>
84									))}
85								</TableRow>
86							))
87						) : (
88							<TableRow>
89								<TableCell
90									colSpan={columns.length}
91									className="h-24 text-center"
92								>
93									No results.
94								</TableCell>
95							</TableRow>
96						)}
97					</TableBody>
98				</Table>
99			</div>
100		</div>
101	);
102}
103 
104DataTable.displayName = "DataTable";
105 
106export { DataTable };