⌘K

table component

Drop-in semantic component. See examples, sizes, variants, and source.

Data table built on a native <table class="table"> wrapped in a table-wrapper for horizontal scroll and outer chrome. Layer in bordered, striped, compact, or spacious for density; use cell modifiers like cell-numeric, cell-actions, and cell-checkbox for typed columns.

Table System

Basic Table

Name Position Office Age Salary
John Doe Software Engineer San Francisco 28 $120,000
Jane Smith Product Manager New York 32 $145,000
Mike Johnson UX Designer Los Angeles 26 $95,000
Sarah Williams Data Analyst Chicago 29 $85,000

Sortable Table

Product Category Price Stock Status
MacBook Pro Laptops $2,499 12 Available
iPhone 15 Phones $999 45 Available
iPad Air Tablets $599 0 Out of Stock
AirPods Pro Accessories $249 8 Low Stock

Selectable Table with Actions

User Email Role Status Actions
Alice Johnson alice@example.com Admin Active
Bob Smith bob@example.com Editor Active
Charlie Brown charlie@example.com Viewer Inactive

Rich Cell Types

Feature Progress Rating Toggle Status
Dashboard Redesign
75%
In Progress
API Integration
100%
Complete
Mobile App
30%
Pending

Table Size Variants

Tiny

Name Role Status
John Doe Admin Active
Jane Smith User Active

Small

Name Role Status
John Doe Admin Active
Jane Smith User Active

Default

Name Role Status
John Doe Admin Active
Jane Smith User Active

Large

Name Role Status
John Doe Admin Active
Jane Smith User Active

Big

Name Role Status
John Doe Admin Active
Jane Smith User Active

Table Style Variants

Bordered

Product Price Quantity
Widget A $19.99 100
Widget B $29.99 50

Striped

Product Price Quantity
Widget A $19.99 100
Widget B $29.99 50
Widget C $39.99 25
Widget D $49.99 10

Compact

Product Price Quantity
Widget A $19.99 100
Widget B $29.99 50

Spacious

Product Price Quantity
Widget A $19.99 100
Widget B $29.99 50

Table with Pagination

Order ID Customer Date Total Status
#001234 Alice Johnson 2024-01-15 $250.00 Delivered
#001235 Bob Smith 2024-01-16 $125.50 Shipped
#001236 Charlie Brown 2024-01-17 $450.00 Processing
#001237 Diana Prince 2024-01-18 $75.25 Delivered
#001238 Edward Norton 2024-01-19 $320.00 Cancelled
Showing 1 to 5 of 25 entries

Color Variants

Primary

Feature Status
Feature A Active
Feature B Pending

Positive

Test Result
Unit Tests Passed
Integration Tests Passed

Warning

Resource Usage
CPU 85%
Memory 78%

Empty State

Name Email Role Status
No data available
There are no records to display at this time.

Responsive Table

This table stacks on mobile devices. Resize your browser to see the effect.

Product Category Price Stock
MacBook Pro Laptops $2,499 12
iPhone 15 Phones $999 45
iPad Air Tablets $599 0

Class API Reference

Type Class Usage Notes
Base table Required base class on the <table> Always required
table-wrapper Outer container — owns border, rounded corners, horizontal scroll Always wrap your table in this
Sizes xs Tiny cell padding Modifier on table
sm Small cell padding Modifier on table
(default) Medium cell padding No size class needed
xl Large cell padding Modifier on table
lg Big cell padding Modifier on table
Variants bordered Borders on every cell Modifier on table
striped Zebra-striped rows Modifier on table
compact Tighter padding than sm Modifier on table
spacious Roomier padding than default Modifier on table
responsive Stacks rows on mobile Add data-label on each <td>
fixed-header Sticky header on scroll Modifier on table
Intents primary Blue header + selected row Modifier on table
positive Green header + selected row Modifier on table
negative Red header + selected row Modifier on table
warning Yellow header + selected row Modifier on table
info Blue header + selected row (lighter) Modifier on table
Cells & Rows sortable Header is sortable, shows arrow Add data-type="numeric" for numeric sort
selected Highlights a row Modifier on <tr>
cell-numeric Right-align + tabular numbers Modifier on <td> / <th>
cell-actions Right-aligned action buttons Modifier on <td>
cell-checkbox Narrow checkbox column Modifier on <td>
cell-progress / cell-rating / cell-toggle / cell-badge / cell-button Vertical-padding tweaks for typed cells Modifier on <td>
cell-truncate Caps width and truncates with … Modifier on <td>
cell-wrap Allow text wrap inside the cell Modifier on <td>
table-empty Empty-state placeholder cell Use colspan across the table
States loading Dim + disable interactions Modifier on table
Wrapper table-pagination Pagination footer with info + page buttons Holds info and controls children