Criação de Tabelas Dinâmicas com JavaScript

Gerar tabelas dinamicamente usando JavaScript oferece flexibilidade e controle incomparáveis sobre a estrutura da tabela, permitindo adaptação com base na entrada do usuário ou dados obtidos de fontes externas. Isso supera as limitações das tabelas HTML estáticas.

Sumário

1. Tags de Tabela HTML: Uma Revisão Rápida
2. Criando Tabelas com JavaScript
3. Técnicas Avançadas de Manipulação de Tabelas

Tags de Tabela HTML: Uma Revisão Rápida

Antes de mergulharmos no JavaScript, vamos revisitar as tags HTML fundamentais usadas para a construção de tabelas. Uma tabela HTML básica compreende estes elementos essenciais:

• <table>: O contêiner para a tabela inteira.
• <tr>: Define uma linha da tabela.
• <th>: Especifica uma célula de cabeçalho da tabela (tipicamente em negrito e centralizada).
• <td>: Representa uma célula de dados da tabela.

Aqui está uma ilustração simples:

<table>
  <tr>
    <th>Nome</th>
    <th>Idade</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>30</td>
  </tr>
</table>

Criando Tabelas com JavaScript

JavaScript nos capacita a gerar programaticamente esses elementos HTML, manipulando o Document Object Model (DOM) para adicionar linhas, colunas e dados sem escrever manualmente HTML extenso. A seguinte função demonstra isso:

function createTable(data, targetElementId) {
  const table = document.createElement('table');
  const headerRow = table.insertRow();

  //Criando dinamicamente a linha de cabeçalho a partir das chaves do primeiro objeto
  const keys = Object.keys(data[0]);
  keys.forEach(key => {
    const headerCell = headerRow.insertCell();
    headerCell.textContent = key;
  });

  data.forEach(row => {
    const dataRow = table.insertRow();
    keys.forEach(key => {
      const dataCell = dataRow.insertCell();
      dataCell.textContent = row[key];
    });
  });

  document.getElementById(targetElementId).appendChild(table);
}

const myData = [
  { Nome: "John Doe", Idade: 30, Cidade: "Nova York" },
  { Nome: "Jane Smith", Idade: 25, Cidade: "Londres" },
  { Nome: "Peter Jones", Idade: 40, Cidade: "Paris" }
];

createTable(myData, 'myTableContainer'); //Especifique uma div com id="myTableContainer" no seu HTML

Lembre-se de incluir uma div com o id “myTableContainer” no seu HTML para anexar a tabela.

Técnicas Avançadas de Manipulação de Tabelas

Este exemplo básico pode ser significativamente aprimorado. Considere incorporar recursos como:

• Estilo: Aplique CSS para personalizar a aparência (por exemplo, usando classes ou estilos inline).
• Tratamento de Eventos: Adicione interatividade, como ordenar colunas clicando nos cabeçalhos ou filtrando linhas com base na entrada do usuário.
• Paginação: Lidar com grandes conjuntos de dados exibindo dados em páginas.
• Fontes de Dados: Obtenha dados de APIs ou bancos de dados para preencher a tabela dinamicamente.

Combinando HTML, CSS e JavaScript, você pode construir tabelas altamente dinâmicas e responsivas, adaptadas às suas necessidades específicas.