tinytable: an accessible data table in 3 kB

The problem

Northwind’s admin tools rendered dozens of data tables, all built on a popular grid library. It shipped 90 kB of JavaScript to every page, broke screen readers in subtle ways and fought our design system at every turn.

Most of our tables needed three things: sorting, a sticky header and keyboard navigation. Nobody needed virtual scrolling for 40 rows.

The approach

I started from a plain, semantic <table> and added behaviour only where HTML falls short. The component enhances markup that is already on the page, so it works before JavaScript loads.

<tiny-table sortable sticky-header>
  <table>
    <thead>
      <tr><th>Destination</th><th data-type="number">Nights</th></tr>
    </thead>
    <tbody>…</tbody>
  </table>
</tiny-table>

• Sort state is announced with aria-sort and a polite live region.
• Arrow keys move between cells using a roving tabindex, following the ARIA grid pattern.
• Styling is left to plain CSS custom properties, so it fits any design system.

The best component is often the platform plus a few hundred lines of care.

Results

What I learned

Open source is mostly documentation and saying no kindly. The most valuable contributions came from people who use assistive technology every day and took the time to file detailed issues.