desy-html

Table

Parámetros Nunjucks del componente: "Table". Versión: 12.1.0

Los parámetros de Nunjucks para este componente están dentro de la siguiente etiqueta code en formato yaml.

        {"val":"params:\r\n- name: rows\r\n  type: array\r\n  required: true\r\n  description: Array of table rows and cells.\r\n  params:\r\n  - name: text\r\n    type: string\r\n    required: true\r\n    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.\r\n  - name: html\r\n    type: string\r\n    required: true\r\n    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\r\n  - name: classes\r\n    type: string\r\n    required: false\r\n    description: Classes to add to the table row cell.\r\n  - name: colspan\r\n    type: integer\r\n    required: false\r\n    description: Specify how many columns a cell extends.\r\n  - name: rowspan\r\n    type: integer\r\n    required: false\r\n    description: Specify how many rows a cell extends.\r\n  - name: attributes\r\n    type: object\r\n    required: false\r\n    description: HTML attributes (for example data attributes) to add to the table cell.\r\n- name: head\r\n  type: array\r\n  required: false\r\n  description: Array of table head cells.\r\n  params:\r\n  - name: text\r\n    type: string\r\n    required: false\r\n    description: If `html` is set, this is not required. Text for table head cells. If `html` is provided, the `text` argument will be ignored.\r\n  - name: html\r\n    type: string\r\n    required: false\r\n    description: If `text` is set, this is not required. HTML for table head cells. If `html` is provided, the `text` argument will be ignore\r\n  - name: classes\r\n    type: string\r\n    required: false\r\n    description: Classes to add to the table head cell.\r\n  - name: colspan\r\n    type: integer\r\n    required: false\r\n    description: Specify how many columns a cell extends.\r\n  - name: rowspan\r\n    type: integer\r\n    required: false\r\n    description: Specify how many rows a cell extends.\r\n  - name: attributes\r\n    type: object\r\n    required: false\r\n    description: HTML attributes (for example data attributes) to add to the table cell.\r\n- name: foot\r\n  type: array\r\n  required: false\r\n  description: Array of table tfoot cells.\r\n  params:\r\n  - name: text\r\n    type: string\r\n    required: false\r\n    description: If `html` is set, this is not required. Text for table tfoot cells. If `html` is provided, the `text` argument will be ignored.\r\n  - name: html\r\n    type: string\r\n    required: false\r\n    description: If `text` is set, this is not required. HTML for table tfoot cells. If `html` is provided, the `text` argument will be ignore\r\n  - name: classes\r\n    type: string\r\n    required: false\r\n    description: Classes to add to the table tfoot cell.\r\n  - name: colspan\r\n    type: integer\r\n    required: false\r\n    description: Specify how many columns a cell extends.\r\n  - name: rowspan\r\n    type: integer\r\n    required: false\r\n    description: Specify how many rows a cell extends.\r\n  - name: attributes\r\n    type: object\r\n    required: false\r\n    description: HTML attributes (for example data attributes) to add to the table cell.\r\n- name: caption\r\n  type: string\r\n  required: false\r\n  description: Caption text\r\n- name: captionClasses\r\n  type: string\r\n  required: false\r\n  description: Classes for caption text size. Classes should correspond to the available typography heading classes.\r\n- name: firstCellIsHeader\r\n  type: boolean\r\n  required: false\r\n  description: If set to true, first cell in table row will be a TH instead of a TD.\r\n- name: wrapper\r\n  type: object\r\n  required: false\r\n  description: Options for a wrapper div outside the table\r\n  params:\r\n  - name: classes\r\n    type: string\r\n    required: false\r\n    description: Classes to add to the wrapper (e.g. to show an horizontal scrollbar it there are many columns or in mobile)\r\n  - name: attributes\r\n    type: object\r\n    required: false\r\n    description: HTML attributes to add to the wrapper div. For accessibility it needs tabindex=0, role=section and aria-label or aria-labelledby.\r\n- name: classes\r\n  type: string\r\n  required: false\r\n  description: Classes to add to the table container.\r\n- name: attributes\r\n  type: object\r\n  required: false\r\n  description: HTML attributes (for example data attributes) to add to the table container.\r\n\r\naccessibilityCriteria: |\r\n  ## Las tablas deben:\r\n    1. Debe tener al menos una celda de encabezado (TH) en las filas o columnas exteriores.\r\n    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).\r\n    3. El título de la tabla debe estar marcado como <caption>\r\n    4. La primera fila de la tabla no puede tener todas las celdas unidas, o se interpreta que se está simulando un caption.\r\n    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>\r\n    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.\r\n    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.","length":5711}

