Table

Basic table

Basic table — see the example below.

Name	Status	Amount
Project Alpha	Active	$12,400
Project Beta	Draft	$8,200

tsx

import { Table } from "~/components/ui/base/table";

<Table.Root class="max-w-2xl rounded-lg border border-separator-opaque">
  <Table.Header>
    <Table.Row>
      <Table.Head>Name</Table.Head>
      <Table.Head>Status</Table.Head>
      <Table.Head class="text-right">Amount</Table.Head>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell class="font-medium">Project Alpha</Table.Cell>
      <Table.Cell>
        <span class="text-secondary-label">Active</span>
      </Table.Cell>
      <Table.Cell class="text-right">$12,400</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell class="font-medium">Project Beta</Table.Cell>
      <Table.Cell>
        <span class="text-secondary-label">Draft</span>
      </Table.Cell>
      <Table.Cell class="text-right">$8,200</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table.Root>

Caption and Footer

Caption and Footer — see the example below.

Invoicing for Q1
Item	Value
License	99 €
Support	49 €
Total	148 €

tsx

import { Table } from "~/components/ui/base/table";

<Table.Root class="max-w-2xl rounded-lg border border-separator-opaque">
  <Table.Caption>Invoicing for Q1</Table.Caption>
  <Table.Header>
    <Table.Row>
      <Table.Head>Item</Table.Head>
      <Table.Head class="text-right">Value</Table.Head>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell>License</Table.Cell>
      <Table.Cell class="text-right">99 €</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Support</Table.Cell>
      <Table.Cell class="text-right">49 €</Table.Cell>
    </Table.Row>
  </Table.Body>
  <Table.Footer>
    <Table.Row>
      <Table.Cell>Total</Table.Cell>
      <Table.Cell class="text-right font-semibold">148 €</Table.Cell>
    </Table.Row>
  </Table.Footer>
</Table.Root>

Row state

To highlight the selected row, set the data-state="selected" attribute on Table.Row.

Selected row	data-state="selected"
Regular row	hover to highlight

tsx

import { Table } from "~/components/ui/base/table";

<Table.Root class="max-w-xl rounded-lg border border-separator-opaque">
  <Table.Body>
    <Table.Row data-state="selected">
      <Table.Cell>Selected row</Table.Cell>
      <Table.Cell class="text-secondary-label">data-state=&quot;selected&quot;</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Regular row</Table.Cell>
      <Table.Cell class="text-secondary-label">hover to highlight</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table.Root>

Metadata

Source: meta.generated.json (see npm run generate)

File base/table/meta.generated.json not found or path not allowed.