Table
Tables display rows of data and can be sorted, filtered, paged and edited. Every example below is plain HTML plus Tailwind utilities.
Simple
Simple table example.
| Username | Segment | Country |
|---|---|---|
| Michael Fitzgerald | Sales & Sales | Germany |
| Marlon Gonzalez-Mendoza | Financial Trading | Belarus |
| Emile Vanden | Repurchase | Austria |
<div data-tbl class="overflow-hidden rounded-xl border border-border">
<div class="overflow-x-auto">
<table class="w-full min-w-[640px] text-sm">
<thead>
<tr class="border-b border-border bg-subtle">
<th scope="col" class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary">Username</th>
<th scope="col" class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary">Segment</th>
<th scope="col" class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary">Country</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-border-subtle last:border-0">
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Michael Fitzgerald</td>
<td class="px-4 py-3 text-sm text-text">Sales & Sales</td>
<td class="px-4 py-3 text-sm text-text">Germany</td>
</tr>
<tr class="border-b border-border-subtle last:border-0">
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Marlon Gonzalez-Mendoza</td>
<td class="px-4 py-3 text-sm text-text">Financial Trading</td>
<td class="px-4 py-3 text-sm text-text">Belarus</td>
</tr>
<tr class="border-b border-border-subtle last:border-0">
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Emile Vanden</td>
<td class="px-4 py-3 text-sm text-text">Repurchase</td>
<td class="px-4 py-3 text-sm text-text">Austria</td>
</tr>
</tbody>
</table>
</div>
</div>Compact
Tighter row padding for dense data — useful when vertical space is scarce.
| Username | Segment | Country |
|---|---|---|
| Michael Fitzgerald | Sales & Sales | Germany |
| Marlon Gonzalez-Mendoza | Financial Trading | Belarus |
| Emile Vanden | Repurchase | Austria |
<div data-tbl class="overflow-hidden rounded-xl border border-border">
<div class="overflow-x-auto">
<table class="w-full min-w-[640px] text-sm">
<thead>
<tr class="border-b border-border bg-subtle">
<th scope="col" class="px-3 py-2 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary">Username</th>
<th scope="col" class="px-3 py-2 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary">Segment</th>
<th scope="col" class="px-3 py-2 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary">Country</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-border-subtle last:border-0">
<td class="px-3 py-1.5 text-sm font-medium text-heading">Michael Fitzgerald</td>
<td class="px-3 py-1.5 text-sm text-text">Sales & Sales</td>
<td class="px-3 py-1.5 text-sm text-text">Germany</td>
</tr>
<tr class="border-b border-border-subtle last:border-0">
<td class="px-3 py-1.5 text-sm font-medium text-heading">Marlon Gonzalez-Mendoza</td>
<td class="px-3 py-1.5 text-sm text-text">Financial Trading</td>
<td class="px-3 py-1.5 text-sm text-text">Belarus</td>
</tr>
<tr class="border-b border-border-subtle last:border-0">
<td class="px-3 py-1.5 text-sm font-medium text-heading">Emile Vanden</td>
<td class="px-3 py-1.5 text-sm text-text">Repurchase</td>
<td class="px-3 py-1.5 text-sm text-text">Austria</td>
</tr>
</tbody>
</table>
</div>
</div>Column Vertical Line
Add
border-r
to each cell to separate columns with a vertical rule.
| Username | Segment | Country |
|---|---|---|
| Michael Fitzgerald | Sales & Sales | Germany |
| Marlon Gonzalez-Mendoza | Financial Trading | Belarus |
| Emile Vanden | Repurchase | Austria |
<div data-tbl class="overflow-hidden rounded-xl border border-border">
<div class="overflow-x-auto">
<table class="w-full min-w-[640px] text-sm">
<thead>
<tr class="border-b border-border bg-subtle">
<th scope="col" class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary border-r border-border">Username</th>
<th scope="col" class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary border-r border-border">Segment</th>
<th scope="col" class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary">Country</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-border-subtle last:border-0">
<td class="px-4 py-3 text-sm text-text border-r border-border-subtle font-medium text-heading">Michael Fitzgerald</td>
<td class="px-4 py-3 text-sm text-text border-r border-border-subtle">Sales & Sales</td>
<td class="px-4 py-3 text-sm text-text">Germany</td>
</tr>
<tr class="border-b border-border-subtle last:border-0">
<td class="px-4 py-3 text-sm text-text border-r border-border-subtle font-medium text-heading">Marlon Gonzalez-Mendoza</td>
<td class="px-4 py-3 text-sm text-text border-r border-border-subtle">Financial Trading</td>
<td class="px-4 py-3 text-sm text-text">Belarus</td>
</tr>
<tr class="border-b border-border-subtle last:border-0">
<td class="px-4 py-3 text-sm text-text border-r border-border-subtle font-medium text-heading">Emile Vanden</td>
<td class="px-4 py-3 text-sm text-text border-r border-border-subtle">Repurchase</td>
<td class="px-4 py-3 text-sm text-text">Austria</td>
</tr>
</tbody>
</table>
</div>
</div>With Border
Use
border-collapse
plus a border on every cell for a fully gridded table.
| Username | Segment | Country |
|---|---|---|
| Michael Fitzgerald | Sales & Sales | Germany |
| Marlon Gonzalez-Mendoza | Financial Trading | Belarus |
| Emile Vanden | Repurchase | Austria |
<div data-tbl class="overflow-hidden rounded-xl border-2 border-border">
<div class="overflow-x-auto">
<table class="w-full min-w-[640px] border-collapse text-sm">
<thead>
<tr class="bg-subtle">
<th scope="col" class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary border border-border">Username</th>
<th scope="col" class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary border border-border">Segment</th>
<th scope="col" class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary border border-border">Country</th>
</tr>
</thead>
<tbody>
<tr>
<td class="px-4 py-3 text-sm text-text border border-border font-medium text-heading">Michael Fitzgerald</td>
<td class="px-4 py-3 text-sm text-text border border-border">Sales & Sales</td>
<td class="px-4 py-3 text-sm text-text border border-border">Germany</td>
</tr>
<tr>
<td class="px-4 py-3 text-sm text-text border border-border font-medium text-heading">Marlon Gonzalez-Mendoza</td>
<td class="px-4 py-3 text-sm text-text border border-border">Financial Trading</td>
<td class="px-4 py-3 text-sm text-text border border-border">Belarus</td>
</tr>
<tr>
<td class="px-4 py-3 text-sm text-text border border-border font-medium text-heading">Emile Vanden</td>
<td class="px-4 py-3 text-sm text-text border border-border">Repurchase</td>
<td class="px-4 py-3 text-sm text-text border border-border">Austria</td>
</tr>
</tbody>
</table>
</div>
</div>Sorting
Click a column header to sort. Click again to reverse the direction.
A cell's
data-tbl-value
overrides its text, so formatted values still sort numerically.
| First Name | Last Name | Age | Visits | Status | Profile Progress |
|---|---|---|---|---|---|
| Kaitlin | Winters | 34 | 46 | single | 80 |
| Precious | Chang | 27 | 61 | single | 88 |
| Susan | Cortez | 41 | 55 | married | 96 |
| Owen | Mcdougall | 22 | 38 | single | 60 |
| Maud | Mcintyre | 36 | 72 | married | 108 |
| Griselda | Ramirez | 29 | 44 | single | 73 |
<div data-tbl class="overflow-hidden rounded-xl border border-border">
<div class="overflow-x-auto">
<table class="w-full min-w-[760px] text-sm">
<thead>
<tr class="border-b border-border bg-subtle">
<th
scope="col"
data-tbl-sort="first"
aria-sort="none"
tabindex="0"
class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary cursor-pointer select-none transition-colors hover:text-heading "
>
<span class="inline-flex items-center gap-1.5">First Name <i data-tbl-sort-icon class="ph ph-caret-up-down text-xs opacity-40"></i></span>
</th>
<th
scope="col"
data-tbl-sort="last"
aria-sort="none"
tabindex="0"
class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary cursor-pointer select-none transition-colors hover:text-heading "
>
<span class="inline-flex items-center gap-1.5">Last Name <i data-tbl-sort-icon class="ph ph-caret-up-down text-xs opacity-40"></i></span>
</th>
<th
scope="col"
data-tbl-sort="age"
aria-sort="none"
tabindex="0"
class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary cursor-pointer select-none transition-colors hover:text-heading "
>
<span class="inline-flex items-center gap-1.5">Age <i data-tbl-sort-icon class="ph ph-caret-up-down text-xs opacity-40"></i></span>
</th>
<th
scope="col"
data-tbl-sort="visits"
aria-sort="none"
tabindex="0"
class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary cursor-pointer select-none transition-colors hover:text-heading "
>
<span class="inline-flex items-center gap-1.5">Visits <i data-tbl-sort-icon class="ph ph-caret-up-down text-xs opacity-40"></i></span>
</th>
<th
scope="col"
data-tbl-sort="status"
aria-sort="none"
tabindex="0"
class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary cursor-pointer select-none transition-colors hover:text-heading "
>
<span class="inline-flex items-center gap-1.5">Status <i data-tbl-sort-icon class="ph ph-caret-up-down text-xs opacity-40"></i></span>
</th>
<th
scope="col"
data-tbl-sort="profile"
aria-sort="none"
tabindex="0"
class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary cursor-pointer select-none transition-colors hover:text-heading "
>
<span class="inline-flex items-center gap-1.5">Profile Progress <i data-tbl-sort-icon class="ph ph-caret-up-down text-xs opacity-40"></i></span>
</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-border-subtle last:border-0">
<td class="px-4 py-3 text-sm text-text font-medium text-heading" data-tbl-col="first">Kaitlin</td>
<td class="px-4 py-3 text-sm text-text" data-tbl-col="last">Winters</td>
<td class="px-4 py-3 text-sm text-text tabular-nums" data-tbl-col="age" data-tbl-value="34">34</td>
<td class="px-4 py-3 text-sm text-text tabular-nums" data-tbl-col="visits" data-tbl-value="46">46</td>
<td class="px-4 py-3 text-sm text-text" data-tbl-col="status">single</td>
<td class="px-4 py-3 text-sm text-text tabular-nums" data-tbl-col="profile" data-tbl-value="80">80</td>
</tr>
<tr class="border-b border-border-subtle last:border-0">
<td class="px-4 py-3 text-sm text-text font-medium text-heading" data-tbl-col="first">Precious</td>
<td class="px-4 py-3 text-sm text-text" data-tbl-col="last">Chang</td>
<td class="px-4 py-3 text-sm text-text tabular-nums" data-tbl-col="age" data-tbl-value="27">27</td>
<td class="px-4 py-3 text-sm text-text tabular-nums" data-tbl-col="visits" data-tbl-value="61">61</td>
<td class="px-4 py-3 text-sm text-text" data-tbl-col="status">single</td>
<td class="px-4 py-3 text-sm text-text tabular-nums" data-tbl-col="profile" data-tbl-value="88">88</td>
</tr>
<tr class="border-b border-border-subtle last:border-0">
<td class="px-4 py-3 text-sm text-text font-medium text-heading" data-tbl-col="first">Susan</td>
<td class="px-4 py-3 text-sm text-text" data-tbl-col="last">Cortez</td>
<td class="px-4 py-3 text-sm text-text tabular-nums" data-tbl-col="age" data-tbl-value="41">41</td>
<td class="px-4 py-3 text-sm text-text tabular-nums" data-tbl-col="visits" data-tbl-value="55">55</td>
<td class="px-4 py-3 text-sm text-text" data-tbl-col="status">married</td>
<td class="px-4 py-3 text-sm text-text tabular-nums" data-tbl-col="profile" data-tbl-value="96">96</td>
</tr>
<tr class="border-b border-border-subtle last:border-0">
<td class="px-4 py-3 text-sm text-text font-medium text-heading" data-tbl-col="first">Owen</td>
<td class="px-4 py-3 text-sm text-text" data-tbl-col="last">Mcdougall</td>
<td class="px-4 py-3 text-sm text-text tabular-nums" data-tbl-col="age" data-tbl-value="22">22</td>
<td class="px-4 py-3 text-sm text-text tabular-nums" data-tbl-col="visits" data-tbl-value="38">38</td>
<td class="px-4 py-3 text-sm text-text" data-tbl-col="status">single</td>
<td class="px-4 py-3 text-sm text-text tabular-nums" data-tbl-col="profile" data-tbl-value="60">60</td>
</tr>
<tr class="border-b border-border-subtle last:border-0">
<td class="px-4 py-3 text-sm text-text font-medium text-heading" data-tbl-col="first">Maud</td>
<td class="px-4 py-3 text-sm text-text" data-tbl-col="last">Mcintyre</td>
<td class="px-4 py-3 text-sm text-text tabular-nums" data-tbl-col="age" data-tbl-value="36">36</td>
<td class="px-4 py-3 text-sm text-text tabular-nums" data-tbl-col="visits" data-tbl-value="72">72</td>
<td class="px-4 py-3 text-sm text-text" data-tbl-col="status">married</td>
<td class="px-4 py-3 text-sm text-text tabular-nums" data-tbl-col="profile" data-tbl-value="108">108</td>
</tr>
<tr class="border-b border-border-subtle last:border-0">
<td class="px-4 py-3 text-sm text-text font-medium text-heading" data-tbl-col="first">Griselda</td>
<td class="px-4 py-3 text-sm text-text" data-tbl-col="last">Ramirez</td>
<td class="px-4 py-3 text-sm text-text tabular-nums" data-tbl-col="age" data-tbl-value="29">29</td>
<td class="px-4 py-3 text-sm text-text tabular-nums" data-tbl-col="visits" data-tbl-value="44">44</td>
<td class="px-4 py-3 text-sm text-text" data-tbl-col="status">single</td>
<td class="px-4 py-3 text-sm text-text tabular-nums" data-tbl-col="profile" data-tbl-value="73">73</td>
</tr>
</tbody>
</table>
</div>
</div>Filtering
Type to filter rows across every column.
| First Name | Last Name | |
|---|---|---|
| Kaitlin | Winters | kaitlin@example.com |
| Precious | Chang | precious@bluebottle.example.com |
| Susan | Cortez | s.cortez@northwind.example.com |
| Owen | Mcdougall | gaia.hagen@bindhawk.example.com |
| Maud | Mcintyre | gabriel.mccabe@example.com |
| Griselda | Ramirez | griselda@example.com |
| Marisa | Larson | marisa.l@lumon.example.com |
| Neil | Gaiman | neil@sandman.example.com |
| Anita | Bryant | anita.bryant@example.com |
| Colin | Wu | colin.wu@example.com |
No rows match that search.
<div data-tbl class="overflow-hidden rounded-xl border border-border">
<div class="flex flex-col gap-3 border-b border-border p-4 sm:flex-row sm:items-center sm:justify-end">
<label class="flex items-center gap-2 text-sm text-muted">
<span>Search</span>
<input
type="search"
data-tbl-filter
placeholder="Search all columns"
class="h-9 w-full rounded-lg border border-border bg-surface px-3 text-sm text-text transition-colors placeholder:text-muted focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/25 sm:w-56"
/>
</label>
</div>
<div class="overflow-x-auto">
<table class="w-full min-w-[640px] text-sm">
<thead>
<tr class="border-b border-border bg-subtle">
<th scope="col" class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary">First Name</th>
<th scope="col" class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary">Last Name</th>
<th scope="col" class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary">Email</th>
</tr>
</thead>
<tbody>
<tr data-tbl-search="Kaitlin Winters kaitlin@example.com" class="border-b border-border-subtle last:border-0">
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Kaitlin</td>
<td class="px-4 py-3 text-sm text-text">Winters</td>
<td class="px-4 py-3 text-sm text-text">kaitlin@example.com</td>
</tr>
<tr data-tbl-search="Precious Chang precious@bluebottle.example.com" class="border-b border-border-subtle last:border-0">
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Precious</td>
<td class="px-4 py-3 text-sm text-text">Chang</td>
<td class="px-4 py-3 text-sm text-text">precious@bluebottle.example.com</td>
</tr>
<tr data-tbl-search="Susan Cortez s.cortez@northwind.example.com" class="border-b border-border-subtle last:border-0">
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Susan</td>
<td class="px-4 py-3 text-sm text-text">Cortez</td>
<td class="px-4 py-3 text-sm text-text">s.cortez@northwind.example.com</td>
</tr>
<tr data-tbl-search="Owen Mcdougall gaia.hagen@bindhawk.example.com" class="border-b border-border-subtle last:border-0">
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Owen</td>
<td class="px-4 py-3 text-sm text-text">Mcdougall</td>
<td class="px-4 py-3 text-sm text-text">gaia.hagen@bindhawk.example.com</td>
</tr>
<tr data-tbl-search="Maud Mcintyre gabriel.mccabe@example.com" class="border-b border-border-subtle last:border-0">
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Maud</td>
<td class="px-4 py-3 text-sm text-text">Mcintyre</td>
<td class="px-4 py-3 text-sm text-text">gabriel.mccabe@example.com</td>
</tr>
<tr data-tbl-search="Griselda Ramirez griselda@example.com" class="border-b border-border-subtle last:border-0">
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Griselda</td>
<td class="px-4 py-3 text-sm text-text">Ramirez</td>
<td class="px-4 py-3 text-sm text-text">griselda@example.com</td>
</tr>
<tr data-tbl-search="Marisa Larson marisa.l@lumon.example.com" class="border-b border-border-subtle last:border-0">
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Marisa</td>
<td class="px-4 py-3 text-sm text-text">Larson</td>
<td class="px-4 py-3 text-sm text-text">marisa.l@lumon.example.com</td>
</tr>
<tr data-tbl-search="Neil Gaiman neil@sandman.example.com" class="border-b border-border-subtle last:border-0">
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Neil</td>
<td class="px-4 py-3 text-sm text-text">Gaiman</td>
<td class="px-4 py-3 text-sm text-text">neil@sandman.example.com</td>
</tr>
<tr data-tbl-search="Anita Bryant anita.bryant@example.com" class="border-b border-border-subtle last:border-0">
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Anita</td>
<td class="px-4 py-3 text-sm text-text">Bryant</td>
<td class="px-4 py-3 text-sm text-text">anita.bryant@example.com</td>
</tr>
<tr data-tbl-search="Colin Wu colin.wu@example.com" class="border-b border-border-subtle last:border-0">
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Colin</td>
<td class="px-4 py-3 text-sm text-text">Wu</td>
<td class="px-4 py-3 text-sm text-text">colin.wu@example.com</td>
</tr>
</tbody>
</table>
</div>
<p data-tbl-empty class="hidden px-4 py-10 text-center text-sm text-muted">
No rows match that search.
</p>
</div>Pagination
Page through rows and change the page size. Sorting and filtering both re-paginate.
| First Name | Last Name | Age |
|---|---|---|
| Kaitlin | Winters | 34 |
| Precious | Chang | 27 |
| Susan | Cortez | 41 |
| Owen | Mcdougall | 22 |
| Maud | Mcintyre | 36 |
| Griselda | Ramirez | 29 |
| Marisa | Larson | 31 |
| Neil | Gaiman | 45 |
| Anita | Bryant | 26 |
| Colin | Wu | 38 |
| Dana | Whitaker | 33 |
| Nolan | Vance | 47 |
Showing 1–5 of 12
<div data-tbl class="overflow-hidden rounded-xl border border-border">
<div class="overflow-x-auto">
<table class="w-full min-w-[560px] text-sm">
<thead>
<tr class="border-b border-border bg-subtle">
<th scope="col" class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary">First Name</th>
<th scope="col" class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary">Last Name</th>
<th scope="col" class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary">Age</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-border-subtle last:border-0">
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Kaitlin</td>
<td class="px-4 py-3 text-sm text-text">Winters</td>
<td class="px-4 py-3 text-sm text-text tabular-nums">34</td>
</tr>
<tr class="border-b border-border-subtle last:border-0">
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Precious</td>
<td class="px-4 py-3 text-sm text-text">Chang</td>
<td class="px-4 py-3 text-sm text-text tabular-nums">27</td>
</tr>
<tr class="border-b border-border-subtle last:border-0">
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Susan</td>
<td class="px-4 py-3 text-sm text-text">Cortez</td>
<td class="px-4 py-3 text-sm text-text tabular-nums">41</td>
</tr>
<tr class="border-b border-border-subtle last:border-0">
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Owen</td>
<td class="px-4 py-3 text-sm text-text">Mcdougall</td>
<td class="px-4 py-3 text-sm text-text tabular-nums">22</td>
</tr>
<tr class="border-b border-border-subtle last:border-0">
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Maud</td>
<td class="px-4 py-3 text-sm text-text">Mcintyre</td>
<td class="px-4 py-3 text-sm text-text tabular-nums">36</td>
</tr>
<tr class="border-b border-border-subtle last:border-0">
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Griselda</td>
<td class="px-4 py-3 text-sm text-text">Ramirez</td>
<td class="px-4 py-3 text-sm text-text tabular-nums">29</td>
</tr>
<tr class="border-b border-border-subtle last:border-0">
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Marisa</td>
<td class="px-4 py-3 text-sm text-text">Larson</td>
<td class="px-4 py-3 text-sm text-text tabular-nums">31</td>
</tr>
<tr class="border-b border-border-subtle last:border-0">
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Neil</td>
<td class="px-4 py-3 text-sm text-text">Gaiman</td>
<td class="px-4 py-3 text-sm text-text tabular-nums">45</td>
</tr>
<tr class="border-b border-border-subtle last:border-0">
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Anita</td>
<td class="px-4 py-3 text-sm text-text">Bryant</td>
<td class="px-4 py-3 text-sm text-text tabular-nums">26</td>
</tr>
<tr class="border-b border-border-subtle last:border-0">
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Colin</td>
<td class="px-4 py-3 text-sm text-text">Wu</td>
<td class="px-4 py-3 text-sm text-text tabular-nums">38</td>
</tr>
<tr class="border-b border-border-subtle last:border-0">
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Dana</td>
<td class="px-4 py-3 text-sm text-text">Whitaker</td>
<td class="px-4 py-3 text-sm text-text tabular-nums">33</td>
</tr>
<tr class="border-b border-border-subtle last:border-0">
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Nolan</td>
<td class="px-4 py-3 text-sm text-text">Vance</td>
<td class="px-4 py-3 text-sm text-text tabular-nums">47</td>
</tr>
</tbody>
</table>
</div>
<div
data-tbl-pager
class="flex flex-col items-center justify-between gap-3 border-t border-border p-3 sm:flex-row sm:px-4"
>
<p class="text-sm text-muted">
Showing <span class="font-medium text-heading" data-tbl-range>1–5</span>
of <span class="font-medium text-heading" data-tbl-total>12</span>
</p>
<div class="flex flex-wrap items-center justify-center gap-1">
<button type="button" data-tbl-page="prev" aria-label="Previous page" class="inline-flex h-8 w-8 items-center justify-center rounded-md text-muted transition-colors hover:bg-subtle hover:text-heading focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
<i class="ph ph-caret-left text-base"></i>
</button>
<button
type="button"
data-tbl-page="1"
aria-current="page"
class="inline-flex h-8 min-w-8 items-center justify-center rounded-md px-2 text-sm font-medium transition-colors"
>
1
</button>
<button
type="button"
data-tbl-page="2"
aria-current="false"
class="inline-flex h-8 min-w-8 items-center justify-center rounded-md px-2 text-sm font-medium transition-colors"
>
2
</button>
<button
type="button"
data-tbl-page="3"
aria-current="false"
class="inline-flex h-8 min-w-8 items-center justify-center rounded-md px-2 text-sm font-medium transition-colors"
>
3
</button>
<button type="button" data-tbl-page="next" aria-label="Next page" class="inline-flex h-8 w-8 items-center justify-center rounded-md text-muted transition-colors hover:bg-subtle hover:text-heading focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary">
<i class="ph ph-caret-right text-base"></i>
</button>
<label class="ml-2 flex items-center gap-2 text-sm text-muted">
<span class="sr-only">Rows per page</span>
<select
data-tbl-size
class="h-8 rounded-md border border-border bg-surface px-2 text-sm text-text focus:border-primary focus:outline-none"
>
<option value="5" selected>5 / page</option>
<option value="10">10 / page</option>
<option value="12">12 / page</option>
</select>
</label>
</div>
</div>
</div>Group
Group rows under a heading using one
<tbody>
per group.
| First Name | Last Name | |
|---|---|---|
| Manager 2 | ||
| Kaitlin | Winters | kaitlin@example.com |
| Griselda | Ramirez | griselda@example.com |
| Engineer 2 | ||
| Susan | Cortez | s.cortez@northwind.example.com |
| Colin | Wu | colin.wu@example.com |
| Developer 1 | ||
| Precious | Chang | precious@bluebottle.example.com |
<div data-tbl class="overflow-hidden rounded-xl border border-border">
<div class="overflow-x-auto">
<table class="w-full min-w-[640px] text-sm">
<thead>
<tr class="border-b border-border bg-subtle">
<th scope="col" class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary">First Name</th>
<th scope="col" class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary">Last Name</th>
<th scope="col" class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary">Email</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-border bg-subtle/60">
<th colspan="3" scope="colgroup" class="px-4 py-2 text-left text-xs font-semibold text-heading">
Manager
<span class="ml-1.5 font-normal text-muted">2</span>
</th>
</tr>
<tr class="border-b border-border-subtle">
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Kaitlin</td>
<td class="px-4 py-3 text-sm text-text">Winters</td>
<td class="px-4 py-3 text-sm text-text">kaitlin@example.com</td>
</tr>
<tr class="border-b border-border-subtle">
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Griselda</td>
<td class="px-4 py-3 text-sm text-text">Ramirez</td>
<td class="px-4 py-3 text-sm text-text">griselda@example.com</td>
</tr>
</tbody>
<tbody>
<tr class="border-b border-border bg-subtle/60">
<th colspan="3" scope="colgroup" class="px-4 py-2 text-left text-xs font-semibold text-heading">
Engineer
<span class="ml-1.5 font-normal text-muted">2</span>
</th>
</tr>
<tr class="border-b border-border-subtle">
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Susan</td>
<td class="px-4 py-3 text-sm text-text">Cortez</td>
<td class="px-4 py-3 text-sm text-text">s.cortez@northwind.example.com</td>
</tr>
<tr class="border-b border-border-subtle">
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Colin</td>
<td class="px-4 py-3 text-sm text-text">Wu</td>
<td class="px-4 py-3 text-sm text-text">colin.wu@example.com</td>
</tr>
</tbody>
<tbody>
<tr class="border-b border-border bg-subtle/60">
<th colspan="3" scope="colgroup" class="px-4 py-2 text-left text-xs font-semibold text-heading">
Developer
<span class="ml-1.5 font-normal text-muted">1</span>
</th>
</tr>
<tr class="border-b border-border-subtle">
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Precious</td>
<td class="px-4 py-3 text-sm text-text">Chang</td>
<td class="px-4 py-3 text-sm text-text">precious@bluebottle.example.com</td>
</tr>
</tbody>
</table>
</div>
</div>Row Selection
The header checkbox selects every visible row and reflects a partial selection.
0 selected
| First Name | Last Name | ||
|---|---|---|---|
| Kaitlin | Winters | kaitlin@example.com | |
| Precious | Chang | precious@bluebottle.example.com | |
| Susan | Cortez | s.cortez@northwind.example.com | |
| Owen | Mcdougall | gaia.hagen@bindhawk.example.com | |
| Maud | Mcintyre | gabriel.mccabe@example.com | |
| Griselda | Ramirez | griselda@example.com | |
| Marisa | Larson | marisa.l@lumon.example.com | |
| Neil | Gaiman | neil@sandman.example.com | |
| Anita | Bryant | anita.bryant@example.com |
<div data-tbl class="overflow-hidden rounded-xl border border-border">
<div class="flex items-center justify-between gap-3 border-b border-border px-4 py-2.5">
<p class="text-sm text-muted">
<span class="font-medium text-heading" data-tbl-count>0</span> selected
</p>
</div>
<div class="overflow-x-auto">
<table class="w-full min-w-[640px] text-sm">
<thead>
<tr class="border-b border-border bg-subtle">
<th scope="col" class="w-12 px-4 py-3">
<input type="checkbox" data-tbl-all aria-label="Select all rows" class="h-4 w-4 shrink-0 rounded border-border-strong accent-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" />
</th>
<th scope="col" class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary">First Name</th>
<th scope="col" class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary">Last Name</th>
<th scope="col" class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary">Email</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-border-subtle last:border-0 transition-colors">
<td class="px-4 py-3">
<input type="checkbox" data-tbl-select aria-label="Select Kaitlin Winters" class="h-4 w-4 shrink-0 rounded border-border-strong accent-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" />
</td>
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Kaitlin</td>
<td class="px-4 py-3 text-sm text-text">Winters</td>
<td class="px-4 py-3 text-sm text-text">kaitlin@example.com</td>
</tr>
<tr class="border-b border-border-subtle last:border-0 transition-colors">
<td class="px-4 py-3">
<input type="checkbox" data-tbl-select aria-label="Select Precious Chang" class="h-4 w-4 shrink-0 rounded border-border-strong accent-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" />
</td>
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Precious</td>
<td class="px-4 py-3 text-sm text-text">Chang</td>
<td class="px-4 py-3 text-sm text-text">precious@bluebottle.example.com</td>
</tr>
<tr class="border-b border-border-subtle last:border-0 transition-colors">
<td class="px-4 py-3">
<input type="checkbox" data-tbl-select aria-label="Select Susan Cortez" class="h-4 w-4 shrink-0 rounded border-border-strong accent-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" />
</td>
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Susan</td>
<td class="px-4 py-3 text-sm text-text">Cortez</td>
<td class="px-4 py-3 text-sm text-text">s.cortez@northwind.example.com</td>
</tr>
<tr class="border-b border-border-subtle last:border-0 transition-colors">
<td class="px-4 py-3">
<input type="checkbox" data-tbl-select aria-label="Select Owen Mcdougall" class="h-4 w-4 shrink-0 rounded border-border-strong accent-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" />
</td>
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Owen</td>
<td class="px-4 py-3 text-sm text-text">Mcdougall</td>
<td class="px-4 py-3 text-sm text-text">gaia.hagen@bindhawk.example.com</td>
</tr>
<tr class="border-b border-border-subtle last:border-0 transition-colors">
<td class="px-4 py-3">
<input type="checkbox" data-tbl-select aria-label="Select Maud Mcintyre" class="h-4 w-4 shrink-0 rounded border-border-strong accent-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" />
</td>
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Maud</td>
<td class="px-4 py-3 text-sm text-text">Mcintyre</td>
<td class="px-4 py-3 text-sm text-text">gabriel.mccabe@example.com</td>
</tr>
<tr class="border-b border-border-subtle last:border-0 transition-colors">
<td class="px-4 py-3">
<input type="checkbox" data-tbl-select aria-label="Select Griselda Ramirez" class="h-4 w-4 shrink-0 rounded border-border-strong accent-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" />
</td>
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Griselda</td>
<td class="px-4 py-3 text-sm text-text">Ramirez</td>
<td class="px-4 py-3 text-sm text-text">griselda@example.com</td>
</tr>
<tr class="border-b border-border-subtle last:border-0 transition-colors">
<td class="px-4 py-3">
<input type="checkbox" data-tbl-select aria-label="Select Marisa Larson" class="h-4 w-4 shrink-0 rounded border-border-strong accent-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" />
</td>
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Marisa</td>
<td class="px-4 py-3 text-sm text-text">Larson</td>
<td class="px-4 py-3 text-sm text-text">marisa.l@lumon.example.com</td>
</tr>
<tr class="border-b border-border-subtle last:border-0 transition-colors">
<td class="px-4 py-3">
<input type="checkbox" data-tbl-select aria-label="Select Neil Gaiman" class="h-4 w-4 shrink-0 rounded border-border-strong accent-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" />
</td>
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Neil</td>
<td class="px-4 py-3 text-sm text-text">Gaiman</td>
<td class="px-4 py-3 text-sm text-text">neil@sandman.example.com</td>
</tr>
<tr class="border-b border-border-subtle last:border-0 transition-colors">
<td class="px-4 py-3">
<input type="checkbox" data-tbl-select aria-label="Select Anita Bryant" class="h-4 w-4 shrink-0 rounded border-border-strong accent-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" />
</td>
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Anita</td>
<td class="px-4 py-3 text-sm text-text">Bryant</td>
<td class="px-4 py-3 text-sm text-text">anita.bryant@example.com</td>
</tr>
</tbody>
</table>
</div>
</div>Expanding
Each row can reveal a detail panel beneath it.
| Expand | First Name | Last Name | Age | Visits | Status |
|---|---|---|---|---|---|
| Kaitlin | Winters | 34 | 46 | single | |
|
|||||
| Precious | Chang | 27 | 61 | single | |
|
|||||
| Susan | Cortez | 41 | 55 | married | |
|
|||||
| Owen | Mcdougall | 22 | 38 | single | |
|
|||||
| Maud | Mcintyre | 36 | 72 | married | |
|
|||||
<div data-tbl class="overflow-hidden rounded-xl border border-border">
<div class="overflow-x-auto">
<table class="w-full min-w-[720px] text-sm">
<thead>
<tr class="border-b border-border bg-subtle">
<th scope="col" class="w-12 px-4 py-3"><span class="sr-only">Expand</span></th>
<th scope="col" class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary">First Name</th>
<th scope="col" class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary">Last Name</th>
<th scope="col" class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary">Age</th>
<th scope="col" class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary">Visits</th>
<th scope="col" class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary">Status</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-border-subtle">
<td class="px-4 py-3">
<button
type="button"
data-tbl-expand
aria-expanded="false"
aria-label="Toggle details for Kaitlin Winters"
class="inline-flex h-8 w-8 items-center justify-center rounded-md text-muted transition-colors hover:bg-subtle hover:text-heading focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
>
<i class="ph ph-caret-right text-base transition-transform"></i>
</button>
</td>
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Kaitlin</td>
<td class="px-4 py-3 text-sm text-text">Winters</td>
<td class="px-4 py-3 text-sm text-text tabular-nums">34</td>
<td class="px-4 py-3 text-sm text-text tabular-nums">46</td>
<td class="px-4 py-3 text-sm text-text">single</td>
</tr>
<tr data-tbl-detail class="hidden border-b border-border-subtle bg-subtle">
<td colspan="6" class="px-4 py-4">
<dl class="grid gap-x-6 gap-y-3 sm:grid-cols-3">
<div>
<dt class="text-xs text-muted">Email</dt>
<dd class="mt-0.5 text-sm text-heading">kaitlin@example.com</dd>
</div>
<div>
<dt class="text-xs text-muted">Role</dt>
<dd class="mt-0.5 text-sm text-heading">Manager</dd>
</div>
<div>
<dt class="text-xs text-muted">Profile progress</dt>
<dd class="mt-0.5 text-sm text-heading tabular-nums">80%</dd>
</div>
</dl>
</td>
</tr>
<tr class="border-b border-border-subtle">
<td class="px-4 py-3">
<button
type="button"
data-tbl-expand
aria-expanded="false"
aria-label="Toggle details for Precious Chang"
class="inline-flex h-8 w-8 items-center justify-center rounded-md text-muted transition-colors hover:bg-subtle hover:text-heading focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
>
<i class="ph ph-caret-right text-base transition-transform"></i>
</button>
</td>
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Precious</td>
<td class="px-4 py-3 text-sm text-text">Chang</td>
<td class="px-4 py-3 text-sm text-text tabular-nums">27</td>
<td class="px-4 py-3 text-sm text-text tabular-nums">61</td>
<td class="px-4 py-3 text-sm text-text">single</td>
</tr>
<tr data-tbl-detail class="hidden border-b border-border-subtle bg-subtle">
<td colspan="6" class="px-4 py-4">
<dl class="grid gap-x-6 gap-y-3 sm:grid-cols-3">
<div>
<dt class="text-xs text-muted">Email</dt>
<dd class="mt-0.5 text-sm text-heading">precious@bluebottle.example.com</dd>
</div>
<div>
<dt class="text-xs text-muted">Role</dt>
<dd class="mt-0.5 text-sm text-heading">Developer</dd>
</div>
<div>
<dt class="text-xs text-muted">Profile progress</dt>
<dd class="mt-0.5 text-sm text-heading tabular-nums">88%</dd>
</div>
</dl>
</td>
</tr>
<tr class="border-b border-border-subtle">
<td class="px-4 py-3">
<button
type="button"
data-tbl-expand
aria-expanded="false"
aria-label="Toggle details for Susan Cortez"
class="inline-flex h-8 w-8 items-center justify-center rounded-md text-muted transition-colors hover:bg-subtle hover:text-heading focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
>
<i class="ph ph-caret-right text-base transition-transform"></i>
</button>
</td>
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Susan</td>
<td class="px-4 py-3 text-sm text-text">Cortez</td>
<td class="px-4 py-3 text-sm text-text tabular-nums">41</td>
<td class="px-4 py-3 text-sm text-text tabular-nums">55</td>
<td class="px-4 py-3 text-sm text-text">married</td>
</tr>
<tr data-tbl-detail class="hidden border-b border-border-subtle bg-subtle">
<td colspan="6" class="px-4 py-4">
<dl class="grid gap-x-6 gap-y-3 sm:grid-cols-3">
<div>
<dt class="text-xs text-muted">Email</dt>
<dd class="mt-0.5 text-sm text-heading">s.cortez@northwind.example.com</dd>
</div>
<div>
<dt class="text-xs text-muted">Role</dt>
<dd class="mt-0.5 text-sm text-heading">Engineer</dd>
</div>
<div>
<dt class="text-xs text-muted">Profile progress</dt>
<dd class="mt-0.5 text-sm text-heading tabular-nums">96%</dd>
</div>
</dl>
</td>
</tr>
<tr class="border-b border-border-subtle">
<td class="px-4 py-3">
<button
type="button"
data-tbl-expand
aria-expanded="false"
aria-label="Toggle details for Owen Mcdougall"
class="inline-flex h-8 w-8 items-center justify-center rounded-md text-muted transition-colors hover:bg-subtle hover:text-heading focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
>
<i class="ph ph-caret-right text-base transition-transform"></i>
</button>
</td>
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Owen</td>
<td class="px-4 py-3 text-sm text-text">Mcdougall</td>
<td class="px-4 py-3 text-sm text-text tabular-nums">22</td>
<td class="px-4 py-3 text-sm text-text tabular-nums">38</td>
<td class="px-4 py-3 text-sm text-text">single</td>
</tr>
<tr data-tbl-detail class="hidden border-b border-border-subtle bg-subtle">
<td colspan="6" class="px-4 py-4">
<dl class="grid gap-x-6 gap-y-3 sm:grid-cols-3">
<div>
<dt class="text-xs text-muted">Email</dt>
<dd class="mt-0.5 text-sm text-heading">gaia.hagen@bindhawk.example.com</dd>
</div>
<div>
<dt class="text-xs text-muted">Role</dt>
<dd class="mt-0.5 text-sm text-heading">Designer</dd>
</div>
<div>
<dt class="text-xs text-muted">Profile progress</dt>
<dd class="mt-0.5 text-sm text-heading tabular-nums">60%</dd>
</div>
</dl>
</td>
</tr>
<tr class="border-b border-border-subtle">
<td class="px-4 py-3">
<button
type="button"
data-tbl-expand
aria-expanded="false"
aria-label="Toggle details for Maud Mcintyre"
class="inline-flex h-8 w-8 items-center justify-center rounded-md text-muted transition-colors hover:bg-subtle hover:text-heading focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
>
<i class="ph ph-caret-right text-base transition-transform"></i>
</button>
</td>
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Maud</td>
<td class="px-4 py-3 text-sm text-text">Mcintyre</td>
<td class="px-4 py-3 text-sm text-text tabular-nums">36</td>
<td class="px-4 py-3 text-sm text-text tabular-nums">72</td>
<td class="px-4 py-3 text-sm text-text">married</td>
</tr>
<tr data-tbl-detail class="hidden border-b border-border-subtle bg-subtle">
<td colspan="6" class="px-4 py-4">
<dl class="grid gap-x-6 gap-y-3 sm:grid-cols-3">
<div>
<dt class="text-xs text-muted">Email</dt>
<dd class="mt-0.5 text-sm text-heading">gabriel.mccabe@example.com</dd>
</div>
<div>
<dt class="text-xs text-muted">Role</dt>
<dd class="mt-0.5 text-sm text-heading">Analyst</dd>
</div>
<div>
<dt class="text-xs text-muted">Profile progress</dt>
<dd class="mt-0.5 text-sm text-heading tabular-nums">108%</dd>
</div>
</dl>
</td>
</tr>
</tbody>
</table>
</div>
</div>SubComponent
The expanded panel can hold any markup, including a nested table.
| Expand | First Name | Last Name | Age | Visits | Status | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Kaitlin | Winters | 34 | 46 | single | ||||||||||
|
||||||||||||||
| Precious | Chang | 27 | 61 | single | ||||||||||
|
||||||||||||||
| Susan | Cortez | 41 | 55 | married | ||||||||||
|
||||||||||||||
| Owen | Mcdougall | 22 | 38 | single | ||||||||||
|
||||||||||||||
| Maud | Mcintyre | 36 | 72 | married | ||||||||||
|
||||||||||||||
<div data-tbl class="overflow-hidden rounded-xl border border-border">
<div class="overflow-x-auto">
<table class="w-full min-w-[720px] text-sm">
<thead>
<tr class="border-b border-border bg-subtle">
<th scope="col" class="w-12 px-4 py-3"><span class="sr-only">Expand</span></th>
<th scope="col" class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary">First Name</th>
<th scope="col" class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary">Last Name</th>
<th scope="col" class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary">Age</th>
<th scope="col" class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary">Visits</th>
<th scope="col" class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary">Status</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-border-subtle">
<td class="px-4 py-3">
<button
type="button"
data-tbl-expand
aria-expanded="false"
aria-label="Toggle details for Kaitlin Winters"
class="inline-flex h-8 w-8 items-center justify-center rounded-md text-muted transition-colors hover:bg-subtle hover:text-heading focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
>
<i class="ph ph-caret-right text-base transition-transform"></i>
</button>
</td>
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Kaitlin</td>
<td class="px-4 py-3 text-sm text-text">Winters</td>
<td class="px-4 py-3 text-sm text-text tabular-nums">34</td>
<td class="px-4 py-3 text-sm text-text tabular-nums">46</td>
<td class="px-4 py-3 text-sm text-text">single</td>
</tr>
<tr data-tbl-detail class="hidden border-b border-border-subtle bg-subtle">
<td colspan="6" class="px-4 py-4">
<div class="overflow-hidden rounded-lg border border-border bg-surface">
<table class="w-full text-sm">
<thead>
<tr class="border-b border-border bg-subtle">
<th scope="col" class="px-3 py-2 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary">Metric</th>
<th scope="col" class="px-3 py-2 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary">Q2</th>
<th scope="col" class="px-3 py-2 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary">Q3</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-border-subtle">
<td class="px-3 py-2 text-text">Deals closed</td>
<td class="px-3 py-2 tabular-nums text-text">38</td>
<td class="px-3 py-2 tabular-nums font-medium text-heading">46</td>
</tr>
<tr>
<td class="px-3 py-2 text-text">Revenue</td>
<td class="px-3 py-2 tabular-nums text-text">$41,400</td>
<td class="px-3 py-2 tabular-nums font-medium text-heading">$55,200</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr class="border-b border-border-subtle">
<td class="px-4 py-3">
<button
type="button"
data-tbl-expand
aria-expanded="false"
aria-label="Toggle details for Precious Chang"
class="inline-flex h-8 w-8 items-center justify-center rounded-md text-muted transition-colors hover:bg-subtle hover:text-heading focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
>
<i class="ph ph-caret-right text-base transition-transform"></i>
</button>
</td>
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Precious</td>
<td class="px-4 py-3 text-sm text-text">Chang</td>
<td class="px-4 py-3 text-sm text-text tabular-nums">27</td>
<td class="px-4 py-3 text-sm text-text tabular-nums">61</td>
<td class="px-4 py-3 text-sm text-text">single</td>
</tr>
<tr data-tbl-detail class="hidden border-b border-border-subtle bg-subtle">
<td colspan="6" class="px-4 py-4">
<div class="overflow-hidden rounded-lg border border-border bg-surface">
<table class="w-full text-sm">
<thead>
<tr class="border-b border-border bg-subtle">
<th scope="col" class="px-3 py-2 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary">Metric</th>
<th scope="col" class="px-3 py-2 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary">Q2</th>
<th scope="col" class="px-3 py-2 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary">Q3</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-border-subtle">
<td class="px-3 py-2 text-text">Deals closed</td>
<td class="px-3 py-2 tabular-nums text-text">53</td>
<td class="px-3 py-2 tabular-nums font-medium text-heading">61</td>
</tr>
<tr>
<td class="px-3 py-2 text-text">Revenue</td>
<td class="px-3 py-2 tabular-nums text-text">$54,900</td>
<td class="px-3 py-2 tabular-nums font-medium text-heading">$73,200</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr class="border-b border-border-subtle">
<td class="px-4 py-3">
<button
type="button"
data-tbl-expand
aria-expanded="false"
aria-label="Toggle details for Susan Cortez"
class="inline-flex h-8 w-8 items-center justify-center rounded-md text-muted transition-colors hover:bg-subtle hover:text-heading focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
>
<i class="ph ph-caret-right text-base transition-transform"></i>
</button>
</td>
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Susan</td>
<td class="px-4 py-3 text-sm text-text">Cortez</td>
<td class="px-4 py-3 text-sm text-text tabular-nums">41</td>
<td class="px-4 py-3 text-sm text-text tabular-nums">55</td>
<td class="px-4 py-3 text-sm text-text">married</td>
</tr>
<tr data-tbl-detail class="hidden border-b border-border-subtle bg-subtle">
<td colspan="6" class="px-4 py-4">
<div class="overflow-hidden rounded-lg border border-border bg-surface">
<table class="w-full text-sm">
<thead>
<tr class="border-b border-border bg-subtle">
<th scope="col" class="px-3 py-2 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary">Metric</th>
<th scope="col" class="px-3 py-2 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary">Q2</th>
<th scope="col" class="px-3 py-2 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary">Q3</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-border-subtle">
<td class="px-3 py-2 text-text">Deals closed</td>
<td class="px-3 py-2 tabular-nums text-text">47</td>
<td class="px-3 py-2 tabular-nums font-medium text-heading">55</td>
</tr>
<tr>
<td class="px-3 py-2 text-text">Revenue</td>
<td class="px-3 py-2 tabular-nums text-text">$49,500</td>
<td class="px-3 py-2 tabular-nums font-medium text-heading">$66,000</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr class="border-b border-border-subtle">
<td class="px-4 py-3">
<button
type="button"
data-tbl-expand
aria-expanded="false"
aria-label="Toggle details for Owen Mcdougall"
class="inline-flex h-8 w-8 items-center justify-center rounded-md text-muted transition-colors hover:bg-subtle hover:text-heading focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
>
<i class="ph ph-caret-right text-base transition-transform"></i>
</button>
</td>
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Owen</td>
<td class="px-4 py-3 text-sm text-text">Mcdougall</td>
<td class="px-4 py-3 text-sm text-text tabular-nums">22</td>
<td class="px-4 py-3 text-sm text-text tabular-nums">38</td>
<td class="px-4 py-3 text-sm text-text">single</td>
</tr>
<tr data-tbl-detail class="hidden border-b border-border-subtle bg-subtle">
<td colspan="6" class="px-4 py-4">
<div class="overflow-hidden rounded-lg border border-border bg-surface">
<table class="w-full text-sm">
<thead>
<tr class="border-b border-border bg-subtle">
<th scope="col" class="px-3 py-2 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary">Metric</th>
<th scope="col" class="px-3 py-2 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary">Q2</th>
<th scope="col" class="px-3 py-2 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary">Q3</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-border-subtle">
<td class="px-3 py-2 text-text">Deals closed</td>
<td class="px-3 py-2 tabular-nums text-text">30</td>
<td class="px-3 py-2 tabular-nums font-medium text-heading">38</td>
</tr>
<tr>
<td class="px-3 py-2 text-text">Revenue</td>
<td class="px-3 py-2 tabular-nums text-text">$34,200</td>
<td class="px-3 py-2 tabular-nums font-medium text-heading">$45,600</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr class="border-b border-border-subtle">
<td class="px-4 py-3">
<button
type="button"
data-tbl-expand
aria-expanded="false"
aria-label="Toggle details for Maud Mcintyre"
class="inline-flex h-8 w-8 items-center justify-center rounded-md text-muted transition-colors hover:bg-subtle hover:text-heading focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
>
<i class="ph ph-caret-right text-base transition-transform"></i>
</button>
</td>
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Maud</td>
<td class="px-4 py-3 text-sm text-text">Mcintyre</td>
<td class="px-4 py-3 text-sm text-text tabular-nums">36</td>
<td class="px-4 py-3 text-sm text-text tabular-nums">72</td>
<td class="px-4 py-3 text-sm text-text">married</td>
</tr>
<tr data-tbl-detail class="hidden border-b border-border-subtle bg-subtle">
<td colspan="6" class="px-4 py-4">
<div class="overflow-hidden rounded-lg border border-border bg-surface">
<table class="w-full text-sm">
<thead>
<tr class="border-b border-border bg-subtle">
<th scope="col" class="px-3 py-2 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary">Metric</th>
<th scope="col" class="px-3 py-2 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary">Q2</th>
<th scope="col" class="px-3 py-2 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary">Q3</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-border-subtle">
<td class="px-3 py-2 text-text">Deals closed</td>
<td class="px-3 py-2 tabular-nums text-text">64</td>
<td class="px-3 py-2 tabular-nums font-medium text-heading">72</td>
</tr>
<tr>
<td class="px-3 py-2 text-text">Revenue</td>
<td class="px-3 py-2 tabular-nums text-text">$64,800</td>
<td class="px-3 py-2 tabular-nums font-medium text-heading">$86,400</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>Editable
Click a cell to edit it. Enter commits, Escape reverts.
| First Name | Last Name | |
|---|---|---|
| Kaitlin | Winters | kaitlin@example.com |
| Precious | Chang | precious@bluebottle.example.com |
| Susan | Cortez | s.cortez@northwind.example.com |
| Owen | Mcdougall | gaia.hagen@bindhawk.example.com |
| Maud | Mcintyre | gabriel.mccabe@example.com |
| Griselda | Ramirez | griselda@example.com |
| Marisa | Larson | marisa.l@lumon.example.com |
| Neil | Gaiman | neil@sandman.example.com |
<div data-tbl class="overflow-hidden rounded-xl border border-border">
<div class="overflow-x-auto">
<table class="w-full min-w-[640px] text-sm">
<thead>
<tr class="border-b border-border bg-subtle">
<th scope="col" class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary">First Name</th>
<th scope="col" class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary">Last Name</th>
<th scope="col" class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary">Email</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-border-subtle last:border-0">
<td class="px-4 py-3 text-sm text-text cursor-text font-medium text-heading transition-colors hover:bg-subtle" data-tbl-edit>Kaitlin</td>
<td class="px-4 py-3 text-sm text-text cursor-text transition-colors hover:bg-subtle" data-tbl-edit>Winters</td>
<td class="px-4 py-3 text-sm text-text cursor-text transition-colors hover:bg-subtle" data-tbl-edit>kaitlin@example.com</td>
</tr>
<tr class="border-b border-border-subtle last:border-0">
<td class="px-4 py-3 text-sm text-text cursor-text font-medium text-heading transition-colors hover:bg-subtle" data-tbl-edit>Precious</td>
<td class="px-4 py-3 text-sm text-text cursor-text transition-colors hover:bg-subtle" data-tbl-edit>Chang</td>
<td class="px-4 py-3 text-sm text-text cursor-text transition-colors hover:bg-subtle" data-tbl-edit>precious@bluebottle.example.com</td>
</tr>
<tr class="border-b border-border-subtle last:border-0">
<td class="px-4 py-3 text-sm text-text cursor-text font-medium text-heading transition-colors hover:bg-subtle" data-tbl-edit>Susan</td>
<td class="px-4 py-3 text-sm text-text cursor-text transition-colors hover:bg-subtle" data-tbl-edit>Cortez</td>
<td class="px-4 py-3 text-sm text-text cursor-text transition-colors hover:bg-subtle" data-tbl-edit>s.cortez@northwind.example.com</td>
</tr>
<tr class="border-b border-border-subtle last:border-0">
<td class="px-4 py-3 text-sm text-text cursor-text font-medium text-heading transition-colors hover:bg-subtle" data-tbl-edit>Owen</td>
<td class="px-4 py-3 text-sm text-text cursor-text transition-colors hover:bg-subtle" data-tbl-edit>Mcdougall</td>
<td class="px-4 py-3 text-sm text-text cursor-text transition-colors hover:bg-subtle" data-tbl-edit>gaia.hagen@bindhawk.example.com</td>
</tr>
<tr class="border-b border-border-subtle last:border-0">
<td class="px-4 py-3 text-sm text-text cursor-text font-medium text-heading transition-colors hover:bg-subtle" data-tbl-edit>Maud</td>
<td class="px-4 py-3 text-sm text-text cursor-text transition-colors hover:bg-subtle" data-tbl-edit>Mcintyre</td>
<td class="px-4 py-3 text-sm text-text cursor-text transition-colors hover:bg-subtle" data-tbl-edit>gabriel.mccabe@example.com</td>
</tr>
<tr class="border-b border-border-subtle last:border-0">
<td class="px-4 py-3 text-sm text-text cursor-text font-medium text-heading transition-colors hover:bg-subtle" data-tbl-edit>Griselda</td>
<td class="px-4 py-3 text-sm text-text cursor-text transition-colors hover:bg-subtle" data-tbl-edit>Ramirez</td>
<td class="px-4 py-3 text-sm text-text cursor-text transition-colors hover:bg-subtle" data-tbl-edit>griselda@example.com</td>
</tr>
<tr class="border-b border-border-subtle last:border-0">
<td class="px-4 py-3 text-sm text-text cursor-text font-medium text-heading transition-colors hover:bg-subtle" data-tbl-edit>Marisa</td>
<td class="px-4 py-3 text-sm text-text cursor-text transition-colors hover:bg-subtle" data-tbl-edit>Larson</td>
<td class="px-4 py-3 text-sm text-text cursor-text transition-colors hover:bg-subtle" data-tbl-edit>marisa.l@lumon.example.com</td>
</tr>
<tr class="border-b border-border-subtle last:border-0">
<td class="px-4 py-3 text-sm text-text cursor-text font-medium text-heading transition-colors hover:bg-subtle" data-tbl-edit>Neil</td>
<td class="px-4 py-3 text-sm text-text cursor-text transition-colors hover:bg-subtle" data-tbl-edit>Gaiman</td>
<td class="px-4 py-3 text-sm text-text cursor-text transition-colors hover:bg-subtle" data-tbl-edit>neil@sandman.example.com</td>
</tr>
</tbody>
</table>
</div>
</div>Drag & Drop
Drag the handle to reorder rows.
| Reorder | First Name | Last Name | |
|---|---|---|---|
| Kaitlin | Winters | kaitlin@example.com | |
| Precious | Chang | precious@bluebottle.example.com | |
| Susan | Cortez | s.cortez@northwind.example.com | |
| Owen | Mcdougall | gaia.hagen@bindhawk.example.com | |
| Maud | Mcintyre | gabriel.mccabe@example.com | |
| Griselda | Ramirez | griselda@example.com | |
| Marisa | Larson | marisa.l@lumon.example.com | |
| Neil | Gaiman | neil@sandman.example.com | |
| Anita | Bryant | anita.bryant@example.com |
<div data-tbl class="overflow-hidden rounded-xl border border-border">
<div class="overflow-x-auto">
<table class="w-full min-w-[640px] text-sm">
<thead>
<tr class="border-b border-border bg-subtle">
<th scope="col" class="w-12 px-4 py-3"><span class="sr-only">Reorder</span></th>
<th scope="col" class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary">First Name</th>
<th scope="col" class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary">Last Name</th>
<th scope="col" class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary">Email</th>
</tr>
</thead>
<tbody data-tbl-reorder>
<tr class="border-b border-border-subtle last:border-0 transition-opacity">
<td class="px-4 py-3">
<span
data-tbl-handle
role="button"
tabindex="0"
aria-label="Drag to reorder Kaitlin Winters"
class="inline-flex h-8 w-8 cursor-grab items-center justify-center rounded-md text-muted transition-colors hover:bg-subtle hover:text-heading active:cursor-grabbing"
>
<i class="ph ph-dots-six-vertical text-base"></i>
</span>
</td>
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Kaitlin</td>
<td class="px-4 py-3 text-sm text-text">Winters</td>
<td class="px-4 py-3 text-sm text-text">kaitlin@example.com</td>
</tr>
<tr class="border-b border-border-subtle last:border-0 transition-opacity">
<td class="px-4 py-3">
<span
data-tbl-handle
role="button"
tabindex="0"
aria-label="Drag to reorder Precious Chang"
class="inline-flex h-8 w-8 cursor-grab items-center justify-center rounded-md text-muted transition-colors hover:bg-subtle hover:text-heading active:cursor-grabbing"
>
<i class="ph ph-dots-six-vertical text-base"></i>
</span>
</td>
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Precious</td>
<td class="px-4 py-3 text-sm text-text">Chang</td>
<td class="px-4 py-3 text-sm text-text">precious@bluebottle.example.com</td>
</tr>
<tr class="border-b border-border-subtle last:border-0 transition-opacity">
<td class="px-4 py-3">
<span
data-tbl-handle
role="button"
tabindex="0"
aria-label="Drag to reorder Susan Cortez"
class="inline-flex h-8 w-8 cursor-grab items-center justify-center rounded-md text-muted transition-colors hover:bg-subtle hover:text-heading active:cursor-grabbing"
>
<i class="ph ph-dots-six-vertical text-base"></i>
</span>
</td>
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Susan</td>
<td class="px-4 py-3 text-sm text-text">Cortez</td>
<td class="px-4 py-3 text-sm text-text">s.cortez@northwind.example.com</td>
</tr>
<tr class="border-b border-border-subtle last:border-0 transition-opacity">
<td class="px-4 py-3">
<span
data-tbl-handle
role="button"
tabindex="0"
aria-label="Drag to reorder Owen Mcdougall"
class="inline-flex h-8 w-8 cursor-grab items-center justify-center rounded-md text-muted transition-colors hover:bg-subtle hover:text-heading active:cursor-grabbing"
>
<i class="ph ph-dots-six-vertical text-base"></i>
</span>
</td>
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Owen</td>
<td class="px-4 py-3 text-sm text-text">Mcdougall</td>
<td class="px-4 py-3 text-sm text-text">gaia.hagen@bindhawk.example.com</td>
</tr>
<tr class="border-b border-border-subtle last:border-0 transition-opacity">
<td class="px-4 py-3">
<span
data-tbl-handle
role="button"
tabindex="0"
aria-label="Drag to reorder Maud Mcintyre"
class="inline-flex h-8 w-8 cursor-grab items-center justify-center rounded-md text-muted transition-colors hover:bg-subtle hover:text-heading active:cursor-grabbing"
>
<i class="ph ph-dots-six-vertical text-base"></i>
</span>
</td>
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Maud</td>
<td class="px-4 py-3 text-sm text-text">Mcintyre</td>
<td class="px-4 py-3 text-sm text-text">gabriel.mccabe@example.com</td>
</tr>
<tr class="border-b border-border-subtle last:border-0 transition-opacity">
<td class="px-4 py-3">
<span
data-tbl-handle
role="button"
tabindex="0"
aria-label="Drag to reorder Griselda Ramirez"
class="inline-flex h-8 w-8 cursor-grab items-center justify-center rounded-md text-muted transition-colors hover:bg-subtle hover:text-heading active:cursor-grabbing"
>
<i class="ph ph-dots-six-vertical text-base"></i>
</span>
</td>
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Griselda</td>
<td class="px-4 py-3 text-sm text-text">Ramirez</td>
<td class="px-4 py-3 text-sm text-text">griselda@example.com</td>
</tr>
<tr class="border-b border-border-subtle last:border-0 transition-opacity">
<td class="px-4 py-3">
<span
data-tbl-handle
role="button"
tabindex="0"
aria-label="Drag to reorder Marisa Larson"
class="inline-flex h-8 w-8 cursor-grab items-center justify-center rounded-md text-muted transition-colors hover:bg-subtle hover:text-heading active:cursor-grabbing"
>
<i class="ph ph-dots-six-vertical text-base"></i>
</span>
</td>
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Marisa</td>
<td class="px-4 py-3 text-sm text-text">Larson</td>
<td class="px-4 py-3 text-sm text-text">marisa.l@lumon.example.com</td>
</tr>
<tr class="border-b border-border-subtle last:border-0 transition-opacity">
<td class="px-4 py-3">
<span
data-tbl-handle
role="button"
tabindex="0"
aria-label="Drag to reorder Neil Gaiman"
class="inline-flex h-8 w-8 cursor-grab items-center justify-center rounded-md text-muted transition-colors hover:bg-subtle hover:text-heading active:cursor-grabbing"
>
<i class="ph ph-dots-six-vertical text-base"></i>
</span>
</td>
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Neil</td>
<td class="px-4 py-3 text-sm text-text">Gaiman</td>
<td class="px-4 py-3 text-sm text-text">neil@sandman.example.com</td>
</tr>
<tr class="border-b border-border-subtle last:border-0 transition-opacity">
<td class="px-4 py-3">
<span
data-tbl-handle
role="button"
tabindex="0"
aria-label="Drag to reorder Anita Bryant"
class="inline-flex h-8 w-8 cursor-grab items-center justify-center rounded-md text-muted transition-colors hover:bg-subtle hover:text-heading active:cursor-grabbing"
>
<i class="ph ph-dots-six-vertical text-base"></i>
</span>
</td>
<td class="px-4 py-3 text-sm text-text font-medium text-heading">Anita</td>
<td class="px-4 py-3 text-sm text-text">Bryant</td>
<td class="px-4 py-3 text-sm text-text">anita.bryant@example.com</td>
</tr>
</tbody>
</table>
</div>
</div>Resizable
Drag the divider in a header to resize that column. Arrow keys work too.
| First Name | Last Name | Role | |
|---|---|---|---|
| Kaitlin | Winters | kaitlin@example.com | Manager |
| Precious | Chang | precious@bluebottle.example.com | Developer |
| Susan | Cortez | s.cortez@northwind.example.com | Engineer |
| Owen | Mcdougall | gaia.hagen@bindhawk.example.com | Designer |
| Maud | Mcintyre | gabriel.mccabe@example.com | Analyst |
| Griselda | Ramirez | griselda@example.com | Manager |
| Marisa | Larson | marisa.l@lumon.example.com | Support |
| Neil | Gaiman | neil@sandman.example.com | Writer |
<div data-tbl class="overflow-hidden rounded-xl border border-border">
<div class="overflow-x-auto">
<!-- table-fixed keeps the browser from redistributing the widths that
the resize handles write onto each <th>. -->
<table class="w-full min-w-[640px] table-fixed text-sm">
<thead>
<tr class="border-b border-border bg-subtle">
<th
scope="col"
class="relative px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary w-48"
>
First Name
<span
data-tbl-resize
aria-label="Resize First Name column"
class="absolute right-0 top-0 h-full w-1 cursor-col-resize bg-border transition-colors hover:bg-primary focus-visible:bg-primary focus-visible:outline-none"
></span>
</th>
<th
scope="col"
class="relative px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary"
>
Last Name
<span
data-tbl-resize
aria-label="Resize Last Name column"
class="absolute right-0 top-0 h-full w-1 cursor-col-resize bg-border transition-colors hover:bg-primary focus-visible:bg-primary focus-visible:outline-none"
></span>
</th>
<th
scope="col"
class="relative px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary"
>
Email
<span
data-tbl-resize
aria-label="Resize Email column"
class="absolute right-0 top-0 h-full w-1 cursor-col-resize bg-border transition-colors hover:bg-primary focus-visible:bg-primary focus-visible:outline-none"
></span>
</th>
<th scope="col" class="px-4 py-3 text-left text-[11px] font-semibold uppercase tracking-wider text-text-secondary">Role</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-border-subtle last:border-0">
<td class="px-4 py-3 text-sm text-text truncate font-medium text-heading">Kaitlin</td>
<td class="px-4 py-3 text-sm text-text truncate">Winters</td>
<td class="px-4 py-3 text-sm text-text truncate">kaitlin@example.com</td>
<td class="px-4 py-3 text-sm text-text truncate">Manager</td>
</tr>
<tr class="border-b border-border-subtle last:border-0">
<td class="px-4 py-3 text-sm text-text truncate font-medium text-heading">Precious</td>
<td class="px-4 py-3 text-sm text-text truncate">Chang</td>
<td class="px-4 py-3 text-sm text-text truncate">precious@bluebottle.example.com</td>
<td class="px-4 py-3 text-sm text-text truncate">Developer</td>
</tr>
<tr class="border-b border-border-subtle last:border-0">
<td class="px-4 py-3 text-sm text-text truncate font-medium text-heading">Susan</td>
<td class="px-4 py-3 text-sm text-text truncate">Cortez</td>
<td class="px-4 py-3 text-sm text-text truncate">s.cortez@northwind.example.com</td>
<td class="px-4 py-3 text-sm text-text truncate">Engineer</td>
</tr>
<tr class="border-b border-border-subtle last:border-0">
<td class="px-4 py-3 text-sm text-text truncate font-medium text-heading">Owen</td>
<td class="px-4 py-3 text-sm text-text truncate">Mcdougall</td>
<td class="px-4 py-3 text-sm text-text truncate">gaia.hagen@bindhawk.example.com</td>
<td class="px-4 py-3 text-sm text-text truncate">Designer</td>
</tr>
<tr class="border-b border-border-subtle last:border-0">
<td class="px-4 py-3 text-sm text-text truncate font-medium text-heading">Maud</td>
<td class="px-4 py-3 text-sm text-text truncate">Mcintyre</td>
<td class="px-4 py-3 text-sm text-text truncate">gabriel.mccabe@example.com</td>
<td class="px-4 py-3 text-sm text-text truncate">Analyst</td>
</tr>
<tr class="border-b border-border-subtle last:border-0">
<td class="px-4 py-3 text-sm text-text truncate font-medium text-heading">Griselda</td>
<td class="px-4 py-3 text-sm text-text truncate">Ramirez</td>
<td class="px-4 py-3 text-sm text-text truncate">griselda@example.com</td>
<td class="px-4 py-3 text-sm text-text truncate">Manager</td>
</tr>
<tr class="border-b border-border-subtle last:border-0">
<td class="px-4 py-3 text-sm text-text truncate font-medium text-heading">Marisa</td>
<td class="px-4 py-3 text-sm text-text truncate">Larson</td>
<td class="px-4 py-3 text-sm text-text truncate">marisa.l@lumon.example.com</td>
<td class="px-4 py-3 text-sm text-text truncate">Support</td>
</tr>
<tr class="border-b border-border-subtle last:border-0">
<td class="px-4 py-3 text-sm text-text truncate font-medium text-heading">Neil</td>
<td class="px-4 py-3 text-sm text-text truncate">Gaiman</td>
<td class="px-4 py-3 text-sm text-text truncate">neil@sandman.example.com</td>
<td class="px-4 py-3 text-sm text-text truncate">Writer</td>
</tr>
</tbody>
</table>
</div>
</div>