Tabla por defecto

Ejemplo: "Tabla por defecto", de código HTML, para maquetar el componente: "Table", versión: 12.1.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- table -->
<table class="c-table">
  <caption class="sr-only mb-base font-bold text-left text-lg">Caption de la tabla</caption>
  <thead class="sr-only lg:not-sr-only">
    <tr class="border-t border-b border-neutral-base">
      <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark">Mes de pago</th>
      <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:text-right">Primer pago</th>
      <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:text-right">Segundo pago</th>
    </tr>
  </thead>
  <tbody>
    <tr class="block lg:table-row -mb-px lg:mb-0 text-left border-t border-b border-neutral-base">
      <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm" data-label="Mes de pago">Enero</td>
      <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Primer pago">85€</td>
      <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Segundo pago">95€</td>
    </tr>
    <tr class="block lg:table-row -mb-px lg:mb-0 text-left border-t border-b border-neutral-base">
      <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm" data-label="Mes de pago">Febrero</td>
      <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Primer pago">75€</td>
      <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Segundo pago">55€</td>
    </tr>
    <tr class="block lg:table-row -mb-px lg:mb-0 text-left border-t border-b border-neutral-base">
      <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm" data-label="Mes de pago">Marzo</td>
      <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Primer pago">165€</td>
      <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Segundo pago">125€</td>
    </tr>
  </tbody>
</table>
<!-- /table -->

Ejemplo: "Tabla por defecto", de código Nunjucks, para maquetar el componente: "Table", versión: 12.1.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% 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": "lg:text-right"
    },
    {
      "text": "Segundo pago",
      "classes": "lg:text-right"
    }
  ],
  "rows": [
    [
      {
        "text": "Enero"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      }
    ],
    [
      {
        "text": "Febrero"
      },
      {
        "text": "75€",
        "classes": "lg:text-right"
      },
      {
        "text": "55€",
        "classes": "lg:text-right"
      }
    ],
    [
      {
        "text": "Marzo"
      },
      {
        "text": "165€",
        "classes": "lg:text-right"
      },
      {
        "text": "125€",
        "classes": "lg:text-right"
      }
    ]
  ]
}) }}
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": "lg:text-right"
    },
    {
      "text": "Segundo pago",
      "classes": "lg:text-right"
    }
  ],
  "rows": [
    [
      {
        "text": "Enero"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      }
    ],
    [
      {
        "text": "Febrero"
      },
      {
        "text": "75€",
        "classes": "lg:text-right"
      },
      {
        "text": "55€",
        "classes": "lg:text-right"
      }
    ],
    [
      {
        "text": "Marzo"
      },
      {
        "text": "165€",
        "classes": "lg:text-right"
      },
      {
        "text": "125€",
        "classes": "lg:text-right"
      }
    ]
  ]
}) }}

Tabla con tfoot

