v1.0.0

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="vt-rounded-xl vt-border vt-overflow-hidden">
  <table class="vt-w-full vt-text-sm">
    <thead>
      <tr class="vt-border-b vt-bg-surfaces-subtle">
        <th>Name</th>
        <th>Email</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <tr class="vt-border-b">
        <td>Alice</td>
        <td>alice@example.com</td>
        <td><span class="vt-status-pill vt-tone-info">Paid</span></td>
      </tr>
      <tr class="vt-border-b">
        <td>Bob</td>
        <td>bob@example.com</td>
        <td><span class="vt-status-pill vt-tone-warning">Pending</span></td>
      </tr>
      <tr>
        <td>Carol</td>
        <td>carol@example.com</td>
        <td><span class="vt-status-pill vt-tone-danger">Failed</span></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="vt-rounded-xl vt-border vt-overflow-hidden">
  <table class="vt-w-full vt-text-sm">
    <thead>
      <tr class="vt-border-b vt-bg-surfaces-subtle">
        <th class="vt-px-4 vt-py-3">
          <button class="vt-inline-flex vt-items-center vt-gap-1">
            Name
            <svg>...</svg>
          </button>
        </th>
        <th class="vt-px-4 vt-py-3">
          <button class="vt-inline-flex vt-items-center vt-gap-1">
            Email
            <svg>...</svg>
          </button>
        </th>
        ...
      </tr>
    </thead>
    <tbody>
      <tr class="vt-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="vt-rounded-xl vt-border vt-overflow-hidden">
  <table class="vt-w-full vt-text-sm">
    <thead>
      <tr class="vt-border-b vt-bg-surfaces-subtle">
        <th class="vt-px-4 vt-py-3">Name</th>
        <th class="vt-px-4 vt-py-3">Email</th>
        <th class="vt-px-4 vt-py-3">Status</th>
        <th class="vt-px-4 vt-py-3">Amount</th>
      </tr>
    </thead>
    <tbody>
      <tr class="vt-border-b">
        <td>Alice Johnson</td>
        <td>alice@example.com</td>
        ...
      </tr>
      <tr class="vt-border-b vt-bg-surfaces-moderate/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="vt-rounded-xl vt-border vt-overflow-hidden">
  <table class="vt-w-full vt-text-sm">
    <thead>
      <tr class="vt-border-b vt-bg-surfaces-subtle">
        <th class="vt-w-10 vt-px-4 vt-py-3">
          <input type="checkbox" class="vt-h-4 vt-w-4 vt-rounded">
        </th>
        <th class="vt-px-4 vt-py-3">Name</th>
        ...
      </tr>
    </thead>
    <tbody>
      <tr class="vt-border-b vt-bg-info-primary/5">
        <td class="vt-w-10 vt-px-4 vt-py-3">
          <input type="checkbox" checked class="vt-h-4 vt-w-4 vt-rounded">
        </td>
        <td>Alice Johnson</td>
        ...
      </tr>
      <tr class="vt-border-b">
        <td class="vt-w-10 vt-px-4 vt-py-3">
          <input type="checkbox" class="vt-h-4 vt-w-4 vt-rounded">
        </td>
        <td>Bob Smith</td>
        ...
      </tr>
    </tbody>
  </table>
</div>
<p class="vt-text-sm vt-text-mains-quaternary vt-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="vt-rounded-xl vt-border vt-overflow-hidden">
  <table class="vt-w-full vt-text-sm">
    <thead>
      <tr class="vt-border-b vt-bg-surfaces-subtle">
        <th class="vt-px-3 vt-py-1.5 vt-text-xs">Name</th>
        <th class="vt-px-3 vt-py-1.5 vt-text-xs">Email</th>
        <th class="vt-px-3 vt-py-1.5 vt-text-xs">Status</th>
        <th class="vt-px-3 vt-py-1.5 vt-text-xs">Amount</th>
      </tr>
    </thead>
    <tbody>
      <tr class="vt-border-b">
        <td class="vt-px-3 vt-py-1.5">Alice Johnson</td>
        <td class="vt-px-3 vt-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="vt-rounded-xl vt-border vt-overflow-hidden">
  <table class="vt-w-full vt-text-sm">
    <thead>
      <tr class="vt-border-b vt-bg-surfaces-subtle">
        <th class="vt-px-4 vt-py-3">Name</th>
        <th class="vt-px-4 vt-py-3">Email</th>
        <th class="vt-px-4 vt-py-3">Status</th>
        <th class="vt-px-4 vt-py-3">Amount</th>
      </tr>
    </thead>
    <tbody>
      <tr class="vt-border-b">
        <td>Alice Johnson</td>
        <td>alice@example.com</td>
        ...
      </tr>
      ...
    </tbody>
  </table>
</div>
<div class="vt-flex vt-items-center vt-justify-between vt-mt-4">
  <span class="vt-text-sm vt-text-mains-quaternary">1-10 of 100 results</span>
  <div class="vt-flex vt-items-center vt-gap-1">
    <button class="vt-page-btn vt-h-9 vt-w-9 vt-min-w-0" disabled><svg>...</svg></button>
    <button class="vt-page-btn vt-active vt-h-9 vt-w-9 vt-min-w-0">1</button>
    <button class="vt-page-btn vt-h-9 vt-w-9 vt-min-w-0">2</button>
    ...
  </div>
</div>

Anatomy

HTML structure of the Data Table component.

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

API Reference

All CSS classes available for the Data Table component.

Class Type Description
vt-rounded-xl vt-border vt-overflow-hidden Base Table container — rounded corners with border
vt-border-collapse Base Collapse table borders for clean lines
vt-bg-surfaces-subtle Variant Header row background tint
vt-bg-surfaces-moderate/30 Variant Striped row background (every other row)
vt-bg-info-primary/5 State Selected row highlight
vt-px-4 vt-py-3 Size Default cell padding
vt-px-3 vt-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
Built with:
Badge Button Checkbox Pagination