Adaptive Table
A responsive table that automatically transforms into a Card Grid on mobile devices.
Adaptive Table
The AdaptiveTable solves the biggest problem with data tables: mobile responsiveness. Instead of forcing horizontal scrolling, it cleverly collapses into actionable cards on smaller screens.
How To Use
Import
import { AdaptiveTable } from '@/components/ui/hatch/adaptive-table';Preview
Adaptive Inventory
Resize your browser to see it switch to Cards on mobile!
| Product | Category | Price | Status |
|---|---|---|---|
| Apple MacBook Pro | Laptops | $2,499 | In Stock |
| iPhone 15 Pro | Phones | $999 | Out of Stock |
| iPad Air | Tablets | $599 | In Stock |
| Apple Watch S9 | Wearables | $399 | Low Stock |
Apple MacBook Pro
Product:Apple MacBook Pro
Category:Laptops
Price:$2,499
Status:In Stock
iPhone 15 Pro
Product:iPhone 15 Pro
Category:Phones
Price:$999
Status:Out of Stock
iPad Air
Product:iPad Air
Category:Tablets
Price:$599
Status:In Stock
Apple Watch S9
Product:Apple Watch S9
Category:Wearables
Price:$399
Status:Low Stock
Props
| Prop | Type | Default |
|---|---|---|
mobileCardTitle? | keyof T | - |
columns | Column<T>[] | - |
data | T[] | - |
✨ Why it's Unique
- Zero configuration responsiveness: Automatically handles layout shifts.
- Custom Cell Rendering: Pass a
cellfunction in columns to render badges, icons, or buttons. - Type Safe: Works with your existing TypeScript interfaces.