DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

Tabla

Datos

Componente para ordenar valores relacionados en filas y columnas.

Table-advanced

Tabla por defecto

Descripción visual

Tabla con encabezados en texto gris oscuro sobre fondo blanco, organizados en tres columnas. Filas de datos alternadas con fondo blanco, bordes horizontales grises claros de 1px separando cada fila. Datos numéricos con símbolo de euro alineados a la derecha, texto de meses alineado a la izquierda.

Caption de la tabla
Mes de pago Primer pago Segundo pago
Enero 85€ 95€
Febrero 75€ 55€
Marzo 165€ 125€
Mostrar códigodel ejemplo: Tabla por defecto

Contenido

Nunjucks macro
{% from "components/table-advanced/_macro.table-advanced.njk" import componentTableAdvanced %}
{{ componentTableAdvanced({
  "idPrefix": "table-default",
  "caption": "Caption de la tabla",
  "captionClasses": "sr-only mb-base font-bold text-left text-lg",
  "head": [
    {
      "text": "Mes de pago"
    },
    {
      "text": "Primer pago",
      "classes": "text-right"
    },
    {
      "text": "Segundo pago",
      "classes": "text-right"
    }
  ],
  "rows": [
    [
      {
        "text": "Enero"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "Febrero"
      },
      {
        "text": "75€",
        "classes": "text-right"
      },
      {
        "text": "55€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "Marzo"
      },
      {
        "text": "165€",
        "classes": "text-right"
      },
      {
        "text": "125€",
        "classes": "text-right"
      }
    ]
  ],
  "classes": "min-w-full"
}) }}

Tabla con tfoot

Descripción visual

Tabla con encabezados en texto gris oscuro sobre fondo blanco, estructura de tres columnas con bordes horizontales grises claros de 1px. Filas de datos con fondo blanco mostrando valores monetarios en euros alineados a la derecha. Fila final de totales con fondo blanco, texto en peso regular mostrando suma total de las columnas numéricas.

Caption de la tabla
Mes de pago Primer pago Segundo pago
Enero 85€ 95€
Febrero 75€ 55€
Marzo 165€ 125€
Suma 325€ 275€
Mostrar códigodel ejemplo: Tabla con tfoot

Contenido

Nunjucks macro
{% from "components/table-advanced/_macro.table-advanced.njk" import componentTableAdvanced %}
{{ componentTableAdvanced({
  "idPrefix": "table-tfoot",
  "caption": "Caption de la tabla",
  "captionClasses": "sr-only mb-base font-bold text-left text-lg",
  "head": [
    {
      "text": "Mes de pago"
    },
    {
      "text": "Primer pago",
      "classes": "text-right"
    },
    {
      "text": "Segundo pago",
      "classes": "text-right"
    }
  ],
  "rows": [
    [
      {
        "text": "Enero"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "Febrero"
      },
      {
        "text": "75€",
        "classes": "text-right"
      },
      {
        "text": "55€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "Marzo"
      },
      {
        "text": "165€",
        "classes": "text-right"
      },
      {
        "text": "125€",
        "classes": "text-right"
      }
    ]
  ],
  "foot": [
    [
      {
        "text": "Suma",
        "classes": "uppercase"
      },
      {
        "text": "325€",
        "classes": "text-right"
      },
      {
        "text": "275€",
        "classes": "text-right"
      }
    ]
  ],
  "classes": "min-w-full"
}) }}

Tabla con caption visible

También con 'firstCellIsHeader': true

Descripción visual

Tabla precedida por título en texto negro en peso negrita sobre fondo blanco. Encabezados de columna en texto gris oscuro, estructura de tres columnas con bordes horizontales grises claros de 1px. Filas de datos con fondo blanco, valores monetarios en euros alineados a la derecha, texto de meses alineado a la izquierda.

Caption 1: Meses y pagos
Mes de pago Primer pago Segundo pago
Enero 85€ 95€
Febrero 75€ 55€
Marzo 165€ 125€
Mostrar códigodel ejemplo: Tabla con caption visible

Contenido