Ejemplo: "Tabla con tfoot", de código HTML, para maquetar el componente: "Table", versión: 12.1.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- table -->
<table class="c-table">
  <caption class="sr-only mb-base font-bold text-left text-lg">Caption de la tabla</caption>
  <thead class="sr-only lg:not-sr-only">
    <tr class="border-t border-b border-neutral-base">
      <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark">Mes de pago</th>
      <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:text-right">Primer pago</th>
      <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:text-right">Segundo pago</th>
    </tr>
  </thead>
  <tbody>
    <tr class="block lg:table-row -mb-px lg:mb-0 text-left border-t border-b border-neutral-base">
      <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm" data-label="Mes de pago">Enero</td>
      <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Primer pago">85€</td>
      <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Segundo pago">95€</td>
    </tr>
    <tr class="block lg:table-row -mb-px lg:mb-0 text-left border-t border-b border-neutral-base">
      <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm" data-label="Mes de pago">Febrero</td>
      <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Primer pago">75€</td>
      <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Segundo pago">55€</td>
    </tr>
    <tr class="block lg:table-row -mb-px lg:mb-0 text-left border-t border-b border-neutral-base">
      <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm" data-label="Mes de pago">Marzo</td>
      <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Primer pago">165€</td>
      <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Segundo pago">125€</td>
    </tr>
  </tbody>
  <tfoot>
    <tr class="border-t-2 border-b border-neutral-base">
      <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm uppercase" data-label="Mes de pago">Suma</td>
      <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Primer pago">325€</td>
      <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Segundo pago">275€</td>
    </tr>
  </tfoot>
</table>
<!-- /table -->

Ejemplo: "Tabla con tfoot", de código Nunjucks, para maquetar el componente: "Table", versión: 12.1.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% 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": "lg:text-right"
    },
    {
      "text": "Segundo pago",
      "classes": "lg:text-right"
    }
  ],
  "rows": [
    [
      {
        "text": "Enero"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      }
    ],
    [
      {
        "text": "Febrero"
      },
      {
        "text": "75€",
        "classes": "lg:text-right"
      },
      {
        "text": "55€",
        "classes": "lg:text-right"
      }
    ],
    [
      {
        "text": "Marzo"
      },
      {
        "text": "165€",
        "classes": "lg:text-right"
      },
      {
        "text": "125€",
        "classes": "lg:text-right"
      }
    ]
  ],
  "foot": [
    {
      "text": "Suma",
      "classes": "uppercase"
    },
    {
      "text": "325€",
      "classes": "lg:text-right"
    },
    {
      "text": "275€",
      "classes": "lg:text-right"
    }
  ]
}) }}
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/_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": "lg:text-right"
    },
    {
      "text": "Segundo pago",
      "classes": "lg:text-right"
    }
  ],
  "rows": [
    [
      {
        "text": "Enero"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      }
    ],
    [
      {
        "text": "Febrero"
      },
      {
        "text": "75€",
        "classes": "lg:text-right"
      },
      {
        "text": "55€",
        "classes": "lg:text-right"
      }
    ],
    [
      {
        "text": "Marzo"
      },
      {
        "text": "165€",
        "classes": "lg:text-right"
      },
      {
        "text": "125€",
        "classes": "lg:text-right"
      }
    ]
  ],
  "foot": [
    {
      "text": "Suma",
      "classes": "uppercase"
    },
    {
      "text": "325€",
      "classes": "lg:text-right"
    },
    {
      "text": "275€",
      "classes": "lg:text-right"
    }
  ]
}) }}

Tabla con caption visible

Este ejemplo con caption visible se considera tabla compleja a nivel de accesibilidad. Así que tendría que tener una descripción con un details asociado a la tabla con el atributo aria-describedby.

