DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

Tabla

Datos

Componente para ordenar valores relacionados en filas y columnas.

Table

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

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

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

Tabla por defecto

Ejemplo: "Tabla por defecto", de código HTML, para maquetar el componente: "Table", versión: 4.0.1, 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: 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: 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: 4.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: 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: 4.0.1, 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: 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: 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 scope="col" 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 scope="col" 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 scope="col" 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: 4.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: 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

Ejemplo: "Tabla con caption visible", de código HTML, para maquetar el componente: "Table", versión: 4.0.1, 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: 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: 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: 4.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: 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.

Ejemplo: "Tabla con wrapper", de código HTML, para maquetar el componente: "Table", versión: 4.0.1, 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: 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: 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">
  <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: 4.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: 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"
  }
}) }}
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"
  }
}) }}

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: 4.0.1, 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: 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: 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">
  <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: 4.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: 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"
  }
}) }}
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"
  }
}) }}

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.

Ejemplo: "Table con columnas sticky", de código HTML, para maquetar el componente: "Table", versión: 4.0.1, 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: 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: desy-html.

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

<!-- table -->
<div class="overflow-x-auto pb-base">
  <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: "Table con columnas sticky", de código Nunjucks, para maquetar el componente: "Table", versión: 4.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: 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"
  },
  "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: 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": "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"
  },
  "classes": "relative lg:whitespace-nowrap"
}) }}

Classes

Ejemplo: "Classes", de código HTML, para maquetar el componente: "Table", versión: 4.0.1, 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: 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: desy-html.

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

<!-- table -->
<table class="c-table bg-primary-light">
  <tbody>
  </tbody>
</table>
<!-- /table -->

Ejemplo: "Classes", de código Nunjucks, para maquetar el componente: "Table", versión: 4.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: 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": "bg-primary-light"
}) }}
Mostrar códigodel ejemplo: Classes

Contenido

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

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

Atributos

Ejemplo: "Atributos", de código HTML, para maquetar el componente: "Table", versión: 4.0.1, 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: 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: desy-html.

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

<!-- table -->
<table class="c-table" data-foo="bar">
  <tbody>
  </tbody>
</table>
<!-- /table -->

Ejemplo: "Atributos", de código Nunjucks, para maquetar el componente: "Table", versión: 4.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: 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({
  "attributes": {
    "data-foo": "bar"
  }
}) }}
Mostrar códigodel ejemplo: Atributos

Contenido

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

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

Html como texto

Ejemplo: "Html como texto", de código HTML, para maquetar el componente: "Table", versión: 4.0.1, 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: 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: desy-html.

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

<!-- table -->
<table class="c-table">
  <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">Foo &lt;strong&gt;bar&lt;/strong&gt;</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="Foo &lt;strong&gt;bar&lt;/strong&gt;">Foo &lt;strong&gt;bar&lt;/strong&gt;</td>
    </tr>
  </tbody>
</table>
<!-- /table -->

Ejemplo: "Html como texto", de código Nunjucks, para maquetar el componente: "Table", versión: 4.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: 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({
  "head": [
    {
      "text": "Foo <strong>bar</strong>"
    }
  ],
  "rows": [
    [
      {
        "text": "Foo <strong>bar</strong>"
      }
    ]
  ]
}) }}
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

Ejemplo: "Html", de código HTML, para maquetar el componente: "Table", versión: 4.0.1, 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: 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: desy-html.

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

<!-- table -->
<table class="c-table">
  <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">Foo <strong>bar</strong></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="Foo bar">Foo <strong>bar</strong></td>
    </tr>
  </tbody>
</table>
<!-- /table -->

Ejemplo: "Html", de código Nunjucks, para maquetar el componente: "Table", versión: 4.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: 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({
  "head": [
    {
      "html": "Foo <strong>bar</strong>"
    }
  ],
  "rows": [
    [
      {
        "html": "Foo <strong>bar</strong>"
      }
    ]
  ]
}) }}
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

Ejemplo: "Head con clases", de código HTML, para maquetar el componente: "Table", versión: 4.0.1, 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: 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: desy-html.

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

