Data Table

Enhanced table with interactive features like sorting, selection, and pagination.

Default

A data table with status badges and formatted columns.

html
Name Email Status Amount
Alice Johnson alice@example.com Paid $1,250.00
Bob Smith bob@example.com Pending $830.00
Carol Williams carol@example.com Paid $2,100.00
David Brown david@example.com Failed $475.00
Emma Davis emma@example.com Paid $3,200.00 
<div class="uc-rounded-2xl uc-border uc-overflow-hidden">
  <table class="uc-w-full uc-text-sm">
    <thead>
      <tr class="uc-border-b uc-bg-neutrals-muted/50">
        <th>Name</th>
        <th>Email</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <tr class="uc-border-b">
        <td>Alice</td>
        <td>alice@example.com</td>
        <td>Paid</td>
      </tr>
    </tbody>
  </table>
</div>

With Sorting

Clickable column headers with sort direction indicators.

html
Alice Johnson alice@example.com Paid $1,250.00
Bob Smith bob@example.com Pending $830.00
Carol Williams carol@example.com Paid $2,100.00
David Brown david@example.com Failed $475.00
Emma Davis emma@example.com Paid $3,200.00 
<div class="uc-rounded-2xl uc-border uc-overflow-hidden">
  <table class="uc-w-full uc-text-sm">
    <thead>
      <tr class="uc-border-b uc-bg-neutrals-muted/50">
        <th class="uc-px-4 uc-py-3">
          <button class="uc-inline-flex uc-items-center uc-gap-1">
            Name
            <svg>...</svg>
          </button>
        </th>
        <th class="uc-px-4 uc-py-3">
          <button class="uc-inline-flex uc-items-center uc-gap-1">
            Email
            <svg>...</svg>
          </button>
        </th>
        ...
      </tr>
    </thead>
    <tbody>
      <tr class="uc-border-b">
        <td>Alice Johnson</td>
        <td>alice@example.com</td>
        ...
      </tr>
    </tbody>
  </table>
</div>

Striped

Alternating row colors for improved readability.

html
Name Email Status Amount
Alice Johnson alice@example.com Paid $1,250.00
Bob Smith bob@example.com Pending $830.00
Carol Williams carol@example.com Paid $2,100.00
David Brown david@example.com Failed $475.00
Emma Davis emma@example.com Paid $3,200.00 
<div class="uc-rounded-2xl uc-border uc-overflow-hidden">
  <table class="uc-w-full uc-text-sm">
    <thead>
      <tr class="uc-border-b uc-bg-neutrals-muted/50">
        <th class="uc-px-4 uc-py-3">Name</th>
        <th class="uc-px-4 uc-py-3">Email</th>
        <th class="uc-px-4 uc-py-3">Status</th>
        <th class="uc-px-4 uc-py-3">Amount</th>
      </tr>
    </thead>
    <tbody>
      <tr class="uc-border-b">
        <td>Alice Johnson</td>
        <td>alice@example.com</td>
        ...
      </tr>
      <tr class="uc-border-b uc-bg-neutrals-muted/30">
        <td>Bob Smith</td>
        <td>bob@example.com</td>
        ...
      </tr>
      ...
    </tbody>
  </table>
</div>

With Selection

Row selection with highlighted state.

html
Name Email Status Amount
Alice Johnson alice@example.com Paid $1,250.00
Bob Smith bob@example.com Pending $830.00
Carol Williams carol@example.com Paid $2,100.00
David Brown david@example.com Failed $475.00
Emma Davis emma@example.com Paid $3,200.00

2 of 5 row(s) selected.

<div class="uc-rounded-2xl uc-border uc-overflow-hidden">
  <table class="uc-w-full uc-text-sm">
    <thead>
      <tr class="uc-border-b uc-bg-neutrals-muted/50">
        <th class="uc-w-10 uc-px-4 uc-py-3">
          <input type="checkbox" class="uc-h-4 uc-w-4 uc-rounded">
        </th>
        <th class="uc-px-4 uc-py-3">Name</th>
        ...
      </tr>
    </thead>
    <tbody>
      <tr class="uc-border-b uc-bg-accents-blue/5">
        <td class="uc-w-10 uc-px-4 uc-py-3">
          <input type="checkbox" checked class="uc-h-4 uc-w-4 uc-rounded">
        </td>
        <td>Alice Johnson</td>
        ...
      </tr>
      <tr class="uc-border-b">
        <td class="uc-w-10 uc-px-4 uc-py-3">
          <input type="checkbox" class="uc-h-4 uc-w-4 uc-rounded">
        </td>
        <td>Bob Smith</td>
        ...
      </tr>
    </tbody>
  </table>
