Este artigo explora a criação de tabelas dinâmicas usando Alpine JS, uma estrutura JavaScript leve. Dividiremos o processo em três seções: cabeçalho, corpo e rodapé, com foco em cenários básicos e complexos.

Configurando:

1. Estrutura HTML: Começamos com um elemento HTML básico () com a diretiva x-data anexada. Esta diretiva vincula dados reativos ao elemento.
2. Dados JavaScript: Definimos um objeto JavaScript vazio (dados) fora do HTML para armazenar os dados da nossa tabela.

O código inicial está abaixo:


Cabeçalho

• Usamos o elemento thead para o cabeçalho.
• A diretiva x-for itera sobre os dados table.customHeader, criando linhas e colunas dinamicamente.
• Cabeçalhos complexos podem aproveitar os atributos colspan e rowspan (definidos em col.attr) para mesclar células.
• O conteúdo de cada célula é exibido usando x-html e vinculado à propriedade col.title.

let data = {
  table: {
      customHeader: [
          [
              { title: 'City', attr: { rowspan: 2 }, class: 'border-r border-t' },
              { title: 'Clothes', attr: { colspan: 3 }, class: 'border-r border-t' },
              { title: 'Accessories', attr: { colspan: 2 }, class: 'border-t' }
          ],
          [
              { title: 'Trousers', class: 'border-r' },
              { title: 'Skirts', class: 'border-r' },
              { title: 'Dresses', class: 'border-r' },
              { title: 'Bracelets', class: 'border-r' },
              { title: 'Rings' },
          ]
      ],
  }
}

Corpo

• O elemento tbody contém as linhas de dados da tabela.
• Nós iteramos por table.data usando x-for.
• Cada linha contém células () preenchidas com dados das propriedades do objeto correspondente usando x-text.

  E estes são os dados que queremos mostrar:
  

  data: [
      { "city": "Mandalay", "trousers": 79, "skirts": 16, "dresses": 14, "bracelets": 69, "rings": 99 },
      { "city": "George Town", "trousers": 68, "skirts": 24, "dresses": 90, "bracelets": 96, "rings": 48 },
      { "city": "Gent", "trousers": 26, "skirts": 60, "dresses": 67, "bracelets": 5, "rings": 43 },
      { "city": "Mombasa", "trousers": 34, "skirts": 62, "dresses": 18, "bracelets": 75, "rings": 78 },
      { "city": "Lyon", "trousers": 13, "skirts": 33, "dresses": 12, "bracelets": 0, "rings": 17 },
      { "city": "Vancouver", "trousers": 82, "skirts": 91, "dresses": 18, "bracelets": 96, "rings": 72 },
      { "city": "Cairn", "trousers": 64, "skirts": 43, "dresses": 14, "bracelets": 95, "rings": 55 },
  ]
  

  Rodapé

  • O elemento tfoot define o rodapé.
  • Semelhante ao cabeçalho, ele usa x-for para iterar pelos dados table.customFooter.
  • No entanto, o rodapé pode exibir valores dinâmicos referenciando propriedades em table.footerData usando x-html.

  customFooter: [
      [
          { value: 'Total', class: 'font-bold border-r text-center', attr: { rowspan: 2 } },
          { name: 'total-trousers', class: 'text-right border-r' },
          { name: 'total-skirts', class: 'text-right border-r', },
          { name: 'total-dresses', class: 'text-right border-r' },
          { name: 'total-bracelets', class: 'text-right border-r' },
          { name: 'total-rings', class: 'text-right' },
      ],
      [
          { name: 'total-clothes', class: 'text-center border-r', attr: { colspan: 3 } },
          { name: 'total-accessories', class: 'text-center', attr: { colspan: 2 } },
      ],
  ],
  

  Dados de exemplo:

  Demonstramos a funcionalidade da tabela com dados de amostra contendo nomes de cidades e vários itens de vestuário.

  Notas Adicionais:

  • O estilo é obtido usando classes CSS definidas nas propriedades col.class e data.class.
  • O link fornecido oferece uma demonstração completa de trabalho para exploração posterior.

  links externos

  1. Demonstração: https://framework.fuwafuwa.web.id/examples/simple-table
  2. Explicação: https://framework.fuwafuwa.web.id/docs/simple-table.html#simple-table

  Conclusão:

  Este detalhamento mostra como o Alpine JS nos capacita a criar tabelas dinâmicas com cabeçalhos, corpos e rodapés flexíveis. Essa abordagem simplifica a criação e o gerenciamento de tabelas, especialmente para cenários com dados que mudam frequentemente.