Data Tables Snippets — Free HTML CSS JS Sortable Data Table Examples

Tables are where dense data meets real interaction, and the details decide whether one is usable: which column is sorted, what stays pinned when you scroll, how a long row reveals its detail, and what happens when the data is empty, loading or broken.

These snippets cover the full working set — sorting, multi-sort, filtering, search highlighting, frozen and resizable columns, inline editing, row selection, expandable detail panels, virtualisation for large sets, and the loading, empty and error states most implementations forget.

Sorting state has to be visible, not just functional

A sortable column needs its current direction shown in the header — an arrow indicating ascending or descending — and exposed programmatically via aria-sort, not just handled correctly on click. Multi-sort extends this with a visible priority indicator per column, because a user who shift-clicks a second column to add a tiebreaker needs to see that the first sort is still active underneath it.

Frozen and sticky, without breaking scroll

A frozen first column and a sticky header both rely on position: sticky combined with a defined stacking context, and the tricky part is keeping cell borders and shadows consistent as content scrolls underneath — a shadow that only appears once the frozen column has something to separate itself from is what sells the effect rather than looking like a static line.

Editing inline versus a modal round trip

Inline editing with per-cell validation lets a small correction happen without navigating away from the table's context, which matters most in admin tools where the table itself is the primary interface. The validation for each cell needs to behave like a real form field — an error message, an aria-invalid state, a way to cancel back to the previous value — not just a visual red border on the cell.

Virtualisation is a performance tool, not a default

Rendering only the rows currently in the viewport keeps a table with thousands of rows responsive, but it also breaks native browser find-in-page and complicates row-height-dependent layouts. Below roughly a few hundred rows, the DOM cost is negligible and the added complexity of virtualisation is not worth its trade-offs; above it, rendering only the visible window is what keeps scrolling and re-rendering fast.

States a table can be in besides "has data"

A loading skeleton shaped like the eventual table, an empty state that suggests why there is nothing to show and what to do about it, and an error state distinct from an empty one are each a deliberate design decision — and each is a state these snippets implement explicitly rather than leaving as an afterthought discovered in production.