DESY

Sistema de Diseño del Gobierno de Aragón.

Índice de apartados de esta página

Tabla

Componente para ordenar valores relacionados en filas y columnas.

Table-advanced

Mostrar parámetros

Parámetros del componente

              params:
- name: rows
  type: array
  required: true
  description: Array of table rows and cells.
  params:
  - name: text
    type: string
    required: true
    description: If `html` is set, this is not required. Text for cells in table rows. If `html` is provided, the `text` argument will be ignored.
  - name: html
    type: string
    required: true
    description: If `text` is set, this is not required. HTML for cells in table rows. If `html` is provided, the `text` argument will be ignore
  - name: classes
    type: string
    required: false
    description: Classes to add to the table row cell.
  - name: colspan
    type: integer
    required: false
    description: Specify how many columns a cell extends.
  - name: rowspan
    type: integer
    required: false
    description: Specify how many rows a cell extends.
  - name: attributes
    type: object
    required: false
    description: HTML attributes (for example data attributes) to add to the table cell.
- name: head
  type: array
  required: false
  description: Array of table head cells.
  params:
  - name: text
    type: string
    required: false
    description: If `html` is set, this is not required. Text for table head cells. If `html` is provided, the `text` argument will be ignored.
  - name: html
    type: string
    required: false
    description: If `text` is set, this is not required. HTML for table head cells. If `html` is provided, the `text` argument will be ignore
  - name: colspan
    type: integer
    required: false
    description: Specify how many columns a cell extends.
  - name: rowspan
    type: integer
    required: false
    description: Specify how many rows a cell extends.
  - name: orderBy
    type: string
    required: false
    description: Possible values `none`, `asc`, `desc`.
  - name: hasFilter
    type: boolean
    required: false
    description: If `true`, shows a filter input in head cell.
  - name: filterClasses
    type: string
    required: false
    description: Classes to add to the table head cell input.
  - name: select
    type: object
    required: false
    description: Options for a select component to filter results in the column.
    isComponent: true
  - name: classes
    type: string
    required: false
    description: Classes to add to the table head cell.
  - name: attributes
    type: object
    required: false
    description: HTML attributes (for example data attributes) to add to the table cell.
- name: foot
  type: array
  required: false
  description: Array of table tfoot cells.
  params:
  - name: text
    type: string
    required: false
    description: If `html` is set, this is not required. Text for table tfoot cells. If `html` is provided, the `text` argument will be ignored.
  - name: html
    type: string
    required: false
    description: If `text` is set, this is not required. HTML for table tfoot cells. If `html` is provided, the `text` argument will be ignore
  - name: colspan
    type: integer
    required: false
    description: Specify how many columns a cell extends.
  - name: rowspan
    type: integer
    required: false
    description: Specify how many rows a cell extends.
  - name: classes
    type: string
    required: false
    description: Classes to add to the table tfoot cell.
  - name: attributes
    type: object
    required: false
    description: HTML attributes (for example data attributes) to add to the table cell.
- name: caption
  type: string
  required: false
  description: Caption text
- name: captionClasses
  type: string
  required: false
  description: Classes for caption text size. Classes should correspond to the available typography heading classes.
- name: firstCellIsHeader
  type: boolean
  required: false
  description: If set to true, first cell in table row will be a TH instead of a TD.
- name: hasCheckboxes
  type: boolean
  required: false
  description: If `true` the first column has checkboxes for every row.
- name: checkboxesClasses
  type: string
  required: false
  description: Classes for the cell that contain the checkboxes. This allows position the checkboxes inside the table.
- name: idPrefix
  type: string
  required: false
  description: String to prefix id for each checkbox item if no id is specified on each item. If not passed, fall back to using a generic one instead.
- name: wrapper
  type: object
  required: false
  description: Options for a wrapper div outside the table
  params:
  - name: classes
    type: string
    required: false
    description: Classes to add to the wrapper (e.g. to show an horizontal scrollbar it there are many columns or in mobile)
- name: classes
  type: string
  required: false
  description: Classes to add to the table container.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the table container.

