O que é?

Tabelas exibem conjuntos de dados. Apresentam informações em um formato de grade de linhas e colunas. O componente de tabela permite personalização conforme necessidade.

Quando usar

• Para organizar, exibir e tabular dados;
• Se o seu usuário precisar navegar até um dado específico para concluir uma tarefa;

Anatomia

O componente é composto por células (Cells), que são os menores blocos variáveis. Deste modo, é adequado afirmar que não há uma forma padrão desse componente, sendo mutável em número de linhas e colunas e do seu conteúdo.

O uso depende da necessidade da aplicação, porém, toda tabela precisa de ao menos uma linha e coluna. Cada linha é composta por várias células, com exceção do estado vazio, composto de apenas uma célula. Aplica-se o mesmo conceito de Label Value (Rótulo e valor), como mostra a figura a seguir:

1. Linha do cabeçalho (Header)
2. Linhas de conteúdo (Value)
3. Linha do rodapé (Footer)
4. Select (Quantidade de itens por página)
5. Número de páginas (Navegação)
6. Paginação

Tipos de células de tabela

Há somente uma variação de tabela. O que muda são as células que podem ser aplicadas de inúmeras maneiras. Conheça os tipos de células e o uso de cada uma delas:

1. Label + Info Icon: Usado para habilitar tooltips;
2. Label Regular;
3. Label + Order Icon: Usada para ordenação da coluna;
4. Value Checkbox: Usado para selecionar uma linha inteira
5. Value Regular;
6. Value + Caption: Usado para abrigar atributos correlacionados como data e hora;
7. Button Text: Usado para o usuário efetuar uma ação ou acessar uma página;
8. Badge: Usado para sinalizar status;
9. Switch: Usado para ativar ou desativar a linha inteira;
10. Icons: Usados para ações diretas e objetivas. Ex.: abrir menu contextual, copiar, exportar…

<table class="table is-fullwidth">
  <thead>
    <tr>
      <th>
        <div class="field">
          <p class="control">
            <input class="checkradio" id="selectAll" type="checkbox" name="selectAll">
            <label for="selectAll"></label>
          </p>
        </div>
      </th>
      <th>
        Label
        <span class="icon tooltip" data-tooltip="Tooltip informativa">
          <i class="far fa-info-circle"></i>
        </span>
      </th>
      <th>Label</th>
      <th>Label</th>
      <th>
        Label
        <a class="icon">
          <i class="fas fa-sort"></i>
        </a>
      </th>
      <th>Label</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="field">
          <p class="control">
            <input class="checkradio" id="item1" type="checkbox" name="item0">
            <label for="item0"></label>
          </p>
        </div>
      </td>
      <td>Value</td>
      <td>Value <small>Caption</small></td>
      <td><a>Link</a></td>
      <td>
        <span class="badge is-success is-light">
          <span class="icon is-medium">
            <i class="fak fa-success-medium"></i>
          </span>
          <span>Success</span>
        </span>
      </td>
      <td>
        <div class="switch">
          <input id="switch1" class="switch" type="checkbox"">
          <label class="label" for="switch1" data-on="On" data-off="Off"></label>
        </div>
      </td>
      <td>
        <button class="button is-icon" aria-haspopup="true">
          <span class="icon is-medium">
            <i class="fak fa-options-medium" aria-hidden="true"></i>
          </span>
        </button>
      </td>
    </tr>
  </tbody>
</table>

Estado vazio

O estado vazio padrão tabela possui um linha com texto informativo centralizado. Há também uma opção com botão de ação.

<table class="table is-fullwidth">
  <thead>
    <tr>
      <th>Label</th>
      <th>Label</th>
      <th>Label</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="3" class="has-text-centered">Nenhum dado encontrado</td>
    </tr>
  </tbody>
</table>