Nunjucks macro
{% from "components/table-advanced/_macro.table-advanced.njk" import componentTableAdvanced %}
{{ componentTableAdvanced({
  "idPrefix": "table-with-caption",
  "caption": "Caption 1: Meses y pagos",
  "captionClasses": "mb-base font-bold text-left text-lg",
  "firstCellIsHeader": true,
  "head": [
    {
      "text": "Mes de pago"
    },
    {
      "text": "Primer pago",
      "classes": "text-right"
    },
    {
      "text": "Segundo pago",
      "classes": "text-right"
    }
  ],
  "rows": [
    [
      {
        "text": "Enero"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "Febrero"
      },
      {
        "text": "75€",
        "classes": "text-right"
      },
      {
        "text": "55€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "Marzo"
      },
      {
        "text": "165€",
        "classes": "text-right"
      },
      {
        "text": "125€",
        "classes": "text-right"
      }
    ]
  ],
  "classes": "min-w-full"
}) }}

Tabla con orderby en columnas

Con 'orderBy': none, asc, desc

Descripción visual

Tabla con tres columnas de datos numéricos en euros, encabezados de columna alineados a derecha. Filas de datos con fondo blanco alternado, valores monetarios en negro, fila de totales en negrita al final. Bordes grises claros separando celdas, diseño compacto y estructurado.

Mes de pago Pulsa para ordenar por esta columna Primer pago Pulsa para ordenar por esta columna Segundo pago Pulsa para ordenar por esta columna
Enero 85€ 95€
Febrero 75€ 55€
Marzo 165€ 125€
Suma 325€ 275€
Mostrar códigodel ejemplo: Tabla con orderby en columnas

Contenido

Nunjucks macro
{% from "components/table-advanced/_macro.table-advanced.njk" import componentTableAdvanced %}
{{ componentTableAdvanced({
  "idPrefix": "table-with-orderby",
  "head": [
    {
      "text": "Mes de pago",
      "orderBy": "none"
    },
    {
      "text": "Primer pago",
      "orderBy": "none",
      "classes": "text-right"
    },
    {
      "text": "Segundo pago",
      "orderBy": "none",
      "classes": "text-right"
    }
  ],
  "rows": [
    [
      {
        "text": "Enero"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "Febrero"
      },
      {
        "text": "75€",
        "classes": "text-right"
      },
      {
        "text": "55€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "Marzo"
      },
      {
        "text": "165€",
        "classes": "text-right"
      },
      {
        "text": "125€",
        "classes": "text-right"
      }
    ]
  ],
  "foot": [
    [
      {
        "text": "Suma",
        "classes": "uppercase"
      },
      {
        "text": "325€",
        "classes": "text-right"
      },
      {
        "text": "275€",
        "classes": "text-right"
      }
    ]
  ],
  "classes": "min-w-full"
}) }}

Tabla con head y filtros

Con 'hasFilter': true y clases text-right en columnas numéricas.

Descripción visual

Tabla con tres columnas que incluyen campos de búsqueda en la fila superior con icono de lupa. Encabezados de columna en texto negro, inputs de filtro con borde gris y placeholder de texto claro. Datos monetarios en euros alineados a derecha en filas con fondo blanco, bordes grises definiendo estructura celular.

Mes de pago Primer pago Segundo pago
Enero 85€ 95€
Febrero 75€ 55€
Marzo 165€ 125€
Mostrar códigodel ejemplo: Tabla con head y filtros

Contenido

Nunjucks macro
{% from "components/table-advanced/_macro.table-advanced.njk" import componentTableAdvanced %}
{{ componentTableAdvanced({
  "idPrefix": "table-with-head-and-filters",
  "head": [
    {
      "text": "Mes de pago",
      "hasFilter": true
    },
    {
      "text": "Primer pago",
      "classes": "text-right",
      "hasFilter": true
    },
    {
      "text": "Segundo pago",
      "classes": "text-right",
      "hasFilter": true
    }
  ],
  "rows": [
    [
      {
        "text": "Enero"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "Febrero"
      },
      {
        "text": "75€",
        "classes": "text-right"
      },
      {
        "text": "55€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "Marzo"
      },
      {
        "text": "165€",
        "classes": "text-right"
      },
      {
        "text": "125€",
        "classes": "text-right"
      }
    ]
  ],
  "classes": "min-w-full"
}) }}

Tabla con head y filtros con texto personalizado

Con 'hasFilter': true, con parámetro 'filterText' personalizado y clases text-right en columnas numéricas.

Descripción visual

Tabla con tres columnas donde la primera contiene dropdown con flecha desplegable, las dos restantes tienen campos de búsqueda con icono de lupa. Encabezados en negro, inputs con borde gris de 1px y placeholder visible. Filas de datos con valores monetarios en euros alineados a derecha, fondo blanco y bordes grises separando contenido.

