Table
- Angular:
mds-table - CSS/HTML (mds-styles): Estilização da tabela HTML
- Figma: ✅ — abrir Design System 2.0 ↗
- Tipo: Core
Definição Funcional
Seção intitulada “Definição Funcional”A Table organiza conjuntos de dados em linhas e colunas, facilitando a visualização, comparação e análise de informações estruturadas. É o componente principal para gestão de grandes inventários e registros operacionais.
Diretrizes de Comportamento
Seção intitulada “Diretrizes de Comportamento”- Cabeçalhos de Coluna: Devem ser extremamente curtos e usar Caixa de Título.
- Ruim: Data em que foi realizada a entrega
- Melhor: Data de Entrega
- Alinhamento:
- Textos: Alinhados à esquerda.
- Números/Valores: Alinhados à direita (facilita a comparação de grandezas).
- Estados Vazios: Se a tabela não possuir dados, use um Estado Vazio com uma mensagem clara e neutra.
- Exemplo: Nenhum registro encontrado.
- Densidade: Utilize textos concisos para evitar o truncamento com reticências (…), que deve ser usado apenas em casos extremos de falta de espaço.
- Ações em Linha: Botões dentro da tabela (como “Editar” ou “Excluir”) devem preferencialmente usar ícones com Tooltips para economizar espaço horizontal.
- Ação Única: Se houver apenas uma ação possível (ex: apenas “Visualizar”), utilize um botão de ícone direto na linha com um Tooltip.
- Múltiplas Ações: Quando houver duas ou mais ações, agrupe-as em um Dropdown acionado por um botão de “Mais Opções”.
- Hierarquia no Menu:
- Coloque as ações mais frequentes no topo (ex: Editar, Duplicar).
- Ações destrutivas (ex: Excluir, Cancelar) devem ficar ao final da lista e, se possível, separadas por um divisor e destacadas com a cor de perigo (danger).
- Rótulos dos Itens: Use Caixa de Título e verbos de ação curtos.
- Exemplo: Editar Carga, Imprimir Comprovante…, Excluir Registro.
- Uso de Reticências (…): Aplique a regra de reticências para itens que abrem modais ou diálogos de confirmação antes de concluir a tarefa.
Exemplos de Escrita (Dos & Don’ts)
Seção intitulada “Exemplos de Escrita (Dos & Don’ts)”| Contexto Logístico | Estilo Incorreto (Prolixo) | Estilo UX (Conciso/Direto) |
|---|---|---|
| Cabeçalho | Identificação da Placa do Caminhão | Placa |
| Status (Dado) | O carregamento está pendente no pátio | Pendente |
| Ação | Clique aqui para ver os detalhes deste frete | Ver detalhes |