Views

A index renderiza os mesmos registros de formas diferentes. A Tabela (block TableView) é o modo denso padrão; estes três blocks são as alternativas ricas, e a troca acontece no view switcher do Subheader (gridMode). Qual view cada entidade usa por padrão é decisão de produto — isso vive em Estrutura de Index; aqui estão os blocks.

Uso em tela

Escolha a view pela natureza do registro, não por gosto: tabela quando o que importa é comparar colunas; os blocs abaixo quando a linha precisa de mais que células. Um único view switcher alterna entre elas — nunca recrie grid, lista ou painel à mão.

Cards

Grid de cards visuais — imagem, título, badges e ações no card (selecionar, favoritar, carrinho). Ganha quando o item é reconhecido pelo visual e a compra é por descoberta (Catálogo). Suporta estados de seleção/favorito (v-model), loading e empty.

Lista

Linhas altas e ricas — cada linha é o Forehead do tipo de registro, empilhado. A Lista é entidade-aware: a mesma view renderiza o forehead da entidade — transações mostram o cabeçalho do documento (tipo · número · status · valor); produtos, a versão com imagem + descrição + área de carrinho (comprar da listagem); fornecedores, a ficha (logo · razão social · CNPJ / contatos · status · marketplace). Ganha quando a linha precisa de mais que colunas. Traz paginação, seleção e linha ativa.

Seleção na Lista: o MeListView mostra avatar por padrão; no hover vira checkbox; selecionado = check ativo — só funciona se a linha tiver o campo avatar. O checkbox de "selecionar todos" vive na Filter Bar (show-select), não no cabeçalho da lista.

Preview

Master-detail: a lista à esquerda, o detalhe do selecionado à direita (iframe ou conteúdo próprio). Ganha para triagem — abrir e comparar vários registros sem sair da listagem. Exige altura definida no container. No subheader do detalhe, ao lado de "Opções", um ícone "abrir em outra janela" leva à página única do documento. No mobile o painel de detalhe some e tocar no item abre o documento (modal-sheet).

Sem linha selecionada, o painel de detalhe mostra um empty state (título + descrição + 2 botões: "Abrir documento" / "Perguntar ao Genius"). Com linha ativa, o detalhe traz código-nome + badge, tipo · criado em/por, status badge + valor.

Estados (por view)

As três views têm props nativas empty ({ title, description, actions, src } + slot empty) e loading (skeleton nativo; ListView aceita loadingColor/loadingAnimation). O estado de erro NÃO é nativo → trate com estado próprio (mensagem + "Tentar novamente"), no mesmo padrão do empty. Index vazia = título + descrição + ação ("Criar {entidade}").

Gotchas de montagem (verificados na index real)

• Cabeçalho/rodapé nativos "fantasma": MeListView (select-all) e MeCardView trazem um thead/tfoot de TABELA que rende uma faixa vazia/faded quando não usados → esconda (display:none sob a classe da view). O #header nativo do MeListView é cabeçalho de 2 <th> (fica fracionado) → monte a barra do card por fora e esconda o thead.
• Lista precisa de avatar na linha para a seleção (avatar↔checkbox) funcionar.
• Trocar de view preserva seleção e foco; o botão de gráficos do subheader só existe no modo tabela (some ao trocar de view).

No código

Blocks EletroDS. Doc técnico: blocks/cardview · blocks/listview · blocks/preview. Aqui o foco é o uso em Design.

Acessibilidade

Trocar de view deve preservar a seleção e o foco. Em Cards, a ação primária do card precisa de rótulo acessível (não só ícone). Em Lista, a linha rica precisa de estrutura semântica — não um amontoado de spans. Em Preview, o painel de detalhe deve ser anunciado ao abrir e alcançável por teclado.

Onde se aplica

Quando NÃO usar tabela

Para poucos atributos por item com forte componente visual (logo, miniatura, status em destaque), prefira cards em grade. A tabela é para comparar muitas linhas pelos mesmos campos; quando o foco é varredura rápida com pouca informação por item, use lista.

Veja tambémEstrutura de Index Subheader Forehead