Table

A responsive wrapper for standard HTML <table> elements. Provides horizontal scroll mode with CSS shadow indicators and a stacked mobile mode where cells become block-level with header labels.

File: src/core/components/ui/Table.astro

Props

Prop	Type	Default	Notes
responsive	"scroll" | "stack"	"scroll"	Responsive mode for narrow viewports
striped	boolean	false	Alternating row background color
hoverable	boolean	false	Highlight rows on hover
class	string	—	Additional CSS classes

Usage

---
import Table from "@core/components/ui/Table.astro";
---

{/* Scroll mode (default) — horizontal scroll on narrow viewports */}
<Table>
  <table>
    <thead>
      <tr><th>Name</th><th>Role</th><th>Status</th></tr>
    </thead>
    <tbody>
      <tr><td>Alice</td><td>Developer</td><td>Active</td></tr>
      <tr><td>Bob</td><td>Designer</td><td>Active</td></tr>
    </tbody>
  </table>
</Table>

{/* Stack mode — cells become block-level on mobile with header labels */}
<Table responsive="stack" striped>
  <table>
    <thead>
      <tr><th>Name</th><th>Role</th><th>Status</th></tr>
    </thead>
    <tbody>
      <tr>
        <td data-label="Name">Alice</td>
        <td data-label="Role">Developer</td>
        <td data-label="Status">Active</td>
      </tr>
    </tbody>
  </table>
</Table>

Accessibility

• Wraps a standard <table> element — authors maintain full control of semantic table structure.
• Scroll mode provides CSS-only shadow indicators at scroll edges via background-attachment: local.
• Stack mode uses data-label attributes on <td> elements with CSS ::before to display header labels. Authors accept this requirement when opting into stack mode.
• Stack mode limitation: complex tables with colspan or rowspan may not stack cleanly. Use scroll mode for complex table structures.