Data Table Features
- Sort, filter (per-column, global)
- Pagination / infinite scroll
- Column resize, reorder, hide
- Row selection, inline edit
- Expand/collapse, bulk actions
- Sticky header, virtual scroll (10K rows)
Server-side vs Client-side
| Client | Server |
|---|---|
| <100 rows | 1000+ rows |
| All data | Page-by-page |
Pagination URL
GET /api/orders?page=2&limit=20&sort=created_at&order=desc
&filter[status]=active&search=laptop
Cursor-based
GET /api/orders?cursor=abc123&limit=20 // Better for infinite scroll, real-time
Libraries
TanStack Table (headless), AG Grid (Excel-like), MUI DataGrid, DataTables।
Modal
<div role="dialog" aria-modal="true" aria-labelledby="t"> <h2 id="t">Confirm Delete</h2> <button>Cancel</button> <button>Delete</button> </div>
Trap focus, Esc close, return focus to trigger, don't nest, mobile full-screen।
Drawer
Context preserve, side slide। Settings, filter panel।
Toast
toast.success("Order created!", { duration: 3000 });
Top-right or bottom-center, stack, manual close, action button, aria-live="polite"।
Tooltip
<button aria-describedby="tip1"><Icon/></button> <span id="tip1" role="tooltip">Delete item</span>
Hover + focus, 200ms delay, not for critical info, mobile tap।
Empty State
Illustration + clear explanation + next action CTA + onboarding tip।
Loading State
- Spinner (short wait)
- Skeleton (better UX)
- Progress bar (known duration)
- Optimistic UI (instant, rollback on fail)
Error State
Friendly message, cause+recovery, retry, contact, don't lose input।
Infinite Scroll vs Pagination
| Infinite | Pagination |
|---|---|
| Social feed | Search, table |
| Lose scroll pos | Bookmarkable |
Virtual Scrolling
Only visible rows in DOM। react-window, react-virtual, vue-virtual-scroller।