v1.1.1

Table

Displays tabular data with rows and columns.

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="vt-table-wrap">
  <table class="vt-table">
    <thead>
      <tr>
        <th>Invoice</th>
        <th>Status</th>
        <th>Method</th>
        <th class="vt-text-right">Amount</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="vt-font-medium">INV-001</td>
        <td><div class="vt-badge vt-badge-soft vt-badge-info">
            Paid
          </div></td>
        <td class="vt-text-foreground-muted">Credit Card</td>
        <td class="vt-text-right">$250.00</td>
      </tr>
      <tr>
        <td class="vt-font-medium">INV-002</td>
        <td><div class="vt-badge vt-bg-warning-fill/15 vt-text-foreground-primary vt-border-transparent">
            Pending
          </div></td>
        <td class="vt-text-foreground-muted">PayPal</td>
        <td class="vt-text-right">$150.00</td>
      </tr>
      <tr>
        <td class="vt-font-medium">INV-003</td>
        <td><div class="vt-badge vt-badge-soft vt-badge-info">
            Paid
          </div></td>
        <td class="vt-text-foreground-muted">Bank Transfer</td>
        <td class="vt-text-right">$350.00</td>
      </tr>
      <tr>
        <td class="vt-font-medium">INV-004</td>
        <td><div class="vt-badge vt-bg-error-fill/15 vt-text-error-fill vt-border-transparent">
            Overdue
          </div></td>
        <td class="vt-text-foreground-muted">Credit Card</td>
        <td class="vt-text-right">$450.00</td>
      </tr>
      <tr>
        <td class="vt-font-medium">INV-005</td>
        <td><div class="vt-badge vt-badge-soft vt-badge-info">
            Paid
          </div></td>
        <td class="vt-text-foreground-muted">PayPal</td>
        <td class="vt-text-right">$550.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="vt-table-wrap">
  <table class="vt-table">
    <thead>
      <tr>
        <th>
          <button class="vt-inline-flex vt-items-center vt-gap-1 vt-hover:text-foreground-primary vt-transition-colors">
            Name
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-arrow-up vt-w-3.5 vt-h-3.5">
              <path d="m5 12 7-7 7 7"></path><path d="M12 19V5"></path>
            </svg>
          </button>
        </th>
        <th>
          <button class="vt-inline-flex vt-items-center vt-gap-1 vt-hover:text-foreground-primary vt-transition-colors">
            Email
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevrons-up-down vt-w-3.5 vt-h-3.5 vt-opacity-0">
              <path d="m7 15 5 5 5-5"></path><path d="m7 9 5-5 5 5"></path>
            </svg>
          </button>
        </th>
        <th>
          <button class="vt-inline-flex vt-items-center vt-gap-1 vt-hover:text-foreground-primary vt-transition-colors">
            Role
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevrons-up-down vt-w-3.5 vt-h-3.5 vt-opacity-0">
              <path d="m7 15 5 5 5-5"></path><path d="m7 9 5-5 5 5"></path>
            </svg>
          </button>
        </th>
        <th>
          <button class="vt-inline-flex vt-items-center vt-gap-1 vt-hover:text-foreground-primary vt-transition-colors">
            Status
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevrons-up-down vt-w-3.5 vt-h-3.5 vt-opacity-0">
              <path d="m7 15 5 5 5-5"></path><path d="m7 9 5-5 5 5"></path>
            </svg>
          </button>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="vt-font-medium">Alice Smith</td>
        <td class="vt-text-foreground-muted">alice@example.com</td>
        <td class="vt-text-foreground-muted">Admin</td>
        <td><div class="vt-badge vt-badge-soft vt-badge-info">
            Active
          </div></td>
      </tr>
      <tr>
        <td class="vt-font-medium">Bob Johnson</td>
        <td class="vt-text-foreground-muted">bob@example.com</td>
        <td class="vt-text-foreground-muted">Editor</td>
        <td><div class="vt-badge vt-badge-soft vt-badge-info">
            Active
          </div></td>
      </tr>
      <tr>
        <td class="vt-font-medium">Carol Williams</td>
        <td class="vt-text-foreground-muted">carol@example.com</td>
        <td class="vt-text-foreground-muted">Viewer</td>
        <td><div class="vt-badge vt-bg-warning-fill/15 vt-text-foreground-primary vt-border-transparent">
            Inactive
          </div></td>
      </tr>
      <tr>
        <td class="vt-font-medium">David Miller</td>
        <td class="vt-text-foreground-muted">david@example.com</td>
        <td class="vt-text-foreground-muted">Editor</td>
        <td><div class="vt-badge vt-badge-soft vt-badge-info">
            Active
          </div></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-table-wrap">
  <table class="vt-table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Status</th>
        <th class="vt-text-right">Amount</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="vt-font-medium">Alice Johnson</td>
        <td class="vt-text-foreground-muted">alice@example.com</td>
        <td><span class="vt-badge vt-badge-soft vt-badge-info">Paid</span></td>
        <td class="vt-text-right">$1,250.00</td>
      </tr>
      <tr class="vt-border-b vt-border-border-default vt-bg-surface-moderate/30">
        <td class="vt-font-medium">Bob Smith</td>
        <td class="vt-text-foreground-muted">bob@example.com</td>
        <td><span class="vt-badge vt-badge-soft vt-badge-warning">Pending</span></td>
        <td class="vt-text-right">$830.00</td>
      </tr>
      <tr>
        <td class="vt-font-medium">Carol Williams</td>
        <td class="vt-text-foreground-muted">carol@example.com</td>
        <td><span class="vt-badge vt-badge-soft vt-badge-info">Paid</span></td>
        <td class="vt-text-right">$2,100.00</td>
      </tr>
      <tr class="vt-border-b vt-border-border-default vt-bg-surface-moderate/30">
        <td class="vt-font-medium">David Brown</td>
        <td class="vt-text-foreground-muted">david@example.com</td>
        <td><span class="vt-badge vt-badge-soft vt-badge-danger">Failed</span></td>
        <td class="vt-text-right">$475.00</td>
      </tr>
      <tr>
        <td class="vt-font-medium">Emma Davis</td>
        <td class="vt-text-foreground-muted">emma@example.com</td>
        <td><span class="vt-badge vt-badge-soft vt-badge-info">Paid</span></td>
        <td class="vt-text-right">$3,200.00</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="vt-table-wrap">
  <table class="vt-table">
    <thead>
      <tr>
        <th class="vt-w-10">
          <span class="vt-checkbox"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-check check-icon vt-w-3 vt-h-3">
              <path d="M20 6 9 17l-5-5"></path>
            </svg></span>
        </th>
        <th>Invoice</th>
        <th>Customer</th>
        <th>Date</th>
        <th class="vt-text-right">Amount</th>
      </tr>
    </thead>
    <tbody>
      <tr class="vt-bg-surface-subtle/50">
        <td class="vt-w-10">
          <span class="vt-checkbox checked"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-check check-icon vt-w-3 vt-h-3">
              <path d="M20 6 9 17l-5-5"></path>
            </svg></span>
        </td>
        <td class="vt-font-medium">INV-001</td>
        <td class="vt-text-foreground-muted">Acme Corp</td>
        <td class="vt-text-foreground-muted">Jan 15, 2026</td>
        <td class="vt-text-right">$1,250.00</td>
      </tr>
      <tr>
        <td class="vt-w-10">
          <span class="vt-checkbox"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-check check-icon vt-w-3 vt-h-3">
              <path d="M20 6 9 17l-5-5"></path>
            </svg></span>
        </td>
        <td class="vt-font-medium">INV-002</td>
        <td class="vt-text-foreground-muted">Globex Inc</td>
        <td class="vt-text-foreground-muted">Jan 20, 2026</td>
        <td class="vt-text-right">$830.00</td>
      </tr>
      <tr class="vt-bg-surface-subtle/50">
        <td class="vt-w-10">
          <span class="vt-checkbox checked"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-check check-icon vt-w-3 vt-h-3">
              <path d="M20 6 9 17l-5-5"></path>
            </svg></span>
        </td>
        <td class="vt-font-medium">INV-003</td>
        <td class="vt-text-foreground-muted">Stark Industries</td>
        <td class="vt-text-foreground-muted">Feb 01, 2026</td>
        <td class="vt-text-right">$2,100.00</td>
      </tr>
      <tr>
        <td class="vt-w-10">
          <span class="vt-checkbox"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-check check-icon vt-w-3 vt-h-3">
              <path d="M20 6 9 17l-5-5"></path>
            </svg></span>
        </td>
        <td class="vt-font-medium">INV-004</td>
        <td class="vt-text-foreground-muted">Wayne Enterprises</td>
        <td class="vt-text-foreground-muted">Feb 05, 2026</td>
        <td class="vt-text-right">$675.00</td>
      </tr>
    </tbody>
  </table>
