Data table — Audit log with date bands
Layout tags: table,list,compact
Data table — Dense table with priority columns
A ranked numeric table with a sticky header and mobile column priorities. Use when the main figures must stay in a real table on narrow screens.
1440 × 900
Open in new tabexport default function DataTablePriorityColumns() {
return (
<section className="bg-white text-neutral-900">
<div className="mx-auto max-w-4xl px-6 py-16 sm:py-24">
<header className="flex flex-col items-start gap-4 sm:flex-row sm:items-center sm:justify-between">
<div>
<h2 className="text-3xl font-semibold tracking-tight text-balance sm:text-4xl">Ranked records</h2>
<p className="mt-3 text-sm text-neutral-500">12 records · Updated Mar 14</p>
</div>
<nav
aria-label="Reporting range"
className="flex flex-wrap gap-1 rounded-lg border border-neutral-200 bg-neutral-50 p-1"
>
<a
href="#"
aria-current="page"
className="inline-flex h-10 items-center justify-center rounded-md border border-neutral-900 bg-neutral-900 text-white hover:bg-neutral-700 px-3 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
>
Week
</a>
<a
href="#"
className="inline-flex h-10 items-center justify-center rounded-md border border-transparent text-neutral-600 hover:bg-white px-3 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
>
Month
</a>
<a
href="#"
className="inline-flex h-10 items-center justify-center rounded-md border border-transparent text-neutral-600 hover:bg-white px-3 text-sm font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
>
All
</a>
</nav>
</header>
<div
role="region"
tabIndex={0}
aria-label="Ranked records table"
className="mt-8 h-96 overflow-auto rounded-lg border border-neutral-200 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
>
<table className="w-full table-fixed md:table-auto">
<caption className="sr-only">Ranks, points, counts, totals, rates and five recent statuses</caption>
<thead className="sticky top-0 z-10 bg-neutral-50">
<tr>
<th
scope="col"
className="w-9 px-2 py-2 text-left text-sm font-medium text-neutral-600 md:w-auto md:px-3"
>
<span aria-label="Rank">#</span>
</th>
<th scope="col" className="px-2 py-2 text-left text-sm font-medium text-neutral-600 md:px-3">
Name
</th>
<th
scope="col"
className="w-9 px-2 py-2 text-right text-sm font-medium text-neutral-600 md:w-auto md:px-3"
>
<span className="md:hidden">Pts</span>
<span className="hidden md:inline">Points</span>
</th>
<th
scope="col"
className="w-9 px-2 py-2 text-right text-sm font-medium text-neutral-600 md:w-auto md:px-3"
>
<span className="md:hidden">Qty</span>
<span className="hidden md:inline">Count</span>
</th>
<th
scope="col"
className="w-14 px-2 py-2 text-right text-sm font-medium text-neutral-600 md:w-auto md:px-3"
>
Total
</th>
<th
scope="col"
className="hidden px-3 py-2 text-right text-sm font-medium text-neutral-600 md:table-cell"
>
Rate
</th>
<th
scope="col"
className="hidden px-3 py-2 text-left text-sm font-medium text-neutral-600 md:table-cell"
>
Recent
</th>
</tr>
</thead>
<tbody>
<tr className="border-t border-neutral-200 hover:bg-neutral-50">
<td className="px-2 py-2 text-sm tabular-nums text-neutral-500 md:px-3">1</td>
<th scope="row" className="px-2 py-2 text-left text-sm font-medium md:px-3">
<span className="flex min-w-0 items-center gap-2">
<span
aria-hidden="true"
className="flex size-6 shrink-0 items-center justify-center rounded-full bg-neutral-200 text-xs font-medium text-neutral-600"
>
AR
</span>
<span className="min-w-0 wrap-anywhere">Alex Rivera</span>
</span>
</th>
<td className="px-2 py-2 text-right text-sm tabular-nums md:px-3">98</td>
<td className="px-2 py-2 text-right text-sm tabular-nums md:px-3">24</td>
<td className="px-2 py-2 text-right text-sm tabular-nums md:px-3">1,284</td>
<td className="hidden px-3 py-2 text-right text-sm tabular-nums md:table-cell">96%</td>
<td className="hidden px-3 py-2 md:table-cell">
<ul
role="list"
aria-label="Recent statuses for Alex Rivera"
className="flex flex-wrap items-start gap-1"
>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Done
</span>
</li>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Done
</span>
</li>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Open
</span>
</li>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Done
</span>
</li>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Done
</span>
</li>
</ul>
</td>
</tr>
<tr className="border-t border-neutral-200 hover:bg-neutral-50">
<td className="px-2 py-2 text-sm tabular-nums text-neutral-500 md:px-3">2</td>
<th scope="row" className="px-2 py-2 text-left text-sm font-medium md:px-3">
<span className="flex min-w-0 items-center gap-2">
<span
aria-hidden="true"
className="flex size-6 shrink-0 items-center justify-center rounded-full bg-neutral-200 text-xs font-medium text-neutral-600"
>
JL
</span>
<span className="min-w-0 wrap-anywhere">Jordan Lee</span>
</span>
</th>
<td className="px-2 py-2 text-right text-sm tabular-nums md:px-3">95</td>
<td className="px-2 py-2 text-right text-sm tabular-nums md:px-3">23</td>
<td className="px-2 py-2 text-right text-sm tabular-nums md:px-3">1,216</td>
<td className="hidden px-3 py-2 text-right text-sm tabular-nums md:table-cell">95%</td>
<td className="hidden px-3 py-2 md:table-cell">
<ul
role="list"
aria-label="Recent statuses for Jordan Lee"
className="flex flex-wrap items-start gap-1"
>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Done
</span>
</li>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Open
</span>
</li>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Done
</span>
</li>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Done
</span>
</li>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Hold
</span>
</li>
</ul>
</td>
</tr>
<tr className="border-t border-neutral-200 hover:bg-neutral-50">
<td className="px-2 py-2 text-sm tabular-nums text-neutral-500 md:px-3">3</td>
<th scope="row" className="px-2 py-2 text-left text-sm font-medium md:px-3">
<span className="flex min-w-0 items-center gap-2">
<span
aria-hidden="true"
className="flex size-6 shrink-0 items-center justify-center rounded-full bg-neutral-200 text-xs font-medium text-neutral-600"
>
ST
</span>
<span className="min-w-0 wrap-anywhere">Sam Taylor</span>
</span>
</th>
<td className="px-2 py-2 text-right text-sm tabular-nums md:px-3">92</td>
<td className="px-2 py-2 text-right text-sm tabular-nums md:px-3">22</td>
<td className="px-2 py-2 text-right text-sm tabular-nums md:px-3">1,148</td>
<td className="hidden px-3 py-2 text-right text-sm tabular-nums md:table-cell">94%</td>
<td className="hidden px-3 py-2 md:table-cell">
<ul
role="list"
aria-label="Recent statuses for Sam Taylor"
className="flex flex-wrap items-start gap-1"
>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Open
</span>
</li>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Done
</span>
</li>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Done
</span>
</li>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Done
</span>
</li>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Done
</span>
</li>
</ul>
</td>
</tr>
<tr className="border-t border-neutral-200 hover:bg-neutral-50">
<td className="px-2 py-2 text-sm tabular-nums text-neutral-500 md:px-3">4</td>
<th scope="row" className="px-2 py-2 text-left text-sm font-medium md:px-3">
<span className="flex min-w-0 items-center gap-2">
<span
aria-hidden="true"
className="flex size-6 shrink-0 items-center justify-center rounded-full bg-neutral-200 text-xs font-medium text-neutral-600"
>
CM
</span>
<span className="min-w-0 wrap-anywhere">Casey Morgan</span>
</span>
</th>
<td className="px-2 py-2 text-right text-sm tabular-nums md:px-3">89</td>
<td className="px-2 py-2 text-right text-sm tabular-nums md:px-3">21</td>
<td className="px-2 py-2 text-right text-sm tabular-nums md:px-3">1,080</td>
<td className="hidden px-3 py-2 text-right text-sm tabular-nums md:table-cell">93%</td>
<td className="hidden px-3 py-2 md:table-cell">
<ul
role="list"
aria-label="Recent statuses for Casey Morgan"
className="flex flex-wrap items-start gap-1"
>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Done
</span>
</li>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Done
</span>
</li>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Open
</span>
</li>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Done
</span>
</li>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Done
</span>
</li>
</ul>
</td>
</tr>
<tr className="border-t border-neutral-200 hover:bg-neutral-50">
<td className="px-2 py-2 text-sm tabular-nums text-neutral-500 md:px-3">5</td>
<th scope="row" className="px-2 py-2 text-left text-sm font-medium md:px-3">
<span className="flex min-w-0 items-center gap-2">
<span
aria-hidden="true"
className="flex size-6 shrink-0 items-center justify-center rounded-full bg-neutral-200 text-xs font-medium text-neutral-600"
>
RC
</span>
<span className="min-w-0 wrap-anywhere">Riley Chen</span>
</span>
</th>
<td className="px-2 py-2 text-right text-sm tabular-nums md:px-3">86</td>
<td className="px-2 py-2 text-right text-sm tabular-nums md:px-3">20</td>
<td className="px-2 py-2 text-right text-sm tabular-nums md:px-3">1,012</td>
<td className="hidden px-3 py-2 text-right text-sm tabular-nums md:table-cell">92%</td>
<td className="hidden px-3 py-2 md:table-cell">
<ul
role="list"
aria-label="Recent statuses for Riley Chen"
className="flex flex-wrap items-start gap-1"
>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Done
</span>
</li>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Open
</span>
</li>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Done
</span>
</li>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Done
</span>
</li>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Hold
</span>
</li>
</ul>
</td>
</tr>
<tr className="border-t border-neutral-200 hover:bg-neutral-50">
<td className="px-2 py-2 text-sm tabular-nums text-neutral-500 md:px-3">6</td>
<th scope="row" className="px-2 py-2 text-left text-sm font-medium md:px-3">
<span className="flex min-w-0 items-center gap-2">
<span
aria-hidden="true"
className="flex size-6 shrink-0 items-center justify-center rounded-full bg-neutral-200 text-xs font-medium text-neutral-600"
>
MB
</span>
<span className="min-w-0 wrap-anywhere">Morgan Blake</span>
</span>
</th>
<td className="px-2 py-2 text-right text-sm tabular-nums md:px-3">83</td>
<td className="px-2 py-2 text-right text-sm tabular-nums md:px-3">19</td>
<td className="px-2 py-2 text-right text-sm tabular-nums md:px-3">944</td>
<td className="hidden px-3 py-2 text-right text-sm tabular-nums md:table-cell">91%</td>
<td className="hidden px-3 py-2 md:table-cell">
<ul
role="list"
aria-label="Recent statuses for Morgan Blake"
className="flex flex-wrap items-start gap-1"
>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Open
</span>
</li>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Done
</span>
</li>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Done
</span>
</li>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Done
</span>
</li>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Done
</span>
</li>
</ul>
</td>
</tr>
<tr className="border-t border-neutral-200 hover:bg-neutral-50">
<td className="px-2 py-2 text-sm tabular-nums text-neutral-500 md:px-3">7</td>
<th scope="row" className="px-2 py-2 text-left text-sm font-medium md:px-3">
<span className="flex min-w-0 items-center gap-2">
<span
aria-hidden="true"
className="flex size-6 shrink-0 items-center justify-center rounded-full bg-neutral-200 text-xs font-medium text-neutral-600"
>
JP
</span>
<span className="min-w-0 wrap-anywhere">Jamie Park</span>
</span>
</th>
<td className="px-2 py-2 text-right text-sm tabular-nums md:px-3">80</td>
<td className="px-2 py-2 text-right text-sm tabular-nums md:px-3">18</td>
<td className="px-2 py-2 text-right text-sm tabular-nums md:px-3">876</td>
<td className="hidden px-3 py-2 text-right text-sm tabular-nums md:table-cell">90%</td>
<td className="hidden px-3 py-2 md:table-cell">
<ul
role="list"
aria-label="Recent statuses for Jamie Park"
className="flex flex-wrap items-start gap-1"
>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Done
</span>
</li>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Done
</span>
</li>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Open
</span>
</li>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Done
</span>
</li>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Done
</span>
</li>
</ul>
</td>
</tr>
<tr className="border-t border-neutral-200 hover:bg-neutral-50">
<td className="px-2 py-2 text-sm tabular-nums text-neutral-500 md:px-3">8</td>
<th scope="row" className="px-2 py-2 text-left text-sm font-medium md:px-3">
<span className="flex min-w-0 items-center gap-2">
<span
aria-hidden="true"
className="flex size-6 shrink-0 items-center justify-center rounded-full bg-neutral-200 text-xs font-medium text-neutral-600"
>
TR
</span>
<span className="min-w-0 wrap-anywhere">Taylor Reed</span>
</span>
</th>
<td className="px-2 py-2 text-right text-sm tabular-nums md:px-3">77</td>
<td className="px-2 py-2 text-right text-sm tabular-nums md:px-3">17</td>
<td className="px-2 py-2 text-right text-sm tabular-nums md:px-3">808</td>
<td className="hidden px-3 py-2 text-right text-sm tabular-nums md:table-cell">89%</td>
<td className="hidden px-3 py-2 md:table-cell">
<ul
role="list"
aria-label="Recent statuses for Taylor Reed"
className="flex flex-wrap items-start gap-1"
>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Done
</span>
</li>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Open
</span>
</li>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Done
</span>
</li>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Done
</span>
</li>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Hold
</span>
</li>
</ul>
</td>
</tr>
<tr className="border-t border-neutral-200 hover:bg-neutral-50">
<td className="px-2 py-2 text-sm tabular-nums text-neutral-500 md:px-3">9</td>
<th scope="row" className="px-2 py-2 text-left text-sm font-medium md:px-3">
<span className="flex min-w-0 items-center gap-2">
<span
aria-hidden="true"
className="flex size-6 shrink-0 items-center justify-center rounded-full bg-neutral-200 text-xs font-medium text-neutral-600"
>
DE
</span>
<span className="min-w-0 wrap-anywhere">Drew Ellis</span>
</span>
</th>
<td className="px-2 py-2 text-right text-sm tabular-nums md:px-3">74</td>
<td className="px-2 py-2 text-right text-sm tabular-nums md:px-3">16</td>
<td className="px-2 py-2 text-right text-sm tabular-nums md:px-3">740</td>
<td className="hidden px-3 py-2 text-right text-sm tabular-nums md:table-cell">88%</td>
<td className="hidden px-3 py-2 md:table-cell">
<ul
role="list"
aria-label="Recent statuses for Drew Ellis"
className="flex flex-wrap items-start gap-1"
>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Open
</span>
</li>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Done
</span>
</li>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Done
</span>
</li>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Done
</span>
</li>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Done
</span>
</li>
</ul>
</td>
</tr>
<tr className="border-t border-neutral-200 hover:bg-neutral-50">
<td className="px-2 py-2 text-sm tabular-nums text-neutral-500 md:px-3">10</td>
<th scope="row" className="px-2 py-2 text-left text-sm font-medium md:px-3">
<span className="flex min-w-0 items-center gap-2">
<span
aria-hidden="true"
className="flex size-6 shrink-0 items-center justify-center rounded-full bg-neutral-200 text-xs font-medium text-neutral-600"
>
AQ
</span>
<span className="min-w-0 wrap-anywhere">Avery Quinn</span>
</span>
</th>
<td className="px-2 py-2 text-right text-sm tabular-nums md:px-3">71</td>
<td className="px-2 py-2 text-right text-sm tabular-nums md:px-3">15</td>
<td className="px-2 py-2 text-right text-sm tabular-nums md:px-3">672</td>
<td className="hidden px-3 py-2 text-right text-sm tabular-nums md:table-cell">87%</td>
<td className="hidden px-3 py-2 md:table-cell">
<ul
role="list"
aria-label="Recent statuses for Avery Quinn"
className="flex flex-wrap items-start gap-1"
>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Done
</span>
</li>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Done
</span>
</li>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Open
</span>
</li>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Done
</span>
</li>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Done
</span>
</li>
</ul>
</td>
</tr>
<tr className="border-t border-neutral-200 hover:bg-neutral-50">
<td className="px-2 py-2 text-sm tabular-nums text-neutral-500 md:px-3">11</td>
<th scope="row" className="px-2 py-2 text-left text-sm font-medium md:px-3">
<span className="flex min-w-0 items-center gap-2">
<span
aria-hidden="true"
className="flex size-6 shrink-0 items-center justify-center rounded-full bg-neutral-200 text-xs font-medium text-neutral-600"
>
CG
</span>
<span className="min-w-0 wrap-anywhere">Cameron Gray</span>
</span>
</th>
<td className="px-2 py-2 text-right text-sm tabular-nums md:px-3">68</td>
<td className="px-2 py-2 text-right text-sm tabular-nums md:px-3">14</td>
<td className="px-2 py-2 text-right text-sm tabular-nums md:px-3">604</td>
<td className="hidden px-3 py-2 text-right text-sm tabular-nums md:table-cell">86%</td>
<td className="hidden px-3 py-2 md:table-cell">
<ul
role="list"
aria-label="Recent statuses for Cameron Gray"
className="flex flex-wrap items-start gap-1"
>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Done
</span>
</li>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Open
</span>
</li>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Done
</span>
</li>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Done
</span>
</li>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Hold
</span>
</li>
</ul>
</td>
</tr>
<tr className="border-t border-neutral-200 hover:bg-neutral-50">
<td className="px-2 py-2 text-sm tabular-nums text-neutral-500 md:px-3">12</td>
<th scope="row" className="px-2 py-2 text-left text-sm font-medium md:px-3">
<span className="flex min-w-0 items-center gap-2">
<span
aria-hidden="true"
className="flex size-6 shrink-0 items-center justify-center rounded-full bg-neutral-200 text-xs font-medium text-neutral-600"
>
RL
</span>
<span className="min-w-0 wrap-anywhere">Robin Lane</span>
</span>
</th>
<td className="px-2 py-2 text-right text-sm tabular-nums md:px-3">65</td>
<td className="px-2 py-2 text-right text-sm tabular-nums md:px-3">13</td>
<td className="px-2 py-2 text-right text-sm tabular-nums md:px-3">536</td>
<td className="hidden px-3 py-2 text-right text-sm tabular-nums md:table-cell">85%</td>
<td className="hidden px-3 py-2 md:table-cell">
<ul
role="list"
aria-label="Recent statuses for Robin Lane"
className="flex flex-wrap items-start gap-1"
>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Open
</span>
</li>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Done
</span>
</li>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Done
</span>
</li>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Done
</span>
</li>
<li>
<span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium">
Done
</span>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
)
}Pattern notes
- When to use
- Use for dense rankings where the key numeric columns should remain comparable on mobile. Pick data-table-stacked-cards for complete identity profiles or data-table-metrics-header for aggregate totals. Variations: rank by usage, replace Rate with a percentage change, or prioritize different secondary metrics or statuses.
- Hierarchy
- A 30px heading, 36px at 640px, precedes 14px record count/update metadata. Week, Month and All are range links. Each row shows rank, avatar and name, right-aligned tabular Points, Count, Total and Rate, then five small neutral badges with Done, Open or Hold words. Mobile headers shorten Points and Count to Pts and Qty. Slots: names 24 characters, counts 2 digits, totals 5 characters, rates 3, status words 4 characters.
- Responsive
- Below 768px Rate and Recent headers and cells hide and horizontal padding drops to 8px. The table switches from auto layout to fixed layout so its five retained columns fit 320px; names can wrap while the three retained numeric columns remain right-aligned. At 768px all seven columns return, including the five worded recent-status badges in a wrapping row. The 384px region scrolls vertically at every width. The page header stacks below 640px.
- Layout
- A 896px max-w-4xl shell with 24px px-6 side padding and 64px py-16 vertical padding, increasing to 96px sm:py-24 at 640px. The header places title and update meta beside segmented range links from 640px. A rounded-lg bordered focusable scroll region follows after 32px and is fixed at 384px h-96 high. The seven-column, twelve-row table uses 12px px-3 and 8px py-2 desktop cells, 14px text and 24px avatars. Its sticky top-0 header has z-10 and an opaque neutral-50 background. Below 768px fixed mobile widths are 36px Rank, 36px Points, 36px Count and 56px Total, leaving the remaining width for Name.
- States
- Table headers and status badges are static. Links underline and turn neutral-600 on hover. Focusable scroll regions and all enabled controls show 2px neutral-900 outlines offset 2px. No JavaScript filtering, sorting, pagination or persistence is included. Week has aria-current=page and a neutral-900 fill and border; its hover fill is neutral-700. Idle range links fill white on hover. Rows fill neutral-50 on hover. The scroll region has visible keyboard focus and a sticky header while scrolling vertically. There are no selection, expansion or disabled states; range destinations are illustrative links.
┌───────────────────────────────────────────────────────────┐
│ Ranked records [Week] [Month] [All] │
│ 12 records │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ # Name Points Count Total Rate Recent │ │
│ ├──────────────────────────────────────────────────────┤ │
│ │ 1 Avatar Alex 98 24 1,284 96% Done / Open │ │
│ │ 2 Avatar Jordan 95 23 1,216 95% Done / Hold │ │
│ │ 3 Avatar Sam 92 22 1,148 94% Open / Done │ │
│ │ ... Twelve rows; header stays visible while scrolling│ │
│ └──────────────────────────────────────────────────────┘ │
└───────────────────────────────────────────────────────────┘More in Data table
View all Data table patternsData table — Expandable rows
Layout tags: stacked,·table,·list
Data table — Filter sidebar
Layout tags: sidebar,·table,·form