| Aurora | Diseño | 24 € |
| Basalto | Código | 12 € |
| Cobalto | Fotos | 38 € |
| Duna | Diseño | 9 € |
HTML + CSSFilters
Sortable table with column filters
Click a header to sort, click again to reverse, and open a small search field on any column.
Settings
16px
1x
Code
<div class="uv-ftt"><table><thead><tr><th data-i="0"><button class="th">Name<i class="ar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M6 13l6 6 6-6"/></svg></i></button><button class="sq"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="M20 20l-4.3-4.3"/></svg></button><label class="sf"><input placeholder="Filter"></label></th><th data-i="1"><button class="th">Category<i class="ar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M6 13l6 6 6-6"/></svg></i></button><button class="sq"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="M20 20l-4.3-4.3"/></svg></button><label class="sf"><input placeholder="Filter"></label></th><th data-i="2"><button class="th">Price<i class="ar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M6 13l6 6 6-6"/></svg></i></button><button class="sq"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="M20 20l-4.3-4.3"/></svg></button><label class="sf"><input placeholder="Filter"></label></th></tr></thead><tbody><tr><td>Aurora</td><td>Design</td><td>24 €</td></tr><tr><td>Basalto</td><td>Code</td><td>12 €</td></tr><tr><td>Cobalto</td><td>Photos</td><td>38 €</td></tr><tr><td>Duna</td><td>Design</td><td>9 €</td></tr></tbody></table></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Filters
Where to use it
Tables are still the best way to scan lots of rows. Think of the stock list in a shop's back office, a wholesaler's price list or a club's member list. Clicking a header sorts by that column, and the magnifier opens a filter just for it. Handy if you need a sortable HTML table with column search.
Sorting treats numbers as numbers, so prices come out in the right order. Keep columns few and short on small screens, or switch to cards on phones. For thousands of rows, do the sorting and filtering on the server instead.