</div>
<p class="uc-text-sm uc-text-fg-disabled uc-mt-3">2 of 5 row(s) selected.</p>

Compact

Denser layout with reduced padding for large datasets.

html
Name Email Status Amount
Alice Johnson alice@example.com Paid $1,250.00
Bob Smith bob@example.com Pending $830.00
Carol Williams carol@example.com Paid $2,100.00
David Brown david@example.com Failed $475.00
Emma Davis emma@example.com Paid $3,200.00
Frank Miller frank@example.com Pending $620.00
Grace Lee grace@example.com Paid $1,890.00
Henry Wilson henry@example.com Paid $540.00 
<div class="uc-rounded-2xl uc-border uc-overflow-hidden">
  <table class="uc-w-full uc-text-sm">
    <thead>
      <tr class="uc-border-b uc-bg-neutrals-muted/50">
        <th class="uc-px-3 uc-py-1.5 uc-text-xs">Name</th>
        <th class="uc-px-3 uc-py-1.5 uc-text-xs">Email</th>
        <th class="uc-px-3 uc-py-1.5 uc-text-xs">Status</th>
        <th class="uc-px-3 uc-py-1.5 uc-text-xs">Amount</th>
      </tr>
    </thead>
    <tbody>
      <tr class="uc-border-b">
        <td class="uc-px-3 uc-py-1.5">Alice Johnson</td>
        <td class="uc-px-3 uc-py-1.5">alice@example.com</td>
        ...
      </tr>
      ...
    </tbody>
  </table>
</div>

With Pagination

Table with page controls for navigating large datasets.

html
Name Email Status Amount
Alice Johnson alice@example.com Paid $1,250.00
Bob Smith bob@example.com Pending $830.00
Carol Williams carol@example.com Paid $2,100.00
David Brown david@example.com Failed $475.00
Emma Davis emma@example.com Paid $3,200.00
1-10 of 100 results 
<div class="uc-rounded-2xl uc-border uc-overflow-hidden">
  <table class="uc-w-full uc-text-sm">
    <thead>
      <tr class="uc-border-b uc-bg-neutrals-muted/50">
        <th class="uc-px-4 uc-py-3">Name</th>
        <th class="uc-px-4 uc-py-3">Email</th>
        <th class="uc-px-4 uc-py-3">Status</th>
        <th class="uc-px-4 uc-py-3">Amount</th>
      </tr>
    </thead>
    <tbody>
      <tr class="uc-border-b">
        <td>Alice Johnson</td>
        <td>alice@example.com</td>
        ...
      </tr>
      ...
    </tbody>
  </table>
</div>
<div class="uc-flex uc-items-center uc-justify-between uc-mt-4">
  <span class="uc-text-sm uc-text-fg-disabled">1-10 of 100 results</span>
  <div class="uc-flex uc-items-center uc-gap-1">
    <button class="uc-h-9 uc-w-9" disabled><svg>...</svg></button>
    <button class="uc-h-9 uc-w-9 uc-bg-accents-blue">1</button>
    <button class="uc-h-9 uc-w-9">2</button>
    ...
  </div>
</div>

Anatomy

HTML structure of the Data Table component.

div.uc-rounded-2xl.uc-border            ← Table container
└── table.uc-w-full.uc-text-sm            ← Table element
    ├── thead
    │   └── tr.uc-border-b.uc-bg-neutrals-muted/50
    │       ├── th (checkbox)              ← Optional select-all
    │       ├── th                         ← Column header
    │       └── th > button                ← Sortable header
    └── tbody
        └── tr.uc-border-b
            ├── td (checkbox)              ← Optional row select
            ├── td                         ← Data cell
            └── td > span.uc-rounded-full  ← Status badge

API Reference

All CSS classes available for the Data Table component.

Class Type Description
uc-rounded-2xl uc-border uc-overflow-hidden Base Table container — rounded corners with border
uc-border-collapse Base Collapse table borders for clean lines
uc-bg-neutrals-muted/50 Variant Header row background tint
uc-bg-neutrals-muted/30 Variant Striped row background (every other row)
uc-bg-accents-blue/5 State Selected row highlight
uc-px-4 uc-py-3 Size Default cell padding
uc-px-3 uc-py-1.5 Size Compact cell padding

Accessibility

Keyboard and screen reader support.

Feature Details
Semantics Uses native <table>, <thead>, <tbody>, <th>, <td> elements
Selection Checkbox inputs with proper association for row selection
Sorting Sort buttons in <th> — add aria-sort="ascending" or "descending"
Pagination Navigation buttons with title attributes describing the action
Disabled state Disabled pagination buttons use disabled attribute + visual cue