Table

The Table component displays structured data using rows and columns. This version includes striped rows and a hover state for improved readability.

Default

A basic table layout with headers and rows.

Name	Email	Role
Alice Smith	alice@example.com	Admin
Bob Johnson	bob@example.com	Editor
Charlie Rose	charlie@example.com	Viewer

<Table
headers={["Name", "Email", "Role"]}
rows={[
  ["Alice Smith", "alice@example.com", "Admin"],
  ["Bob Johnson", "bob@example.com", "Editor"],
  ["Charlie Rose", "charlie@example.com", "Viewer"],
]}
/>

With action buttons

Tables can include buttons or other interactive elements in any column.

ID	Name	Role
user_123	Alice Smith	Admin
user_456	Bob Johnson	Editor
user_789	Charlie Rose	Viewer

<Table
headers={["ID", "Name", "Role", "Actions"]}
rows={[
  [
    "user_123",
    "Alice Smith",
    "Admin",
    <div className="flex justify-end gap-2">
      <Button variant="outlined" size="sm">Copy ID</Button>
      <Button size="sm">View</Button>
    </div>,
  ],
  [
    "user_456",
    "Bob Johnson",
    "Editor",
    <div className="flex justify-end gap-2">
      <Button variant="outlined" size="sm">Copy ID</Button>
      <Button size="sm">View</Button>
    </div>,
  ],
  [
    "user_789",
    "Charlie Rose",
    "Viewer",
    <div className="flex justify-end gap-2">
      <Button variant="outlined" size="sm">Copy ID</Button>
      <Button size="sm">View</Button>
    </div>,
  ],
]}
hover={false}
/>

Props

headers — array. The table headers as strings.
rows — array of arrays. Each array represents a table row with cell content as nodes.

Usage

Import the Table component and pass in a set of headers and rows. Each row should be an array of cells — these can include plain text or interactive components. The Table component can be referenced using the following format:

import Table from "../../components/Table";