desy-html

Table

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: classes
    type: string
    required: false
    description: Classes to add to the table head 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: 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: 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: |
  ## Las tablas deben:
    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.

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/_macro.table.njk" import componentTable %}

{{ componentTable({
  "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"
      }
    ]
  ]
}) }}

Tabla con caption visible

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/_macro.table.njk" import componentTable %}

{{ componentTable({
  "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"
      }
    ]
  ]
}) }}

Tabla con wrapper

Usa el parámetro wrapper para rodear la tabla con un <div> y poder añadir clases, normalmente para hacer scroll horizontal en la tabla en anchuras pequeñas.

Caption 1: Meses y pagos
Mes de pago Primer pago Segundo pago Rate for A Rate for B Rate for C Rate for D Rate for E Rate for F Rate for G Rate for H
Enero 85€ 95€ 85€ 95€ 85€ 95€ 85€ 95€ 85€ 95€
Febrero 75€ 55€ 85€ 95€ 85€ 95€ 85€ 95€ 85€ 95€
Marzo 165€ 125€ 85€ 95€ 85€ 95€ 85€ 95€ 85€ 95€
Mostrar códigodel ejemplo: Tabla con wrapper

Contenido

Nunjucks macro

{% from "components/table/_macro.table.njk" import componentTable %}

{{ componentTable({
  "caption": "Caption 1: Meses y pagos",
  "captionClasses": "sticky left-0 w-0 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"
    },
    {
      "text": "Rate for A",
      "classes": "text-right"
    },
    {
      "text": "Rate for B",
      "classes": "text-right"
    },
    {
      "text": "Rate for C",
      "classes": "text-right"
    },
    {
      "text": "Rate for D",
      "classes": "text-right"
    },
    {
      "text": "Rate for E",
      "classes": "text-right"
    },
    {
      "text": "Rate for F",
      "classes": "text-right"
    },
    {
      "text": "Rate for G",
      "classes": "text-right"
    },
    {
      "text": "Rate for H",
      "classes": "text-right"
    }
  ],
  "rows": [
    [
      {
        "text": "Enero"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "Febrero"
      },
      {
        "text": "75€",
        "classes": "text-right"
      },
      {
        "text": "55€",
        "classes": "text-right"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "Marzo"
      },
      {
        "text": "165€",
        "classes": "text-right"
      },
      {
        "text": "125€",
        "classes": "text-right"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      }
    ]
  ],
  "wrapper": {
    "classes": "relative overflow-x-auto pb-base"
  },
  "classes": "whitespace-nowrap"
}) }}

Table con columnas sticky

En este ejemplo la primera y última columna se mantienen fijas y el resto hacen scroll horizontal si la anchura es pequeña.

Caption 1: Meses y pagos
Mes de pago Primer pago Segundo pago Rate for A Rate for B Rate for C Rate for D Rate for E Rate for F Rate for G Rate for H
Enero 85€ 95€ 85€ 95€ 85€ 95€ 85€ 95€ 85€ 95€
Febrero 75€ 55€ 85€ 95€ 85€ 95€ 85€ 95€ 85€ 95€
Marzo 165€ 125€ 85€ 95€ 85€ 95€ 85€ 95€ 85€ 95€
Mostrar códigodel ejemplo: Table con columnas sticky

Contenido

Nunjucks macro

{% from "components/table/_macro.table.njk" import componentTable %}

