Tabelas complexas: agrupamento, ordenação e filtros

Construindo Tabelas e Formulários em HTML5

Sobre a Aula

Tabelas Complexas: Agrupamento, Ordenação e Filtros

As tabelas são elementos importantes em HTML que permitem exibir dados em um formato tabular.

Às vezes, é necessário lidar com tabelas complexas, que possuem muitas linhas e colunas.

Para tornar essas tabelas mais amigáveis e fáceis de usar, podemos implementar recursos de agrupamento, ordenação e filtros.

1. Agrupamento de Dados:
O agrupamento de dados em uma tabela permite combinar linhas com informações semelhantes, o que facilita a visualização e a análise dos dados. Podemos utilizar a propriedade rowspan para agrupar células em uma única linha.

Exemplo de código para agrupar linhas na tabela:

<table border="1">
  <tr>
    <th rowspan="2">Nome</th>
    <th rowspan="2">Idade</th>
    <th colspan="2">Endereço</th>
  </tr>
  <tr>
    <th>Cidade</th>
    <th>Estado</th>
  </tr>
  <tr>
    <td>João</td>
    <td>30</td>
    <td>São Paulo</td>
    <td>SP</td>
  </tr>
  <tr>
    <td>Maria</td>
    <td>25</td>
    <td>Rio de Janeiro</td>
    <td>RJ</td>
  </tr>
</table>

Aqui está o que cada parte do código faz:

<table border="1">: Inicia a tabela com uma borda de valor 1 para cada célula.
<tr>: Define uma linha na tabela.
<th>: Cria um cabeçalho de tabela, que é mais destacado que o conteúdo regular. O atributo rowspan indica quantas linhas a célula irá ocupar verticalmente, e o atributo colspan indica quantas colunas a célula irá ocupar horizontalmente.
<td>: Define uma célula de tabela regular.
No primeiro <tr>, temos duas células de cabeçalho (<th>) com rowspan="2", o que significa que essas células ocupam duas linhas cada. A terceira célula de cabeçalho tem colspan="2", ocupando duas colunas.
No segundo <tr>, temos mais duas células de cabeçalho (<th>) para a cidade e o estado.
As duas próximas <tr> contêm os dados de cada pessoa: nome, idade, cidade e estado.

2. Ordenação de Dados:
Ordenar os dados de uma tabela facilita a identificação de padrões e informações relevantes. Podemos utilizar JavaScript para permitir a ordenação das colunas de uma tabela de forma interativa.

Exemplo de código para adicionar ordenação nas colunas da tabela:

<table id="tabela" border="1">
  <!-- conteúdo da tabela -->
</table>

<script>
  function ordenarColuna(coluna) {
    var tabela, linhas, i, x, y, trocou;
    tabela = document.getElementById("tabela");
    trocou = true;
    while (trocou) {
      trocou = false;
      linhas = tabela.rows;
      for (i = 1; i < (linhas.length - 1); i++) {
        x = linhas[i].getElementsByTagName("td")[coluna];
        y = linhas[i + 1].getElementsByTagName("td")[coluna];
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          linhas[i].parentNode.insertBefore(linhas[i + 1], linhas[i]);
          trocou = true;
          break;
        }
      }
    }
  }
</script>

Explicação do código:

O elemento <table> é criado com o atributo id definido como “tabela”. Isso permite que o JavaScript localize a tabela mais tarde para aplicar a funcionalidade de ordenação. O atributo border="1" é usado para adicionar uma borda às células da tabela.

Depois, temos um bloco de script que define uma função chamada ordenarColuna(coluna). Essa função é responsável por ordenar as linhas da tabela com base no conteúdo da coluna especificada.

tabela = document.getElementById("tabela");: Aqui, o código obtém a referência à tabela usando seu ID (“tabela”) e a armazena na variável tabela.
linhas = tabela.rows;: Isso obtém todas as linhas da tabela e as armazena na variável linhas.
O loop while percorre as linhas repetidamente enquanto houver trocas a serem feitas.
Dentro do loop while, há um loop for que percorre as linhas da tabela (exceto a primeira e a última, pois a ordenação ocorre comparando duas linhas vizinhas).
x e y obtêm as células (colunas) na posição coluna da linha atual e da linha subsequente.
A comparação if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) verifica se o conteúdo da célula x é maior (alfabeticamente) que o conteúdo da célula y.
Se a condição for verdadeira, as linhas são trocadas usando linhas[i].parentNode.insertBefore(linhas[i + 1], linhas[i]);, o que efetivamente move a linha seguinte para cima.
Se ocorrer alguma troca, o loop continua, pois ainda há possíveis trocas a serem feitas.

3. Filtros de Dados:
Filtros permitem que os usuários visualizem apenas as informações relevantes da tabela, ocultando temporariamente as linhas que não atendem aos critérios definidos. Podemos implementar filtros usando JavaScript.

Exemplo de código para adicionar filtro na tabela:

<input type="text" id="filtro" placeholder="Filtrar por nome...">
<table id="tabela" border="1">
  <!-- conteúdo da tabela -->
</table>

<script>
  document.getElementById("filtro").addEventListener("keyup", function() {
    var input, filtro, tabela, linhas, i, coluna;
    input = document.getElementById("filtro");
    filtro = input.value.toUpperCase();
    tabela = document.getElementById("tabela");
    linhas = tabela.getElementsByTagName("tr");
    coluna = 0; // Coluna que será filtrada (0 para a primeira coluna, 1 para a segunda e assim por diante)
    for (i = 0; i < linhas.length; i++) {
      var valorCelula = linhas[i].getElementsByTagName("td")[coluna];
      if (valorCelula) {
        if (valorCelula.innerHTML.toUpperCase().indexOf(filtro) > -1) {
          linhas[i].style.display = "";
        } else {
          linhas[i].style.display = "none";
        }
      }
    }
  });
</script>

Explicação do código:

Na primeira parte, um campo de entrada de texto (<input>) é criado com um atributo id definido como “filtro”. Isso permite que o JavaScript localize o campo de entrada para observar eventos, como teclas pressionadas. A tabela é definida com o ID “tabela”, onde o conteúdo da tabela será exibido.

Depois temos o bloco de script:

document.getElementById("filtro").addEventListener("keyup", function() {...}); adiciona um ouvinte de evento ao campo de entrada de texto “filtro”. Quando o usuário digita algo, a função dentro dessa construção é ativada.
input = document.getElementById("filtro"); obtém a referência ao campo de entrada.
filtro = input.value.toUpperCase(); obtém o valor do campo de entrada e converte para letras maiúsculas.
tabela = document.getElementById("tabela"); obtém a referência à tabela.
linhas = tabela.getElementsByTagName("tr"); obtém todas as linhas da tabela.
coluna = 0; define a coluna que será usada para filtragem (0 para a primeira coluna, 1 para a segunda e assim por diante).
Um loop for percorre todas as linhas da tabela.
valorCelula = linhas[i].getElementsByTagName("td")[coluna]; obtém o valor da célula correspondente à coluna definida.
A comparação if (valorCelula.innerHTML.toUpperCase().indexOf(filtro) > -1) verifica se o conteúdo da célula contém o filtro inserido pelo usuário.
Dependendo da condição, a linha é exibida (.style.display = "") ou ocultada (.style.display = "none").

Com essas técnicas de agrupamento, ordenação e filtros, podemos criar tabelas complexas que se tornam mais compreensíveis e interativas para os usuários, facilitando a análise e a visualização dos dados apresentados.

Siga-me

Entrar na conversa