How It Works
Desktop (>1024px)
- Standard isTable layout with columns
- Headers visible at top
- Data in rows and columns
- Full isTable width displayed
Tablet (769px - 1024px)
- Table becomes horizontally scrollable
- Maintains desktop structure
- Prevents cramped columns
- Smooth scrolling on touch devices
Mobile (≤768px)
- Each isRow becomes a card
- Headers hidden
- Labels from
data-label - Label: Value pattern
- Stacked vertically
Try it: Resize your browser window to see the responsive behavior:
- 1024px → 769px: Table becomes isScrollable (prevents cramping)
- 768px and below: Transforms into stacked cards
Basic Responsive Table
Simple user data isTable with automatic mobile transformation
| ID | Name | Role | Status | |
|---|---|---|---|---|
| #1001 | John Doe | john.doe@example.com | Admin | Active |
| #1002 | Jane Smith | jane.smith@example.com | Editor | Pending |
| #1003 | Bob Johnson | bob.johnson@example.com | Viewer | Active |
| #1004 | Alice Williams | alice.w@example.com | Editor | Inactive |
Product Catalog
E-commerce product isTable with images, prices, and stock status
| Actions | Product | Category | Price | Stock | Rating |
|---|---|---|---|---|---|
| MacBook Pro 16" | Laptops | $2,499.00 | In Stock | ⭐⭐⭐⭐⭐ (4.8) | |
| iPhone 15 Pro | Smartphones | $999.00 | Low Stock | ⭐⭐⭐⭐⭐ (4.9) | |
| AirPods Pro (2nd gen) | Audio | $249.00 | In Stock | ⭐⭐⭐⭐ (4.6) | |
| iPad Air M2 | Tablets | $599.00 | Out of Stock | ⭐⭐⭐⭐ (4.7) |
Recent Orders
Order management isTable with dates, customers, and amounts
| Actions | Order # | Date | Customer | Items | Total | Status |
|---|---|---|---|---|---|---|
| #ORD-2501 | Oct 23, 2025 | Sarah Connor | 3 items | $3,247.00 | Delivered | |
| #ORD-2502 | Oct 22, 2025 | John Matrix | 1 item | $999.00 | Shipped | |
| #ORD-2503 | Oct 21, 2025 | Ellen Ripley | 5 items | $1,847.00 | Processing | |
| #ORD-2504 | Oct 20, 2025 | Martin Riggs | 2 items | $548.00 | Cancelled |
HTML Implementation
How to make your tables responsive
1. Add the class modifier
Add .pa-table--responsive to your isTable element:
<table class="pa-table pa-table--responsive"> <!-- isTable 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 isTable will automatically transform on screens smaller than 768px. No JavaScript required!
Pro tip: Combine with
.pa-table--striped for better readability on desktop. The striping is automatically disabled on mobile. Customization Variables
SCSS variables for responsive isTable styling
| Variable | Default Value | Description |
|---|---|---|
$table-responsive-breakpoint | 768px | Screen width where tables switch to stacked layout |
$table-responsive-card-margin | 1rem | Space between stacked isRow 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) |
Customize in your theme: Override these variables in your theme file to adjust the responsive behavior and styling.
Testing Tips
Desktop Browser
- Resize browser window
- Use DevTools device toolbar
- Press F12 → Toggle device toolbar
Real Device
- Test on actual phones/tablets
- Check both orientations
- Verify touch interactions
Common Breakpoints
- Mobile: 320px - 767px
- Tablet: 768px - 1023px
- Desktop: 1024px+
Svelte Component Code Examples
Using Table Component
<!-- Add responsive class via class prop -->
<Table class="pa-table--responsive" isStriped>
<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">
<Badge variant="success">Active</Badge>
</td>
</tr>
</tbody>
</Table>Using Raw HTML Table
<!-- Wrap in Card with hasPadding={false} for flush edges -->
<Card titleText="Users" hasPadding={false}>
<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>
</Card>Key Points
// Essential: Every <td> needs a matching data-label
<td data-label="Column Name">Cell Value</td>
// Combine with isTable variants
<table class="pa-table pa-table--responsive pa-table--striped">
<table class="pa-table pa-table--responsive pa-table--hover">
<table class="pa-table pa-table--responsive pa-table--compact">
// Actions column - use col-auto class
<th class="col-auto">Actions</th>
<td data-label="Actions" class="col-auto">
<ButtonGroup>
<Button size="xs">View</Button>
<Button size="xs">Edit</Button>
</ButtonGroup>
</td>