{{ componentTable({
  "caption": "Caption 1: Meses y pagos",
  "captionClasses": "sticky top-0 left-0 w-0 mb-base font-bold text-left text-lg",
  "firstCellIsHeader": true,
  "head": [
    {
      "text": "Mes de pago",
      "classes": "sticky left-0 w-60 bg-white"
    },
    {
      "text": "Primer pago",
      "classes": "text-right"
    },
    {
      "text": "Segundo pago",
      "classes": "text-right"
    },
    {
      "text": "Rate for A",
      "classes": "text-right"
    },
    {
      "text": "Rate for B",
      "classes": "text-right"
    },
    {
      "text": "Rate for C",
      "classes": "text-right"
    },
    {
      "text": "Rate for D",
      "classes": "text-right"
    },
    {
      "text": "Rate for E",
      "classes": "text-right"
    },
    {
      "text": "Rate for F",
      "classes": "text-right"
    },
    {
      "text": "Rate for G",
      "classes": "text-right"
    },
    {
      "text": "Rate for H",
      "classes": "text-right sticky right-0 w-60 bg-white"
    }
  ],
  "rows": [
    [
      {
        "text": "Enero",
        "classes": "sticky left-0 w-60 bg-white"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right sticky right-0 w-60 bg-white"
      }
    ],
    [
      {
        "text": "Febrero",
        "classes": "sticky left-0 w-60 bg-white"
      },
      {
        "text": "75€",
        "classes": "text-right"
      },
      {
        "text": "55€",
        "classes": "text-right"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right sticky right-0 w-60 bg-white"
      }
    ],
    [
      {
        "text": "Marzo",
        "classes": "sticky left-0 w-60 bg-white"
      },
      {
        "text": "165€",
        "classes": "text-right"
      },
      {
        "text": "125€",
        "classes": "text-right"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right sticky right-0 w-60 bg-white"
      }
    ]
  ],
  "wrapper": {
    "classes": "overflow-x-auto pb-base"
  },
  "classes": "relative whitespace-nowrap"
}) }}

Classes

Mostrar códigodel ejemplo: Classes

Contenido

Nunjucks macro

{% from "components/table/_macro.table.njk" import componentTable %}

{{ componentTable({
  "classes": "bg-primary-light"
}) }}

Atributos

Mostrar códigodel ejemplo: Atributos

Contenido

Nunjucks macro

{% from "components/table/_macro.table.njk" import componentTable %}

{{ componentTable({
  "attributes": {
    "data-foo": "bar"
  }
}) }}

Html como texto

Foo <strong>bar</strong>
Foo <strong>bar</strong>
Mostrar códigodel ejemplo: Html como texto

Contenido

Nunjucks macro

{% from "components/table/_macro.table.njk" import componentTable %}

{{ componentTable({
  "head": [
    {
      "text": "Foo <strong>bar</strong>"
    }
  ],
  "rows": [
    [
      {
        "text": "Foo <strong>bar</strong>"
      }
    ]
  ]
}) }}

Html

Foo bar
Foo bar
Mostrar códigodel ejemplo: Html

Contenido

Nunjucks macro

{% from "components/table/_macro.table.njk" import componentTable %}

{{ componentTable({
  "head": [
    {
      "html": "Foo <strong>bar</strong>"
    }
  ],
  "rows": [
    [
      {
        "html": "Foo <strong>bar</strong>"
      }
    ]
  ]
}) }}

Head con clases

Foo
Mostrar códigodel ejemplo: Head con clases

Contenido

Nunjucks macro

{% from "components/table/_macro.table.njk" import componentTable %}

{{ componentTable({
  "head": [
    {
      "text": "Foo",
      "classes": "bg-primary-light"
    }
  ]
}) }}

Head con rowspan y colspan

Foo
Mostrar códigodel ejemplo: Head con rowspan y colspan

Contenido

Nunjucks macro

{% from "components/table/_macro.table.njk" import componentTable %}

{{ componentTable({
  "head": [
    {
      "text": "Foo",
      "rowspan": 1,
      "colspan": 1
    }
  ]
}) }}

Head con atributos

Mostrar códigodel ejemplo: Head con atributos

Contenido

Nunjucks macro

{% from "components/table/_macro.table.njk" import componentTable %}

{{ componentTable({
  "head": [
    {
      "attributes": {
        "data-fizz": "buzz"
      }
    }
  ]
}) }}

Con firstcellisheader true

Enero 85€ 95€
Febrero 75€ 55€
Marzo 165€ 125€
Mostrar códigodel ejemplo: Con firstcellisheader true

