Live demo — this example is server-driven; run the showcase locally for the interactive version.

Sortable table

A fully server-driven data table: column-header sorting, text filtering, and pagination all run on the server and swap the results region via HTMX. The browser holds no table state — every interaction is a fragment request to /api/htmx/data-table.

Examples

Sort, filter, and paginate

Type to filter across all columns, click a header to sort (toggle ascending/descending), and page through the results. The search box stays put while the results below it swap.

Loading users…

Documentation

Usage

The results region is the swap unit. Sort headers (built on the table-sort-th runtime template), pagination links, and the filter input all target the same results container with hx-swap="outerHTML" — the server bakes the current sort, query, and page into every link it returns, so the URL state lives entirely in the rendered markup.

For client-side sorting of small, fully-loaded tables, see the Alpine variants on the table page — this pattern is for data that lives on the server.