新着
テーブルSortable Header Table
A table whose columns sort on a keyboard-reachable header button, with the state exposed via `aria-sort`.
#table#sortable#aria-sort
3 個のフレームワーク中級
Loading…
A data-driven table with zebra striping, wrapped in a horizontal scroller that keeps it usable at 320px.
<!--
The scroller is the whole responsiveness story. The table keeps a min-width so
its columns never crush below legibility; the wrapping div scrolls sideways
instead of the page. Zebra striping is odd:bg-* on the row, not a hand-coloured
class per row.
-->
<div class="w-full overflow-x-auto">
<table class="w-full min-w-[36rem] border-collapse text-left text-sm">
<caption class="pb-3 text-left text-gray-600 dark:text-gray-400">Recent invoices</caption>
<thead>
<tr class="border-b border-gray-200 dark:border-gray-800">
<th scope="col" class="whitespace-nowrap px-3 py-2.5 font-medium text-gray-700 dark:text-gray-300">Invoice</th>
<th scope="col" class="whitespace-nowrap px-3 py-2.5 font-medium text-gray-700 dark:text-gray-300">Client</th>
<th scope="col" class="whitespace-nowrap px-3 py-2.5 font-medium text-gray-700 dark:text-gray-300">Status</th>
<th scope="col" class="whitespace-nowrap px-3 py-2.5 text-right font-medium text-gray-700 dark:text-gray-300">Amount</th>
</tr>
</thead>
<tbody>
<tr class="odd:bg-gray-50 dark:odd:bg-gray-900/40">
<td class="whitespace-nowrap px-3 py-2.5 text-gray-700 dark:text-gray-300">INV-1024</td>
<td class="whitespace-nowrap px-3 py-2.5 text-gray-700 dark:text-gray-300">Acme Inc</td>
<td class="whitespace-nowrap px-3 py-2.5 text-gray-700 dark:text-gray-300">Paid</td>
<td class="whitespace-nowrap px-3 py-2.5 text-right text-gray-700 dark:text-gray-300">$1,200.00</td>
</tr>
<tr class="odd:bg-gray-50 dark:odd:bg-gray-900/40">
<td class="whitespace-nowrap px-3 py-2.5 text-gray-700 dark:text-gray-300">INV-1025</td>
<td class="whitespace-nowrap px-3 py-2.5 text-gray-700 dark:text-gray-300">Globex</td>
<td class="whitespace-nowrap px-3 py-2.5 text-gray-700 dark:text-gray-300">Pending</td>
<td class="whitespace-nowrap px-3 py-2.5 text-right text-gray-700 dark:text-gray-300">$820.00</td>
</tr>
</tbody>
</table>
</div>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
columns必須 | DataColumn[] | - | 比較対象の列（表示順）。 |
rows必須 | DataRow[] | - | 画像とテキストが交互に並ぶ行（順序どおり）。 |
caption | string | - | 表のキャプション。内容より先にスクリーンリーダーへ読み上げられます。 |
className | string | - | ルート要素にマージされる追加クラス。 |
Feed it `columns` and `rows`; striping is `odd:bg-*` on the row, not a class per row. The table keeps a `min-w` floor and the wrapping div scrolls sideways, so the columns never crush and the page never overflows.