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.

Table

Table

On this page