1import {
2  Table,
3  TableBody,
4  TableCaption,
5  TableCell,
6  TableFooter,
7  TableHead,
8  TableHeader,
9  TableRow,
10} from "@repo/ui/components/table";

1const data = [
2  {
3    id: "1",
4    name: "John Doe",
5    age: 25,
6  }, {/* ... */}
7];
8
9<Table>
10  <TableCaption>Table Caption</TableCaption>
11  <TableHeader>
12    <TableRow>
13      <TableHead>ID</TableHead>
14      <TableHead>Name</TableHead>
15      <TableHead>Age</TableHead>
16    </TableRow>
17  </TableHeader>
18  <TableBody>
19    {data.map((item) => (
20      <TableRow key={item.id}>
21        <TableCell className="font-medium">{item.id}</TableCell>
22        <TableCell>{item.name}</TableCell>
23        <TableCell>{item.age}</TableCell>
24      </TableRow>
25    ))}
26  </TableBody>
27  <TableFooter>
28    <TableRow>
29      <TableCell colSpan={2}>Total</TableCell>
30      <TableCell>212</TableCell>
31    </TableRow>
32  </TableFooter>
33</Table>