Data Table

1import {
2  Table,
3  TableBody,
4  TableCaption,
5  TableCell,
6  TableHead,
7  TableHeader,
8  TableRow,
9} from "@/components/ui/table";
10import { cn } from "@/lib/utils";
11import type { DataTableProps } from "./types";
12 
13export function DataTable<TRow>({
14  columns,
15  rows,
16  caption,
17  emptyState,
18  rowKey,
19}: DataTableProps<TRow>) {
20  if (rows.length === 0) {
21    return (
22      <div className="rounded-md border border-border bg-card p-8 text-center text-sm text-muted-foreground">
23        {emptyState ?? "No records to display."}
24      </div>
25    );
26  }
27 
28  return (
29    <div className="rounded-md border border-border bg-card">
30      <Table>
31        {caption ? <TableCaption>{caption}</TableCaption> : null}
32        <TableHeader>
33          <TableRow>
34            {columns.map((column) => (
35              <TableHead
36                key={column.id}
37                className={cn(
38                  column.align === "right" && "text-right",
39                  column.align === "center" && "text-center",
40                )}
41                style={column.width ? { width: column.width } : undefined}
42              >
43                {column.header}
44              </TableHead>
45            ))}
46          </TableRow>
47        </TableHeader>
48        <TableBody>
49          {rows.map((row, index) => (
50            <TableRow key={rowKey(row, index)}>
51              {columns.map((column) => (
52                <TableCell
53                  key={column.id}
54                  className={cn(
55                    column.align === "right" && "text-right",
56                    column.align === "center" && "text-center",
57                  )}
58                >
59                  {column.accessor(row)}
60                </TableCell>
61              ))}
62            </TableRow>
63          ))}
64        </TableBody>
65      </Table>
66    </div>
67  );
68}