Table

 1"use client";
 2
 3import * as React from "react";
 4import {
 5  Table,
 6  TableBody,
 7  TableCell,
 8  TableHead,
 9  TableHeader,
10  TableRow,
11} from "@/components/wensity/table";
12
13export function SortableTable() {
14  const [direction, setDirection] = React.useState<"asc" | "desc">("asc");
15
16  return (
17    <Table>
18      <TableHeader>
19        <TableRow>
20          <TableHead
21            sortable
22            sortDirection={direction}
23            onSort={() => setDirection((d) => (d === "asc" ? "desc" : "asc"))}
24          >
25            Customer
26          </TableHead>
27          <TableHead>Status</TableHead>
28        </TableRow>
29      </TableHeader>
30      <TableBody>
31        <TableRow>
32          <TableCell>Northwind Labs</TableCell>
33          <TableCell>Paid</TableCell>
34        </TableRow>
35      </TableBody>
36    </Table>
37  );
38}

 1"use client";
 2
 3import * as React from "react";
 4import {
 5  Table,
 6  TableBody,
 7  TableCell,
 8  TableHead,
 9  TableHeader,
10  TableRow,
11  TableSelectCell,
12} from "@/components/wensity/table";
13
14export function SelectableTable() {
15  const [selected, setSelected] = React.useState<string[]>([]);
16
17  return (
18    <Table>
19      <TableHeader>
20        <TableRow>
21          <TableHead className="w-10" />
22          <TableHead>Customer</TableHead>
23        </TableRow>
24      </TableHeader>
25      <TableBody>
26        <TableRow selected={selected.includes("northwind")}>
27          <TableSelectCell
28            checked={selected.includes("northwind")}
29            onCheckedChange={(checked) =>
30              setSelected(checked ? ["northwind"] : [])
31            }
32          />
33          <TableCell>Northwind Labs</TableCell>
34        </TableRow>
35      </TableBody>
36    </Table>
37  );
38}

 1"use client";
 2
 3import * as React from "react";
 4import {
 5  Table,
 6  TableBody,
 7  TableCell,
 8  TableExpandableContent,
 9  TableExpandTriggerCell,
10  TableHead,
11  TableHeader,
12  TableRow,
13} from "@/components/wensity/table";
14
15export function ExpandableTable() {
16  const [open, setOpen] = React.useState(true);
17
18  return (
19    <Table>
20      <TableHeader>
21        <TableRow>
22          <TableHead className="w-10" />
23          <TableHead>Customer</TableHead>
24        </TableRow>
25      </TableHeader>
26      <TableBody>
27        <TableRow expanded={open}>
28          <TableExpandTriggerCell expanded={open} onToggle={() => setOpen((v) => !v)} />
29          <TableCell>Northwind Labs</TableCell>
30        </TableRow>
31        <TableExpandableContent open={open} colSpan={2}>
32          Receipt sent to billing@northwind.dev.
33        </TableExpandableContent>
34      </TableBody>
35    </Table>
36  );
37}

 1import {
 2  Table,
 3  TableBody,
 4  TableCell,
 5  TableHead,
 6  TableHeader,
 7  TableRow,
 8} from "@/components/wensity/table";
 9
10export function StickyHeaderTable() {
11  return (
12    <Table stickyHeader className="max-h-56">
13      <TableHeader>
14        <TableRow>
15          <TableHead>Customer</TableHead>
16          <TableHead>Status</TableHead>
17        </TableRow>
18      </TableHeader>
19      <TableBody>
20        {/* long list of rows */}
21      </TableBody>
22    </Table>
23  );
24}