Contenido

Nunjucks macro

{% from "components/table/_macro.table.njk" import componentTable %}

{{ componentTable({
  "firstCellIsHeader": 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"
      }
    ]
  ]
}) }}

Firstcellisheader con clases

Foo
Mostrar códigodel ejemplo: Firstcellisheader con clases

Contenido

Nunjucks macro

{% from "components/table/_macro.table.njk" import componentTable %}

{{ componentTable({
  "firstCellIsHeader": true,
  "rows": [
    [
      {
        "text": "Foo",
        "classes": "bg-primary-light"
      }
    ]
  ]
}) }}

Firstcellisheader con html

Foo bar
Mostrar códigodel ejemplo: Firstcellisheader con html

Contenido

Nunjucks macro

{% from "components/table/_macro.table.njk" import componentTable %}

{{ componentTable({
  "firstCellIsHeader": true,
  "rows": [
    [
      {
        "html": "Foo <strong>bar</strong>"
      }
    ]
  ]
}) }}

Firstcellisheader con html como texto

Foo <strong>bar</strong>
Mostrar códigodel ejemplo: Firstcellisheader con html como texto

Contenido

Nunjucks macro

{% from "components/table/_macro.table.njk" import componentTable %}

{{ componentTable({
  "firstCellIsHeader": true,
  "rows": [
    [
      {
        "text": "Foo <strong>bar</strong>"
      }
    ]
  ]
}) }}

Firstcellisheader con rowspan y colspan

Foo
Mostrar códigodel ejemplo: Firstcellisheader con rowspan y colspan

Contenido

Nunjucks macro

{% from "components/table/_macro.table.njk" import componentTable %}

{{ componentTable({
  "firstCellIsHeader": true,
  "rows": [
    [
      {
        "text": "Foo",
        "rowspan": 1,
        "colspan": 1
      }
    ]
  ]
}) }}

Firstcellisheader con atributos

Foo
Mostrar códigodel ejemplo: Firstcellisheader con atributos

Contenido

Nunjucks macro

{% from "components/table/_macro.table.njk" import componentTable %}

{{ componentTable({
  "firstCellIsHeader": true,
  "rows": [
    [
      {
        "text": "Foo",
        "attributes": {
          "data-fizz": "buzz"
        }
      }
    ]
  ]
}) }}

Con items falsos

A 1
B 2
C 3
Mostrar códigodel ejemplo: Con items falsos

Contenido

Nunjucks macro

{% from "components/table/_macro.table.njk" import componentTable %}

{{ componentTable({
  "rows": [
    [
      {
        "text": "A"
      },
      {
        "text": 1
      }
    ],
    false,
    null,
    [
      {
        "text": "B"
      },
      {
        "text": 2
      }
    ],
    [
      {
        "text": "C"
      },
      {
        "text": 3
      }
    ]
  ]
}) }}

Filas con clases

Foo
Mostrar códigodel ejemplo: Filas con clases

Contenido

Nunjucks macro

{% from "components/table/_macro.table.njk" import componentTable %}

{{ componentTable({
  "rows": [
    [
      {
        "text": "Foo",
        "classes": "bg-primary-light"
      }
    ]
  ]
}) }}

Filas con rowspan y colspan

Foo
Mostrar códigodel ejemplo: Filas con rowspan y colspan

Contenido

Nunjucks macro

{% from "components/table/_macro.table.njk" import componentTable %}

{{ componentTable({
  "rows": [
    [
      {
        "text": "Foo",
        "rowspan": 1,
        "colspan": 1
      }
    ]
  ]
}) }}

Filas con atributos

Foo
Mostrar códigodel ejemplo: Filas con atributos

Contenido

Nunjucks macro

{% from "components/table/_macro.table.njk" import componentTable %}

{{ componentTable({
  "rows": [
    [
      {
        "text": "Foo",
        "attributes": {
          "data-fizz": "buzz"
        }
      }
    ]
  ]
}) }}