New
TablesBasic Striped Table
A data-driven table with zebra striping, wrapped in a horizontal scroller that keeps it usable at 320px.
#table#striped#data
3 frameworksBeginner
Loading…
A scrollable table whose header pins to the top of its own scroll box as the body scrolls under it.
<!--
One box scrolls both ways: overflow-auto plus a max-height for the vertical
scroll and a min-width on the table for the horizontal one. The header cells are
`sticky top-0` so they pin as the body scrolls under them; they need their own
opaque background or the body rows would show through the "gap" between cell
borders. z-10 keeps them above the scrolling rows.
-->
<div class="w-full overflow-auto rounded-lg border border-gray-200 dark:border-gray-800" style="max-height: 20rem">
<table class="w-full min-w-[34rem] border-collapse text-left text-sm">
<thead>
<tr>
<th scope="col" class="sticky top-0 z-10 border-b border-gray-200 bg-gray-50 px-3 py-2.5 font-medium text-gray-700 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300">Ticket</th>
<th scope="col" class="sticky top-0 z-10 border-b border-gray-200 bg-gray-50 px-3 py-2.5 font-medium text-gray-700 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300">Subject</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-gray-100 dark:border-gray-800">
<td class="px-3 py-2.5 text-gray-700 dark:text-gray-300">#4821</td>
<td class="px-3 py-2.5 text-gray-700 dark:text-gray-300">Login loop on Safari</td>
</tr>
<tr class="border-b border-gray-100 dark:border-gray-800">
<td class="px-3 py-2.5 text-gray-700 dark:text-gray-300">#4822</td>
<td class="px-3 py-2.5 text-gray-700 dark:text-gray-300">Export missing columns</td>
</tr>
</tbody>
</table>
</div>| Prop | Type | Default | Description |
|---|---|---|---|
columnsrequired | DataColumn[] | - | The columns being compared, in display order. |
rowsrequired | DataRow[] | - | The alternating image-and-copy rows, in order. |
maxHeight | string | '20rem' | Max height |
className | string | - | Additional classes merged onto the root element. |
One box scrolls both ways: `overflow-auto` with a `maxHeight` for the vertical scroll and a `min-w` on the table for the horizontal. The header cells are `sticky top-0` with their own opaque background and `z-10` so the body rows never bleed through as they pass beneath.