Una tabla con búsqueda es el layout adecuado cuando las cards se sienten demasiado dispersas: listas de precios, bibliotecas de recursos, rosters de membresía, inventarios de SKU. Los visitantes escanean columnas, escriben una keyword y, si quieren, filtran por categoría—sin abrir una hoja de cálculo.
Este recorrido usa el widget Table de CMS for Harmony, que funciona en Editor, Studio y Harmony. Wix nativo puede aproximar tablas en algunos sitios, pero una tabla CMS dedicada con search y filters suele ser más rápida de publicar.
Más patrones de exploración: Guía de Wix CMS.
Qué vas a construir
| Pieza | Elección |
|---|---|
| Data | Colección tipo Resources (Title, Category, Format, Link, Updated) |
| Display | Widget Table |
| Findability | Search bar + filtro Category |
| Optional | Enlaces de fila a páginas de ítem |
Cuándo usar una table vs un Repeater
| Prefiere una Table cuando… | Prefiere un Repeater cuando… |
|---|---|
| Muchas columnas, escaneo denso | Importan fotos e historias cortas |
| Inventarios y listas de recursos | Directorios de marketing y portfolios |
| Comparar estilo hoja de cálculo | Layouts de cards |
En CMS for Harmony, «cards» significa layout Repeater.
Pasos
- Instala CMS for Harmony y crea una colección con las columnas que necesites.
- Añade el widget Table a una página.
- Conecta la colección, elige campos como columnas y define anchos (auto o fixed).
- Abre Search & filters → activa Show search bar.
- Añade filtros (Category, Format, etc.) con Show filter. Usa rangos para números o fechas si hace falta.
- Opcionalmente añade una página de colección nativa y enlaza filas a URLs de ítem (how-to de Dynamic Pages).
- Publica. Prueba search, filters y cómo hace scroll la tabla en el teléfono.
Referencia de producto: Widget Table. Detalles de filtros: Search & filters.
Ejemplo: biblioteca de recursos
- Campos: Title, Category, File type, URL, Last updated.
- Mapea esos campos a columnas.
- Search en Title; filter en Category y File type.
- Si también quieres una vista de cards más amable en otro sitio, reutiliza la misma colección con un Repeater y filtros de categoría.
Tutoriales relacionados
- Barra de búsqueda · Combinar búsqueda y filtros
- Directorio con búsqueda
- Resumen de search and filters