</div>
<p class="vt-text-sm vt-text-foreground-muted vt-mt-3">2 of 4 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-table-wrap">
  <table class="vt-table vt-table-compact">
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Status</th>
        <th class="vt-text-right">Amount</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="vt-font-medium">Alice Johnson</td>
        <td class="vt-text-foreground-muted">alice@example.com</td>
        <td><span class="vt-badge vt-badge-soft vt-badge-info">Paid</span></td>
        <td class="vt-text-right">$1,250.00</td>
      </tr>
      <tr>
        <td class="vt-font-medium">Bob Smith</td>
        <td class="vt-text-foreground-muted">bob@example.com</td>
        <td><span class="vt-badge vt-badge-soft vt-badge-warning">Pending</span></td>
        <td class="vt-text-right">$830.00</td>
      </tr>
      <tr>
        <td class="vt-font-medium">Carol Williams</td>
        <td class="vt-text-foreground-muted">carol@example.com</td>
        <td><span class="vt-badge vt-badge-soft vt-badge-info">Paid</span></td>
        <td class="vt-text-right">$2,100.00</td>
      </tr>
      <tr>
        <td class="vt-font-medium">David Brown</td>
        <td class="vt-text-foreground-muted">david@example.com</td>
        <td><span class="vt-badge vt-badge-soft vt-badge-danger">Failed</span></td>
        <td class="vt-text-right">$475.00</td>
      </tr>
      <tr>
        <td class="vt-font-medium">Emma Davis</td>
        <td class="vt-text-foreground-muted">emma@example.com</td>
        <td><span class="vt-badge vt-badge-soft vt-badge-info">Paid</span></td>
        <td class="vt-text-right">$3,200.00</td>
      </tr>
      <tr>
        <td class="vt-font-medium">Frank Miller</td>
        <td class="vt-text-foreground-muted">frank@example.com</td>
        <td><span class="vt-badge vt-badge-soft vt-badge-warning">Pending</span></td>
        <td class="vt-text-right">$620.00</td>
      </tr>
      <tr>
        <td class="vt-font-medium">Grace Lee</td>
        <td class="vt-text-foreground-muted">grace@example.com</td>
        <td><span class="vt-badge vt-badge-soft vt-badge-info">Paid</span></td>
        <td class="vt-text-right">$1,890.00</td>
      </tr>
      <tr>
        <td class="vt-font-medium">Henry Wilson</td>
        <td class="vt-text-foreground-muted">henry@example.com</td>
        <td><span class="vt-badge vt-badge-soft vt-badge-info">Paid</span></td>
        <td class="vt-text-right">$540.00</td>
      </tr>
    </tbody>
  </table>
