Cet article explore la création de tables dynamiques à l'aide d'Alpine JS, un framework JavaScript léger. Nous diviserons le processus en trois sections : en-tête, corps et pied de page, en nous concentrant sur les scénarios de base et complexes.

Mise en place :

1. Structure HTML : Nous commençons par un élément HTML de base () avec la directive x-data attachée. Cette directive lie les données réactives à l'élément.
2. Données JavaScript : Nous définissons un objet JavaScript vide (données) en dehors du code HTML pour contenir les données de notre tableau.

Le code initial est ci-dessous :


Entête

• Nous utilisons l'élément head pour l'en-tête.
• La directive x-for parcourt les données table.customHeader, créant des lignes et des colonnes de manière dynamique.
• Les en-têtes complexes peuvent exploiter les attributs colspan et rowspan (définis dans col.attr) pour fusionner des cellules.
• Le contenu de chaque cellule est affiché en utilisant x-html et lié à la propriété 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' },
          ]
      ],
  }
}

Corps

• L'élément tbody contient les lignes de données de la table.
• Nous parcourons table.data en utilisant x-for.
• Chaque ligne contient des cellules () remplies de données provenant des propriétés d'objet correspondantes à l'aide de x-text.

  Et voici les données que nous voulons afficher :
  

  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 },
  ]
  

  Bas de page

  • L'élément tfoot définit le pied de page.
  • Semblable à l'en-tête, il utilise x-for pour parcourir les données table.customFooter.
  • Cependant, le pied de page peut afficher des valeurs dynamiques en référençant les propriétés dans table.footerData à l'aide de 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 } },
      ],
  ],
  

  Exemples de données :

  Nous démontrons la fonctionnalité du tableau avec des exemples de données contenant des noms de villes et divers vêtements.

  Notes complémentaires:

  • Le style est obtenu à l'aide de classes CSS définies dans les propriétés col.class et data.class.
  • Le lien fourni offre une démo fonctionnelle complète pour une exploration plus approfondie.

  Liens externes

  1. Démo : https://framework.fuwafuwa.web.id/examples/simple-table
  2. Explication : https://framework.fuwafuwa.web.id/docs/simple-table.html#simple-table

  Conclusion:

  Cette répartition montre comment Alpine JS nous permet de créer des tableaux dynamiques avec des en-têtes, des corps et des pieds de page flexibles. Cette approche simplifie la création et la gestion des tables, en particulier pour les scénarios avec des données changeant fréquemment.