Table

Tipo: Core

DesignersFigma Design System 2.0
Devs · HTML/CSSmds-styles Storybook com classes e exemplos
Devs · Angularmds-angularAinda não disponível

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

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)

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

Para desenvolvedores

Tudo abaixo é lido do código (stories, SCSS e componentes Angular) a cada npm run docs:sync — se algo estiver diferente do que você vê no projeto, o código é quem manda.

HTML/CSS (mds-styles)

Exemplo

Story Default do Storybook:

<table class="mds-table mds-table-default">
  <thead>
    <tr>
      <th>#</th>
      <th>Nome</th>
      <th>Sobrenome</th>
      <th>Usuário</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Variações e opções

Opções do painel de controles do Storybook — escolha um valor lá para ver o resultado ao vivo. As classes CSS correspondentes estão na lista abaixo.

Opção	Valores	Padrão no exemplo
`variant`	`default` `striped` `bordered` `hover` `borderless`	`default`
`size`	`sm` `md` `lg`	—

Classes CSS

Lidas do SCSS (src/scss) — só aparece aqui o que realmente existe.

Tipo	Classes
Bloco	`.mds-input` `.mds-select` `.mds-table` `.mds-table-bordered` `.mds-table-borderless` `.mds-table-hover` `.mds-table-responsive` `.mds-table-sm` `.mds-table-striped`
Elementos	`.mds-input__field`
Modificadores	`.mds-input--lg` `.mds-input--md` `.mds-input--sm` `.mds-input--xs` `.mds-select--lg` `.mds-select--md` `.mds-select--sm` `.mds-select--xs` `.mds-table--accent` `.mds-table--bordered` `.mds-table--borderless` `.mds-table--danger` `.mds-table--fom` `.mds-table--full` `.mds-table--hover` `.mds-table--info` `.mds-table--no-border` `.mds-table--responsive` `.mds-table--sm` `.mds-table--striped` `.mds-table--success` `.mds-table--warning` `.mds-table--with-toolbar` `.mds-table--xs`

Table — Figma (Design System 2.0) ↗