<!-- table -->
<table class="c-table">
  <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 bg-primary-light">Foo</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>
<!-- /table -->

Ejemplo: "Head con clases", de código Nunjucks, para maquetar el componente: "Table", versión: 4.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: 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({
  "head": [
    {
      "text": "Foo",
      "classes": "bg-primary-light"
    }
  ]
}) }}
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

Ejemplo: "Head con rowspan y colspan", de código HTML, para maquetar el componente: "Table", versión: 4.0.1, 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: 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: desy-html.

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

<!-- table -->
<table class="c-table">
  <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" colspan="1" rowspan="1">Foo</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>
<!-- /table -->

Ejemplo: "Head con rowspan y colspan", de código Nunjucks, para maquetar el componente: "Table", versión: 4.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: 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({
  "head": [
    {
      "text": "Foo",
      "rowspan": 1,
      "colspan": 1
    }
  ]
}) }}
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

Ejemplo: "Head con atributos", de código HTML, para maquetar el componente: "Table", versión: 4.0.1, 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: 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: desy-html.

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

<!-- table -->
<table class="c-table">
  <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" data-fizz="buzz"></th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>
<!-- /table -->

Ejemplo: "Head con atributos", de código Nunjucks, para maquetar el componente: "Table", versión: 4.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: 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({
  "head": [
    {
      "attributes": {
        "data-fizz": "buzz"
      }
    }
  ]
}) }}
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

Ejemplo: "Con firstcellisheader true", de código HTML, para maquetar el componente: "Table", versión: 4.0.1, 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: 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: desy-html.

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

<!-- table -->
<table class="c-table">
  <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="">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="">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="">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="">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="">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="">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="">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="">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="">125€</td>
    </tr>
  </tbody>
</table>
<!-- /table -->

Ejemplo: "Con firstcellisheader true", de código Nunjucks, para maquetar el componente: "Table", versión: 4.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: 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({
  "firstCellIsHeader": true,
  "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"
      }
    ]
  ]
}) }}
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": "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"
      }
    ]
  ]
}) }}

Firstcellisheader con clases

Ejemplo: "Firstcellisheader con clases", de código HTML, para maquetar el componente: "Table", versión: 4.0.1, 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: 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: desy-html.

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

<!-- table -->
<table class="c-table">
  <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 bg-primary-light" data-label="">Foo</th>
    </tr>
  </tbody>
</table>
<!-- /table -->

Ejemplo: "Firstcellisheader con clases", de código Nunjucks, para maquetar el componente: "Table", versión: 4.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: 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({
  "firstCellIsHeader": true,
  "rows": [
    [
      {
        "text": "Foo",
        "classes": "bg-primary-light"
      }
    ]
  ]
}) }}
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

Ejemplo: "Firstcellisheader con html", de código HTML, para maquetar el componente: "Table", versión: 4.0.1, 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: 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: desy-html.

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

<!-- table -->
<table class="c-table">
  <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="">Foo <strong>bar</strong></th>
    </tr>
  </tbody>
</table>
<!-- /table -->

Ejemplo: "Firstcellisheader con html", de código Nunjucks, para maquetar el componente: "Table", versión: 4.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: 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({
  "firstCellIsHeader": true,
  "rows": [
    [
      {
        "html": "Foo <strong>bar</strong>"
      }
    ]
  ]
}) }}
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

Ejemplo: "Firstcellisheader con html como texto", de código HTML, para maquetar el componente: "Table", versión: 4.0.1, 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: 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: desy-html.

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

<!-- table -->
<table class="c-table">
  <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="">Foo &lt;strong&gt;bar&lt;/strong&gt;</th>
    </tr>
  </tbody>
</table>
<!-- /table -->

Ejemplo: "Firstcellisheader con html como texto", de código Nunjucks, para maquetar el componente: "Table", versión: 4.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: 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({
  "firstCellIsHeader": true,
  "rows": [
    [
      {
        "text": "Foo <strong>bar</strong>"
      }
    ]
  ]
}) }}
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

