Data Table

A powerful, flexible table component for displaying large datasets.

Example

Status	Email	Amount
pending	m@example.com	$100.00
processing	example@gmail.com	$125.00
success	test@yahoo.com	$250.00
failed	user@outlook.com	$50.00

Usage

Code Example

import { DataTable } from "cephalopod-design-system"
import { ColumnDef } from "@tanstack/react-table"

const columns: ColumnDef<Payment>[] = [
  { accessorKey: "status", header: "Status" },
  { accessorKey: "email", header: "Email" },
  { accessorKey: "amount", header: "Amount" },
]

<DataTable columns={columns} data={data} searchKey="email" />