Data table

A list-management screen: a title row with a primary action, a control bar with search, a segmented control for status, and a toolbar, then a responsive table with badges and tags, and a pagination footer. Narrow the frame — the table stacks into key/value cards and the toolbar folds into "More".

Preview full screen

Use it

This example is one self-contained file. Link the JLDS stylesheets and the behavior bundle from the CDN, then paste the markup. See Vanilla HTML for the full workflow.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jarooda/jlds@main/registry/css/index.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jarooda/jlds@main/registry/css/all.css">
<script src="https://cdn.jsdelivr.net/gh/jarooda/jlds@main/registry/js/all.js" defer></script>

curl -O https://cdn.jsdelivr.net/gh/jarooda/jlds@main/registry/examples/data-table.html

Components used

Input · Segmented Control · Toolbar · Card · Responsive Table · Badge · Tag · Pagination · Button