Guia de Uso - Table Simples

Status: Implementado (Design System 2.0)

Indice

1. Introducao
2. Estrutura Base
3. Variantes
4. Com Botao
5. Com Badge
6. Com Descricao
7. Com Acao Abaixo (Adicionar Linha)
8. Responsividade
9. Dark Mode
10. Acessibilidade
11. Customizacao Rapida
12. Boas Praticas

---

Introducao

A Table Simples e um componente de leitura (read-only) para exibir pares rotulo/valor em linhas. E ideal para telas de detalhe, confirmacao, resumo e exibicao de dados sem interacao complexa.

Use Table Simples quando:

• O conteudo e descritivo e em pequena quantidade.
• Voce precisa de leitura rapida por linha.
• Precisa exibir valores com descricao ou badges.

Evite Table Simples quando:

• Ha muitas colunas e linhas (use DataGrid).
• Precisa de ordenacao, filtros ou selecao.

---

Estrutura Base

<div class="table-simple">
  <div class="table-simple__header">
    <h3 class="table-simple__title">Titulo</h3>
  </div>

  <div class="table-simple__content">
    <div class="table-simple__row">
      <div class="table-simple__label">Rotulo A</div>
      <div class="table-simple__value">
        <span class="table-simple__value-text">Valor A</span>
      </div>
    </div>

    <div class="table-simple__row">
      <div class="table-simple__label">Rotulo B</div>
      <div class="table-simple__value">
        <span class="table-simple__value-text">Valor B</span>
      </div>
    </div>
  </div>
</div>

---

Variantes

1. Padrao

A estrutura base com titulo e linhas simples de rotulo/valor.

2. Com Botao

Inclua um botao no header para acao contextual (ex: editar, copiar, etc).

<div class="table-simple__header">
  <h3 class="table-simple__title">Titulo</h3>
  <button class="btn btn-outline btn-xs table-simple__action">Botao</button>
</div>

3. Com Badge

Adicione badges no valor usando o componente de badge.

<div class="table-simple__value">
  <span class="table-simple__value-text">Valor B</span>
  <div class="table-simple__badges">
    <span class="badge badge-outline">Badge A</span>
    <span class="badge badge-outline">Badge B</span>
  </div>
</div>

4. Com Descricao

Inclua uma linha secundaria abaixo do valor principal.

<div class="table-simple__value">
  <span class="table-simple__value-text">Valor C</span>
  <span class="table-simple__value-description">Descricao</span>
</div>

---

Com Botao

• Use para acoes de alto nivel: Editar, Copiar, Ver mais.
• Prefira btn-outline btn-xs para manter o peso visual discreto.
• O botao nao deve competir com o titulo.

---

Com Badge

• Use badges para status curtos (ex: Ativo, Pendente, Categoria).
• Limite o numero de badges por linha para manter legibilidade.

---

Com Descricao

• Use descricao para contexto adicional, como explicacoes ou observacoes.
• Evite textos longos; se necessario, use quebras de linha ou tooltip.

---

Com Acao Abaixo (Adicionar Linha)

Para casos em que voce precisa adicionar novas linhas, mantenha a Table Simples como base e acrescente um bloco de acao externo (footer). Isso preserva o padrao visual e evita criar um componente separado.

<div class="table-simple">
  <div class="table-simple__header">
    <h3 class="table-simple__title">Titulo</h3>
  </div>
  <div class="table-simple__content">
    <!-- linhas -->
  </div>
  <div class="table-simple__footer">
    <button class="btn btn-outline btn-sm">Adicionar linha</button>
  </div>
</div>

Recomendacao: crie o footer como um elemento externo ao conteudo, mantendo o layout interno intacto.

---

Responsividade

Em telas menores (<= 768px):

• As linhas passam a layout em coluna.
• Rotulo vem acima do valor.
• Mantem o padding lateral reduzido.

---

Dark Mode

O componente respeita os tokens semanticos globais:

• --color-text-primary
• --color-text-secondary
• --color-border

Basta aplicar .dark, .dark-mode ou [data-theme="dark"] no container raiz.

---

Acessibilidade

• Use h3 para titulo quando o componente estiver dentro de uma secao.
• Mantenha contrastes adequados com as cores do Design System.
• Se houver botao, garanta aria-label quando necessario.

---

Customizacao Rapida

Voce pode ajustar espacamentos e largura do rotulo com CSS variables:

.table-simple {
  --table-simple-gap: 16px;
  --table-simple-row-gap: 40px;
  --table-simple-label-width: 160px;
  --table-simple-border: #CED3E2;
}

---

Boas Praticas

1. Use o componente para exibicao de dados imutaveis.
2. Mantenha rotulos curtos e consistentes.
3. Nao misture muitos tipos de informacao na mesma tabela.
4. Combine com badges apenas quando agrega significado.

---

Versao: 2.0.0
Documentacao: /public/css/design-system/GUIA_TABLE.md
Exemplos: /public/css/design-system/exemplos-table.html
Guia avancado: /public/css/design-system/GUIA_TABLE_AVANCADO.md