Table — uicraft

Default

Basic table with headers and data rows.

html

Invoice	Status	Method	Amount
INV-001	Paid	Credit Card	$250.00
INV-002	Pending	PayPal	$150.00
INV-003	Paid	Bank Transfer	$350.00
INV-004	Overdue	Credit Card	$450.00
INV-005	Paid	PayPal	$550.00

<div class="uc-table-wrap">
  <table class="uc-table">
    <thead>
      <tr><th>Invoice</th><th>Status</th><th>Amount</th></tr>
    </thead>
    <tbody>
      <tr><td>INV-001</td><td>Paid</td><td>$250.00</td></tr>
    </tbody>
  </table>
</div>

With Sorting

Clickable headers with sort direction indicators.

html


Alice Smith	alice@example.com	Admin	Active
Bob Johnson	bob@example.com	Editor	Active
Carol Williams	carol@example.com	Viewer	Inactive
David Miller	david@example.com	Editor	Active

<div class="uc-table-wrap">
  <table class="uc-table">
    <thead>
      <tr>
        <th>
          <button>
            Name
            <svg>...</svg>
          </button>
        </th>
        <th><button>Email<svg>...</svg></button></th>
        ...
      </tr>
    </thead>
    <tbody>
      <tr><td>Alice Smith</td><td>alice@example.com</td>...</tr>
      ...
    </tbody>
  </table>
</div>

With Selection

Checkboxes for selecting individual rows.

html

Invoice	Customer	Date	Amount
INV-001	Acme Corp	Jan 15, 2026	$1,250.00
INV-002	Globex Inc	Jan 20, 2026	$830.00
INV-003	Stark Industries	Feb 01, 2026	$2,100.00
INV-004	Wayne Enterprises	Feb 05, 2026	$675.00

2 of 4 row(s) selected.

<div class="uc-table-wrap">
  <table class="uc-table">
    <thead>
      <tr>
        <th><input type="checkbox"></th>
        <th>Invoice</th>
        <th>Customer</th>
        ...
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="checkbox" checked></td>
        <td>INV-001</td>
        <td>Acme Corp</td>
        ...
      </tr>
      ...
    </tbody>
  </table>
</div>
<p>2 of 4 row(s) selected.</p>

With Pagination

Page controls at the bottom of the table.

html

Invoice	Customer	Status	Amount
INV-011	Acme Corp	Paid	$320.00
INV-012	Globex Inc	Pending	$190.00
INV-013	Initech LLC	Paid	$720.00
INV-014	Umbrella Corp	Paid	$450.00

Showing 11-14 of 42 results

<div class="uc-table-wrap">
  <table class="uc-table">
    <thead>
      <tr><th>Invoice</th><th>Customer</th><th>Status</th><th>Amount</th></tr>
    </thead>
    <tbody>
      <tr><td>INV-011</td><td>Acme Corp</td>...</tr>
      ...
    </tbody>
  </table>
</div>
<div class="uc-flex uc-items-center uc-justify-between uc-mt-4">
  <span>Showing 11-14 of 42 results</span>
  <div class="uc-flex uc-items-center uc-gap-1">
    <button><svg>...</svg></button>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    ...
  </div>
</div>

With Actions

Action buttons in each row for quick operations.

html

Invoice	Customer	Status	Amount
INV-001	Acme Corp	Paid	$250.00
INV-002	Globex Inc	Pending	$150.00
INV-003	Stark Industries	Paid	$350.00
INV-004	Wayne Enterprises	Overdue	$450.00

<div class="uc-table-wrap">
  <table class="uc-table">
    <thead>
      <tr>
        <th>Invoice</th>
        <th>Customer</th>
        <th>Status</th>
        <th>Amount</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>INV-001</td>
        <td>Acme Corp</td>
        <td>Paid</td>
        <td>$250.00</td>
        <td>
          <button title="View"><svg>...</svg></button>
          <button title="Edit"><svg>...</svg></button>
          <button title="Delete"><svg>...</svg></button>
        </td>
      </tr>
      ...
    </tbody>
  </table>
</div>

API Reference

All CSS classes available for the Table component.

Class	Type	Description
`uc-table-wrap`	Base	Scrollable container wrapper for the table
`uc-table`	Base	Base table styles -- full width, border-collapse
`uc-border-b uc-border-border-default`	Structure	Row and header border separator
`uc-bg-neutrals-muted/50`	Structure	Subtle header row background
`uc-px-4 uc-py-3`	Spacing	Standard cell padding
`uc-text-left uc-text-sm uc-font-medium uc-text-fg-disabled`	Typography	Column header text styling
`uc-text-sm uc-font-medium`	Typography	Primary cell text (e.g. invoice number)
`uc-text-sm uc-text-fg-disabled`	Typography	Secondary cell text (e.g. customer name)
`uc-text-right`	Alignment	Right-aligned cell content (e.g. amounts)
`uc-bg-neutrals-subtle/50`	Selection	Background highlight for selected rows
`uc-hover:bg-neutrals-subtle`	Interaction	Row hover effect for action buttons
`uc-bg-accents-blue uc-text-constant-white`	Pagination	Active page button styling

Accessibility

Keyboard and screen reader support.

Feature	Details
Semantics	Use table, thead, tbody, th, td elements for proper table structure
Headers	Use scope="col" on column headers and scope="row" on row headers
Caption	Add caption element or aria-label to describe the table content
Sortable	Sortable columns should have aria-sort="ascending/descending/none"
Responsive	Ensure table data remains accessible when wrapped in scrollable container