</div>

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="vt-table-wrap">
  <table class="vt-table">
    <thead>
      <tr>
        <th>Invoice</th>
        <th>Customer</th>
        <th>Status</th>
        <th class="vt-text-right">Amount</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="vt-font-medium">INV-011</td>
        <td class="vt-text-foreground-muted">Acme Corp</td>
        <td><div class="vt-badge vt-badge-soft vt-badge-info">
            Paid
          </div></td>
        <td class="vt-text-right">$320.00</td>
      </tr>
      <tr>
        <td class="vt-font-medium">INV-012</td>
        <td class="vt-text-foreground-muted">Globex Inc</td>
        <td><div class="vt-badge vt-bg-warning-fill/15 vt-text-foreground-primary vt-border-transparent">
            Pending
          </div></td>
        <td class="vt-text-right">$190.00</td>
      </tr>
      <tr>
        <td class="vt-font-medium">INV-013</td>
        <td class="vt-text-foreground-muted">Initech LLC</td>
        <td><div class="vt-badge vt-badge-soft vt-badge-info">
            Paid
          </div></td>
        <td class="vt-text-right">$720.00</td>
      </tr>
      <tr>
        <td class="vt-font-medium">INV-014</td>
        <td class="vt-text-foreground-muted">Umbrella Corp</td>
        <td><div class="vt-badge vt-badge-soft vt-badge-info">
            Paid
          </div></td>
        <td class="vt-text-right">$450.00</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-foreground-muted">Showing 11-14 of 42 results</span>
  <div class="vt-flex vt-items-center vt-gap-1">
    <button class="vt-page-btn" title="First page">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevrons-left vt-w-4 vt-h-4">
        <path d="m11 17-5-5 5-5"></path><path d="m18 17-5-5 5-5"></path>
      </svg>
    </button>
    <button class="vt-page-btn" title="Previous page">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-left vt-w-4 vt-h-4">
        <path d="m15 18-6-6 6-6"></path>
      </svg>
    </button>
    <button class="vt-page-btn">1</button>
    <button class="vt-page-btn">2</button>
    <button class="vt-page-btn vt-active">3</button>
    <button class="vt-page-btn">4</button>
    <button class="vt-page-btn">...</button>
    <button class="vt-page-btn">11</button>
    <button class="vt-page-btn" title="Next page">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-right vt-w-4 vt-h-4">
        <path d="m9 18 6-6-6-6"></path>
      </svg>
    </button>
    <button class="vt-page-btn" title="Last page">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevrons-right vt-w-4 vt-h-4">
        <path d="m6 17 5-5-5-5"></path><path d="m13 17 5-5-5-5"></path>
      </svg>
    </button>
  </div>
