| Aurora | Diseño | 24 € |
| Basalto | Código | 12 € |
| Cobalto | Fotos | 38 € |
| Duna | Diseño | 9 € |
Sortierbare Tabelle mit Filter
Klick auf einen Spaltenkopf sortiert, ein zweiter Klick dreht die Reihenfolge um, jede Spalte hat ein Suchfeld.
Einstellungen
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="Filtern"></label></th><th data-i="1"><button class="th">Kategorie<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="Filtern"></label></th><th data-i="2"><button class="th">Preis<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="Filtern"></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>Fotos</td><td>38 €</td></tr><tr><td>Duna</td><td>Design</td><td>9 €</td></tr></tbody></table></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Filter
Wofür du ihn nutzen kannst
Tabellen sind immer noch das Beste, um viele Zeilen zu überblicken. Denk an die Lagerliste im Backend eines Shops, die Preisliste eines Großhändlers oder die Mitgliederliste eines Vereins. Ein Klick auf den Spaltenkopf sortiert, die Lupe öffnet einen Filter nur für diese Spalte. Praktisch, wenn du eine sortierbare HTML-Tabelle mit Spaltensuche suchst.
Zahlen werden als Zahlen sortiert, Preise landen also in der richtigen Reihenfolge. Auf kleinen Bildschirmen wenige, kurze Spalten verwenden oder auf Karten umsteigen. Bei Tausenden Zeilen gehört Sortieren und Filtern auf den Server.