New story

UI tables

Sortable, searchable tables with pagination and bulk operations.

Data table demonstration

Native tables stay readable and work without any external table package.

Interactive

Article directory

Sort, search, filter, paginate and act on selected rows.

16 stories
Story titleAuthorStatusPublish dateViews
The quiet transformation of main streetsNews · Story #1542
MCMaya Chen
Published2026-11-0812.8K
Markets adjust to a different outlookBusiness · Story #1543
DPDaniel Park
Published2026-11-078.4K
How community libraries found new lifeCulture · Story #1544
SRSofia Rossi
In review2026-11-110
A look inside tomorrow’s energy gridTech · Story #1545
AMAlex Morgan
Published2026-11-066.1K
The science behind a greener commuteScience · Story #1546
EVElena Vargas
Scheduled2026-11-130
The new sound of independent musicCulture · Story #1547
LBLucas Brandt
Draft2026-11-150
Where young athletes train and thriveSports · Story #1548
PRPriya Raman
Published2026-11-054.8K
The cost of the changing housing marketBusiness · Story #1549
NONadia Osei
In review2026-11-120
A guide to the week in public policyNews · Story #1550
TFTom Feldman
Scheduled2026-11-140
What new classrooms can teach usLifestyle · Story #1551
MCMaya Chen
Draft2026-11-140
Designers rethink the neighborhood parkCulture · Story #1552
SRSofia Rossi
Published2026-11-043.6K
The research teams mapping the oceansScience · Story #1553
EVElena Vargas
Published2026-11-039.3K
The local businesses changing retailBusiness · Story #1554
DPDaniel Park
Scheduled2026-11-160
A strong season for city athleticsSports · Story #1555
PRPriya Raman
Draft2026-11-170
The changing language of civic designNews · Story #1556
NONadia Osei
In review2026-11-100
What the latest readership tells usTech · Story #1557
AMAlex Morgan
Published2026-11-027.9K
Show code
HTML + data attributes
<input class="input" data-table-search="ui-stories" aria-label="Find stories">
<select data-table-filter="ui-stories" data-key="status"><option value="all">All</option><option value="published">Published</option></select>
<div class="table-wrap"><table class="table" id="ui-stories" data-table data-page-size="6">
  <thead><tr><th><input type="checkbox" data-select-all></th><th data-sort="text">Story</th><th data-sort="date">Date</th></tr></thead>
  <tbody><tr data-status="published"><td><input type="checkbox" data-select-row></td><td>Inside the city archive</td><td>2026-11-08</td></tr></tbody>
</table></div>
<nav data-pagination="ui-stories" aria-label="Stories pagination"></nav>
Showing 1–6 of 16

Compact table variant

Useful in side panels and account screens.

01
AvatarEditorAvailabilityAction
MCMaya ChenNews deskAvailable
DPDaniel ParkBusiness deskAvailable
SRSofia RossiCulture deskAvailable
AMAlex MorganTech deskAvailable
EVElena VargasScience deskAvailable
Show code
HTML
<div class="table-wrap"><table class="table table-sm"><thead><tr><th>Avatar</th><th>Editor</th><th>Availability</th><th>Action</th></tr></thead><tbody><tr><td><span class="avatar avatar-xs" data-tint="1">MC</span></td><td><strong>Maya Chen</strong><small>News desk</small></td><td><span class="status status-active">Available</span></td><td><button type="button" class="btn btn-sm" data-toast="Message prepared for Maya Chen">Message</button></td></tr><tr><td><span class="avatar avatar-xs" data-tint="3">DP</span></td><td><strong>Daniel Park</strong><small>Business desk</small></td><td><span class="status status-active">Available</span></td><td><button type="button" class="btn btn-sm" data-toast="Message prepared for Daniel Park">Message</button></td></tr><tr><td><span class="avatar avatar-xs" data-tint="5">SR</span></td><td><strong>Sofia Rossi</strong><small>Culture desk</small></td><td><span class="status status-active">Available</span></td><td><button type="button" class="btn btn-sm" data-toast="Message prepared for Sofia Rossi">Message</button></td></tr><tr><td><span class="avatar avatar-xs" data-tint="2">AM</span></td><td><strong>Alex Morgan</strong><small>Tech desk</small></td><td><span class="status status-active">Available</span></td><td><button type="button" class="btn btn-sm" data-toast="Message prepared for Alex Morgan">Message</button></td></tr><tr><td><span class="avatar avatar-xs" data-tint="1">EV</span></td><td><strong>Elena Vargas</strong><small>Science desk</small></td><td><span class="status status-active">Available</span></td><td><button type="button" class="btn btn-sm" data-toast="Message prepared for Elena Vargas">Message</button></td></tr></tbody></table></div>

Borderless variant

Clean rows for editorial summaries.

02
DeskStoriesTraffic shareTrend
News4239%On track
Business2423%On track
Culture1918%On track
Science1312%On track
Sports88%On track
Show code
HTML
<div class="table-wrap"><table class="table table-plain"><thead><tr><th>Desk</th><th>Stories</th><th>Traffic share</th><th>Trend</th></tr></thead><tbody><tr><td>News</td><td>42</td><td>39%</td><td><span class="badge badge-success">On track</span></td></tr><tr><td>Business</td><td>24</td><td>23%</td><td><span class="badge badge-success">On track</span></td></tr><tr><td>Culture</td><td>19</td><td>18%</td><td><span class="badge badge-success">On track</span></td></tr><tr><td>Science</td><td>13</td><td>12%</td><td><span class="badge badge-success">On track</span></td></tr><tr><td>Sports</td><td>8</td><td>8%</td><td><span class="badge badge-success">On track</span></td></tr></tbody></table></div>

Attribute reference

Drop these attributes onto semantic table elements.

AttributeElementBehavior
data-tabletableActivates the table controller.
data-page-size="6"tableNumber of visible rows per page.
data-sort="text|number|date"thMakes a column sortable.
data-table-search="id"inputSearches row text.
data-table-filter="id" data-key="status"selectMatches row data-status.
data-select-all / data-select-rowinputBulk checkbox selection.
data-bulk-bar="id"divContainer shown when rows are selected.
data-bulk-action="delete"buttonConfirmation and row removal.
data-bulk-status="published"buttonUpdates selected rows.
data-pagination="id"navRenders numbered page controls.
data-table-info="id"spanDisplays result count.
Show minimal table setup
<table data-table id="my-table" data-page-size="10"><thead><tr><th data-sort="text">Title</th></tr></thead><tbody><tr><td>Story</td></tr></tbody></table>
Esc
↑↓ to move Enter to open CtrlK to toggle