Data Table

Build an accessible data table component with column sorting, full-text search, and pagination. Vanilla HTML, CSS, and JavaScript only — no libraries, no frameworks, no CDN scripts.

DATA MODEL
- Accept an array of row objects and a column schema as input
- Each column has: { key, label, type ("string" | "number" | "date"), sortable (default true), align ("left" | "right") }
- Render <table> with semantic <thead> and <tbody>, scope="col" on every header, and a visible aria-label on the table

VISUAL DESIGN
- Dark theme: table background #0d0d0f, headers #131316, body text rgba(255,255,255,0.85)
- 13px body text, 11px uppercase header labels with 0.06em letter-spacing
- Subtle zebra striping on even rows (rgba(255,255,255,0.015))
- Row hover tint in cyan (rgba(0,196,255,0.04))
- Status column rendered as colored pills with a leading dot:
  - Active: emerald (#00ff88)
  - Pending: amber (#fbbf24)
  - Inactive: slate (#94a3b8)
  - Blocked: red (#ff6b6b)
- Numeric columns use tabular-nums and right-align
- Round avatars (26px) for the Name column built from initials

SORTING
- Tri-state click cycle on every sortable header: none → ascending → descending → none
- Type-aware comparators:
  - string: localeCompare with { sensitivity: "base", numeric: true }
  - number: subtract
  - date: parse to timestamp, subtract
- Sort must be STABLE — preserve original row order on ties (decorate-sort-undecorate or stable Array.prototype.sort)
- Update aria-sort="ascending" | "descending" | "none" on the active header, set "none" on all others
- Animate a small caret SVG inside the active header (rotate 180° for descending)

SEARCH
- Single text input above the table with a magnifier icon, placeholder, and a clear (×) button that appears when there is text
- Debounce input events at 150ms
- Case-insensitive substring match across ALL column values (coerce non-strings to string for matching)
- Highlight matched substrings inside cell text with <mark> (cyan tint, rounded)
- When the search filter shrinks the result set, clamp the current page so it stays in range

PAGINATION
- Page size selector (10 / 25 / 50) below the table on the left
- Page number nav on the right with prev/next chevron buttons
- Show first, last, current, and ±1 around current; insert "…" placeholders for the gaps
- Disable prev at page 1 and next at the last page; never render fewer than 1 page
- Live "Showing X–Y of Z" count above the table that updates on every filter/sort/page change

ACCESSIBILITY
- All sortable headers are tabindex="0" and respond to Enter and Space
- aria-sort reflects current state on every header
- Pagination <nav> with aria-label, current page button has aria-current="page"
- Live result count region uses aria-live="polite" and aria-atomic="true"
- Empty state ("No results match …") replaces the <tbody> rows when filter zeroes out
- Visible focus rings on every interactive element (2px cyan outline, offset 2px)
- Search input is type="search" with an aria-label

LAYOUT
- Wrap the table in a scroll container (max-height 420px) so the body scrolls but headers stay visible
- thead th uses position: sticky; top: 0 with a higher background and a box-shadow that appears once the container scrolls
- Add a horizontal scrollbar at narrow widths (table min-width 640px)
- Stack toolbar items vertically below 600px

OUTPUT
- Single self-contained HTML file with embedded <style> and <script>
- Render against a sample dataset of ~40 rows (Name, Role, Status, Last Active ISO date, Score 0–100)
- Initial state: no sort applied, search empty, page 1 of (rowCount / pageSize)
- Production-grade aesthetic — should feel like a polished admin dashboard table