[ [UI.62] Components ] Data Table

Data Table

> Full-featured data table built on TanStack Table with sorting, filtering, pagination, and row selection. Terminal-styled with alternating row colors.

Import

[ [0x5B] IMPORT ]

1import { DataTable } from "@/components/ui/data-table";
2import { ColumnDef } from "@tanstack/react-table";

Preview

[ [0x00] DATA TABLE ]

Invoice	Status	Email	Amount
INV001	SUCCESS	user1@example.com	$316.00
INV002	PENDING	user2@example.com	$242.00
INV003	PROCESSING	user3@example.com	$837.00
INV004	SUCCESS	user4@example.com	$874.00
INV005	FAILED	user5@example.com	$721.00

1// Define your data type
2type Payment = {
3  id: string;
4  amount: number;
5  status: "pending" | "processing" | "success" | "failed";
6  email: string;
7};
8
9// Define columns
10const columns: ColumnDef<Payment>[] = [
11  { accessorKey: "id", header: "Invoice" },
12  { accessorKey: "status", header: "Status" },
13  { accessorKey: "email", header: "Email" },
14  { accessorKey: "amount", header: "Amount" },
15];
16
17// Use the component
18<DataTable
19  columns={columns}
20  data={payments}
21  searchKey="email"
22  searchPlaceholder="Search emails..."
23/>

Variants

[ [0x00] WITH ROW CLICK HANDLER ]

Invoice	Status	Email	Amount
INV001	SUCCESS	user1@example.com	$316.00
INV002	PENDING	user2@example.com	$242.00
INV003	PROCESSING	user3@example.com	$837.00

1<DataTable
2  columns={columns}
3  data={payments}
4  onRowClick={(row) => console.log("Clicked:", row)}
5/>

[ [0x00] CUSTOM CELL RENDERING ]

Invoice	Status	Email	Amount
INV001	SUCCESS	user1@example.com	$316.00
INV002	PENDING	user2@example.com	$242.00
INV003	PROCESSING	user3@example.com	$837.00

1const columns: ColumnDef<Payment>[] = [
2  {
3    accessorKey: "status",
4    header: "Status",
5    cell: ({ row }) => {
6      const status = row.getValue("status") as string;
7      return <Badge variant="default">{status}</Badge>;
8    },
9  },
10  {
11    accessorKey: "amount",
12    header: "Amount",
13    cell: ({ row }) => {
14      const amount = parseFloat(row.getValue("amount"));
15      return new Intl.NumberFormat("en-US", {
16        style: "currency",
17        currency: "USD",
18      }).format(amount);
19    },
20  },
21];

Features

[ [0x9C] SORTING ]

Click column headers to sort. Click again to reverse. Sorting state is managed automatically.

[ [0x4A] FILTERING ]

Use the searchKey prop to enable filtering on a specific column. The toolbar appears automatically.

[ [0x9A] PAGINATION ]

Built-in pagination with page size selector and navigation. Handles large datasets efficiently.

[ [0x86] ROW SELECTION ]

Optional row selection with visual feedback. Access selected rows via table state.

Props Reference

[ [0x8C] DATATABLE PROPS ]

Prop	Type	Description
columns	ColumnDef[]	Column definitions from TanStack Table
data	TData[]	Array of data to display
searchKey	string	Column key to filter on
searchPlaceholder	string	Placeholder for search input
onRowClick	(row: TData) => void	Handler for row clicks

Related Components

[ [0x1D] SUB-COMPONENTS ]

Component	Description
DataTableColumnHeader	Sortable column header with dropdown
DataTablePagination	Pagination controls with page size
DataTableToolbar	Search input and column visibility

Preview

[ [0x00] DATA TABLE ]

Invoice	Status	Email	Amount
INV001	SUCCESS	user1@example.com	$316.00
INV002	PENDING	user2@example.com	$242.00
INV003	PROCESSING	user3@example.com	$837.00
INV004	SUCCESS	user4@example.com	$874.00
INV005	FAILED	user5@example.com	$721.00

1// Define your data type
2type Payment = {
3  id: string;
4  amount: number;
5  status: "pending" | "processing" | "success" | "failed";
6  email: string;
7};
8
9// Define columns
10const columns: ColumnDef<Payment>[] = [
11  { accessorKey: "id", header: "Invoice" },
12  { accessorKey: "status", header: "Status" },
13  { accessorKey: "email", header: "Email" },
14  { accessorKey: "amount", header: "Amount" },
15];
16
17// Use the component
18<DataTable
19  columns={columns}
20  data={payments}
21  searchKey="email"
22  searchPlaceholder="Search emails..."
23/>

Variants

[ [0x00] WITH ROW CLICK HANDLER ]

Invoice	Status	Email	Amount
INV001	SUCCESS	user1@example.com	$316.00
INV002	PENDING	user2@example.com	$242.00
INV003	PROCESSING	user3@example.com	$837.00

1<DataTable
2  columns={columns}
3  data={payments}
4  onRowClick={(row) => console.log("Clicked:", row)}
5/>

[ [0x00] CUSTOM CELL RENDERING ]

Invoice	Status	Email	Amount
INV001	SUCCESS	user1@example.com	$316.00
INV002	PENDING	user2@example.com	$242.00
INV003	PROCESSING	user3@example.com	$837.00

1const columns: ColumnDef<Payment>[] = [
2  {
3    accessorKey: "status",
4    header: "Status",
5    cell: ({ row }) => {
6      const status = row.getValue("status") as string;
7      return <Badge variant="default">{status}</Badge>;
8    },
9  },
10  {
11    accessorKey: "amount",
12    header: "Amount",
13    cell: ({ row }) => {
14      const amount = parseFloat(row.getValue("amount"));
15      return new Intl.NumberFormat("en-US", {
16        style: "currency",
17        currency: "USD",
18      }).format(amount);
19    },
20  },
21];

Features

[ [0x9C] SORTING ]

Click column headers to sort. Click again to reverse. Sorting state is managed automatically.

[ [0x4A] FILTERING ]

Use the searchKey prop to enable filtering on a specific column. The toolbar appears automatically.

[ [0x9A] PAGINATION ]

Built-in pagination with page size selector and navigation. Handles large datasets efficiently.

[ [0x86] ROW SELECTION ]

Optional row selection with visual feedback. Access selected rows via table state.

Prop

Type

Description

columns

ColumnDef[]

Column definitions from TanStack Table

data

TData[]

Array of data to display

searchKey

string

Column key to filter on

searchPlaceholder

string

Placeholder for search input

onRowClick

(row: TData) => void

Handler for row clicks

Component

Description

DataTableColumnHeader

Sortable column header with dropdown

DataTablePagination

Pagination controls with page size

DataTableToolbar

Search input and column visibility