</div>

With Actions

Action buttons in each row for quick operations.

html
Invoice Customer Status Amount Actions
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="vt-table-wrap">
  <table class="vt-table">
    <thead>
      <tr>
        <th>Invoice</th>
        <th>Customer</th>
        <th>Status</th>
        <th class="vt-text-right">Amount</th>
        <th class="vt-text-right">Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="vt-font-medium">INV-001</td>
        <td class="vt-text-foreground-muted">Acme Corp</td>
        <td><div class="vt-badge vt-badge-soft vt-badge-info">
            Paid
          </div></td>
        <td class="vt-text-right">$250.00</td>
        <td class="vt-text-right">
          <div class="vt-flex vt-items-center vt-justify-end vt-gap-1">
            <button class="vt-btn vt-btn-ghost vt-h-8 vt-w-8 vt-p-0" title="View">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-eye vt-w-4 vt-h-4">
                <path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"></path><circle cx="12" cy="12" r="3"></circle>
              </svg>
            </button>
            <button class="vt-btn vt-btn-ghost vt-h-8 vt-w-8 vt-p-0" title="Edit">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-pencil vt-w-4 vt-h-4">
                <path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"></path><path d="m15 5 4 4"></path>
              </svg>
            </button>
            <button class="vt-btn vt-btn-ghost vt-h-8 vt-w-8 vt-p-0 vt-hover:bg-error-fill/10 vt-hover:text-error-fill" title="Delete">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-trash-2 vt-w-4 vt-h-4">
                <path d="M10 11v6"></path><path d="M14 11v6"></path><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path><path d="M3 6h18"></path><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
              </svg>
            </button>
          </div>
        </td>
      </tr>
      <tr>
        <td class="vt-font-medium">INV-002</td>
        <td class="vt-text-foreground-muted">Globex Inc</td>
        <td><div class="vt-badge vt-bg-warning-fill/15 vt-text-foreground-primary vt-border-transparent">
            Pending
          </div></td>
        <td class="vt-text-right">$150.00</td>
        <td class="vt-text-right">
          <div class="vt-flex vt-items-center vt-justify-end vt-gap-1">
            <button class="vt-btn vt-btn-ghost vt-h-8 vt-w-8 vt-p-0" title="View">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-eye vt-w-4 vt-h-4">
                <path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"></path><circle cx="12" cy="12" r="3"></circle>
              </svg>
            </button>
            <button class="vt-btn vt-btn-ghost vt-h-8 vt-w-8 vt-p-0" title="Edit">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-pencil vt-w-4 vt-h-4">
                <path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"></path><path d="m15 5 4 4"></path>
              </svg>
            </button>
            <button class="vt-btn vt-btn-ghost vt-h-8 vt-w-8 vt-p-0 vt-hover:bg-error-fill/10 vt-hover:text-error-fill" title="Delete">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-trash-2 vt-w-4 vt-h-4">
                <path d="M10 11v6"></path><path d="M14 11v6"></path><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path><path d="M3 6h18"></path><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
              </svg>
            </button>
          </div>
        </td>
      </tr>
      <tr>
        <td class="vt-font-medium">INV-003</td>
        <td class="vt-text-foreground-muted">Stark Industries</td>
        <td><div class="vt-badge vt-badge-soft vt-badge-info">
            Paid
          </div></td>
        <td class="vt-text-right">$350.00</td>
        <td class="vt-text-right">
          <div class="vt-flex vt-items-center vt-justify-end vt-gap-1">
            <button class="vt-btn vt-btn-ghost vt-h-8 vt-w-8 vt-p-0" title="View">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-eye vt-w-4 vt-h-4">
                <path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"></path><circle cx="12" cy="12" r="3"></circle>
              </svg>
            </button>
            <button class="vt-btn vt-btn-ghost vt-h-8 vt-w-8 vt-p-0" title="Edit">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-pencil vt-w-4 vt-h-4">
                <path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"></path><path d="m15 5 4 4"></path>
              </svg>
            </button>
            <button class="vt-btn vt-btn-ghost vt-h-8 vt-w-8 vt-p-0 vt-hover:bg-error-fill/10 vt-hover:text-error-fill" title="Delete">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-trash-2 vt-w-4 vt-h-4">
                <path d="M10 11v6"></path><path d="M14 11v6"></path><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path><path d="M3 6h18"></path><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
              </svg>
            </button>
          </div>
        </td>
      </tr>
      <tr>
        <td class="vt-font-medium">INV-004</td>
        <td class="vt-text-foreground-muted">Wayne Enterprises</td>
        <td><div class="vt-badge vt-bg-error-fill/15 vt-text-error-fill vt-border-transparent">
            Overdue
          </div></td>
        <td class="vt-text-right">$450.00</td>
        <td class="vt-text-right">
          <div class="vt-flex vt-items-center vt-justify-end vt-gap-1">
            <button class="vt-btn vt-btn-ghost vt-h-8 vt-w-8 vt-p-0" title="View">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-eye vt-w-4 vt-h-4">
                <path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"></path><circle cx="12" cy="12" r="3"></circle>
              </svg>
            </button>
            <button class="vt-btn vt-btn-ghost vt-h-8 vt-w-8 vt-p-0" title="Edit">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-pencil vt-w-4 vt-h-4">
                <path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"></path><path d="m15 5 4 4"></path>
              </svg>
            </button>
            <button class="vt-btn vt-btn-ghost vt-h-8 vt-w-8 vt-p-0 vt-hover:bg-error-fill/10 vt-hover:text-error-fill" title="Delete">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-trash-2 vt-w-4 vt-h-4">
                <path d="M10 11v6"></path><path d="M14 11v6"></path><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path><path d="M3 6h18"></path><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
              </svg>
            </button>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Guidelines

