| Aurora | Diseño | 24 € |
| Basalto | Código | 12 € |
| Cobalto | Fotos | 38 € |
| Duna | Diseño | 9 € |
Tableau triable avec filtres
Cliquez sur un en-tête pour trier, encore une fois pour inverser, et ouvrez un petit champ de recherche par colonne.
Réglages
Code
<div class="uv-ftt"><table><thead><tr><th data-i="0"><button class="th">Nom<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="Filtrer"></label></th><th data-i="1"><button class="th">Catégorie<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="Filtrer"></label></th><th data-i="2"><button class="th">Prix<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="Filtrer"></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 pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Filtres
Où l’utiliser
Les tableaux restent le meilleur moyen de parcourir beaucoup de lignes. Pensez à l’inventaire dans le back-office d’une boutique, au tarif d’un grossiste ou à la liste des adhérents d’une association. Un clic sur l’en-tête trie la colonne, la loupe ouvre un filtre rien que pour elle. Utile si vous cherchiez un tableau triable en HTML avec recherche par colonne.
Le tri traite les nombres comme des nombres, les prix sont donc bien rangés. Sur petit écran, gardez peu de colonnes et courtes, ou passez à des cartes sur mobile. Au-delà de quelques milliers de lignes, triez et filtrez côté serveur.