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";