Sortable headers, row selection with bulk-action bar, live search filter, status pills, pagination footer. The whole admin-table playbook.
A table that lets users do real work with structured data: sort by any column (click the header), search across all rows (type in the toolbar input), select multiple rows (checkbox column + bulk action button appears), see status at a glance (colored pill cells), and paginate. The backbone of every dashboard, CRM, admin tool, ops console.
Render the data array as a <table>. Click any sortable <th data-sort> to toggle .asc / .desc classes and re-sort. The search input filters the array case-insensitively across every visible column. A select-all checkbox in the header row toggles all visible row checkboxes; row checkbox clicks update a "N selected" counter and reveal a bulk-action button. Use proper semantic <thead> / <tbody> and accessible aria attributes.
Click any header to sort. Type to filter. Tick rows to enable bulk delete.
| Customer | Plan | MRR | Status | Joined |
|---|
Build an admin data table component with these layers: (1) TOOLBAR row: search input with magnifier icon + "Add filter" pill + "N selected" counter that turns accent color when count > 0 + a "Delete selected" accent button that's hidden until rows are selected. (2) TABLE: 6 columns — checkbox / Customer (avatar + name) / Plan / MRR / Status pill / Joined date. thead rows are sticky-able, with uppercase mono labels in muted color; click any th to toggle .asc / .desc class showing ↑ or ↓ next to header text. tbody rows: hairline borders, hover background tint, .selected class with accent-tinted background when row checkbox is on. Status pills: colored capsules (green active, amber pending, red failed, gray archived) in uppercase mono. (3) FOOTER row: "Showing X–Y of N" on left, page number buttons on right with accent active state. Behavior: search input filters rows in real time by substring across all fields. Select-all checkbox toggles every visible row. Click any sortable header to toggle sort. Bulk delete removes all selected rows. Pagination: 8 per page. Use real data with 20+ rows of customer records.