Table

A semantic HTML table with styled components.

$ npx @beaket/ui add table

Invoice	Status	Method	Amount
INV001	Paid	Credit Card	¥25,000
INV002	Pending	PayPal	¥15,000
INV003	Unpaid	Bank Transfer	¥35,000

Source

import { Table } from "@/components/ui/table";

// Sample data
const invoices = [
  { id: "INV001", status: "Paid", method: "Credit Card", amount: "¥25,000" },
  { id: "INV002", status: "Pending", method: "PayPal", amount: "¥15,000" },
  { id: "INV003", status: "Unpaid", method: "Bank Transfer", amount: "¥35,000" },
];

const args = {};

const render = () => (
  <Table>
    <Table.Header>
      <Table.Row>
        <Table.Head>Invoice</Table.Head>
        <Table.Head>Status</Table.Head>
        <Table.Head>Method</Table.Head>
        <Table.Head className="text-right">Amount</Table.Head>
      </Table.Row>
    </Table.Header>
    <Table.Body>
      {invoices.map((invoice) => (
        <Table.Row key={invoice.id}>
          <Table.Cell className="font-medium">{invoice.id}</Table.Cell>
          <Table.Cell>{invoice.status}</Table.Cell>
          <Table.Cell>{invoice.method}</Table.Cell>
          <Table.Cell className="text-right">{invoice.amount}</Table.Cell>
        </Table.Row>
      ))}
    </Table.Body>
  </Table>
);

export default function Example() {
  return render();
}

Examples

All Variants

Basic Table

Name	Role	Salary
Alice	Developer	¥12,000,000
Bob	Designer	¥10,000,000

With Footer

Item	Price
Product A	¥5,000
Product B	¥7,500
Total	¥12,500

Source

import { Table } from "@/components/ui/table";

// Sample data
const invoices = [
  { id: "INV001", status: "Paid", method: "Credit Card", amount: "¥25,000" },
  { id: "INV002", status: "Pending", method: "PayPal", amount: "¥15,000" },
  { id: "INV003", status: "Unpaid", method: "Bank Transfer", amount: "¥35,000" },
  { id: "INV004", status: "Paid", method: "Credit Card", amount: "¥45,000" },
  { id: "INV005", status: "Paid", method: "PayPal", amount: "¥55,000" },
];

export default () => (
  <div className="space-y-8">
    <div>
      <h3 className="mb-2 text-sm font-medium">Basic Table</h3>
      <Table>
        <Table.Header>
          <Table.Row>
            <Table.Head>Name</Table.Head>
            <Table.Head>Role</Table.Head>
            <Table.Head className="text-right">Salary</Table.Head>
          </Table.Row>
        </Table.Header>
        <Table.Body>
          <Table.Row>
            <Table.Cell>Alice</Table.Cell>
            <Table.Cell>Developer</Table.Cell>
            <Table.Cell className="text-right">¥12,000,000</Table.Cell>
          </Table.Row>
          <Table.Row>
            <Table.Cell>Bob</Table.Cell>
            <Table.Cell>Designer</Table.Cell>
            <Table.Cell className="text-right">¥10,000,000</Table.Cell>
          </Table.Row>
        </Table.Body>
      </Table>
    </div>
    <div>
      <h3 className="mb-2 text-sm font-medium">With Footer</h3>
      <Table>
        <Table.Header>
          <Table.Row>
            <Table.Head>Item</Table.Head>
            <Table.Head className="text-right">Price</Table.Head>
          </Table.Row>
        </Table.Header>
        <Table.Body>
          <Table.Row>
            <Table.Cell>Product A</Table.Cell>
            <Table.Cell className="text-right">¥5,000</Table.Cell>
          </Table.Row>
          <Table.Row>
            <Table.Cell>Product B</Table.Cell>
            <Table.Cell className="text-right">¥7,500</Table.Cell>
          </Table.Row>
        </Table.Body>
        <Table.Footer>
          <Table.Row>
            <Table.Cell>Total</Table.Cell>
            <Table.Cell className="text-right">¥12,500</Table.Cell>
          </Table.Row>
        </Table.Footer>
      </Table>
    </div>
  </div>
);

Props

Name	Type	Default	Description
shadow	boolean \| undefined	—	Add offset shadow to the table
scrollLabel	string \| undefined	—	Accessible name of the keyboard-scrollable region. Defaults to the table label or Table.