Ejemplo: "Tabla con caption visible", de código HTML, para maquetar el componente: "Table", versión: 12.1.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- table -->
<table class="c-table">
  <caption class="mb-base font-bold text-left text-lg">Caption 1: Meses y pagos</caption>
  <thead class="sr-only lg:not-sr-only">
    <tr class="border-t border-b border-neutral-base">
      <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark">Mes de pago</th>
      <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:text-right">Primer pago</th>
      <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:text-right">Segundo pago</th>
    </tr>
  </thead>
  <tbody>
    <tr class="block lg:table-row -mb-px lg:mb-0 text-left border-t border-b border-neutral-base">
      <th scope="row" class="block lg:table-cell before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm align-top px-base py-sm text-left font-normal text-sm text-neutral-dark" data-label="Mes de pago">Enero</th>
      <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Primer pago">85€</td>
      <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Segundo pago">95€</td>
    </tr>
    <tr class="block lg:table-row -mb-px lg:mb-0 text-left border-t border-b border-neutral-base">
      <th scope="row" class="block lg:table-cell before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm align-top px-base py-sm text-left font-normal text-sm text-neutral-dark" data-label="Mes de pago">Febrero</th>
      <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Primer pago">75€</td>
      <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Segundo pago">55€</td>
    </tr>
    <tr class="block lg:table-row -mb-px lg:mb-0 text-left border-t border-b border-neutral-base">
      <th scope="row" class="block lg:table-cell before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm align-top px-base py-sm text-left font-normal text-sm text-neutral-dark" data-label="Mes de pago">Marzo</th>
      <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Primer pago">165€</td>
      <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Segundo pago">125€</td>
    </tr>
  </tbody>
</table>
<!-- /table -->