Dense tabular data with columns — including sorting, selection, striping, density and pagination. Mixed-content rows (icon + text + meta) → list + list-item.

Invoice Status Amount
INV-001
Paid
$250.00
INV-002
Paid
$150.00
Do
Use a table for columnar data; right-align numeric amounts.
Team member
Alice Smith
Bob Johnson
Carol Williams
Don't
Don't use a table for a single-column list — use a list instead.
Name Amount
Alice Johnson $1,250.00
Bob Smith $830.00
Do
Right-align numeric columns so digits line up.
Name Amount
Alice Johnson $1,250.00
Bob Smith $830.00
Don't
Don't left-align numbers — the digits stop lining up.
Name Status
Alice Johnson Paid
Bob Smith Pending
Do
Use status badges so states are scannable at a glance.
Name Status
Alice Johnson Paid
Bob Smith Pending
Don't
Don't bury status in plain text that blends into the row.

Anatomy

HTML structure of the Table component.

div.vt-table-wrap                          ← Scrollable container
└── table.vt-table                         ← Table element
    ├── thead
    │   └── tr
    │       ├── th                         ← Column header
    │       └── th > button                ← Sortable column header
    └── tbody
        └── tr
            ├── td                         ← Data cell
            ├── td > input[checkbox]       ← Optional row selection
            └── td > span.vt-badge         ← Status badge (soft)

API Reference

All CSS classes available for the Table component.

Class Type Description
vt-table-wrap Base Scrollable container wrapper for the table
vt-table Base Base table styles -- full width, border-collapse
vt-table-compact Size Tighter cell padding on the same table
vt-bg-surface-moderate/30 Variant Striped row background (every other row)
vt-bg-surface-subtle/50 Selection Tint for a selected row — separators come from .vt-table itself
vt-bg-surface-moderate/50 Structure Subtle header row background
vt-px-4 vt-py-3 Spacing Standard cell padding
vt-text-left vt-text-sm vt-font-medium vt-text-foreground-muted Typography Column header text styling
vt-text-sm vt-font-medium Typography Primary cell text (e.g. invoice number)
vt-text-sm vt-text-foreground-muted Typography Secondary cell text (e.g. customer name)
vt-text-right Alignment Right-aligned cell content (e.g. amounts)
vt-bg-surface-subtle/50 Selection Background highlight for selected rows
vt-hover:bg-surface-subtle Interaction Row hover effect for action buttons
vt-page-btn vt-active 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
Built with:
Checkbox Button Badge Pagination Icons