List Patterns
← OverviewDemonstrates: next, prev, search, sort, filter — all driven by HTMX. See Tables → Inventory for a live backend demo.
Search
A search input with hx-trigger="input changed delay:400ms" debounces keystrokes and replaces the table fragment.
Filter
Dropdown + checkbox filters submit via hx-get on change, replacing only the table container.
Sort Columns
Column headers are links that append ?sort=col&dir=asc/desc and toggle direction on re-click.
| Name ↑ | Category ⇅ | Price ⇅ | Actions |
|---|---|---|---|
| ← live rows from /demo/inventory | |||
Pagination (next / prev)
Numbered page links and previous/next controls replace the table fragment inline. This is a live demo — click the buttons to paginate through 47 dummy items.
| # | Name | Category |
|---|---|---|
| 1 | Item 1 | Electronics |
| 2 | Item 2 | Clothing |
| 3 | Item 3 | Food |
| 4 | Item 4 | Books |
| 5 | Item 5 | Electronics |
Search
GET …?q=termFilterBar SearchField — debounced hx-trigger.
Filter
GET …?category=X&active=1FilterBar SelectField / CheckboxField / RangeField.
Sort
GET …?sort=col&dir=ascSortableCol builds toggle links with current dir indicator.
Next / Prev
GET …?page=NPaginationBar renders numbered links with hx-include.