Ejemplo: "Tabla con caption visible", de código Nunjucks, para maquetar el componente: "Table", versión: 12.1.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% 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": "lg:text-right"
    },
    {
      "text": "Segundo pago",
      "classes": "lg:text-right"
    }
  ],
  "rows": [
    [
      {
        "text": "Enero"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      }
    ],
    [
      {
        "text": "Febrero"
      },
      {
        "text": "75€",
        "classes": "lg:text-right"
      },
      {
        "text": "55€",
        "classes": "lg:text-right"
      }
    ],
    [
      {
        "text": "Marzo"
      },
      {
        "text": "165€",
        "classes": "lg:text-right"
      },
      {
        "text": "125€",
        "classes": "lg:text-right"
      }
    ]
  ]
}) }}
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": "lg:text-right"
    },
    {
      "text": "Segundo pago",
      "classes": "lg:text-right"
    }
  ],
  "rows": [
    [
      {
        "text": "Enero"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      }
    ],
    [
      {
        "text": "Febrero"
      },
      {
        "text": "75€",
        "classes": "lg:text-right"
      },
      {
        "text": "55€",
        "classes": "lg:text-right"
      }
    ],
    [
      {
        "text": "Marzo"
      },
      {
        "text": "165€",
        "classes": "lg:text-right"
      },
      {
        "text": "125€",
        "classes": "lg: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. Por accesibilidad, parámetro wrapper necesitará los atributos: tabindex=0, role=section y un aria-label o aria-labelledby.

Ejemplo: "Tabla con wrapper", de código HTML, para maquetar el componente: "Table", versión: 12.1.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- table -->
<div class="relative overflow-x-auto pb-base focus:outline-none focus:shadow-outline-black" tabindex="0" role="region" aria-label="Tabla con scroll del ejemplo Tabla con wrapper">
  <table class="c-table">
    <caption class="sticky left-0 top-0 w-0 mb-base font-bold text-left text-lg lg:whitespace-nowrap">Caption 1: Meses y pagos</caption>
    <thead class="sr-only lg:not-sr-only">
      <tr class="border-t border-b border-neutral-base">
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:whitespace-nowrap">Mes de pago</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:whitespace-nowrap lg:text-right">Primer pago</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:whitespace-nowrap lg:text-right">Segundo pago</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:whitespace-nowrap lg:text-right">Rate for A</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:whitespace-nowrap lg:text-right">Rate for B</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:whitespace-nowrap lg:text-right">Rate for C</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:whitespace-nowrap lg:text-right">Rate for D</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:whitespace-nowrap lg:text-right">Rate for E</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:whitespace-nowrap lg:text-right">Rate for F</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:whitespace-nowrap lg:text-right">Rate for G</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:whitespace-nowrap lg:text-right">Rate for H</th>
      </tr>
    </thead>
    <tbody>
      <tr class="block lg:table-row -mb-px lg:mb-0 text-left border-t border-b border-neutral-base">
        <th scope="row" class="block lg:table-cell before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm align-top px-base py-sm text-left font-normal text-sm text-neutral-dark" data-label="Mes de pago">Enero</th>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Primer pago">85€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Segundo pago">95€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for A">85€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for B">95€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for C">85€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for D">95€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for E">85€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for F">95€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for G">85€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for H">95€</td>
      </tr>
      <tr class="block lg:table-row -mb-px lg:mb-0 text-left border-t border-b border-neutral-base">
        <th scope="row" class="block lg:table-cell before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm align-top px-base py-sm text-left font-normal text-sm text-neutral-dark" data-label="Mes de pago">Febrero</th>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Primer pago">75€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Segundo pago">55€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for A">85€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for B">95€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for C">85€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for D">95€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for E">85€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for F">95€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for G">85€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for H">95€</td>
      </tr>
      <tr class="block lg:table-row -mb-px lg:mb-0 text-left border-t border-b border-neutral-base">
        <th scope="row" class="block lg:table-cell before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm align-top px-base py-sm text-left font-normal text-sm text-neutral-dark" data-label="Mes de pago">Marzo</th>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Primer pago">165€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Segundo pago">125€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for A">85€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for B">95€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for C">85€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for D">95€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for E">85€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for F">95€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for G">85€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for H">95€</td>
      </tr>
    </tbody>
  </table>
</div>
<!-- /table -->

Ejemplo: "Tabla con wrapper", de código Nunjucks, para maquetar el componente: "Table", versión: 12.1.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

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

{{ componentTable({
  "caption": "Caption 1: Meses y pagos",
  "captionClasses": "sticky left-0 top-0 w-0 mb-base font-bold text-left text-lg lg:whitespace-nowrap",
  "firstCellIsHeader": true,
  "head": [
    {
      "text": "Mes de pago",
      "classes": "lg:whitespace-nowrap"
    },
    {
      "text": "Primer pago",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Segundo pago",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for A",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for B",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for C",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for D",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for E",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for F",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for G",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for H",
      "classes": "lg:whitespace-nowrap lg:text-right"
    }
  ],
  "rows": [
    [
      {
        "text": "Enero"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      }
    ],
    [
      {
        "text": "Febrero"
      },
      {
        "text": "75€",
        "classes": "lg:text-right"
      },
      {
        "text": "55€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      }
    ],
    [
      {
        "text": "Marzo"
      },
      {
        "text": "165€",
        "classes": "lg:text-right"
      },
      {
        "text": "125€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      }
    ]
  ],
  "wrapper": {
    "classes": "relative overflow-x-auto pb-base focus:outline-none focus:shadow-outline-black",
    "attributes": {
      "tabindex": "0",
      "role": "region",
      "aria-label": "Tabla con scroll del ejemplo Tabla con wrapper"
    }
  }
}) }}
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 top-0 w-0 mb-base font-bold text-left text-lg lg:whitespace-nowrap",
  "firstCellIsHeader": true,
  "head": [
    {
      "text": "Mes de pago",
      "classes": "lg:whitespace-nowrap"
    },
    {
      "text": "Primer pago",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Segundo pago",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for A",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for B",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for C",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for D",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for E",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for F",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for G",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for H",
      "classes": "lg:whitespace-nowrap lg:text-right"
    }
  ],
  "rows": [
    [
      {
        "text": "Enero"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      }
    ],
    [
      {
        "text": "Febrero"
      },
      {
        "text": "75€",
        "classes": "lg:text-right"
      },
      {
        "text": "55€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      }
    ],
    [
      {
        "text": "Marzo"
      },
      {
        "text": "165€",
        "classes": "lg:text-right"
      },
      {
        "text": "125€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      }
    ]
  ],
  "wrapper": {
    "classes": "relative overflow-x-auto pb-base focus:outline-none focus:shadow-outline-black",
    "attributes": {
      "tabindex": "0",
      "role": "region",
      "aria-label": "Tabla con scroll del ejemplo Tabla con wrapper"
    }
  }
}) }}

Tabla no responsive

Usa la clase modificadora .c-table--no-responsive junto al parámetro wrapper para tablas que usen rowspan o colspan o tablas que no queremos que muestren sus celdas apiladas en móvil.

Ejemplo: "Tabla no responsive", de código HTML, para maquetar el componente: "Table", versión: 12.1.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- table -->
<div class="relative overflow-x-auto pb-base focus:outline-none focus:shadow-outline-black" tabindex="0" role="region" aria-label="Tabla con scroll  del ejemplo Tabla no responsive">
  <table class="c-table c-table--no-responsive w-full">
    <caption class="mb-base font-bold text-left text-lg">Caption 1: Meses y pagos</caption>
    <thead class="sr-only lg:not-sr-only">
      <tr class="border-t border-b border-neutral-base">
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:whitespace-nowrap">Mes de pago</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:whitespace-nowrap lg:text-right">Primer pago</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:whitespace-nowrap lg:text-right">Segundo pago</th>
      </tr>
    </thead>
    <tbody>
      <tr class="block lg:table-row -mb-px lg:mb-0 text-left border-t border-b border-neutral-base">
        <th scope="row" class="block lg:table-cell before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm align-top px-base py-sm text-left font-normal text-sm text-neutral-dark" data-label="Mes de pago">Enero</th>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm text-center" data-label="Primer pago" colspan="2" rowspan="2">85€</td>
      </tr>
      <tr class="block lg:table-row -mb-px lg:mb-0 text-left border-t border-b border-neutral-base">
        <th scope="row" class="block lg:table-cell before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm align-top px-base py-sm text-left font-normal text-sm text-neutral-dark" data-label="Mes de pago">Febrero</th>
      </tr>
      <tr class="block lg:table-row -mb-px lg:mb-0 text-left border-t border-b border-neutral-base">
        <th scope="row" class="block lg:table-cell before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm align-top px-base py-sm text-left font-normal text-sm text-neutral-dark" data-label="Mes de pago">Marzo</th>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Primer pago">165€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Segundo pago">125€</td>
      </tr>
    </tbody>
  </table>
</div>
<!-- /table -->

Ejemplo: "Tabla no responsive", de código Nunjucks, para maquetar el componente: "Table", versión: 12.1.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

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

{{ componentTable({
  "classes": "c-table--no-responsive w-full",
  "caption": "Caption 1: Meses y pagos",
  "captionClasses": "mb-base font-bold text-left text-lg",
  "firstCellIsHeader": true,
  "head": [
    {
      "text": "Mes de pago",
      "classes": "lg:whitespace-nowrap"
    },
    {
      "text": "Primer pago",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Segundo pago",
      "classes": "lg:whitespace-nowrap lg:text-right"
    }
  ],
  "rows": [
    [
      {
        "text": "Enero"
      },
      {
        "text": "85€",
        "classes": "text-center",
        "rowspan": 2,
        "colspan": 2
      }
    ],
    [
      {
        "text": "Febrero"
      }
    ],
    [
      {
        "text": "Marzo"
      },
      {
        "text": "165€",
        "classes": "lg:text-right"
      },
      {
        "text": "125€",
        "classes": "lg:text-right"
      }
    ]
  ],
  "wrapper": {
    "classes": "relative overflow-x-auto pb-base focus:outline-none focus:shadow-outline-black",
    "attributes": {
      "tabindex": "0",
      "role": "region",
      "aria-label": "Tabla con scroll  del ejemplo Tabla no responsive"
    }
  }
}) }}
Caption 1: Meses y pagos
Mes de pago Primer pago Segundo pago
Enero 85€
Febrero
Marzo 165€ 125€
Mostrar códigodel ejemplo: Tabla no responsive

Contenido

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

{{ componentTable({
  "classes": "c-table--no-responsive w-full",
  "caption": "Caption 1: Meses y pagos",
  "captionClasses": "mb-base font-bold text-left text-lg",
  "firstCellIsHeader": true,
  "head": [
    {
      "text": "Mes de pago",
      "classes": "lg:whitespace-nowrap"
    },
    {
      "text": "Primer pago",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Segundo pago",
      "classes": "lg:whitespace-nowrap lg:text-right"
    }
  ],
  "rows": [
    [
      {
        "text": "Enero"
      },
      {
        "text": "85€",
        "classes": "text-center",
        "rowspan": 2,
        "colspan": 2
      }
    ],
    [
      {
        "text": "Febrero"
      }
    ],
    [
      {
        "text": "Marzo"
      },
      {
        "text": "165€",
        "classes": "lg:text-right"
      },
      {
        "text": "125€",
        "classes": "lg:text-right"
      }
    ]
  ],
  "wrapper": {
    "classes": "relative overflow-x-auto pb-base focus:outline-none focus:shadow-outline-black",
    "attributes": {
      "tabindex": "0",
      "role": "region",
      "aria-label": "Tabla con scroll  del ejemplo Tabla no responsive"
    }
  }
}) }}

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

Ejemplo: "Tabla con columnas sticky", de código HTML, para maquetar el componente: "Table", versión: 12.1.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- table -->
<div class="overflow-x-auto pb-base focus:outline-none focus:shadow-outline-black" tabindex="0" role="region" aria-label="Tabla con scroll del ejemplo Tabla con columnas sticky">
  <table class="c-table relative lg:whitespace-nowrap">
    <caption class="sticky top-0 left-0 w-0 mb-base font-bold text-left text-lg">Caption 1: Meses y pagos</caption>
    <thead class="sr-only lg:not-sr-only">
      <tr class="border-t border-b border-neutral-base">
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:whitespace-nowrap sticky left-0 w-60 bg-white">Mes de pago</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:whitespace-nowrap lg:text-right">Primer pago</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:whitespace-nowrap lg:text-right">Segundo pago</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:whitespace-nowrap lg:text-right">Rate for A</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:whitespace-nowrap lg:text-right">Rate for B</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:whitespace-nowrap lg:text-right">Rate for C</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:whitespace-nowrap lg:text-right">Rate for D</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:whitespace-nowrap lg:text-right">Rate for E</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:whitespace-nowrap lg:text-right">Rate for F</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:whitespace-nowrap lg:text-right">Rate for G</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:whitespace-nowrap lg:text-right sticky right-0 w-60 bg-white">Rate for H</th>
      </tr>
    </thead>
    <tbody>
      <tr class="block lg:table-row -mb-px lg:mb-0 text-left border-t border-b border-neutral-base">
        <th scope="row" class="block lg:table-cell before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm align-top px-base py-sm text-left font-normal text-sm text-neutral-dark sticky left-0 w-60 bg-white" data-label="Mes de pago">Enero</th>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Primer pago">85€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Segundo pago">95€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for A">85€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for B">95€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for C">85€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for D">95€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for E">85€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for F">95€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for G">85€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right sticky right-0 w-60 bg-white" data-label="Rate for H">95€</td>
      </tr>
      <tr class="block lg:table-row -mb-px lg:mb-0 text-left border-t border-b border-neutral-base">
        <th scope="row" class="block lg:table-cell before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm align-top px-base py-sm text-left font-normal text-sm text-neutral-dark sticky left-0 w-60 bg-white" data-label="Mes de pago">Febrero</th>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Primer pago">75€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Segundo pago">55€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for A">85€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for B">95€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for C">85€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for D">95€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for E">85€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for F">95€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for G">85€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right sticky right-0 w-60 bg-white" data-label="Rate for H">95€</td>
      </tr>
      <tr class="block lg:table-row -mb-px lg:mb-0 text-left border-t border-b border-neutral-base">
        <th scope="row" class="block lg:table-cell before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm align-top px-base py-sm text-left font-normal text-sm text-neutral-dark sticky left-0 w-60 bg-white" data-label="Mes de pago">Marzo</th>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Primer pago">165€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Segundo pago">125€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for A">85€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for B">95€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for C">85€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for D">95€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for E">85€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for F">95€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right" data-label="Rate for G">85€</td>
        <td class="block lg:table-cell text-left before:block before:text-neutral-dark before:lg:hidden before:content-[attr(data-label)] before:text-sm px-base py-sm lg:text-right sticky right-0 w-60 bg-white" data-label="Rate for H">95€</td>
      </tr>
    </tbody>
  </table>
</div>
<!-- /table -->

Ejemplo: "Tabla con columnas sticky", de código Nunjucks, para maquetar el componente: "Table", versión: 12.1.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% 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": "lg:whitespace-nowrap sticky left-0 w-60 bg-white"
    },
    {
      "text": "Primer pago",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Segundo pago",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for A",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for B",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for C",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for D",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for E",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for F",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for G",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for H",
      "classes": "lg:whitespace-nowrap lg:text-right sticky right-0 w-60 bg-white"
    }
  ],
  "rows": [
    [
      {
        "text": "Enero",
        "classes": "sticky left-0 w-60 bg-white"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right sticky right-0 w-60 bg-white"
      }
    ],
    [
      {
        "text": "Febrero",
        "classes": "sticky left-0 w-60 bg-white"
      },
      {
        "text": "75€",
        "classes": "lg:text-right"
      },
      {
        "text": "55€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right sticky right-0 w-60 bg-white"
      }
    ],
    [
      {
        "text": "Marzo",
        "classes": "sticky left-0 w-60 bg-white"
      },
      {
        "text": "165€",
        "classes": "lg:text-right"
      },
      {
        "text": "125€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right sticky right-0 w-60 bg-white"
      }
    ]
  ],
  "wrapper": {
    "classes": "overflow-x-auto pb-base focus:outline-none focus:shadow-outline-black",
    "attributes": {
      "tabindex": "0",
      "role": "region",
      "aria-label": "Tabla con scroll del ejemplo Tabla con columnas sticky"
    }
  },
  "classes": "relative lg:whitespace-nowrap"
}) }}
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 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": "lg:whitespace-nowrap sticky left-0 w-60 bg-white"
    },
    {
      "text": "Primer pago",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Segundo pago",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for A",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for B",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for C",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for D",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for E",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for F",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for G",
      "classes": "lg:whitespace-nowrap lg:text-right"
    },
    {
      "text": "Rate for H",
      "classes": "lg:whitespace-nowrap lg:text-right sticky right-0 w-60 bg-white"
    }
  ],
  "rows": [
    [
      {
        "text": "Enero",
        "classes": "sticky left-0 w-60 bg-white"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right sticky right-0 w-60 bg-white"
      }
    ],
    [
      {
        "text": "Febrero",
        "classes": "sticky left-0 w-60 bg-white"
      },
      {
        "text": "75€",
        "classes": "lg:text-right"
      },
      {
        "text": "55€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right sticky right-0 w-60 bg-white"
      }
    ],
    [
      {
        "text": "Marzo",
        "classes": "sticky left-0 w-60 bg-white"
      },
      {
        "text": "165€",
        "classes": "lg:text-right"
      },
      {
        "text": "125€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right"
      },
      {
        "text": "85€",
        "classes": "lg:text-right"
      },
      {
        "text": "95€",
        "classes": "lg:text-right sticky right-0 w-60 bg-white"
      }
    ]
  ],
  "wrapper": {
    "classes": "overflow-x-auto pb-base focus:outline-none focus:shadow-outline-black",
    "attributes": {
      "tabindex": "0",
      "role": "region",
      "aria-label": "Tabla con scroll del ejemplo Tabla con columnas sticky"
    }
  },
  "classes": "relative lg:whitespace-nowrap"
}) }}