Mes de pago Primer pago Segundo pago
Enero 85€ 95€
Febrero 75€ 55€
Marzo 165€ 125€
Mostrar códigodel ejemplo: Tabla con head y filtros con texto personalizado

Contenido

Nunjucks macro
{% from "components/table-advanced/_macro.table-advanced.njk" import componentTableAdvanced %}
{{ componentTableAdvanced({
  "idPrefix": "table-with-head-and-filters-personalized",
  "head": [
    {
      "text": "Mes de pago",
      "select": {
        "items": [
          {
            "value": "",
            "text": "Selecciona mes...",
            "disabled": true,
            "selected": true,
            "hidden": true
          },
          {
            "value": 1,
            "text": "Enero"
          },
          {
            "value": 2,
            "text": "Febrero"
          },
          {
            "value": 3,
            "text": "Marzo"
          }
        ]
      },
      "filterText": "Filtrar por mes"
    },
    {
      "text": "Primer pago",
      "classes": "text-right",
      "hasFilter": true,
      "filterText": "Filtrar por pago en esta columna"
    },
    {
      "text": "Segundo pago",
      "classes": "text-right",
      "hasFilter": true,
      "filterText": "Filtrar por pago en esta columna"
    }
  ],
  "rows": [
    [
      {
        "text": "Enero"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "Febrero"
      },
      {
        "text": "75€",
        "classes": "text-right"
      },
      {
        "text": "55€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "Marzo"
      },
      {
        "text": "165€",
        "classes": "text-right"
      },
      {
        "text": "125€",
        "classes": "text-right"
      }
    ]
  ],
  "classes": "min-w-full"
}) }}

Tabla con head y selectores

Selectores y clases de text-right en columnas numéricas.

Descripción visual

Tabla con encabezados de columna en texto negro regular, filas con datos numéricos en gris oscuro (con símbolo €), y controles de filtrado mediante selectores dropdown con fondo blanco y borde gris. Tres columnas de datos alineadas: primera con labels de meses, segunda y tercera con valores monetarios. Bordes horizontales gris claro separando las filas, selectores dropdown posicionados en la fila superior para filtrado.

Mes de pago Primer pago Segundo pago
Enero 85€ 95€
Febrero 75€ 55€
Marzo 165€ 125€
Mostrar códigodel ejemplo: Tabla con head y selectores

Contenido

Nunjucks macro
{% from "components/table-advanced/_macro.table-advanced.njk" import componentTableAdvanced %}
{{ componentTableAdvanced({
  "idPrefix": "table-with-head-and-selects",
  "head": [
    {
      "text": "Mes de pago",
      "select": {
        "items": [
          {
            "value": "",
            "text": "Filtrar por...",
            "disabled": true,
            "selected": true,
            "hidden": true
          },
          {
            "value": 1,
            "text": "Opción 1"
          },
          {
            "value": 2,
            "text": "Opción 2"
          },
          {
            "value": 3,
            "text": "Opción 3"
          }
        ]
      }
    },
    {
      "text": "Primer pago",
      "classes": "text-right",
      "select": {
        "items": [
          {
            "value": "",
            "text": "Filtrar por...",
            "disabled": true,
            "selected": true,
            "hidden": true
          },
          {
            "value": 1,
            "text": "Opción 1"
          },
          {
            "value": 2,
            "text": "Opción 2"
          },
          {
            "value": 3,
            "text": "Opción 3"
          }
        ]
      }
    },
    {
      "text": "Segundo pago",
      "classes": "text-right",
      "select": {
        "items": [
          {
            "value": "",
            "text": "Filtrar por...",
            "disabled": true,
            "selected": true,
            "hidden": true
          },
          {
            "value": 1,
            "text": "Opción 1"
          },
          {
            "value": 2,
            "text": "Opción 2"
          },
          {
            "value": 3,
            "text": "Opción 3"
          }
        ]
      }
    }
  ],
  "rows": [
    [
      {
        "text": "Enero"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "Febrero"
      },
      {
        "text": "75€",
        "classes": "text-right"
      },
      {
        "text": "55€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "Marzo"
      },
      {
        "text": "165€",
        "classes": "text-right"
      },
      {
        "text": "125€",
        "classes": "text-right"
      }
    ]
  ],
  "classes": "min-w-full"
}) }}

Tabla con checkboxes

Descripción visual

