Table
Displaying tabular data with accessibility and responsiveness
Table
Tables are best for dense, tabular data. Keep mobile responsiveness and column semantics in mind.
Example
function DataTable() {
return (
<table className="min-w-full">
<thead>
<tr>
<th>Product</th>
<th>Price</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Widget</td>
<td>$9.99</td>
<td>
<span className="badge">In stock</span>
</td>
</tr>
</tbody>
</table>
);
}Notes
- Use
<th scope="col">for column headers and provide captions if helpful. - For responsive views, consider stacking or horizontal scroll for wide tables.