accessibilityCriteria: |
  ## Tables must:
    1. Debe tener al menos una celda de encabezado (TH) en las filas o columnas exteriores.
    2. Si la tabla tiene más de un nivel de encabezado (si hay elementos th en dos filas o en dos columnas) las celdas de datos y de encabezado deben estar asociadas con los atributos id (en los th) /headers (en los td).
    3. El título de la tabla debe estar marcado como <caption>
    4. La primera fila de la tabla no puede tener todas las celdas unidas, o se interpreta que se está simulando un caption.
    5. Después de un encabezado (h1, h2…) no puede ir directamente una tabla, o se entiende que se está usando el encabezado para lo que debería ser el <caption>
    6. La tabla debe tener una descripción especialmente si la tabla es grande o compleja, tiene varios niveles de encabezados, tiene totales o enlaces, etc. La descripción intenta suplir la primera impresión que tienen de la tabla las personas que pueden verla, por ejemplo, vemos que en la última columna hay enlaces o en la última fila hay totales. Como en HTML 5 ya no está admitido el atributo summary en las tablas, lo que se hace es poner la descripción en un párrafo antes de la tabla y asociarlo a la tabla con aria-describedby (así se evita también el error 5). El caption y la descripción no deben ser iguales.
    7. El validador del OAW dará error si hay tablas de una única columna y 3 o más filas con texto menor de 150 caracteres, pues considerará que se está simulando una lista.
    8. Las tablas complejas como esta deben tener una descripción. La descripción se incluye en un texto visible antes de la tabla (aunque puede estar en un <details>) y se asocia a la tabla mediante el atributo aria-describedby de la tabla.

Tabla por defecto

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

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

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

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.

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 selectores

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

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

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

Seleccionar fila Número de fila 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
Primera fila Enero 85€ 95€
Segunda fila Febrero 75€ 55€
Tercera fila 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": "Número de fila"
    },
    {
      "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": "Primera fila"
      },
      {
        "text": "Enero"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "Segunda fila"
      },
      {
        "text": "Febrero"
      },
      {
        "text": "75€",
        "classes": "text-right"
      },
      {
        "text": "55€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "Tercera fila"
      },
      {
        "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"
}) }}

Tabla con columnas sticky

Con orderBy, hasCheckboxes, hasFilter y firstCellIsHeader

Seleccionar fila Número de fila 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 Rate for column A Pulsa para ordenar por esta columna Rate for column B Pulsa para ordenar por esta columna Rate for column C Pulsa para ordenar por esta columna Rate for column D Pulsa para ordenar por esta columna Rate for column E Pulsa para ordenar por esta columna
First row Enero 85€ 95€ 85€ 95€ 95€ 95€ 95€
Second row Febrero 75€ 55€ 85€ 95€ 95€ 95€ 95€
Third row Marzo 165€ 125€ 85€ 95€ 95€ 95€ 95€
Mostrar códigodel ejemplo: Tabla con columnas sticky

Contenido

Nunjucks macro

{% from "components/table-advanced/_macro.table-advanced.njk" import componentTableAdvanced %}

{{ componentTableAdvanced({
  "idPrefix": "table-with-sticky-columns",
  "hasCheckboxes": true,
  "checkboxesClasses": "sticky left-0 z-10 w-0 bg-white",
  "firstCellIsHeader": true,
  "head": [
    {
      "text": "Número de fila",
      "classes": "sticky left-16 z-10 w-60 bg-white"
    },
    {
      "text": "Mes de pago",
      "orderBy": "none",
      "hasFilter": true
    },
    {
      "text": "Primer pago",
      "orderBy": "none",
      "classes": "text-right",
      "hasFilter": true
    },
    {
      "text": "Segundo pago",
      "orderBy": "none",
      "classes": "text-right",
      "hasFilter": true
    },
    {
      "text": "Rate for column A",
      "orderBy": "none",
      "classes": "text-right",
      "hasFilter": true
    },
    {
      "text": "Rate for column B",
      "orderBy": "none",
      "classes": "text-right",
      "hasFilter": true
    },
    {
      "text": "Rate for column C",
      "orderBy": "none",
      "classes": "text-right",
      "hasFilter": true
    },
    {
      "text": "Rate for column D",
      "orderBy": "none",
      "classes": "text-right",
      "hasFilter": true
    },
    {
      "text": "Rate for column E",
      "orderBy": "none",
      "classes": "text-right sticky right-0 z-10 w-60 bg-white",
      "hasFilter": true
    }
  ],
  "rows": [
    [
      {
        "text": "First row",
        "classes": "sticky left-16 z-10 w-60 bg-white"
      },
      {
        "text": "Enero"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right sticky z-10 right-0 w-60 bg-white"
      }
    ],
    [
      {
        "text": "Second row",
        "classes": "sticky left-16 z-10 w-60 bg-white"
      },
      {
        "text": "Febrero"
      },
      {
        "text": "75€",
        "classes": "text-right"
      },
      {
        "text": "55€",
        "classes": "text-right"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right sticky right-0 z-10 w-60 bg-white"
      }
    ],
    [
      {
        "text": "Third row",
        "classes": "sticky left-16 z-10 w-60 bg-white"
      },
      {
        "text": "Marzo"
      },
      {
        "text": "165€",
        "classes": "text-right"
      },
      {
        "text": "125€",
        "classes": "text-right"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right sticky z-10 right-0 w-60 bg-white"
      }
    ]
  ],
  "wrapper": {
    "classes": "overflow-x-auto pb-base"
  },
  "classes": "relative whitespace-nowrap min-w-full"
}) }}