Tabla con checkboxes cuadrados sin marcar en la columna izquierda, encabezado de columnas en texto gris oscuro, y datos organizados en tres columnas. Filas con fondo blanco alternado, bordes horizontales gris tenue, y valores monetarios con símbolo € alineados a la derecha. Checkboxes de selección con borde gris oscuro, datos de meses en texto negro regular en la segunda columna.

Seleccionar fila Mes de pago Primer pago Segundo pago
Enero 85€ 95€
Febrero 75€ 55€
Marzo 165€ 125€
Mostrar códigodel ejemplo: Tabla con checkboxes

Contenido

Nunjucks macro
{% from "components/table-advanced/_macro.table-advanced.njk" import componentTableAdvanced %}
{{ componentTableAdvanced({
  "idPrefix": "table-with-checkboxes",
  "hasCheckboxes": true,
  "head": [
    {
      "text": "Mes de pago"
    },
    {
      "text": "Primer pago",
      "classes": "text-right"
    },
    {
      "text": "Segundo pago",
      "classes": "text-right"
    }
  ],
  "rows": [
    [
      {
        "text": "Enero"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "Febrero"
      },
      {
        "text": "75€",
        "classes": "text-right"
      },
      {
        "text": "55€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "Marzo"
      },
      {
        "text": "165€",
        "classes": "text-right"
      },
      {
        "text": "125€",
        "classes": "text-right"
      }
    ]
  ],
  "classes": "min-w-full"
}) }}

Tabla con todo

Con orderBy, hasCheckboxes, hasFilter, selectores y firstCellIsHeader

Descripción visual

Tabla con columna inicial de checkboxes sin marcar, seguida de columna de identificadores alfabéticos, columna con campo de búsqueda con ícono de lupa, y dos columnas de datos con selectores dropdown. Encabezados de columna con íconos de ordenamiento (flechas), bordes gris claro, fila inferior con label de totales en negrita y valores totales. Campos de filtro con fondo blanco, bordes gris, y controles dropdown en columnas de valores monetarios.

Seleccionar fila Identificador Mes de pago Pulsa para ordenar por esta columna Primer pago Pulsa para ordenar por esta columna Segundo pago Pulsa para ordenar por esta columna
A Enero 85€ 95€
B Febrero 75€ 55€
C Marzo 165€ 125€
Suma 325€ 275€
Mostrar códigodel ejemplo: Tabla con todo

Contenido

Nunjucks macro
{% from "components/table-advanced/_macro.table-advanced.njk" import componentTableAdvanced %}
{{ componentTableAdvanced({
  "idPrefix": "table-with-all",
  "hasCheckboxes": true,
  "firstCellIsHeader": true,
  "head": [
    {
      "text": "Identificador"
    },
    {
      "text": "Mes de pago",
      "orderBy": "none",
      "hasFilter": true
    },
    {
      "text": "Primer pago",
      "orderBy": "none",
      "classes": "text-right",
      "select": {
        "items": [
          {
            "value": "",
            "text": "Filtrar por...",
            "disabled": true,
            "selected": true,
            "hidden": true
          },
          {
            "value": 1,
            "text": "Opción 1"
          },
          {
            "value": 2,
            "text": "Opción 2"
          },
          {
            "value": 3,
            "text": "Opción 3"
          }
        ]
      }
    },
    {
      "text": "Segundo pago",
      "orderBy": "none",
      "classes": "text-right",
      "hasFilter": true,
      "select": {
        "items": [
          {
            "value": "",
            "text": "Filtrar por...",
            "disabled": true,
            "selected": true,
            "hidden": true
          },
          {
            "value": 1,
            "text": "Opción 1"
          },
          {
            "value": 2,
            "text": "Opción 2"
          },
          {
            "value": 3,
            "text": "Opción 3"
          }
        ]
      }
    }
  ],
  "rows": [
    [
      {
        "text": "A"
      },
      {
        "text": "Enero"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "B"
      },
      {
        "text": "Febrero"
      },
      {
        "text": "75€",
        "classes": "text-right"
      },
      {
        "text": "55€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "C"
      },
      {
        "text": "Marzo"
      },
      {
        "text": "165€",
        "classes": "text-right"
      },
      {
        "text": "125€",
        "classes": "text-right"
      }
    ]
  ],
  "foot": [
    [
      {
        "text": "Suma",
        "classes": "uppercase"
      },
      {
        "text": ""
      },
      {
        "text": "325€",
        "classes": "text-right"
      },
      {
        "text": "275€",
        "classes": "text-right"
      }
    ]
  ],
  "classes": "min-w-full"
}) }}