<table class="table is-fullwidth">
  <thead>
    <tr>
      <th>Label</th>
      <th>Label</th>
      <th>Label</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="3" class="has-text-centered">
        Nenhum dado encontrado
        <button class="button is-text">
          <span>Recarregar</span>
          <span class="icon">
            <i class="far fa-redo"></i>
          </span>
        </button>
      </td>
    </tr>
  </tbody>
</table>

Paginação

Usado em conjunto com Tabelas e listagens.

Aplicação

Clique na linha

Não é recomendado que apenas uma célula da tabela seja clicável. Se a tabela abre páginas secundárias, a linha deve ter o link, com exceção da célula que contenha Icon Button. Não recomendamos que somente uma célula seja destacada em outra cor e contenha link.

Cor

No caso de linhas com link, as células de texto devem se manter na cor padrão, Support Darkest.

Ação principal

O clique na linha deve abrir, invariavelmente, uma página de detalhes do item. A página deve conter a estrutura padrão, incluindo breadcrumbs.

Largura mínima da tabela

A tabela deve ocupar a largura mínima, e recomendada, igual ao contêiner de conteúdo equivalente a 8 colunas e pode ser estendida até 12.

Atributos por coluna

É recomendado o uso de apenas um atributo por coluna. Ex.: Cidade e estado representam duas colunas diferentes.

Colunas da tabela

Priorize a coluna “Nome” como a primeira, a menos que haja dados para justificar que outra coluna esteja nessa posição.

Quebras de texto

Para quebras de texto serão utilizadas reticências (…) e o texto completo deverá abrir em uma tooltip.

Exemplos