Ejemplo: "Firstcellisheader con rowspan y colspan", de código HTML, para maquetar el componente: "Table", versión: 4.0.1, 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: 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: desy-html.

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

<!-- table -->
<table class="c-table">
  <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="" colspan="1" rowspan="1">Foo</th>
    </tr>
  </tbody>
</table>
<!-- /table -->

Ejemplo: "Firstcellisheader con rowspan y colspan", de código Nunjucks, para maquetar el componente: "Table", versión: 4.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: 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({
  "firstCellIsHeader": true,
  "rows": [
    [
      {
        "text": "Foo",
        "rowspan": 1,
        "colspan": 1
      }
    ]
  ]
}) }}
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

Ejemplo: "Firstcellisheader con atributos", de código HTML, para maquetar el componente: "Table", versión: 4.0.1, 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: 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: desy-html.

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

<!-- table -->
<table class="c-table">
  <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="" data-fizz="buzz">Foo</th>
    </tr>
  </tbody>
</table>
<!-- /table -->

Ejemplo: "Firstcellisheader con atributos", de código Nunjucks, para maquetar el componente: "Table", versión: 4.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: 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({
  "firstCellIsHeader": true,
  "rows": [
    [
      {
        "text": "Foo",
        "attributes": {
          "data-fizz": "buzz"
        }
      }
    ]
  ]
}) }}
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

Ejemplo: "Con items falsos", de código HTML, para maquetar el componente: "Table", versión: 4.0.1, 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: 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: desy-html.

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

<!-- table -->
<table class="c-table">
  <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="">A</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" data-label="">1</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="">B</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" data-label="">2</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="">C</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" data-label="">3</td>
    </tr>
  </tbody>
</table>
<!-- /table -->

Ejemplo: "Con items falsos", de código Nunjucks, para maquetar el componente: "Table", versión: 4.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: 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({
  "rows": [
    [
      {
        "text": "A"
      },
      {
        "text": 1
      }
    ],
    false,
    null,
    [
      {
        "text": "B"
      },
      {
        "text": 2
      }
    ],
    [
      {
        "text": "C"
      },
      {
        "text": 3
      }
    ]
  ]
}) }}
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

Ejemplo: "Filas con clases", de código HTML, para maquetar el componente: "Table", versión: 4.0.1, 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: 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: desy-html.

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

<!-- table -->
<table class="c-table">
  <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 bg-primary-light" data-label="">Foo</td>
    </tr>
  </tbody>
</table>
<!-- /table -->

Ejemplo: "Filas con clases", de código Nunjucks, para maquetar el componente: "Table", versión: 4.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: 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({
  "rows": [
    [
      {
        "text": "Foo",
        "classes": "bg-primary-light"
      }
    ]
  ]
}) }}
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

Ejemplo: "Filas con rowspan y colspan", de código HTML, para maquetar el componente: "Table", versión: 4.0.1, 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: 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: desy-html.

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

<!-- table -->
<table class="c-table">
  <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="" colspan="1" rowspan="1">Foo</td>
    </tr>
  </tbody>
</table>
<!-- /table -->

Ejemplo: "Filas con rowspan y colspan", de código Nunjucks, para maquetar el componente: "Table", versión: 4.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: 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({
  "rows": [
    [
      {
        "text": "Foo",
        "rowspan": 1,
        "colspan": 1
      }
    ]
  ]
}) }}
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

Ejemplo: "Filas con atributos", de código HTML, para maquetar el componente: "Table", versión: 4.0.1, 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: 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: desy-html.

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

<!-- table -->
<table class="c-table">
  <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="" data-fizz="buzz">Foo</td>
    </tr>
  </tbody>
</table>
<!-- /table -->

Ejemplo: "Filas con atributos", de código Nunjucks, para maquetar el componente: "Table", versión: 4.0.1, del sistema de diseño DESY

Pegar en la página: pagina-prueba.html del proyecto: 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({
  "rows": [
    [
      {
        "text": "Foo",
        "attributes": {
          "data-fizz": "buzz"
        }
      }
    ]
  ]
}) }}
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"
        }
      }
    ]
  ]
}) }}