Création de tables dynamiques avec Alpine JS

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 :


<div x-data="data">
</div>

<script>
let data = {
}
</script>

Copier après la connexion

En-tê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.

<thead class="sticky top-0 z-10 text-gray-700 bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
  <template x-for="row in table.customHeader">
    <tr>
        <template x-for="col in row">
            <th class="px-4 font-semibold text-left border-b py-1.5"
                x-init="col.attr && Object.keys(col.attr).forEach(e => $el.setAttribute(e, col.attr[e]))">
                <div class="flex items-center justify-center">
                    <span x-html="col.title" class="whitespace-nowrap"></span>
                </div>
            </th>
        </template>
    </tr>
  </template>
</thead>

Copier après la connexion

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

Copier après la connexion

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.

<tbody>
    <template x-for="(row, idx) in table.data">
        <tr class="border-b dark:border-gray-700">
            <template x-for="(col, icol) in row.columns">
                <td x-bind:class="{ [col.class]: !!col.class }" class="px-3 border-b border-gray-200">
                    <div x-text="col.text"></div>
                </td>
            </template>
        </tr>
    </template>
</tbody>

Copier après la connexion

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

Copier après la connexion

Pied 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.

<tfoot class="sticky bg-gray-100 -bottom-1">
    <template x-for="row in table.customFooter">
        <tr>
            <template x-for="col in row">
                <td class="px-3 border-b border-gray-200"
                    x-init="col.attr && Object.keys(col.attr).forEach(e => $el.setAttribute(e, col.attr[e]))">
                        <div x-html="table.footerData[col.name)">
                        </div>
                </td>
            </template>
        </tr>
    </template>
</tfoot>

Copier après la connexion

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

Copier après la connexion

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 supplé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 propose 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 analyse 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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!