<table class="table is-fullwidth">
  <thead>
    <tr>
      <th>
        Mês de referência
        <span class="icon tooltip" data-tooltip="Tooltip informativa">
          <i class="far fa-info-circle"></i>
        </span>
      </th>
      <th>Valor (R$)</th>
      <th>Situação</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Janeiro/2021</td>
      <td>229.223,75</td>
      <td>
        <span class="badge is-warning is-light">
          <span class="icon is-medium">
            <i class="fak fa-warning-medium"></i>
          </span>
          <span>Em aberto</span>
        </span>
      </td>
       <td>
        <button class="button is-icon" aria-haspopup="true">
          <span class="icon is-medium">
            <i class="fak fa-options-medium" aria-hidden="true"> </i>
          </span>
        </button>
      </td>
    </tr>
    <tr>
      <td>Dezembro/2020</td>
      <td>12.009,40</td>
      <td>
        <span class="badge is-success is-light">
          <span class="icon is-medium">
            <i class="fak fa-success-medium"></i>
          </span>
          <span>Pago</span>
        </span>
      </td>
       <td>
        <button class="button is-icon" aria-haspopup="true">
          <span class="icon is-medium">
            <i class="fak fa-options-medium" aria-hidden="true"> </i>
          </span>
        </button>
      </td>>
      </td>
    </tr>
    <tr>
      <td>Novembro/2020</td>
      <td>9.300,00</td>
      <td>
        <span class="badge is-success is-light">
          <span class="icon is-medium">
            <i class="fak fa-success-medium"></i>
          </span>
          <span>Pago</span>
        </span>
      </td>
      <td>
        <button class="button is-icon" aria-haspopup="true">
          <span class="icon is-medium">
            <i class="fak fa-options-medium" aria-hidden="true"> </i>
          </span>
        </button>
      </td>
    </tr>
    <tr>
      <td>Outubro/2020</td>
      <td>34.650,89</td>
      <td>
        <span class="badge is-success is-light">
          <span class="icon is-medium">
            <i class="fak fa-success-medium"></i>
          </span>
          <span>Pago</span>
        </span>
      </td>
       <td>
        <button class="button is-icon" aria-haspopup="true">
          <span class="icon is-medium">
            <i class="fak fa-options-medium" aria-hidden="true"> </i>
          </span>
        </button>
      </td>
    </tr>
    <tr>
      <td>Setembro/2020</td>
      <td>100.700,16</td>
      <td>
        <span class="badge is-success is-light">
          <span class="icon is-medium">
            <i class="fak fa-success-medium"></i>
          </span>
          <span>Pago</span>
        </span>
      </td>
       <td>
        <button class="button is-icon" aria-haspopup="true">
          <span class="icon is-medium">
            <i class="fak fa-options-medium" aria-hidden="true"> </i>
          </span>
        </button>
      </td>
    </tr>
    <tr>
      <td>Agosto/2020</td>
      <td>80.100,09</td>
      <td>
        <span class="badge is-success is-light">
          <span class="icon is-medium">
            <i class="fak fa-success-medium"></i>
          </span>
          <span>Pago</span>
        </span>
      </td>
       <td>
        <button class="button is-icon" aria-haspopup="true">
          <span class="icon is-medium">
            <i class="fak fa-options-medium" aria-hidden="true"> </i>
          </span>
        </button>
      </td>
    </tr>
    <tr>
      <td>Julho/2020</td>
      <td>22.111,00</td>
      <td>
        <span class="badge is-success is-light">
          <span class="icon is-medium">
            <i class="fak fa-success-medium"></i>
          </span>
          <span>Pago</span>
        </span>
      </td>
       <td>
        <button class="button is-icon" aria-haspopup="true">
          <span class="icon is-medium">
            <i class="fak fa-options-medium" aria-hidden="true"> </i>
          </span>
        </button>
      </td>
    </tr>
    <tr>
      <td>Junho/2020</td>
      <td>50.780,60</td>
      <td>
        <span class="badge is-success is-light">
          <span class="icon is-medium">
            <i class="fak fa-success-medium"></i>
          </span>
          <span>Pago</span>
        </span>
      </td>
       <td>
        <button class="button is-icon" aria-haspopup="true">
          <span class="icon is-medium">
            <i class="fak fa-options-medium" aria-hidden="true"> </i>
          </span>
        </button>
      </td>
    </tr>
    <tr>
      <td>Maio/2020</td>
      <td>8.720,93</td>
      <td>
        <span class="badge is-success is-light">
          <span class="icon is-medium">
            <i class="fak fa-success-medium"></i>
          </span>
          <span>Pago</span>
        </span>
      </td>
       <td>
        <button class="button is-icon" aria-haspopup="true">
          <span class="icon is-medium">
            <i class="fak fa-options-medium" aria-hidden="true"> </i>
          </span>
        </button>
      </td>
    </tr>
    <tr>
      <td>Abril/2020</td>
      <td>91.562,00</td>
      <td>
        <span class="badge is-success is-light">
          <span class="icon is-medium">
            <i class="fak fa-success-medium"></i>
          </span>
          <span>Pago</span>
        </span>
      </td>
       <td>
        <button class="button is-icon" aria-haspopup="true">
          <span class="icon is-medium">
            <i class="fak fa-options-medium" aria-hidden="true"> </i>
          </span>
        </button>
      </td>
      </td>
    </tr>
  </tbody>
</table>

<nav class="level">
  <div class="level-left">
    <span class="pagination-details"> Exibir </span>
    <div class="select pagination-details"> 
      <select class="pagination-select">
        <option> 10 </option>
        <option> 9 </option>
        <option> 8 </option>
      </select>
    </div>
    <div class="vertical-divider pagination-details"></div>
    <span class="pagination-details">1-10 de 12</span>
  </div>
  <div class="level-right">
    <!-- Pagination -->
    <nav class="pagination is-right" role="navigation" aria-label="pagination">
      <ul class="pagination-list">
        <li><a class="pagination-previous"> <i class="fa-light fa-chevron-left"></i></a> </li>
        <li><a class="pagination-link is-current" aria-label="Page 1" aria-current="page">1</a></li>
        <li><a class="pagination-link" aria-label="Goto page 2">2</a></li>
        <li><a class="pagination-link" aria-label="Goto page 2">3</a></li>
        <li> <a class="pagination-next"> <i class="fa-light fa-chevron-right"></i></a> </li>
      </ul> 

    </nav>
  </div>
</nav>