| Aurora | Diseño | 24 € |
| Basalto | Código | 12 € |
| Cobalto | Fotos | 38 € |
| Duna | Diseño | 9 € |
HTML + CSSFiltros
Tabla con orden y filtros
Pulsa una cabecera para ordenar, otra vez para invertir, y abre un pequeño buscador en cualquier columna.
Ajustes
16px
1x
Código
<div class="uv-ftt"><table><thead><tr><th data-i="0"><button class="th">Nombre<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="Filtrar"></label></th><th data-i="1"><button class="th">Categoría<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="Filtrar"></label></th><th data-i="2"><button class="th">Precio<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="Filtrar"></label></th></tr></thead><tbody><tr><td>Aurora</td><td>Diseño</td><td>24 €</td></tr><tr><td>Basalto</td><td>Código</td><td>12 €</td></tr><tr><td>Cobalto</td><td>Fotos</td><td>38 €</td></tr><tr><td>Duna</td><td>Diseño</td><td>9 €</td></tr></tbody></table></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Filtros
Dónde usarlo
Las tablas siguen siendo lo mejor para repasar muchas filas. Piensa en el inventario interno de una tienda, la lista de precios de un mayorista o los socios de un club. Al pulsar una cabecera se ordena por esa columna, y la lupa abre un filtro solo para ella. Es la tabla ordenable en HTML que muchos buscan.
El orden trata los números como números, así que los precios salen bien. En pantallas pequeñas, pocas columnas y cortas, o pasa a tarjetas en el móvil. Con miles de filas, mejor ordenar y filtrar en el servidor.