1. Add the class modifier

Add .pa-table--responsive to your table element:

<table class="pa-table pa-table--responsive">
  <!-- table content -->
</table>

2. Add data-label attributes

Each <td> needs a data-label attribute matching its column header:

<table class="pa-table pa-table--responsive">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="Name">John Doe</td>
      <td data-label="Email">john@example.com</td>
      <td data-label="Status">
        <span class="pa-badge pa-badge--success">Active</span>
      </td>
    </tr>
  </tbody>
</table>

3. That's it!

The table will automatically transform on screens smaller than 768px. No JavaScript required!

---

CSS Grid Layout (Advanced)

For more control over mobile layouts, use .pa-table--responsive-grid instead:

<table class="pa-table pa-table--responsive-grid">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Email</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr data-grid="2">
      <td data-label="First Name">John</td>
      <td data-label="Last Name">Doe</td>
      <td data-label="Email" data-span="full">john@example.com</td>
      <td data-label="Phone">555-1234</td>
    </tr>
  </tbody>
</table>

Grid Attributes:

Attribute	Description	Example
data-grid="2"	2-column grid on mobile (applies to <tr>)	Name fields side-by-side
data-grid="3"	3-column grid on mobile (applies to <tr>)	Compact data display
data-span="2"	Span 2 columns (applies to <td>)	Wider fields
data-span="3"	Span 3 columns (applies to <td>)	Extra wide fields
data-span="full"	Span all columns (applies to <td>)	Email, description, status

Variable	Default Value	Description
$table-responsive-breakpoint	768px	Screen width where tables switch to stacked layout
$table-responsive-card-margin	1rem	Space between stacked row cards
$table-responsive-card-padding	0.75rem	Inner padding for each card cell
$table-responsive-label-width	40%	Width allocated for labels in mobile view
$table-responsive-label-font-weight	$font-weight-semibold	Font weight for labels (default: 600)