Data Table

A complete data table primitive that composes Table building blocks with built-in search, column sorting, row selection, pagination, and expandable detail rows. All features compose — enable only what you need.

data table table sortable filterable selectable paginated expandable search dashboard billing admin

Loading preview...

Examples

Practical examples and common states for the same installable component.

Sortable

Click column headers to sort rows ascending or descending.

examples/data-table-sortable.tsx

 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}

Filterable

Built-in search bar filters across all columns with debounced input.

examples/data-table-filterable.tsx

 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}

Selectable

Checkbox column with select-all and individual row selection.

examples/data-table-selectable.tsx

 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}

Paginated

Splits large datasets across pages with compact pagination controls.

examples/data-table-paginated.tsx

 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}

Expandable

Click any row to reveal additional details in an expandable panel.

examples/data-table-expandable.tsx

 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}