Data

Tables

Tables are styled automatically with semantic HTML. Add modifier classes for bordered, striped, hoverable, and simple variants.

Default

Standard Table

Name Email Role Status
Jane Cooper jane@example.com Admin ● Active
John Smith john@example.com Editor ● Active
Bob Johnson bob@example.com Viewer ● Inactive
Alice Williams alice@example.com Editor ● Active
Charlie Brown charlie@example.com Viewer ○ Pending 
<table>
  <thead>
    <tr><th>Name</th><th>Email</th><th>Role</th></tr>
  </thead>
  <tbody>
    <tr><td>Jane</td><td>jane@example.com</td><td>Admin</td></tr>
  </tbody>
</table>

Bordered

Bordered Table

Name Email Role Status
Jane Cooper jane@example.com Admin Active
John Smith john@example.com Editor Active
Bob Johnson bob@example.com Viewer Inactive 
<table class="table-bordered">
  <thead>
    <tr><th>Name</th><th>Email</th></tr>
  </thead>
  <tbody>
    <tr><td>Jane</td><td>jane@example.com</td></tr>
  </tbody>
</table>

Striped

Striped Table

Name Email Role Status
Jane Cooper jane@example.com Admin Active
John Smith john@example.com Editor Active
Bob Johnson bob@example.com Viewer Inactive
Alice Williams alice@example.com Editor Active
Charlie Brown charlie@example.com Viewer Pending 
<table class="table-stripped">
  <thead>
    <tr><th>Name</th><th>Email</th><th>Role</th></tr>
  </thead>
  <tbody>
    <tr><td>Jane</td><td>jane@example.com</td><td>Admin</td></tr>
    <tr><td>John</td><td>john@example.com</td><td>Editor</td></tr>
  </tbody>
</table>

Interactive

Hoverable Table

Hover over the rows to see the highlight effect.

Name Email Role Status
Jane Cooper jane@example.com Admin Active
John Smith john@example.com Editor Active
Bob Johnson bob@example.com Viewer Inactive
Alice Williams alice@example.com Editor Active
Charlie Brown charlie@example.com Viewer Pending 
<table class="table-hovered">
  <thead>
    <tr><th>Name</th><th>Email</th><th>Role</th></tr>
  </thead>
  <tbody>
    <tr><td>Jane</td><td>jane@example.com</td><td>Admin</td></tr>
  </tbody>
</table>

Minimal

Simple & Stroked Tables

Simple (no borders, no left padding)

Grid System 16 widths
Buttons 6 colors
Alerts 5 variants
Navigation 6 types

Stroked (bottom borders only)

Typography 9 sizes
Helpers 50+ classes
Dark Mode Built-in
Theming CSS vars 
<table class="table-simple">...</table>
<table class="table-stroked">...</table>

Flat

Flat Table

No borders and no padding with table-flat.

Feature Description
AI-Native Ships PLY.md and ply-classes.json
Accessible WCAG AA contrast by default
Small ~20KB gzipped full bundle 
<table class="table-flat">
  <thead>
    <tr><th>Feature</th><th>Description</th></tr>
  </thead>
  <tbody>
    <tr><td>AI-Native</td><td>Ships PLY.md and ply-classes.json</td></tr>
  </tbody>
</table>

Responsive

Responsive Table Container

Wrap tables in table-container for horizontal scrolling on small screens.

ID Name Email Role Status Department Location Joined
001 Jane Cooper jane@example.com Admin Active Engineering New York 2023-01-15
002 John Smith john@example.com Editor Active Design London 2023-03-22
003 Bob Johnson bob@example.com Viewer Inactive Marketing Tokyo 2022-11-08 
<div class="table-container">
  <table class="table-bordered">
    <!-- Wide table with horizontal scroll -->
  </table>
</div>

Combined

Combined Modifiers

Classes can be combined for richer table styles.

Name Email Role Status
Jane Cooper jane@example.com Admin ● Active
John Smith john@example.com Editor ● Active
Bob Johnson bob@example.com Viewer ● Inactive
Alice Williams alice@example.com Editor ● Active
Charlie Brown charlie@example.com Viewer ○ Pending 
<table class="table-bordered table-stripped table-hovered">
  <!-- Bordered + Striped + Hoverable -->
</table>

Sorting

Sort Indicators

Add sortable to <th> elements to show sort arrows. Toggle sort-asc or sort-desc to indicate the active sort direction.

Name Email Role Status
Alice Williamsalice@example.comEditorActive
Bob Johnsonbob@example.comViewerInactive
Jane Cooperjane@example.comAdminActive
 
<table class="table-stroked">
  <thead>
    <tr>
      <th class="sortable sort-asc">Name</th>
      <th class="sortable">Email</th>
      <th class="sortable sort-desc">Role</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>...</tbody>
</table>

Filtering

Table Filter

Add table-filter alongside input-groups to build a connected filter bar.

Name Email Role Status
Jane Cooperjane@example.comAdminActive
John Smithjohn@example.comEditorActive
Bob Johnsonbob@example.comViewerInactive
 
<div class="input-groups table-filter">
  <input type="text" placeholder="Search..." aria-label="Search">
  <select aria-label="Filter by role">
    <option value="">All Roles</option>
    <option>Admin</option>
  </select>
  <span class="btn-append">
    <button class="btn btn-primary">Filter</button>
  </span>
</div>
<table class="table-stroked table-hovered">...</table>

Actions

Table Actions

Use table-actions for right-aligned icon buttons above a table.

Name Email Role
Jane Cooperjane@example.comAdmin
John Smithjohn@example.comEditor
Bob Johnsonbob@example.comViewer
 
<div class="table-actions">
  <button class="btn btn-ghost btn-icon" aria-label="Download">...</button>
  <button class="btn btn-ghost btn-icon" aria-label="Print">...</button>
</div>
<table class="table-stroked">...</table>

Navigation

Pagination

Name Email Role Status
Jane Cooperjane@example.comAdminActive
John Smithjohn@example.comEditorActive
Bob Johnsonbob@example.comViewerInactive
Showing 1–3 of 48 
<ul class="pagination">
  <li class="active"><a href="#" aria-current="page">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
</ul>

<!-- Solid variant -->
<ul class="pagination pagination-solid">...</ul>

<!-- Sizes -->
<ul class="pagination pagination-sm">...</ul>
<ul class="pagination pagination-lg">...</ul>

Next

Next Steps

Add feedback with alerts & dialogs, or explore utility classes for spacing, display, and more.