Este artículo explora la creación de tablas dinámicas utilizando Alpine JS, un marco de JavaScript liviano. Dividiremos el proceso en tres secciones: encabezado, cuerpo y pie de página, centrándonos en escenarios tanto básicos como complejos.

Configuración:

1. Estructura HTML: Comenzamos con un elemento HTML básico () con la directiva x-data adjunta. Esta directiva vincula los datos reactivos al elemento.
2. Datos de JavaScript: Definimos un objeto JavaScript vacío (datos) fuera del HTML para contener los datos de nuestra tabla.

El código inicial está a continuación:


Encabezamiento

• Usamos el elemento thead para el encabezado.
• La directiva x-for itera sobre los datos de table.customHeader, creando filas y columnas dinámicamente.
• Los encabezados complejos pueden aprovechar los atributos colspan y rowspan (definidos en col.attr) para fusionar celdas.
• El contenido dentro de cada celda se muestra usando x-html y está vinculado a la propiedad 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' },
          ]
      ],
  }
}

Cuerpo

• El elemento tbody contiene las filas de datos de la tabla.
• Recorremos table.data usando x-for.
• Cada fila alberga celdas () llenas de datos de las propiedades del objeto correspondiente usando x-text.

  Y estos son los datos 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 },
  ]
  

  Pie de página

  • El elemento tfoot define el pie de página.
  • Al igual que el encabezado, utiliza x-for para iterar a través de los datos de table.customFooter.
  • Sin embargo, el pie de página puede mostrar valores dinámicos al hacer referencia a propiedades dentro de 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 } },
      ],
  ],
  

  Datos de ejemplo:

  Demostramos la funcionalidad de la tabla con datos de muestra que contienen nombres de ciudades y varias prendas de vestir.

  Notas adicionales:

  • El estilo se logra utilizando clases CSS definidas dentro de las propiedades col.class y data.class.
  • El enlace proporcionado ofrece una demostración funcional completa para una mayor exploración.

  enlaces externos

  1. Demostración: https://framework.fuwafuwa.web.id/examples/simple-table
  2. Explicación: https://framework.fuwafuwa.web.id/docs/simple-table.html#simple-table

  Conclusión:

  Este desglose muestra cómo Alpine JS nos permite crear tablas dinámicas con encabezados, cuerpos y pies de página flexibles. Este enfoque simplifica la creación y administración de tablas, especialmente para escenarios con datos que cambian con frecuencia.