table

a flexible table component for displaying structured data with customizable columns.

pnpm dlx shadcn@latest add "/r/table.json"

example

/ ID	/ Name	/ Email	/ Role
1	John Doe	john@example.com	Admin
2	Jane Smith	jane@example.com	User
3	Bob Johnson	bob@example.com	User

usage

import Table from "@/components/n-ui/table";

// define your data
const data = [
  { id: 1, name: "John Doe", email: "john@example.com", role: "Admin" },
  { id: 2, name: "Jane Smith", email: "jane@example.com", role: "User" },
];

// define your columns
const columns = [
  { key: "id", header: "ID" },
  { key: "name", header: "Name" },
  { key: "email", header: "Email" },
  { key: "role", header: "Role" },
];

// use the Table component
<Table data={data} columns={columns} />