Data Table

 1"use client";
 2
 3import {
 4  DataTable,
 5  type DataTableColumn,
 6} from "@/components/wensity/data-table";
 7
 8type Invoice = {
 9  id: string;
10  customer: string;
11  plan: string;
12  amount: string;
13  status: string;
14};
15
16const columns: DataTableColumn<Invoice>[] = [
17  { id: "customer", header: "Customer", accessorKey: "customer", sortable: true },
18  { id: "plan", header: "Plan", accessorKey: "plan", sortable: true },
19  { id: "amount", header: "Amount", accessorKey: "amount", sortable: true },
20  { id: "status", header: "Status", accessorKey: "status", sortable: true },
21];
22
23export function SortableDataTable({ data }: { data: Invoice[] }) {
24  return <DataTable columns={columns} data={data} sortable />;
25}

 1"use client";
 2
 3import {
 4  DataTable,
 5  type DataTableColumn,
 6} from "@/components/wensity/data-table";
 7
 8type Invoice = {
 9  id: string;
10  customer: string;
11  plan: string;
12  status: string;
13};
14
15const columns: DataTableColumn<Invoice>[] = [
16  { id: "customer", header: "Customer", accessorKey: "customer" },
17  { id: "plan", header: "Plan", accessorKey: "plan" },
18  { id: "status", header: "Status", accessorKey: "status" },
19];
20
21export function FilterableDataTable({ data }: { data: Invoice[] }) {
22  return (
23    <DataTable
24      columns={columns}
25      data={data}
26      filterable={{ placeholder: "Search invoices…" }}
27    />
28  );
29}

 1"use client";
 2
 3import {
 4  DataTable,
 5  type DataTableColumn,
 6} from "@/components/wensity/data-table";
 7
 8type User = {
 9  id: string;
10  name: string;
11  role: string;
12};
13
14const columns: DataTableColumn<User>[] = [
15  { id: "name", header: "Name", accessorKey: "name" },
16  { id: "role", header: "Role", accessorKey: "role" },
17];
18
19export function SelectableDataTable({ data }: { data: User[] }) {
20  return <DataTable columns={columns} data={data} selectable />;
21}

 1"use client";
 2
 3import {
 4  DataTable,
 5  type DataTableColumn,
 6} from "@/components/wensity/data-table";
 7
 8type Invoice = {
 9  id: string;
10  customer: string;
11  plan: string;
12  amount: string;
13  status: string;
14};
15
16const columns: DataTableColumn<Invoice>[] = [
17  { id: "customer", header: "Customer", accessorKey: "customer", sortable: true },
18  { id: "plan", header: "Plan", accessorKey: "plan" },
19  { id: "amount", header: "Amount", accessorKey: "amount", sortable: true },
20  { id: "status", header: "Status", accessorKey: "status" },
21];
22
23export function PaginatedDataTable({ data }: { data: Invoice[] }) {
24  return (
25    <DataTable
26      columns={columns}
27      data={data}
28      sortable
29      paginated={{ pageSize: 5 }}
30    />
31  );
32}

 1"use client";
 2
 3import {
 4  DataTable,
 5  type DataTableColumn,
 6} from "@/components/wensity/data-table";
 7
 8type Invoice = {
 9  id: string;
10  customer: string;
11  plan: string;
12  status: string;
13  detail: string;
14};
15
16const columns: DataTableColumn<Invoice>[] = [
17  { id: "customer", header: "Customer", accessorKey: "customer" },
18  { id: "plan", header: "Plan", accessorKey: "plan" },
19  { id: "status", header: "Status", accessorKey: "status" },
20];
21
22export function ExpandableDataTable({ data }: { data: Invoice[] }) {
23  return (
24    <DataTable
25      columns={columns}
26      data={data}
27      expandable={{
28        renderExpanded: (row) => (
29          <div className="text-xs text-muted-foreground">
30            <p><strong>ID:</strong> {row.id}</p>
31            <p>{row.detail}</p>
32          </div>
33        ),
34      }}
35    />
36  );
37}