Built on WIX Headless

Blog / how-to

Como criar uma tabela pesquisável no Wix

· tabela pesquisável Wix CMS

Como criar uma tabela pesquisável no Wix

Uma tabela pesquisável é o layout certo quando cards parecem sparse demais: listas de preços, bibliotecas de recursos, rosters de membership, inventários de SKU. Visitantes escaneiam colunas, digitam uma keyword e, se quiserem, filtram por categoria—sem abrir uma planilha.

Este passo a passo usa o widget Table do CMS for Harmony, que funciona no Editor, Studio e Harmony. O Wix nativo pode aproximar tabelas em alguns lugares, mas uma tabela CMS dedicada com search e filters costuma ser mais rápida de entregar.

Mais padrões de navegação: Guia Wix CMS.

O que você vai construir

PeçaEscolha
DataCollection tipo Resources (Title, Category, Format, Link, Updated)
DisplayWidget Table
FindabilitySearch bar + filtro Category
OptionalLinks de linha para páginas de item

Quando usar table vs Repeater

Prefira uma Table quando…Prefira um Repeater quando…
Muitas colunas, escaneamento densoFotos e histórias curtas importam
Inventários e listas de recursosDiretórios de marketing e portfólios
Comparar estilo planilhaLayouts de cards

No CMS for Harmony, “cards” significa layout Repeater.

Passos

  1. Instale o CMS for Harmony e crie uma collection com as colunas que precisar.
  2. Adicione o widget Table a uma página.
  3. Conecte a collection, escolha campos como colunas e defina larguras (auto ou fixed).
  4. Abra Search & filters → ative Show search bar.
  5. Adicione filtros (Category, Format etc.) com Show filter. Use ranges para números ou datas se precisar.
  6. Opcionalmente adicione uma collection page nativa e linke linhas a URLs de item (how-to de Dynamic Pages).
  7. Publique. Teste busca, filtros e como a tabela rola no celular.

Referência de produto: Widget Table. Detalhes de filtros: Search & filters.

Exemplo: biblioteca de recursos

  1. Campos: Title, Category, File type, URL, Last updated.
  2. Mapeie esses campos para colunas.
  3. Busca em Title; filtro em Category e File type.
  4. Se também quiser uma vista de cards mais amigável em outro lugar, reutilize a mesma collection com um Repeater e filtros de categoria.

Tutoriais relacionados

Relacionado

Atualizado:

Pronto para experimentar no Harmony? Criar um site inicial grátis CMS for Harmony