desy-html

Table-advanced

Parámetros Nunjucks del componente: "Table-advanced". Versión: 12.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: 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: orderBy\n    type: string\n    required: false\n    description: Possible values `none`, `asc`, `desc`.\n  - name: hasFilter\n    type: boolean\n    required: false\n    description: If `true`, shows a filter input in head cell.\n  - name: filterText\n    type: string\n    required: false\n    description: Text for sr-only labels and placeholder for filter input in head cell.\n  - name: filterClasses\n    type: string\n    required: false\n    description: Classes to add to the table head cell input.\n  - name: select\n    type: object\n    required: false\n    description: Options for a select component to filter results in the column.\n    isComponent: true\n  - name: classes\n    type: string\n    required: false\n    description: Classes to add to the table head cell.\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: 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: classes\n    type: string\n    required: false\n    description: Classes to add to the table tfoot cell.\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: hasCheckboxes\n  type: boolean\n  required: false\n  description: If `true` the first column has checkboxes for every row.\n- name: checkboxesClasses\n  type: string\n  required: false\n  description: Classes for the cell that contain the checkboxes. This allows position the checkboxes inside the table.\n- name: idPrefix\n  type: string\n  required: false\n  description: String to prefix id for each checkbox item if no id is specified on each item. If not passed, fall back to using a generic one instead.\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  ## Tables must:\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.\n    8. Las tablas complejas como esta deben tener una descripción. La descripción se incluye en un texto visible antes de la tabla (aunque puede estar en un <details>) y se asocia a la tabla mediante el atributo aria-describedby de la tabla.","length":6778}

Tabla por defecto

Ejemplo: "Tabla por defecto", de código HTML, para maquetar el componente: "Table Advanced", versión: 12.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-advanced -->
<table class="c-table-advanced border-t-2 border-b-2 border-neutral-base min-w-full" data-module="c-table-advanced" role="grid">
  <caption class="sr-only mb-base font-bold text-left text-lg">Caption de la tabla</caption>
  <thead>
    <tr class="border-t border-neutral-base divide-x divide-neutral-base">
      <th scope="col" id="table-default-header-0" class="align-top px-base py-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark">
        <span class="inline-block relative">
          Mes de pago
        </span>
      </th>
      <th scope="col" id="table-default-header-1" class="align-top px-base py-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark text-right">
        <span class="inline-block relative">
          Primer pago
        </span>
      </th>
      <th scope="col" id="table-default-header-2" class="align-top px-base py-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark text-right">
        <span class="inline-block relative">
          Segundo pago
        </span>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr class="border-t border-b border-neutral-base hover:bg-neutral-lighter">
      <td tabindex="-1" class="px-base py-sm">Enero</td>
      <td tabindex="-1" class="px-base py-sm text-right">85€</td>
      <td tabindex="-1" class="px-base py-sm text-right">95€</td>
    </tr>
    <tr class="border-t border-b border-neutral-base hover:bg-neutral-lighter">
      <td tabindex="-1" class="px-base py-sm">Febrero</td>
      <td tabindex="-1" class="px-base py-sm text-right">75€</td>
      <td tabindex="-1" class="px-base py-sm text-right">55€</td>
    </tr>
    <tr class="border-t border-b border-neutral-base hover:bg-neutral-lighter">
      <td tabindex="-1" class="px-base py-sm">Marzo</td>
      <td tabindex="-1" class="px-base py-sm text-right">165€</td>
      <td tabindex="-1" class="px-base py-sm text-right">125€</td>
    </tr>
  </tbody>
  <tfoot>
  </tfoot>
</table>
<!-- /table-advanced -->

Ejemplo: "Tabla por defecto", de código Nunjucks, para maquetar el componente: "Table Advanced", versión: 12.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-advanced/_macro.table-advanced.njk" import componentTableAdvanced %}

{{ componentTableAdvanced({
  "idPrefix": "table-default",
  "caption": "Caption de la tabla",
  "captionClasses": "sr-only mb-base font-bold text-left text-lg",
  "head": [
    {
      "text": "Mes de pago"
    },
    {
      "text": "Primer pago",
      "classes": "text-right"
    },
    {
      "text": "Segundo pago",
      "classes": "text-right"
    }
  ],
  "rows": [
    [
      {
        "text": "Enero"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "Febrero"
      },
      {
        "text": "75€",
        "classes": "text-right"
      },
      {
        "text": "55€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "Marzo"
      },
      {
        "text": "165€",
        "classes": "text-right"
      },
      {
        "text": "125€",
        "classes": "text-right"
      }
    ]
  ],
  "classes": "min-w-full"
}) }}
Caption de la tabla
Mes de pago Primer pago Segundo pago
Enero 85€ 95€
Febrero 75€ 55€
Marzo 165€ 125€
Mostrar códigodel ejemplo: Tabla por defecto

Contenido

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

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

Tabla con tfoot

Ejemplo: "Tabla con tfoot", de código HTML, para maquetar el componente: "Table Advanced", versión: 12.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-advanced -->
<table class="c-table-advanced border-t-2 border-b-2 border-neutral-base min-w-full" data-module="c-table-advanced" role="grid">
  <caption class="sr-only mb-base font-bold text-left text-lg">Caption de la tabla</caption>
  <thead>
    <tr class="border-t border-neutral-base divide-x divide-neutral-base">
      <th scope="col" id="table-tfoot-header-0" class="align-top px-base py-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark">
        <span class="inline-block relative">
          Mes de pago
        </span>
      </th>
      <th scope="col" id="table-tfoot-header-1" class="align-top px-base py-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark text-right">
        <span class="inline-block relative">
          Primer pago
        </span>
      </th>
      <th scope="col" id="table-tfoot-header-2" class="align-top px-base py-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark text-right">
        <span class="inline-block relative">
          Segundo pago
        </span>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr class="border-t border-b border-neutral-base hover:bg-neutral-lighter">
      <td tabindex="-1" class="px-base py-sm">Enero</td>
      <td tabindex="-1" class="px-base py-sm text-right">85€</td>
      <td tabindex="-1" class="px-base py-sm text-right">95€</td>
    </tr>
    <tr class="border-t border-b border-neutral-base hover:bg-neutral-lighter">
      <td tabindex="-1" class="px-base py-sm">Febrero</td>
      <td tabindex="-1" class="px-base py-sm text-right">75€</td>
      <td tabindex="-1" class="px-base py-sm text-right">55€</td>
    </tr>
    <tr class="border-t border-b border-neutral-base hover:bg-neutral-lighter">
      <td tabindex="-1" class="px-base py-sm">Marzo</td>
      <td tabindex="-1" class="px-base py-sm text-right">165€</td>
      <td tabindex="-1" class="px-base py-sm text-right">125€</td>
    </tr>
  </tbody>
  <tfoot>
    <tr class="border-t-2 border-b border-neutral-base hover:bg-neutral-lighter">
      <td tabindex="-1" class="px-base py-sm uppercase">Suma</td>
      <td tabindex="-1" class="px-base py-sm text-right">325€</td>
      <td tabindex="-1" class="px-base py-sm text-right">275€</td>
    </tr>
  </tfoot>
</table>
<!-- /table-advanced -->

Ejemplo: "Tabla con tfoot", de código Nunjucks, para maquetar el componente: "Table Advanced", versión: 12.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-advanced/_macro.table-advanced.njk" import componentTableAdvanced %}

{{ componentTableAdvanced({
  "idPrefix": "table-tfoot",
  "caption": "Caption de la tabla",
  "captionClasses": "sr-only mb-base font-bold text-left text-lg",
  "head": [
    {
      "text": "Mes de pago"
    },
    {
      "text": "Primer pago",
      "classes": "text-right"
    },
    {
      "text": "Segundo pago",
      "classes": "text-right"
    }
  ],
  "rows": [
    [
      {
        "text": "Enero"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "Febrero"
      },
      {
        "text": "75€",
        "classes": "text-right"
      },
      {
        "text": "55€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "Marzo"
      },
      {
        "text": "165€",
        "classes": "text-right"
      },
      {
        "text": "125€",
        "classes": "text-right"
      }
    ]
  ],
  "foot": [
    [
      {
        "text": "Suma",
        "classes": "uppercase"
      },
      {
        "text": "325€",
        "classes": "text-right"
      },
      {
        "text": "275€",
        "classes": "text-right"
      }
    ]
  ],
  "classes": "min-w-full"
}) }}
Caption de la tabla
Mes de pago Primer pago Segundo pago
Enero 85€ 95€
Febrero 75€ 55€
Marzo 165€ 125€
Suma 325€ 275€
Mostrar códigodel ejemplo: Tabla con tfoot

Contenido

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

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

Tabla con caption visible

También con 'firstCellIsHeader': true

Ejemplo: "Tabla con caption visible", de código HTML, para maquetar el componente: "Table Advanced", versión: 12.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-advanced -->
<table class="c-table-advanced border-t-2 border-b-2 border-neutral-base min-w-full" data-module="c-table-advanced" role="grid">
  <caption class="mb-base font-bold text-left text-lg">Caption 1: Meses y pagos</caption>
  <thead>
    <tr class="border-t border-neutral-base divide-x divide-neutral-base">
      <th scope="col" id="table-with-caption-header-0" class="align-top px-base py-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark">
        <span class="inline-block relative">
          Mes de pago
        </span>
      </th>
      <th scope="col" id="table-with-caption-header-1" class="align-top px-base py-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark text-right">
        <span class="inline-block relative">
          Primer pago
        </span>
      </th>
      <th scope="col" id="table-with-caption-header-2" class="align-top px-base py-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark text-right">
        <span class="inline-block relative">
          Segundo pago
        </span>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr class="border-t border-b border-neutral-base hover:bg-neutral-lighter">
      <th scope="row" class="px-base py-xs border-neutral-base border-b-0 border-r text-left font-normal text-sm text-neutral-dark">Enero</th>
      <td tabindex="-1" class="px-base py-sm text-right">85€</td>
      <td tabindex="-1" class="px-base py-sm text-right">95€</td>
    </tr>
    <tr class="border-t border-b border-neutral-base hover:bg-neutral-lighter">
      <th scope="row" class="px-base py-xs border-neutral-base border-b-0 border-r text-left font-normal text-sm text-neutral-dark">Febrero</th>
      <td tabindex="-1" class="px-base py-sm text-right">75€</td>
      <td tabindex="-1" class="px-base py-sm text-right">55€</td>
    </tr>
    <tr class="border-t border-b border-neutral-base hover:bg-neutral-lighter">
      <th scope="row" class="px-base py-xs border-neutral-base border-b-0 border-r text-left font-normal text-sm text-neutral-dark">Marzo</th>
      <td tabindex="-1" class="px-base py-sm text-right">165€</td>
      <td tabindex="-1" class="px-base py-sm text-right">125€</td>
    </tr>
  </tbody>
  <tfoot>
  </tfoot>
</table>
<!-- /table-advanced -->

Ejemplo: "Tabla con caption visible", de código Nunjucks, para maquetar el componente: "Table Advanced", versión: 12.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-advanced/_macro.table-advanced.njk" import componentTableAdvanced %}

{{ componentTableAdvanced({
  "idPrefix": "table-with-caption",
  "caption": "Caption 1: Meses y pagos",
  "captionClasses": "mb-base font-bold text-left text-lg",
  "firstCellIsHeader": true,
  "head": [
    {
      "text": "Mes de pago"
    },
    {
      "text": "Primer pago",
      "classes": "text-right"
    },
    {
      "text": "Segundo pago",
      "classes": "text-right"
    }
  ],
  "rows": [
    [
      {
        "text": "Enero"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "Febrero"
      },
      {
        "text": "75€",
        "classes": "text-right"
      },
      {
        "text": "55€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "Marzo"
      },
      {
        "text": "165€",
        "classes": "text-right"
      },
      {
        "text": "125€",
        "classes": "text-right"
      }
    ]
  ],
  "classes": "min-w-full"
}) }}
Caption 1: Meses y pagos
Mes de pago Primer pago Segundo pago
Enero 85€ 95€
Febrero 75€ 55€
Marzo 165€ 125€
Mostrar códigodel ejemplo: Tabla con caption visible

Contenido

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

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

Tabla con orderby en columnas

Con 'orderBy': none, asc, desc

Ejemplo: "Tabla con orderby en columnas", de código HTML, para maquetar el componente: "Table Advanced", versión: 12.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-advanced -->
<table class="c-table-advanced border-t-2 border-b-2 border-neutral-base min-w-full" data-module="c-table-advanced" role="grid">
  <thead>
    <tr class="border-t border-neutral-base divide-x divide-neutral-base">
      <th aria-sort="none" scope="col" id="table-with-orderby-header-0" class="align-top px-base py-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark">
        <span class="inline-block relative" tabindex="-1" role="button">
          Mes de pago
          <span class="c-table-advanced__order">
            <span class="sr-only">Pulsa para ordenar por esta columna</span>
            <span class="c-table-advanced__ascending">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" aria-hidden="true" width="1em" height="1em">
                <path d="M112.07 37.93l-35-35a10 10 0 00-14.14 0l-35 35a10 10 0 0014.14 14.14l13.66-13.66A2.5 2.5 0 0160 40.18V130a10 10 0 0020 0V40.18a2.5 2.5 0 014.27-1.77l13.66 13.66a10 10 0 0014.14-14.14z" fill="currentColor" />
              </svg>
            </span>
            <span class="c-table-advanced__descending">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" aria-hidden="true" width="1em" height="1em">
                <path d="M27.93 102.07l35 35a10 10 0 0014.14 0l35-35a10 10 0 00-14.14-14.14l-13.66 13.66A2.5 2.5 0 0180 99.82V10a10 10 0 00-20 0v89.82a2.5 2.5 0 01-4.27 1.77L42.07 87.93a10 10 0 00-14.14 14.14z" fill="currentColor" />
              </svg>
            </span>
            <span class="c-table-advanced__none">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="text-neutral-dark" aria-hidden="true" width="1em" height="1em">
                <path d="M94.7 97.2l-17.2 17.19V25.61L94.7 42.8a7.5 7.5 0 0010.6-10.6l-30-30a7.49 7.49 0 00-10.6 0l-30 30a7.5 7.5 0 0010.6 10.6l17.2-17.19v88.78L45.3 97.2a7.5 7.5 0 10-10.6 10.6l30 30a7.48 7.48 0 0010.6 0l30-30a7.5 7.5 0 00-10.6-10.6z" fill="currentColor" />
              </svg>
            </span>
          </span>
        </span>
      </th>
      <th aria-sort="none" scope="col" id="table-with-orderby-header-1" class="align-top px-base py-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark text-right">
        <span class="inline-block relative" tabindex="-1" role="button">
          Primer pago
          <span class="c-table-advanced__order">
            <span class="sr-only">Pulsa para ordenar por esta columna</span>
            <span class="c-table-advanced__ascending">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" aria-hidden="true" width="1em" height="1em">
                <path d="M112.07 37.93l-35-35a10 10 0 00-14.14 0l-35 35a10 10 0 0014.14 14.14l13.66-13.66A2.5 2.5 0 0160 40.18V130a10 10 0 0020 0V40.18a2.5 2.5 0 014.27-1.77l13.66 13.66a10 10 0 0014.14-14.14z" fill="currentColor" />
              </svg>
            </span>
            <span class="c-table-advanced__descending">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" aria-hidden="true" width="1em" height="1em">
                <path d="M27.93 102.07l35 35a10 10 0 0014.14 0l35-35a10 10 0 00-14.14-14.14l-13.66 13.66A2.5 2.5 0 0180 99.82V10a10 10 0 00-20 0v89.82a2.5 2.5 0 01-4.27 1.77L42.07 87.93a10 10 0 00-14.14 14.14z" fill="currentColor" />
              </svg>
            </span>
            <span class="c-table-advanced__none">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="text-neutral-dark" aria-hidden="true" width="1em" height="1em">
                <path d="M94.7 97.2l-17.2 17.19V25.61L94.7 42.8a7.5 7.5 0 0010.6-10.6l-30-30a7.49 7.49 0 00-10.6 0l-30 30a7.5 7.5 0 0010.6 10.6l17.2-17.19v88.78L45.3 97.2a7.5 7.5 0 10-10.6 10.6l30 30a7.48 7.48 0 0010.6 0l30-30a7.5 7.5 0 00-10.6-10.6z" fill="currentColor" />
              </svg>
            </span>
          </span>
        </span>
      </th>
      <th aria-sort="none" scope="col" id="table-with-orderby-header-2" class="align-top px-base py-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark text-right">
        <span class="inline-block relative" tabindex="-1" role="button">
          Segundo pago
          <span class="c-table-advanced__order">
            <span class="sr-only">Pulsa para ordenar por esta columna</span>
            <span class="c-table-advanced__ascending">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" aria-hidden="true" width="1em" height="1em">
                <path d="M112.07 37.93l-35-35a10 10 0 00-14.14 0l-35 35a10 10 0 0014.14 14.14l13.66-13.66A2.5 2.5 0 0160 40.18V130a10 10 0 0020 0V40.18a2.5 2.5 0 014.27-1.77l13.66 13.66a10 10 0 0014.14-14.14z" fill="currentColor" />
              </svg>
            </span>
            <span class="c-table-advanced__descending">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" aria-hidden="true" width="1em" height="1em">
                <path d="M27.93 102.07l35 35a10 10 0 0014.14 0l35-35a10 10 0 00-14.14-14.14l-13.66 13.66A2.5 2.5 0 0180 99.82V10a10 10 0 00-20 0v89.82a2.5 2.5 0 01-4.27 1.77L42.07 87.93a10 10 0 00-14.14 14.14z" fill="currentColor" />
              </svg>
            </span>
            <span class="c-table-advanced__none">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="text-neutral-dark" aria-hidden="true" width="1em" height="1em">
                <path d="M94.7 97.2l-17.2 17.19V25.61L94.7 42.8a7.5 7.5 0 0010.6-10.6l-30-30a7.49 7.49 0 00-10.6 0l-30 30a7.5 7.5 0 0010.6 10.6l17.2-17.19v88.78L45.3 97.2a7.5 7.5 0 10-10.6 10.6l30 30a7.48 7.48 0 0010.6 0l30-30a7.5 7.5 0 00-10.6-10.6z" fill="currentColor" />
              </svg>
            </span>
          </span>
        </span>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr class="border-t border-b border-neutral-base hover:bg-neutral-lighter">
      <td tabindex="-1" class="px-base py-sm">Enero</td>
      <td tabindex="-1" class="px-base py-sm text-right">85€</td>
      <td tabindex="-1" class="px-base py-sm text-right">95€</td>
    </tr>
    <tr class="border-t border-b border-neutral-base hover:bg-neutral-lighter">
      <td tabindex="-1" class="px-base py-sm">Febrero</td>
      <td tabindex="-1" class="px-base py-sm text-right">75€</td>
      <td tabindex="-1" class="px-base py-sm text-right">55€</td>
    </tr>
    <tr class="border-t border-b border-neutral-base hover:bg-neutral-lighter">
      <td tabindex="-1" class="px-base py-sm">Marzo</td>
      <td tabindex="-1" class="px-base py-sm text-right">165€</td>
      <td tabindex="-1" class="px-base py-sm text-right">125€</td>
    </tr>
  </tbody>
  <tfoot>
    <tr class="border-t-2 border-b border-neutral-base hover:bg-neutral-lighter">
      <td tabindex="-1" class="px-base py-sm uppercase">Suma</td>
      <td tabindex="-1" class="px-base py-sm text-right">325€</td>
      <td tabindex="-1" class="px-base py-sm text-right">275€</td>
    </tr>
  </tfoot>
</table>
<!-- /table-advanced -->

Ejemplo: "Tabla con orderby en columnas", de código Nunjucks, para maquetar el componente: "Table Advanced", versión: 12.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-advanced/_macro.table-advanced.njk" import componentTableAdvanced %}

{{ componentTableAdvanced({
  "idPrefix": "table-with-orderby",
  "head": [
    {
      "text": "Mes de pago",
      "orderBy": "none"
    },
    {
      "text": "Primer pago",
      "orderBy": "none",
      "classes": "text-right"
    },
    {
      "text": "Segundo pago",
      "orderBy": "none",
      "classes": "text-right"
    }
  ],
  "rows": [
    [
      {
        "text": "Enero"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "Febrero"
      },
      {
        "text": "75€",
        "classes": "text-right"
      },
      {
        "text": "55€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "Marzo"
      },
      {
        "text": "165€",
        "classes": "text-right"
      },
      {
        "text": "125€",
        "classes": "text-right"
      }
    ]
  ],
  "foot": [
    [
      {
        "text": "Suma",
        "classes": "uppercase"
      },
      {
        "text": "325€",
        "classes": "text-right"
      },
      {
        "text": "275€",
        "classes": "text-right"
      }
    ]
  ],
  "classes": "min-w-full"
}) }}
Mes de pago Pulsa para ordenar por esta columna Primer pago Pulsa para ordenar por esta columna Segundo pago Pulsa para ordenar por esta columna
Enero 85€ 95€
Febrero 75€ 55€
Marzo 165€ 125€
Suma 325€ 275€
Mostrar códigodel ejemplo: Tabla con orderby en columnas

Contenido

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

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

Tabla con head y filtros

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

Ejemplo: "Tabla con head y filtros", de código HTML, para maquetar el componente: "Table Advanced", versión: 12.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-advanced -->
<table class="c-table-advanced border-t-2 border-b-2 border-neutral-base min-w-full" data-module="c-table-advanced" role="grid">
  <thead>
    <tr class="border-t border-neutral-base divide-x divide-neutral-base">
      <th scope="col" id="table-with-head-and-filters-header-0" class="align-top px-base py-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark">
        <span class="inline-block relative">
          Mes de pago
        </span>
      </th>
      <th scope="col" id="table-with-head-and-filters-header-1" class="align-top px-base py-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark text-right">
        <span class="inline-block relative">
          Primer pago
        </span>
      </th>
      <th scope="col" id="table-with-head-and-filters-header-2" class="align-top px-base py-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark text-right">
        <span class="inline-block relative">
          Segundo pago
        </span>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr class="divide-x divide-neutral-base">
      <td tabindex="-1" class="align-top px-base pb-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark">
        <!-- searchbar -->
        <!-- label -->
        <label class="block sr-only sr-only" for="table-with-head-and-filters-header-filter-0">Filtrar en esta columna</label>
        <!-- /label -->
        <div class="relative">
          <input class="c-input block border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base pr-12 w-full c-input--sm" id="table-with-head-and-filters-header-filter-0" name="table-with-head-and-filters-header-filter-0" type="search" placeholder="Filtrar" aria-describedby="table-with-head-and-filters-header-0">
          <button type="submit" class="absolute top-0 right-0 m-sm p-0.5 text-primary-base hover:text-primary-dark focus:bg-warning-base focus:outline-none focus:shadow-outline-focus m-xs p-0.5 text-xs">
            <span class="sr-only">Buscar</span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1.375em" height="1.375em" aria-hidden="true">
              <path d="M23.498 23.487a1.713 1.713 0 000-2.421l-4.572-4.575a.43.43 0 01-.062-.539 10.283 10.283 0 10-2.911 2.911.43.43 0 01.539.055l4.574 4.574a1.712 1.712 0 002.433-.005zM3.451 10.289a6.85 6.85 0 116.85 6.85 6.85 6.85 0 01-6.85-6.85z" fill="currentColor" />
            </svg>
          </button>
        </div>
        <!-- /searchbar -->
      </td>
      <td tabindex="-1" class="align-top px-base pb-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark text-right">
        <!-- searchbar -->
        <!-- label -->
        <label class="block sr-only sr-only" for="table-with-head-and-filters-header-filter-1">Filtrar en esta columna</label>
        <!-- /label -->
        <div class="relative">
          <input class="c-input block border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base pr-12 w-full c-input--sm" id="table-with-head-and-filters-header-filter-1" name="table-with-head-and-filters-header-filter-1" type="search" placeholder="Filtrar" aria-describedby="table-with-head-and-filters-header-1">
          <button type="submit" class="absolute top-0 right-0 m-sm p-0.5 text-primary-base hover:text-primary-dark focus:bg-warning-base focus:outline-none focus:shadow-outline-focus m-xs p-0.5 text-xs">
            <span class="sr-only">Buscar</span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1.375em" height="1.375em" aria-hidden="true">
              <path d="M23.498 23.487a1.713 1.713 0 000-2.421l-4.572-4.575a.43.43 0 01-.062-.539 10.283 10.283 0 10-2.911 2.911.43.43 0 01.539.055l4.574 4.574a1.712 1.712 0 002.433-.005zM3.451 10.289a6.85 6.85 0 116.85 6.85 6.85 6.85 0 01-6.85-6.85z" fill="currentColor" />
            </svg>
          </button>
        </div>
        <!-- /searchbar -->
      </td>
      <td tabindex="-1" class="align-top px-base pb-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark text-right">
        <!-- searchbar -->
        <!-- label -->
        <label class="block sr-only sr-only" for="table-with-head-and-filters-header-filter-2">Filtrar en esta columna</label>
        <!-- /label -->
        <div class="relative">
          <input class="c-input block border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base pr-12 w-full c-input--sm" id="table-with-head-and-filters-header-filter-2" name="table-with-head-and-filters-header-filter-2" type="search" placeholder="Filtrar" aria-describedby="table-with-head-and-filters-header-2">
          <button type="submit" class="absolute top-0 right-0 m-sm p-0.5 text-primary-base hover:text-primary-dark focus:bg-warning-base focus:outline-none focus:shadow-outline-focus m-xs p-0.5 text-xs">
            <span class="sr-only">Buscar</span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1.375em" height="1.375em" aria-hidden="true">
              <path d="M23.498 23.487a1.713 1.713 0 000-2.421l-4.572-4.575a.43.43 0 01-.062-.539 10.283 10.283 0 10-2.911 2.911.43.43 0 01.539.055l4.574 4.574a1.712 1.712 0 002.433-.005zM3.451 10.289a6.85 6.85 0 116.85 6.85 6.85 6.85 0 01-6.85-6.85z" fill="currentColor" />
            </svg>
          </button>
        </div>
        <!-- /searchbar -->
      </td>
    </tr>
    <tr class="border-t border-b border-neutral-base hover:bg-neutral-lighter">
      <td tabindex="-1" class="px-base py-sm">Enero</td>
      <td tabindex="-1" class="px-base py-sm text-right">85€</td>
      <td tabindex="-1" class="px-base py-sm text-right">95€</td>
    </tr>
    <tr class="border-t border-b border-neutral-base hover:bg-neutral-lighter">
      <td tabindex="-1" class="px-base py-sm">Febrero</td>
      <td tabindex="-1" class="px-base py-sm text-right">75€</td>
      <td tabindex="-1" class="px-base py-sm text-right">55€</td>
    </tr>
    <tr class="border-t border-b border-neutral-base hover:bg-neutral-lighter">
      <td tabindex="-1" class="px-base py-sm">Marzo</td>
      <td tabindex="-1" class="px-base py-sm text-right">165€</td>
      <td tabindex="-1" class="px-base py-sm text-right">125€</td>
    </tr>
  </tbody>
  <tfoot>
  </tfoot>
</table>
<!-- /table-advanced -->

Ejemplo: "Tabla con head y filtros", de código Nunjucks, para maquetar el componente: "Table Advanced", versión: 12.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-advanced/_macro.table-advanced.njk" import componentTableAdvanced %}

{{ componentTableAdvanced({
  "idPrefix": "table-with-head-and-filters",
  "head": [
    {
      "text": "Mes de pago",
      "hasFilter": true
    },
    {
      "text": "Primer pago",
      "classes": "text-right",
      "hasFilter": true
    },
    {
      "text": "Segundo pago",
      "classes": "text-right",
      "hasFilter": true
    }
  ],
  "rows": [
    [
      {
        "text": "Enero"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "Febrero"
      },
      {
        "text": "75€",
        "classes": "text-right"
      },
      {
        "text": "55€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "Marzo"
      },
      {
        "text": "165€",
        "classes": "text-right"
      },
      {
        "text": "125€",
        "classes": "text-right"
      }
    ]
  ],
  "classes": "min-w-full"
}) }}
Mes de pago Primer pago Segundo pago
Enero 85€ 95€
Febrero 75€ 55€
Marzo 165€ 125€
Mostrar códigodel ejemplo: Tabla con head y filtros

Contenido

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

{{ componentTableAdvanced({
  "idPrefix": "table-with-head-and-filters",
  "head": [
    {
      "text": "Mes de pago",
      "hasFilter": true
    },
    {
      "text": "Primer pago",
      "classes": "text-right",
      "hasFilter": true
    },
    {
      "text": "Segundo pago",
      "classes": "text-right",
      "hasFilter": true
    }
  ],
  "rows": [
    [
      {
        "text": "Enero"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "Febrero"
      },
      {
        "text": "75€",
        "classes": "text-right"
      },
      {
        "text": "55€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "Marzo"
      },
      {
        "text": "165€",
        "classes": "text-right"
      },
      {
        "text": "125€",
        "classes": "text-right"
      }
    ]
  ],
  "classes": "min-w-full"
}) }}

Tabla con head y filtros con texto personalizado

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

Ejemplo: "Tabla con head y filtros con texto personalizado", de código HTML, para maquetar el componente: "Table Advanced", versión: 12.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-advanced -->
<table class="c-table-advanced border-t-2 border-b-2 border-neutral-base min-w-full" data-module="c-table-advanced" role="grid">
  <thead>
    <tr class="border-t border-neutral-base divide-x divide-neutral-base">
      <th scope="col" id="table-with-head-and-filters-personalized-header-0" class="align-top px-base py-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark">
        <span class="inline-block relative">
          Mes de pago
        </span>
      </th>
      <th scope="col" id="table-with-head-and-filters-personalized-header-1" class="align-top px-base py-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark text-right">
        <span class="inline-block relative">
          Primer pago
        </span>
      </th>
      <th scope="col" id="table-with-head-and-filters-personalized-header-2" class="align-top px-base py-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark text-right">
        <span class="inline-block relative">
          Segundo pago
        </span>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr class="divide-x divide-neutral-base">
      <td tabindex="-1" class="align-top px-base pb-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark">
        <!-- select -->
        <div class="c-form-group -mt-sm mb-0">
          <!-- label -->
          <label class="block sr-only" for="table-with-head-and-filters-personalized-header-select-0">Filtrar por mes</label>
          <!-- /label -->
          <select class="c-select block mt-sm transition duration-150 ease-in-out border-black rounded font-semibold focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base c-select--sm w-full" id="table-with-head-and-filters-personalized-header-select-0" name="table-with-head-and-filters-personalized-header-select-0" aria-describedby="table-with-head-and-filters-personalized-header-0">
            <option value="" selected disabled hidden>Selecciona mes...</option>
            <option value="1">Enero</option>
            <option value="2">Febrero</option>
            <option value="3">Marzo</option>
          </select>
        </div>
        <!-- /select -->
      </td>
      <td tabindex="-1" class="align-top px-base pb-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark text-right">
        <!-- searchbar -->
        <!-- label -->
        <label class="block sr-only sr-only" for="table-with-head-and-filters-personalized-header-filter-1">Filtrar por pago en esta columna</label>
        <!-- /label -->
        <div class="relative">
          <input class="c-input block border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base pr-12 w-full c-input--sm" id="table-with-head-and-filters-personalized-header-filter-1" name="table-with-head-and-filters-personalized-header-filter-1" type="search" placeholder="Filtrar por pago en esta columna" aria-describedby="table-with-head-and-filters-personalized-header-1">
          <button type="submit" class="absolute top-0 right-0 m-sm p-0.5 text-primary-base hover:text-primary-dark focus:bg-warning-base focus:outline-none focus:shadow-outline-focus m-xs p-0.5 text-xs">
            <span class="sr-only">Buscar</span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1.375em" height="1.375em" aria-hidden="true">
              <path d="M23.498 23.487a1.713 1.713 0 000-2.421l-4.572-4.575a.43.43 0 01-.062-.539 10.283 10.283 0 10-2.911 2.911.43.43 0 01.539.055l4.574 4.574a1.712 1.712 0 002.433-.005zM3.451 10.289a6.85 6.85 0 116.85 6.85 6.85 6.85 0 01-6.85-6.85z" fill="currentColor" />
            </svg>
          </button>
        </div>
        <!-- /searchbar -->
      </td>
      <td tabindex="-1" class="align-top px-base pb-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark text-right">
        <!-- searchbar -->
        <!-- label -->
        <label class="block sr-only sr-only" for="table-with-head-and-filters-personalized-header-filter-2">Filtrar por pago en esta columna</label>
        <!-- /label -->
        <div class="relative">
          <input class="c-input block border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base pr-12 w-full c-input--sm" id="table-with-head-and-filters-personalized-header-filter-2" name="table-with-head-and-filters-personalized-header-filter-2" type="search" placeholder="Filtrar por pago en esta columna" aria-describedby="table-with-head-and-filters-personalized-header-2">
          <button type="submit" class="absolute top-0 right-0 m-sm p-0.5 text-primary-base hover:text-primary-dark focus:bg-warning-base focus:outline-none focus:shadow-outline-focus m-xs p-0.5 text-xs">
            <span class="sr-only">Buscar</span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1.375em" height="1.375em" aria-hidden="true">
              <path d="M23.498 23.487a1.713 1.713 0 000-2.421l-4.572-4.575a.43.43 0 01-.062-.539 10.283 10.283 0 10-2.911 2.911.43.43 0 01.539.055l4.574 4.574a1.712 1.712 0 002.433-.005zM3.451 10.289a6.85 6.85 0 116.85 6.85 6.85 6.85 0 01-6.85-6.85z" fill="currentColor" />
            </svg>
          </button>
        </div>
        <!-- /searchbar -->
      </td>
    </tr>
    <tr class="border-t border-b border-neutral-base hover:bg-neutral-lighter">
      <td tabindex="-1" class="px-base py-sm">Enero</td>
      <td tabindex="-1" class="px-base py-sm text-right">85€</td>
      <td tabindex="-1" class="px-base py-sm text-right">95€</td>
    </tr>
    <tr class="border-t border-b border-neutral-base hover:bg-neutral-lighter">
      <td tabindex="-1" class="px-base py-sm">Febrero</td>
      <td tabindex="-1" class="px-base py-sm text-right">75€</td>
      <td tabindex="-1" class="px-base py-sm text-right">55€</td>
    </tr>
    <tr class="border-t border-b border-neutral-base hover:bg-neutral-lighter">
      <td tabindex="-1" class="px-base py-sm">Marzo</td>
      <td tabindex="-1" class="px-base py-sm text-right">165€</td>
      <td tabindex="-1" class="px-base py-sm text-right">125€</td>
    </tr>
  </tbody>
  <tfoot>
  </tfoot>
</table>
<!-- /table-advanced -->

Ejemplo: "Tabla con head y filtros con texto personalizado", de código Nunjucks, para maquetar el componente: "Table Advanced", versión: 12.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-advanced/_macro.table-advanced.njk" import componentTableAdvanced %}

{{ componentTableAdvanced({
  "idPrefix": "table-with-head-and-filters-personalized",
  "head": [
    {
      "text": "Mes de pago",
      "select": {
        "items": [
          {
            "value": "",
            "text": "Selecciona mes...",
            "disabled": true,
            "selected": true,
            "hidden": true
          },
          {
            "value": 1,
            "text": "Enero"
          },
          {
            "value": 2,
            "text": "Febrero"
          },
          {
            "value": 3,
            "text": "Marzo"
          }
        ]
      },
      "filterText": "Filtrar por mes"
    },
    {
      "text": "Primer pago",
      "classes": "text-right",
      "hasFilter": true,
      "filterText": "Filtrar por pago en esta columna"
    },
    {
      "text": "Segundo pago",
      "classes": "text-right",
      "hasFilter": true,
      "filterText": "Filtrar por pago en esta columna"
    }
  ],
  "rows": [
    [
      {
        "text": "Enero"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "Febrero"
      },
      {
        "text": "75€",
        "classes": "text-right"
      },
      {
        "text": "55€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "Marzo"
      },
      {
        "text": "165€",
        "classes": "text-right"
      },
      {
        "text": "125€",
        "classes": "text-right"
      }
    ]
  ],
  "classes": "min-w-full"
}) }}
Mes de pago Primer pago Segundo pago
Enero 85€ 95€
Febrero 75€ 55€
Marzo 165€ 125€
Mostrar códigodel ejemplo: Tabla con head y filtros con texto personalizado

Contenido

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

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

Tabla con head y selectores

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

Ejemplo: "Tabla con head y selectores", de código HTML, para maquetar el componente: "Table Advanced", versión: 12.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-advanced -->
<table class="c-table-advanced border-t-2 border-b-2 border-neutral-base min-w-full" data-module="c-table-advanced" role="grid">
  <thead>
    <tr class="border-t border-neutral-base divide-x divide-neutral-base">
      <th scope="col" id="table-with-head-and-selects-header-0" class="align-top px-base py-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark">
        <span class="inline-block relative">
          Mes de pago
        </span>
      </th>
      <th scope="col" id="table-with-head-and-selects-header-1" class="align-top px-base py-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark text-right">
        <span class="inline-block relative">
          Primer pago
        </span>
      </th>
      <th scope="col" id="table-with-head-and-selects-header-2" class="align-top px-base py-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark text-right">
        <span class="inline-block relative">
          Segundo pago
        </span>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr class="divide-x divide-neutral-base">
      <td tabindex="-1" class="align-top px-base pb-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark">
        <!-- select -->
        <div class="c-form-group -mt-sm mb-0">
          <!-- label -->
          <label class="block sr-only" for="table-with-head-and-selects-header-select-0">Filtrar en esta columna</label>
          <!-- /label -->
          <select class="c-select block mt-sm transition duration-150 ease-in-out border-black rounded font-semibold focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base c-select--sm w-full" id="table-with-head-and-selects-header-select-0" name="table-with-head-and-selects-header-select-0" aria-describedby="table-with-head-and-selects-header-0">
            <option value="" selected disabled hidden>Filtrar por...</option>
            <option value="1">Opción 1</option>
            <option value="2">Opción 2</option>
            <option value="3">Opción 3</option>
          </select>
        </div>
        <!-- /select -->
      </td>
      <td tabindex="-1" class="align-top px-base pb-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark text-right">
        <!-- select -->
        <div class="c-form-group -mt-sm mb-0">
          <!-- label -->
          <label class="block sr-only" for="table-with-head-and-selects-header-select-1">Filtrar en esta columna</label>
          <!-- /label -->
          <select class="c-select block mt-sm transition duration-150 ease-in-out border-black rounded font-semibold focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base c-select--sm w-full" id="table-with-head-and-selects-header-select-1" name="table-with-head-and-selects-header-select-1" aria-describedby="table-with-head-and-selects-header-1">
            <option value="" selected disabled hidden>Filtrar por...</option>
            <option value="1">Opción 1</option>
            <option value="2">Opción 2</option>
            <option value="3">Opción 3</option>
          </select>
        </div>
        <!-- /select -->
      </td>
      <td tabindex="-1" class="align-top px-base pb-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark text-right">
        <!-- select -->
        <div class="c-form-group -mt-sm mb-0">
          <!-- label -->
          <label class="block sr-only" for="table-with-head-and-selects-header-select-2">Filtrar en esta columna</label>
          <!-- /label -->
          <select class="c-select block mt-sm transition duration-150 ease-in-out border-black rounded font-semibold focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base c-select--sm w-full" id="table-with-head-and-selects-header-select-2" name="table-with-head-and-selects-header-select-2" aria-describedby="table-with-head-and-selects-header-2">
            <option value="" selected disabled hidden>Filtrar por...</option>
            <option value="1">Opción 1</option>
            <option value="2">Opción 2</option>
            <option value="3">Opción 3</option>
          </select>
        </div>
        <!-- /select -->
      </td>
    </tr>
    <tr class="border-t border-b border-neutral-base hover:bg-neutral-lighter">
      <td tabindex="-1" class="px-base py-sm">Enero</td>
      <td tabindex="-1" class="px-base py-sm text-right">85€</td>
      <td tabindex="-1" class="px-base py-sm text-right">95€</td>
    </tr>
    <tr class="border-t border-b border-neutral-base hover:bg-neutral-lighter">
      <td tabindex="-1" class="px-base py-sm">Febrero</td>
      <td tabindex="-1" class="px-base py-sm text-right">75€</td>
      <td tabindex="-1" class="px-base py-sm text-right">55€</td>
    </tr>
    <tr class="border-t border-b border-neutral-base hover:bg-neutral-lighter">
      <td tabindex="-1" class="px-base py-sm">Marzo</td>
      <td tabindex="-1" class="px-base py-sm text-right">165€</td>
      <td tabindex="-1" class="px-base py-sm text-right">125€</td>
    </tr>
  </tbody>
  <tfoot>
  </tfoot>
</table>
<!-- /table-advanced -->

Ejemplo: "Tabla con head y selectores", de código Nunjucks, para maquetar el componente: "Table Advanced", versión: 12.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-advanced/_macro.table-advanced.njk" import componentTableAdvanced %}

{{ componentTableAdvanced({
  "idPrefix": "table-with-head-and-selects",
  "head": [
    {
      "text": "Mes de pago",
      "select": {
        "items": [
          {
            "value": "",
            "text": "Filtrar por...",
            "disabled": true,
            "selected": true,
            "hidden": true
          },
          {
            "value": 1,
            "text": "Opción 1"
          },
          {
            "value": 2,
            "text": "Opción 2"
          },
          {
            "value": 3,
            "text": "Opción 3"
          }
        ]
      }
    },
    {
      "text": "Primer pago",
      "classes": "text-right",
      "select": {
        "items": [
          {
            "value": "",
            "text": "Filtrar por...",
            "disabled": true,
            "selected": true,
            "hidden": true
          },
          {
            "value": 1,
            "text": "Opción 1"
          },
          {
            "value": 2,
            "text": "Opción 2"
          },
          {
            "value": 3,
            "text": "Opción 3"
          }
        ]
      }
    },
    {
      "text": "Segundo pago",
      "classes": "text-right",
      "select": {
        "items": [
          {
            "value": "",
            "text": "Filtrar por...",
            "disabled": true,
            "selected": true,
            "hidden": true
          },
          {
            "value": 1,
            "text": "Opción 1"
          },
          {
            "value": 2,
            "text": "Opción 2"
          },
          {
            "value": 3,
            "text": "Opción 3"
          }
        ]
      }
    }
  ],
  "rows": [
    [
      {
        "text": "Enero"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "Febrero"
      },
      {
        "text": "75€",
        "classes": "text-right"
      },
      {
        "text": "55€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "Marzo"
      },
      {
        "text": "165€",
        "classes": "text-right"
      },
      {
        "text": "125€",
        "classes": "text-right"
      }
    ]
  ],
  "classes": "min-w-full"
}) }}
Mes de pago Primer pago Segundo pago
Enero 85€ 95€
Febrero 75€ 55€
Marzo 165€ 125€
Mostrar códigodel ejemplo: Tabla con head y selectores

Contenido

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

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

Tabla con checkboxes

Ejemplo: "Tabla con checkboxes", de código HTML, para maquetar el componente: "Table Advanced", versión: 12.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-advanced -->
<table class="c-table-advanced border-t-2 border-b-2 border-neutral-base min-w-full" data-module="c-table-advanced" role="grid">
  <thead>
    <tr class="border-t border-neutral-base divide-x divide-neutral-base">
      <th scope="col" class="align-top px-base py-xs">
        <span class="sr-only">Seleccionar fila</span>
      </th>
      <th scope="col" id="table-with-checkboxes-header-0" class="align-top px-base py-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark">
        <span class="inline-block relative">
          Mes de pago
        </span>
      </th>
      <th scope="col" id="table-with-checkboxes-header-1" class="align-top px-base py-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark text-right">
        <span class="inline-block relative">
          Primer pago
        </span>
      </th>
      <th scope="col" id="table-with-checkboxes-header-2" class="align-top px-base py-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark text-right">
        <span class="inline-block relative">
          Segundo pago
        </span>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr class="border-t border-b border-neutral-base hover:bg-neutral-lighter">
      <td class="px-base py-sm" tabindex="-1">
        <div class="c-checkboxes c-checkboxes--sm">
          <div>
            <div class="relative flex items-start">
              <div class="flex items-center mx-sm">
                <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base text-primary-base" id="table-with-checkboxes-checkbox-0" name="table-with-checkboxes-checkbox-0" type="checkbox" value="table-checkbox">
              </div>
              <div class="pt-0.5 leading-5">
                <label class="sr-only block text-sm -mt-1" for="table-with-checkboxes-checkbox-0">Selecciona fila 2</label>
              </div>
            </div>
          </div>
        </div>
      </td>
      <td tabindex="-1" class="px-base py-sm">Enero</td>
      <td tabindex="-1" class="px-base py-sm text-right">85€</td>
      <td tabindex="-1" class="px-base py-sm text-right">95€</td>
    </tr>
    <tr class="border-t border-b border-neutral-base hover:bg-neutral-lighter">
      <td class="px-base py-sm" tabindex="-1">
        <div class="c-checkboxes c-checkboxes--sm">
          <div>
            <div class="relative flex items-start">
              <div class="flex items-center mx-sm">
                <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base text-primary-base" id="table-with-checkboxes-checkbox-1" name="table-with-checkboxes-checkbox-1" type="checkbox" value="table-checkbox">
              </div>
              <div class="pt-0.5 leading-5">
                <label class="sr-only block text-sm -mt-1" for="table-with-checkboxes-checkbox-1">Selecciona fila 3</label>
              </div>
            </div>
          </div>
        </div>
      </td>
      <td tabindex="-1" class="px-base py-sm">Febrero</td>
      <td tabindex="-1" class="px-base py-sm text-right">75€</td>
      <td tabindex="-1" class="px-base py-sm text-right">55€</td>
    </tr>
    <tr class="border-t border-b border-neutral-base hover:bg-neutral-lighter">
      <td class="px-base py-sm" tabindex="-1">
        <div class="c-checkboxes c-checkboxes--sm">
          <div>
            <div class="relative flex items-start">
              <div class="flex items-center mx-sm">
                <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base text-primary-base" id="table-with-checkboxes-checkbox-2" name="table-with-checkboxes-checkbox-2" type="checkbox" value="table-checkbox">
              </div>
              <div class="pt-0.5 leading-5">
                <label class="sr-only block text-sm -mt-1" for="table-with-checkboxes-checkbox-2">Selecciona fila 4</label>
              </div>
            </div>
          </div>
        </div>
      </td>
      <td tabindex="-1" class="px-base py-sm">Marzo</td>
      <td tabindex="-1" class="px-base py-sm text-right">165€</td>
      <td tabindex="-1" class="px-base py-sm text-right">125€</td>
    </tr>
  </tbody>
  <tfoot>
  </tfoot>
</table>
<!-- /table-advanced -->

Ejemplo: "Tabla con checkboxes", de código Nunjucks, para maquetar el componente: "Table Advanced", versión: 12.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-advanced/_macro.table-advanced.njk" import componentTableAdvanced %}

{{ componentTableAdvanced({
  "idPrefix": "table-with-checkboxes",
  "hasCheckboxes": true,
  "head": [
    {
      "text": "Mes de pago"
    },
    {
      "text": "Primer pago",
      "classes": "text-right"
    },
    {
      "text": "Segundo pago",
      "classes": "text-right"
    }
  ],
  "rows": [
    [
      {
        "text": "Enero"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "Febrero"
      },
      {
        "text": "75€",
        "classes": "text-right"
      },
      {
        "text": "55€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "Marzo"
      },
      {
        "text": "165€",
        "classes": "text-right"
      },
      {
        "text": "125€",
        "classes": "text-right"
      }
    ]
  ],
  "classes": "min-w-full"
}) }}
Seleccionar fila Mes de pago Primer pago Segundo pago
Enero 85€ 95€
Febrero 75€ 55€
Marzo 165€ 125€
Mostrar códigodel ejemplo: Tabla con checkboxes

Contenido

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

{{ componentTableAdvanced({
  "idPrefix": "table-with-checkboxes",
  "hasCheckboxes": true,
  "head": [
    {
      "text": "Mes de pago"
    },
    {
      "text": "Primer pago",
      "classes": "text-right"
    },
    {
      "text": "Segundo pago",
      "classes": "text-right"
    }
  ],
  "rows": [
    [
      {
        "text": "Enero"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "Febrero"
      },
      {
        "text": "75€",
        "classes": "text-right"
      },
      {
        "text": "55€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "Marzo"
      },
      {
        "text": "165€",
        "classes": "text-right"
      },
      {
        "text": "125€",
        "classes": "text-right"
      }
    ]
  ],
  "classes": "min-w-full"
}) }}

Tabla con todo

Con orderBy, hasCheckboxes, hasFilter, selectores y firstCellIsHeader

Ejemplo: "Tabla con todo", de código HTML, para maquetar el componente: "Table Advanced", versión: 12.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-advanced -->
<table class="c-table-advanced border-t-2 border-b-2 border-neutral-base min-w-full" data-module="c-table-advanced" role="grid">
  <thead>
    <tr class="border-t border-neutral-base divide-x divide-neutral-base">
      <th scope="col" class="align-top px-base py-xs">
        <span class="sr-only">Seleccionar fila</span>
      </th>
      <th scope="col" id="table-with-all-header-0" class="align-top px-base py-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark">
        <span class="inline-block relative">
          Número de fila
        </span>
      </th>
      <th aria-sort="none" scope="col" id="table-with-all-header-1" class="align-top px-base py-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark">
        <span class="inline-block relative" tabindex="-1" role="button">
          Mes de pago
          <span class="c-table-advanced__order">
            <span class="sr-only">Pulsa para ordenar por esta columna</span>
            <span class="c-table-advanced__ascending">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" aria-hidden="true" width="1em" height="1em">
                <path d="M112.07 37.93l-35-35a10 10 0 00-14.14 0l-35 35a10 10 0 0014.14 14.14l13.66-13.66A2.5 2.5 0 0160 40.18V130a10 10 0 0020 0V40.18a2.5 2.5 0 014.27-1.77l13.66 13.66a10 10 0 0014.14-14.14z" fill="currentColor" />
              </svg>
            </span>
            <span class="c-table-advanced__descending">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" aria-hidden="true" width="1em" height="1em">
                <path d="M27.93 102.07l35 35a10 10 0 0014.14 0l35-35a10 10 0 00-14.14-14.14l-13.66 13.66A2.5 2.5 0 0180 99.82V10a10 10 0 00-20 0v89.82a2.5 2.5 0 01-4.27 1.77L42.07 87.93a10 10 0 00-14.14 14.14z" fill="currentColor" />
              </svg>
            </span>
            <span class="c-table-advanced__none">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="text-neutral-dark" aria-hidden="true" width="1em" height="1em">
                <path d="M94.7 97.2l-17.2 17.19V25.61L94.7 42.8a7.5 7.5 0 0010.6-10.6l-30-30a7.49 7.49 0 00-10.6 0l-30 30a7.5 7.5 0 0010.6 10.6l17.2-17.19v88.78L45.3 97.2a7.5 7.5 0 10-10.6 10.6l30 30a7.48 7.48 0 0010.6 0l30-30a7.5 7.5 0 00-10.6-10.6z" fill="currentColor" />
              </svg>
            </span>
          </span>
        </span>
      </th>
      <th aria-sort="none" scope="col" id="table-with-all-header-2" class="align-top px-base py-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark text-right">
        <span class="inline-block relative" tabindex="-1" role="button">
          Primer pago
          <span class="c-table-advanced__order">
            <span class="sr-only">Pulsa para ordenar por esta columna</span>
            <span class="c-table-advanced__ascending">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" aria-hidden="true" width="1em" height="1em">
                <path d="M112.07 37.93l-35-35a10 10 0 00-14.14 0l-35 35a10 10 0 0014.14 14.14l13.66-13.66A2.5 2.5 0 0160 40.18V130a10 10 0 0020 0V40.18a2.5 2.5 0 014.27-1.77l13.66 13.66a10 10 0 0014.14-14.14z" fill="currentColor" />
              </svg>
            </span>
            <span class="c-table-advanced__descending">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" aria-hidden="true" width="1em" height="1em">
                <path d="M27.93 102.07l35 35a10 10 0 0014.14 0l35-35a10 10 0 00-14.14-14.14l-13.66 13.66A2.5 2.5 0 0180 99.82V10a10 10 0 00-20 0v89.82a2.5 2.5 0 01-4.27 1.77L42.07 87.93a10 10 0 00-14.14 14.14z" fill="currentColor" />
              </svg>
            </span>
            <span class="c-table-advanced__none">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="text-neutral-dark" aria-hidden="true" width="1em" height="1em">
                <path d="M94.7 97.2l-17.2 17.19V25.61L94.7 42.8a7.5 7.5 0 0010.6-10.6l-30-30a7.49 7.49 0 00-10.6 0l-30 30a7.5 7.5 0 0010.6 10.6l17.2-17.19v88.78L45.3 97.2a7.5 7.5 0 10-10.6 10.6l30 30a7.48 7.48 0 0010.6 0l30-30a7.5 7.5 0 00-10.6-10.6z" fill="currentColor" />
              </svg>
            </span>
          </span>
        </span>
      </th>
      <th aria-sort="none" scope="col" id="table-with-all-header-3" class="align-top px-base py-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark text-right">
        <span class="inline-block relative" tabindex="-1" role="button">
          Segundo pago
          <span class="c-table-advanced__order">
            <span class="sr-only">Pulsa para ordenar por esta columna</span>
            <span class="c-table-advanced__ascending">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" aria-hidden="true" width="1em" height="1em">
                <path d="M112.07 37.93l-35-35a10 10 0 00-14.14 0l-35 35a10 10 0 0014.14 14.14l13.66-13.66A2.5 2.5 0 0160 40.18V130a10 10 0 0020 0V40.18a2.5 2.5 0 014.27-1.77l13.66 13.66a10 10 0 0014.14-14.14z" fill="currentColor" />
              </svg>
            </span>
            <span class="c-table-advanced__descending">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" aria-hidden="true" width="1em" height="1em">
                <path d="M27.93 102.07l35 35a10 10 0 0014.14 0l35-35a10 10 0 00-14.14-14.14l-13.66 13.66A2.5 2.5 0 0180 99.82V10a10 10 0 00-20 0v89.82a2.5 2.5 0 01-4.27 1.77L42.07 87.93a10 10 0 00-14.14 14.14z" fill="currentColor" />
              </svg>
            </span>
            <span class="c-table-advanced__none">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="text-neutral-dark" aria-hidden="true" width="1em" height="1em">
                <path d="M94.7 97.2l-17.2 17.19V25.61L94.7 42.8a7.5 7.5 0 0010.6-10.6l-30-30a7.49 7.49 0 00-10.6 0l-30 30a7.5 7.5 0 0010.6 10.6l17.2-17.19v88.78L45.3 97.2a7.5 7.5 0 10-10.6 10.6l30 30a7.48 7.48 0 0010.6 0l30-30a7.5 7.5 0 00-10.6-10.6z" fill="currentColor" />
              </svg>
            </span>
          </span>
        </span>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr class="divide-x divide-neutral-base">
      <td></td>
      <td tabindex="-1" class="align-top px-base pb-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark">
      </td>
      <td tabindex="-1" class="align-top px-base pb-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark">
        <!-- searchbar -->
        <!-- label -->
        <label class="block sr-only sr-only" for="table-with-all-header-filter-1">Filtrar en esta columna</label>
        <!-- /label -->
        <div class="relative">
          <input class="c-input block border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base pr-12 w-full c-input--sm" id="table-with-all-header-filter-1" name="table-with-all-header-filter-1" type="search" placeholder="Filtrar" aria-describedby="table-with-all-header-1">
          <button type="submit" class="absolute top-0 right-0 m-sm p-0.5 text-primary-base hover:text-primary-dark focus:bg-warning-base focus:outline-none focus:shadow-outline-focus m-xs p-0.5 text-xs">
            <span class="sr-only">Buscar</span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1.375em" height="1.375em" aria-hidden="true">
              <path d="M23.498 23.487a1.713 1.713 0 000-2.421l-4.572-4.575a.43.43 0 01-.062-.539 10.283 10.283 0 10-2.911 2.911.43.43 0 01.539.055l4.574 4.574a1.712 1.712 0 002.433-.005zM3.451 10.289a6.85 6.85 0 116.85 6.85 6.85 6.85 0 01-6.85-6.85z" fill="currentColor" />
            </svg>
          </button>
        </div>
        <!-- /searchbar -->
      </td>
      <td tabindex="-1" class="align-top px-base pb-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark text-right">
        <!-- select -->
        <div class="c-form-group -mt-sm mb-0">
          <!-- label -->
          <label class="block sr-only" for="table-with-all-header-select-2">Filtrar en esta columna</label>
          <!-- /label -->
          <select class="c-select block mt-sm transition duration-150 ease-in-out border-black rounded font-semibold focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base c-select--sm w-full" id="table-with-all-header-select-2" name="table-with-all-header-select-2" aria-describedby="table-with-all-header-2">
            <option value="" selected disabled hidden>Filtrar por...</option>
            <option value="1">Opción 1</option>
            <option value="2">Opción 2</option>
            <option value="3">Opción 3</option>
          </select>
        </div>
        <!-- /select -->
      </td>
      <td tabindex="-1" class="align-top px-base pb-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark text-right">
        <!-- select -->
        <div class="c-form-group -mt-sm mb-0">
          <!-- label -->
          <label class="block sr-only" for="table-with-all-header-select-3">Filtrar en esta columna</label>
          <!-- /label -->
          <select class="c-select block mt-sm transition duration-150 ease-in-out border-black rounded font-semibold focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base c-select--sm w-full" id="table-with-all-header-select-3" name="table-with-all-header-select-3" aria-describedby="table-with-all-header-3">
            <option value="" selected disabled hidden>Filtrar por...</option>
            <option value="1">Opción 1</option>
            <option value="2">Opción 2</option>
            <option value="3">Opción 3</option>
          </select>
        </div>
        <!-- /select -->
        <div class="pb-sm"></div>
        <!-- searchbar -->
        <!-- label -->
        <label class="block sr-only sr-only" for="table-with-all-header-filter-3">Filtrar en esta columna</label>
        <!-- /label -->
        <div class="relative">
          <input class="c-input block border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base pr-12 w-full c-input--sm" id="table-with-all-header-filter-3" name="table-with-all-header-filter-3" type="search" placeholder="Filtrar" aria-describedby="table-with-all-header-3">
          <button type="submit" class="absolute top-0 right-0 m-sm p-0.5 text-primary-base hover:text-primary-dark focus:bg-warning-base focus:outline-none focus:shadow-outline-focus m-xs p-0.5 text-xs">
            <span class="sr-only">Buscar</span>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1.375em" height="1.375em" aria-hidden="true">
              <path d="M23.498 23.487a1.713 1.713 0 000-2.421l-4.572-4.575a.43.43 0 01-.062-.539 10.283 10.283 0 10-2.911 2.911.43.43 0 01.539.055l4.574 4.574a1.712 1.712 0 002.433-.005zM3.451 10.289a6.85 6.85 0 116.85 6.85 6.85 6.85 0 01-6.85-6.85z" fill="currentColor" />
            </svg>
          </button>
        </div>
        <!-- /searchbar -->
      </td>
    </tr>
    <tr class="border-t border-b border-neutral-base hover:bg-neutral-lighter">
      <td class="px-base py-sm" tabindex="-1">
        <div class="c-checkboxes c-checkboxes--sm">
          <div>
            <div class="relative flex items-start">
              <div class="flex items-center mx-sm">
                <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base text-primary-base" id="table-with-all-checkbox-0" name="table-with-all-checkbox-0" type="checkbox" value="table-checkbox">
              </div>
              <div class="pt-0.5 leading-5">
                <label class="sr-only block text-sm -mt-1" for="table-with-all-checkbox-0">Selecciona fila 2</label>
              </div>
            </div>
          </div>
        </div>
      </td>
      <th scope="row" class="px-base py-xs border-neutral-base border-b-0 border-r text-left font-normal text-sm text-neutral-dark">Primera fila</th>
      <td tabindex="-1" class="px-base py-sm">Enero</td>
      <td tabindex="-1" class="px-base py-sm text-right">85€</td>
      <td tabindex="-1" class="px-base py-sm text-right">95€</td>
    </tr>
    <tr class="border-t border-b border-neutral-base hover:bg-neutral-lighter">
      <td class="px-base py-sm" tabindex="-1">
        <div class="c-checkboxes c-checkboxes--sm">
          <div>
            <div class="relative flex items-start">
              <div class="flex items-center mx-sm">
                <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base text-primary-base" id="table-with-all-checkbox-1" name="table-with-all-checkbox-1" type="checkbox" value="table-checkbox">
              </div>
              <div class="pt-0.5 leading-5">
                <label class="sr-only block text-sm -mt-1" for="table-with-all-checkbox-1">Selecciona fila 3</label>
              </div>
            </div>
          </div>
        </div>
      </td>
      <th scope="row" class="px-base py-xs border-neutral-base border-b-0 border-r text-left font-normal text-sm text-neutral-dark">Segunda fila</th>
      <td tabindex="-1" class="px-base py-sm">Febrero</td>
      <td tabindex="-1" class="px-base py-sm text-right">75€</td>
      <td tabindex="-1" class="px-base py-sm text-right">55€</td>
    </tr>
    <tr class="border-t border-b border-neutral-base hover:bg-neutral-lighter">
      <td class="px-base py-sm" tabindex="-1">
        <div class="c-checkboxes c-checkboxes--sm">
          <div>
            <div class="relative flex items-start">
              <div class="flex items-center mx-sm">
                <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base text-primary-base" id="table-with-all-checkbox-2" name="table-with-all-checkbox-2" type="checkbox" value="table-checkbox">
              </div>
              <div class="pt-0.5 leading-5">
                <label class="sr-only block text-sm -mt-1" for="table-with-all-checkbox-2">Selecciona fila 4</label>
              </div>
            </div>
          </div>
        </div>
      </td>
      <th scope="row" class="px-base py-xs border-neutral-base border-b-0 border-r text-left font-normal text-sm text-neutral-dark">Tercera fila</th>
      <td tabindex="-1" class="px-base py-sm">Marzo</td>
      <td tabindex="-1" class="px-base py-sm text-right">165€</td>
      <td tabindex="-1" class="px-base py-sm text-right">125€</td>
    </tr>
  </tbody>
  <tfoot>
    <tr class="border-t-2 border-b border-neutral-base hover:bg-neutral-lighter">
      <td class="px-base py-sm" tabindex="-1">
        <div class="c-checkboxes c-checkboxes--sm">
          <div>
            <div class="relative flex items-start">
              <div class="flex items-center mx-sm">
                <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base text-primary-base" id="table-with-all-tfoot-checkbox-0" name="table-with-all-tfoot-checkbox-0" type="checkbox" value="table-checkbox">
              </div>
              <div class="pt-0.5 leading-5">
                <label class="sr-only block text-sm -mt-1" for="table-with-all-tfoot-checkbox-0">Selecciona fila 2</label>
              </div>
            </div>
          </div>
        </div>
      </td>
      <th scope="row" class="px-base py-xs border-neutral-base border-b-0 border-r text-left font-normal text-sm text-neutral-dark uppercase">Suma</th>
      <td tabindex="-1" class="px-base py-sm"></td>
      <td tabindex="-1" class="px-base py-sm text-right">325€</td>
      <td tabindex="-1" class="px-base py-sm text-right">275€</td>
    </tr>
  </tfoot>
</table>
<!-- /table-advanced -->

Ejemplo: "Tabla con todo", de código Nunjucks, para maquetar el componente: "Table Advanced", versión: 12.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-advanced/_macro.table-advanced.njk" import componentTableAdvanced %}

{{ componentTableAdvanced({
  "idPrefix": "table-with-all",
  "hasCheckboxes": true,
  "firstCellIsHeader": true,
  "head": [
    {
      "text": "Número de fila"
    },
    {
      "text": "Mes de pago",
      "orderBy": "none",
      "hasFilter": true
    },
    {
      "text": "Primer pago",
      "orderBy": "none",
      "classes": "text-right",
      "select": {
        "items": [
          {
            "value": "",
            "text": "Filtrar por...",
            "disabled": true,
            "selected": true,
            "hidden": true
          },
          {
            "value": 1,
            "text": "Opción 1"
          },
          {
            "value": 2,
            "text": "Opción 2"
          },
          {
            "value": 3,
            "text": "Opción 3"
          }
        ]
      }
    },
    {
      "text": "Segundo pago",
      "orderBy": "none",
      "classes": "text-right",
      "hasFilter": true,
      "select": {
        "items": [
          {
            "value": "",
            "text": "Filtrar por...",
            "disabled": true,
            "selected": true,
            "hidden": true
          },
          {
            "value": 1,
            "text": "Opción 1"
          },
          {
            "value": 2,
            "text": "Opción 2"
          },
          {
            "value": 3,
            "text": "Opción 3"
          }
        ]
      }
    }
  ],
  "rows": [
    [
      {
        "text": "Primera fila"
      },
      {
        "text": "Enero"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "Segunda fila"
      },
      {
        "text": "Febrero"
      },
      {
        "text": "75€",
        "classes": "text-right"
      },
      {
        "text": "55€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "Tercera fila"
      },
      {
        "text": "Marzo"
      },
      {
        "text": "165€",
        "classes": "text-right"
      },
      {
        "text": "125€",
        "classes": "text-right"
      }
    ]
  ],
  "foot": [
    [
      {
        "text": "Suma",
        "classes": "uppercase"
      },
      {
        "text": ""
      },
      {
        "text": "325€",
        "classes": "text-right"
      },
      {
        "text": "275€",
        "classes": "text-right"
      }
    ]
  ],
  "classes": "min-w-full"
}) }}
Seleccionar fila Número de fila Mes de pago Pulsa para ordenar por esta columna Primer pago Pulsa para ordenar por esta columna Segundo pago Pulsa para ordenar por esta columna
Primera fila Enero 85€ 95€
Segunda fila Febrero 75€ 55€
Tercera fila Marzo 165€ 125€
Suma 325€ 275€
Mostrar códigodel ejemplo: Tabla con todo

Contenido

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

{{ componentTableAdvanced({
  "idPrefix": "table-with-all",
  "hasCheckboxes": true,
  "firstCellIsHeader": true,
  "head": [
    {
      "text": "Número de fila"
    },
    {
      "text": "Mes de pago",
      "orderBy": "none",
      "hasFilter": true
    },
    {
      "text": "Primer pago",
      "orderBy": "none",
      "classes": "text-right",
      "select": {
        "items": [
          {
            "value": "",
            "text": "Filtrar por...",
            "disabled": true,
            "selected": true,
            "hidden": true
          },
          {
            "value": 1,
            "text": "Opción 1"
          },
          {
            "value": 2,
            "text": "Opción 2"
          },
          {
            "value": 3,
            "text": "Opción 3"
          }
        ]
      }
    },
    {
      "text": "Segundo pago",
      "orderBy": "none",
      "classes": "text-right",
      "hasFilter": true,
      "select": {
        "items": [
          {
            "value": "",
            "text": "Filtrar por...",
            "disabled": true,
            "selected": true,
            "hidden": true
          },
          {
            "value": 1,
            "text": "Opción 1"
          },
          {
            "value": 2,
            "text": "Opción 2"
          },
          {
            "value": 3,
            "text": "Opción 3"
          }
        ]
      }
    }
  ],
  "rows": [
    [
      {
        "text": "Primera fila"
      },
      {
        "text": "Enero"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "Segunda fila"
      },
      {
        "text": "Febrero"
      },
      {
        "text": "75€",
        "classes": "text-right"
      },
      {
        "text": "55€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "Tercera fila"
      },
      {
        "text": "Marzo"
      },
      {
        "text": "165€",
        "classes": "text-right"
      },
      {
        "text": "125€",
        "classes": "text-right"
      }
    ]
  ],
  "foot": [
    [
      {
        "text": "Suma",
        "classes": "uppercase"
      },
      {
        "text": ""
      },
      {
        "text": "325€",
        "classes": "text-right"
      },
      {
        "text": "275€",
        "classes": "text-right"
      }
    ]
  ],
  "classes": "min-w-full"
}) }}

Tabla con columnas sticky

Con orderBy, hasCheckboxes, hasFilter y firstCellIsHeader

Ejemplo: "Tabla con columnas sticky", de código HTML, para maquetar el componente: "Table Advanced", versión: 12.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-advanced -->
<div class="overflow-x-auto pb-base">
  <table class="c-table-advanced border-t-2 border-b-2 border-neutral-base relative whitespace-nowrap min-w-full" data-module="c-table-advanced" role="grid">
    <thead>
      <tr class="border-t border-neutral-base divide-x divide-neutral-base">
        <th scope="col" class="align-top px-base py-xs sticky left-0 z-10 w-0 bg-white">
          <span class="sr-only">Seleccionar fila</span>
        </th>
        <th scope="col" id="table-with-sticky-columns-header-0" class="align-top px-base py-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark sticky left-16 z-10 w-60 bg-white">
          <span class="inline-block relative">
            Número de fila
          </span>
        </th>
        <th aria-sort="none" scope="col" id="table-with-sticky-columns-header-1" class="align-top px-base py-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark">
          <span class="inline-block relative" tabindex="-1" role="button">
            Mes de pago
            <span class="c-table-advanced__order">
              <span class="sr-only">Pulsa para ordenar por esta columna</span>
              <span class="c-table-advanced__ascending">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" aria-hidden="true" width="1em" height="1em">
                  <path d="M112.07 37.93l-35-35a10 10 0 00-14.14 0l-35 35a10 10 0 0014.14 14.14l13.66-13.66A2.5 2.5 0 0160 40.18V130a10 10 0 0020 0V40.18a2.5 2.5 0 014.27-1.77l13.66 13.66a10 10 0 0014.14-14.14z" fill="currentColor" />
                </svg>
              </span>
              <span class="c-table-advanced__descending">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" aria-hidden="true" width="1em" height="1em">
                  <path d="M27.93 102.07l35 35a10 10 0 0014.14 0l35-35a10 10 0 00-14.14-14.14l-13.66 13.66A2.5 2.5 0 0180 99.82V10a10 10 0 00-20 0v89.82a2.5 2.5 0 01-4.27 1.77L42.07 87.93a10 10 0 00-14.14 14.14z" fill="currentColor" />
                </svg>
              </span>
              <span class="c-table-advanced__none">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="text-neutral-dark" aria-hidden="true" width="1em" height="1em">
                  <path d="M94.7 97.2l-17.2 17.19V25.61L94.7 42.8a7.5 7.5 0 0010.6-10.6l-30-30a7.49 7.49 0 00-10.6 0l-30 30a7.5 7.5 0 0010.6 10.6l17.2-17.19v88.78L45.3 97.2a7.5 7.5 0 10-10.6 10.6l30 30a7.48 7.48 0 0010.6 0l30-30a7.5 7.5 0 00-10.6-10.6z" fill="currentColor" />
                </svg>
              </span>
            </span>
          </span>
        </th>
        <th aria-sort="none" scope="col" id="table-with-sticky-columns-header-2" class="align-top px-base py-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark text-right">
          <span class="inline-block relative" tabindex="-1" role="button">
            Primer pago
            <span class="c-table-advanced__order">
              <span class="sr-only">Pulsa para ordenar por esta columna</span>
              <span class="c-table-advanced__ascending">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" aria-hidden="true" width="1em" height="1em">
                  <path d="M112.07 37.93l-35-35a10 10 0 00-14.14 0l-35 35a10 10 0 0014.14 14.14l13.66-13.66A2.5 2.5 0 0160 40.18V130a10 10 0 0020 0V40.18a2.5 2.5 0 014.27-1.77l13.66 13.66a10 10 0 0014.14-14.14z" fill="currentColor" />
                </svg>
              </span>
              <span class="c-table-advanced__descending">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" aria-hidden="true" width="1em" height="1em">
                  <path d="M27.93 102.07l35 35a10 10 0 0014.14 0l35-35a10 10 0 00-14.14-14.14l-13.66 13.66A2.5 2.5 0 0180 99.82V10a10 10 0 00-20 0v89.82a2.5 2.5 0 01-4.27 1.77L42.07 87.93a10 10 0 00-14.14 14.14z" fill="currentColor" />
                </svg>
              </span>
              <span class="c-table-advanced__none">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="text-neutral-dark" aria-hidden="true" width="1em" height="1em">
                  <path d="M94.7 97.2l-17.2 17.19V25.61L94.7 42.8a7.5 7.5 0 0010.6-10.6l-30-30a7.49 7.49 0 00-10.6 0l-30 30a7.5 7.5 0 0010.6 10.6l17.2-17.19v88.78L45.3 97.2a7.5 7.5 0 10-10.6 10.6l30 30a7.48 7.48 0 0010.6 0l30-30a7.5 7.5 0 00-10.6-10.6z" fill="currentColor" />
                </svg>
              </span>
            </span>
          </span>
        </th>
        <th aria-sort="none" scope="col" id="table-with-sticky-columns-header-3" class="align-top px-base py-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark text-right">
          <span class="inline-block relative" tabindex="-1" role="button">
            Segundo pago
            <span class="c-table-advanced__order">
              <span class="sr-only">Pulsa para ordenar por esta columna</span>
              <span class="c-table-advanced__ascending">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" aria-hidden="true" width="1em" height="1em">
                  <path d="M112.07 37.93l-35-35a10 10 0 00-14.14 0l-35 35a10 10 0 0014.14 14.14l13.66-13.66A2.5 2.5 0 0160 40.18V130a10 10 0 0020 0V40.18a2.5 2.5 0 014.27-1.77l13.66 13.66a10 10 0 0014.14-14.14z" fill="currentColor" />
                </svg>
              </span>
              <span class="c-table-advanced__descending">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" aria-hidden="true" width="1em" height="1em">
                  <path d="M27.93 102.07l35 35a10 10 0 0014.14 0l35-35a10 10 0 00-14.14-14.14l-13.66 13.66A2.5 2.5 0 0180 99.82V10a10 10 0 00-20 0v89.82a2.5 2.5 0 01-4.27 1.77L42.07 87.93a10 10 0 00-14.14 14.14z" fill="currentColor" />
                </svg>
              </span>
              <span class="c-table-advanced__none">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="text-neutral-dark" aria-hidden="true" width="1em" height="1em">
                  <path d="M94.7 97.2l-17.2 17.19V25.61L94.7 42.8a7.5 7.5 0 0010.6-10.6l-30-30a7.49 7.49 0 00-10.6 0l-30 30a7.5 7.5 0 0010.6 10.6l17.2-17.19v88.78L45.3 97.2a7.5 7.5 0 10-10.6 10.6l30 30a7.48 7.48 0 0010.6 0l30-30a7.5 7.5 0 00-10.6-10.6z" fill="currentColor" />
                </svg>
              </span>
            </span>
          </span>
        </th>
        <th aria-sort="none" scope="col" id="table-with-sticky-columns-header-4" class="align-top px-base py-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark text-right">
          <span class="inline-block relative" tabindex="-1" role="button">
            Rate for column A
            <span class="c-table-advanced__order">
              <span class="sr-only">Pulsa para ordenar por esta columna</span>
              <span class="c-table-advanced__ascending">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" aria-hidden="true" width="1em" height="1em">
                  <path d="M112.07 37.93l-35-35a10 10 0 00-14.14 0l-35 35a10 10 0 0014.14 14.14l13.66-13.66A2.5 2.5 0 0160 40.18V130a10 10 0 0020 0V40.18a2.5 2.5 0 014.27-1.77l13.66 13.66a10 10 0 0014.14-14.14z" fill="currentColor" />
                </svg>
              </span>
              <span class="c-table-advanced__descending">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" aria-hidden="true" width="1em" height="1em">
                  <path d="M27.93 102.07l35 35a10 10 0 0014.14 0l35-35a10 10 0 00-14.14-14.14l-13.66 13.66A2.5 2.5 0 0180 99.82V10a10 10 0 00-20 0v89.82a2.5 2.5 0 01-4.27 1.77L42.07 87.93a10 10 0 00-14.14 14.14z" fill="currentColor" />
                </svg>
              </span>
              <span class="c-table-advanced__none">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="text-neutral-dark" aria-hidden="true" width="1em" height="1em">
                  <path d="M94.7 97.2l-17.2 17.19V25.61L94.7 42.8a7.5 7.5 0 0010.6-10.6l-30-30a7.49 7.49 0 00-10.6 0l-30 30a7.5 7.5 0 0010.6 10.6l17.2-17.19v88.78L45.3 97.2a7.5 7.5 0 10-10.6 10.6l30 30a7.48 7.48 0 0010.6 0l30-30a7.5 7.5 0 00-10.6-10.6z" fill="currentColor" />
                </svg>
              </span>
            </span>
          </span>
        </th>
        <th aria-sort="none" scope="col" id="table-with-sticky-columns-header-5" class="align-top px-base py-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark text-right">
          <span class="inline-block relative" tabindex="-1" role="button">
            Rate for column B
            <span class="c-table-advanced__order">
              <span class="sr-only">Pulsa para ordenar por esta columna</span>
              <span class="c-table-advanced__ascending">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" aria-hidden="true" width="1em" height="1em">
                  <path d="M112.07 37.93l-35-35a10 10 0 00-14.14 0l-35 35a10 10 0 0014.14 14.14l13.66-13.66A2.5 2.5 0 0160 40.18V130a10 10 0 0020 0V40.18a2.5 2.5 0 014.27-1.77l13.66 13.66a10 10 0 0014.14-14.14z" fill="currentColor" />
                </svg>
              </span>
              <span class="c-table-advanced__descending">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" aria-hidden="true" width="1em" height="1em">
                  <path d="M27.93 102.07l35 35a10 10 0 0014.14 0l35-35a10 10 0 00-14.14-14.14l-13.66 13.66A2.5 2.5 0 0180 99.82V10a10 10 0 00-20 0v89.82a2.5 2.5 0 01-4.27 1.77L42.07 87.93a10 10 0 00-14.14 14.14z" fill="currentColor" />
                </svg>
              </span>
              <span class="c-table-advanced__none">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="text-neutral-dark" aria-hidden="true" width="1em" height="1em">
                  <path d="M94.7 97.2l-17.2 17.19V25.61L94.7 42.8a7.5 7.5 0 0010.6-10.6l-30-30a7.49 7.49 0 00-10.6 0l-30 30a7.5 7.5 0 0010.6 10.6l17.2-17.19v88.78L45.3 97.2a7.5 7.5 0 10-10.6 10.6l30 30a7.48 7.48 0 0010.6 0l30-30a7.5 7.5 0 00-10.6-10.6z" fill="currentColor" />
                </svg>
              </span>
            </span>
          </span>
        </th>
        <th aria-sort="none" scope="col" id="table-with-sticky-columns-header-6" class="align-top px-base py-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark text-right">
          <span class="inline-block relative" tabindex="-1" role="button">
            Rate for column C
            <span class="c-table-advanced__order">
              <span class="sr-only">Pulsa para ordenar por esta columna</span>
              <span class="c-table-advanced__ascending">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" aria-hidden="true" width="1em" height="1em">
                  <path d="M112.07 37.93l-35-35a10 10 0 00-14.14 0l-35 35a10 10 0 0014.14 14.14l13.66-13.66A2.5 2.5 0 0160 40.18V130a10 10 0 0020 0V40.18a2.5 2.5 0 014.27-1.77l13.66 13.66a10 10 0 0014.14-14.14z" fill="currentColor" />
                </svg>
              </span>
              <span class="c-table-advanced__descending">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" aria-hidden="true" width="1em" height="1em">
                  <path d="M27.93 102.07l35 35a10 10 0 0014.14 0l35-35a10 10 0 00-14.14-14.14l-13.66 13.66A2.5 2.5 0 0180 99.82V10a10 10 0 00-20 0v89.82a2.5 2.5 0 01-4.27 1.77L42.07 87.93a10 10 0 00-14.14 14.14z" fill="currentColor" />
                </svg>
              </span>
              <span class="c-table-advanced__none">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="text-neutral-dark" aria-hidden="true" width="1em" height="1em">
                  <path d="M94.7 97.2l-17.2 17.19V25.61L94.7 42.8a7.5 7.5 0 0010.6-10.6l-30-30a7.49 7.49 0 00-10.6 0l-30 30a7.5 7.5 0 0010.6 10.6l17.2-17.19v88.78L45.3 97.2a7.5 7.5 0 10-10.6 10.6l30 30a7.48 7.48 0 0010.6 0l30-30a7.5 7.5 0 00-10.6-10.6z" fill="currentColor" />
                </svg>
              </span>
            </span>
          </span>
        </th>
        <th aria-sort="none" scope="col" id="table-with-sticky-columns-header-7" class="align-top px-base py-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark text-right">
          <span class="inline-block relative" tabindex="-1" role="button">
            Rate for column D
            <span class="c-table-advanced__order">
              <span class="sr-only">Pulsa para ordenar por esta columna</span>
              <span class="c-table-advanced__ascending">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" aria-hidden="true" width="1em" height="1em">
                  <path d="M112.07 37.93l-35-35a10 10 0 00-14.14 0l-35 35a10 10 0 0014.14 14.14l13.66-13.66A2.5 2.5 0 0160 40.18V130a10 10 0 0020 0V40.18a2.5 2.5 0 014.27-1.77l13.66 13.66a10 10 0 0014.14-14.14z" fill="currentColor" />
                </svg>
              </span>
              <span class="c-table-advanced__descending">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" aria-hidden="true" width="1em" height="1em">
                  <path d="M27.93 102.07l35 35a10 10 0 0014.14 0l35-35a10 10 0 00-14.14-14.14l-13.66 13.66A2.5 2.5 0 0180 99.82V10a10 10 0 00-20 0v89.82a2.5 2.5 0 01-4.27 1.77L42.07 87.93a10 10 0 00-14.14 14.14z" fill="currentColor" />
                </svg>
              </span>
              <span class="c-table-advanced__none">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="text-neutral-dark" aria-hidden="true" width="1em" height="1em">
                  <path d="M94.7 97.2l-17.2 17.19V25.61L94.7 42.8a7.5 7.5 0 0010.6-10.6l-30-30a7.49 7.49 0 00-10.6 0l-30 30a7.5 7.5 0 0010.6 10.6l17.2-17.19v88.78L45.3 97.2a7.5 7.5 0 10-10.6 10.6l30 30a7.48 7.48 0 0010.6 0l30-30a7.5 7.5 0 00-10.6-10.6z" fill="currentColor" />
                </svg>
              </span>
            </span>
          </span>
        </th>
        <th aria-sort="none" scope="col" id="table-with-sticky-columns-header-8" class="align-top px-base py-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark text-right sticky right-0 z-10 w-60 bg-white">
          <span class="inline-block relative" tabindex="-1" role="button">
            Rate for column E
            <span class="c-table-advanced__order">
              <span class="sr-only">Pulsa para ordenar por esta columna</span>
              <span class="c-table-advanced__ascending">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" aria-hidden="true" width="1em" height="1em">
                  <path d="M112.07 37.93l-35-35a10 10 0 00-14.14 0l-35 35a10 10 0 0014.14 14.14l13.66-13.66A2.5 2.5 0 0160 40.18V130a10 10 0 0020 0V40.18a2.5 2.5 0 014.27-1.77l13.66 13.66a10 10 0 0014.14-14.14z" fill="currentColor" />
                </svg>
              </span>
              <span class="c-table-advanced__descending">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" aria-hidden="true" width="1em" height="1em">
                  <path d="M27.93 102.07l35 35a10 10 0 0014.14 0l35-35a10 10 0 00-14.14-14.14l-13.66 13.66A2.5 2.5 0 0180 99.82V10a10 10 0 00-20 0v89.82a2.5 2.5 0 01-4.27 1.77L42.07 87.93a10 10 0 00-14.14 14.14z" fill="currentColor" />
                </svg>
              </span>
              <span class="c-table-advanced__none">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" class="text-neutral-dark" aria-hidden="true" width="1em" height="1em">
                  <path d="M94.7 97.2l-17.2 17.19V25.61L94.7 42.8a7.5 7.5 0 0010.6-10.6l-30-30a7.49 7.49 0 00-10.6 0l-30 30a7.5 7.5 0 0010.6 10.6l17.2-17.19v88.78L45.3 97.2a7.5 7.5 0 10-10.6 10.6l30 30a7.48 7.48 0 0010.6 0l30-30a7.5 7.5 0 00-10.6-10.6z" fill="currentColor" />
                </svg>
              </span>
            </span>
          </span>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr class="divide-x divide-neutral-base">
        <td class="sticky left-0 z-10 w-0 bg-white"></td>
        <td tabindex="-1" class="align-top px-base pb-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark sticky left-16 z-10 w-60 bg-white">
        </td>
        <td tabindex="-1" class="align-top px-base pb-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark">
          <!-- searchbar -->
          <!-- label -->
          <label class="block sr-only sr-only" for="table-with-sticky-columns-header-filter-1">Filtrar en esta columna</label>
          <!-- /label -->
          <div class="relative">
            <input class="c-input block border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base pr-12 w-full c-input--sm" id="table-with-sticky-columns-header-filter-1" name="table-with-sticky-columns-header-filter-1" type="search" placeholder="Filtrar" aria-describedby="table-with-sticky-columns-header-1">
            <button type="submit" class="absolute top-0 right-0 m-sm p-0.5 text-primary-base hover:text-primary-dark focus:bg-warning-base focus:outline-none focus:shadow-outline-focus m-xs p-0.5 text-xs">
              <span class="sr-only">Buscar</span>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1.375em" height="1.375em" aria-hidden="true">
                <path d="M23.498 23.487a1.713 1.713 0 000-2.421l-4.572-4.575a.43.43 0 01-.062-.539 10.283 10.283 0 10-2.911 2.911.43.43 0 01.539.055l4.574 4.574a1.712 1.712 0 002.433-.005zM3.451 10.289a6.85 6.85 0 116.85 6.85 6.85 6.85 0 01-6.85-6.85z" fill="currentColor" />
              </svg>
            </button>
          </div>
          <!-- /searchbar -->
        </td>
        <td tabindex="-1" class="align-top px-base pb-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark text-right">
          <!-- searchbar -->
          <!-- label -->
          <label class="block sr-only sr-only" for="table-with-sticky-columns-header-filter-2">Filtrar en esta columna</label>
          <!-- /label -->
          <div class="relative">
            <input class="c-input block border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base pr-12 w-full c-input--sm" id="table-with-sticky-columns-header-filter-2" name="table-with-sticky-columns-header-filter-2" type="search" placeholder="Filtrar" aria-describedby="table-with-sticky-columns-header-2">
            <button type="submit" class="absolute top-0 right-0 m-sm p-0.5 text-primary-base hover:text-primary-dark focus:bg-warning-base focus:outline-none focus:shadow-outline-focus m-xs p-0.5 text-xs">
              <span class="sr-only">Buscar</span>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1.375em" height="1.375em" aria-hidden="true">
                <path d="M23.498 23.487a1.713 1.713 0 000-2.421l-4.572-4.575a.43.43 0 01-.062-.539 10.283 10.283 0 10-2.911 2.911.43.43 0 01.539.055l4.574 4.574a1.712 1.712 0 002.433-.005zM3.451 10.289a6.85 6.85 0 116.85 6.85 6.85 6.85 0 01-6.85-6.85z" fill="currentColor" />
              </svg>
            </button>
          </div>
          <!-- /searchbar -->
        </td>
        <td tabindex="-1" class="align-top px-base pb-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark text-right">
          <!-- searchbar -->
          <!-- label -->
          <label class="block sr-only sr-only" for="table-with-sticky-columns-header-filter-3">Filtrar en esta columna</label>
          <!-- /label -->
          <div class="relative">
            <input class="c-input block border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base pr-12 w-full c-input--sm" id="table-with-sticky-columns-header-filter-3" name="table-with-sticky-columns-header-filter-3" type="search" placeholder="Filtrar" aria-describedby="table-with-sticky-columns-header-3">
            <button type="submit" class="absolute top-0 right-0 m-sm p-0.5 text-primary-base hover:text-primary-dark focus:bg-warning-base focus:outline-none focus:shadow-outline-focus m-xs p-0.5 text-xs">
              <span class="sr-only">Buscar</span>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1.375em" height="1.375em" aria-hidden="true">
                <path d="M23.498 23.487a1.713 1.713 0 000-2.421l-4.572-4.575a.43.43 0 01-.062-.539 10.283 10.283 0 10-2.911 2.911.43.43 0 01.539.055l4.574 4.574a1.712 1.712 0 002.433-.005zM3.451 10.289a6.85 6.85 0 116.85 6.85 6.85 6.85 0 01-6.85-6.85z" fill="currentColor" />
              </svg>
            </button>
          </div>
          <!-- /searchbar -->
        </td>
        <td tabindex="-1" class="align-top px-base pb-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark text-right">
          <!-- searchbar -->
          <!-- label -->
          <label class="block sr-only sr-only" for="table-with-sticky-columns-header-filter-4">Filtrar en esta columna</label>
          <!-- /label -->
          <div class="relative">
            <input class="c-input block border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base pr-12 w-full c-input--sm" id="table-with-sticky-columns-header-filter-4" name="table-with-sticky-columns-header-filter-4" type="search" placeholder="Filtrar" aria-describedby="table-with-sticky-columns-header-4">
            <button type="submit" class="absolute top-0 right-0 m-sm p-0.5 text-primary-base hover:text-primary-dark focus:bg-warning-base focus:outline-none focus:shadow-outline-focus m-xs p-0.5 text-xs">
              <span class="sr-only">Buscar</span>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1.375em" height="1.375em" aria-hidden="true">
                <path d="M23.498 23.487a1.713 1.713 0 000-2.421l-4.572-4.575a.43.43 0 01-.062-.539 10.283 10.283 0 10-2.911 2.911.43.43 0 01.539.055l4.574 4.574a1.712 1.712 0 002.433-.005zM3.451 10.289a6.85 6.85 0 116.85 6.85 6.85 6.85 0 01-6.85-6.85z" fill="currentColor" />
              </svg>
            </button>
          </div>
          <!-- /searchbar -->
        </td>
        <td tabindex="-1" class="align-top px-base pb-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark text-right">
          <!-- searchbar -->
          <!-- label -->
          <label class="block sr-only sr-only" for="table-with-sticky-columns-header-filter-5">Filtrar en esta columna</label>
          <!-- /label -->
          <div class="relative">
            <input class="c-input block border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base pr-12 w-full c-input--sm" id="table-with-sticky-columns-header-filter-5" name="table-with-sticky-columns-header-filter-5" type="search" placeholder="Filtrar" aria-describedby="table-with-sticky-columns-header-5">
            <button type="submit" class="absolute top-0 right-0 m-sm p-0.5 text-primary-base hover:text-primary-dark focus:bg-warning-base focus:outline-none focus:shadow-outline-focus m-xs p-0.5 text-xs">
              <span class="sr-only">Buscar</span>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1.375em" height="1.375em" aria-hidden="true">
                <path d="M23.498 23.487a1.713 1.713 0 000-2.421l-4.572-4.575a.43.43 0 01-.062-.539 10.283 10.283 0 10-2.911 2.911.43.43 0 01.539.055l4.574 4.574a1.712 1.712 0 002.433-.005zM3.451 10.289a6.85 6.85 0 116.85 6.85 6.85 6.85 0 01-6.85-6.85z" fill="currentColor" />
              </svg>
            </button>
          </div>
          <!-- /searchbar -->
        </td>
        <td tabindex="-1" class="align-top px-base pb-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark text-right">
          <!-- searchbar -->
          <!-- label -->
          <label class="block sr-only sr-only" for="table-with-sticky-columns-header-filter-6">Filtrar en esta columna</label>
          <!-- /label -->
          <div class="relative">
            <input class="c-input block border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base pr-12 w-full c-input--sm" id="table-with-sticky-columns-header-filter-6" name="table-with-sticky-columns-header-filter-6" type="search" placeholder="Filtrar" aria-describedby="table-with-sticky-columns-header-6">
            <button type="submit" class="absolute top-0 right-0 m-sm p-0.5 text-primary-base hover:text-primary-dark focus:bg-warning-base focus:outline-none focus:shadow-outline-focus m-xs p-0.5 text-xs">
              <span class="sr-only">Buscar</span>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1.375em" height="1.375em" aria-hidden="true">
                <path d="M23.498 23.487a1.713 1.713 0 000-2.421l-4.572-4.575a.43.43 0 01-.062-.539 10.283 10.283 0 10-2.911 2.911.43.43 0 01.539.055l4.574 4.574a1.712 1.712 0 002.433-.005zM3.451 10.289a6.85 6.85 0 116.85 6.85 6.85 6.85 0 01-6.85-6.85z" fill="currentColor" />
              </svg>
            </button>
          </div>
          <!-- /searchbar -->
        </td>
        <td tabindex="-1" class="align-top px-base pb-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark text-right">
          <!-- searchbar -->
          <!-- label -->
          <label class="block sr-only sr-only" for="table-with-sticky-columns-header-filter-7">Filtrar en esta columna</label>
          <!-- /label -->
          <div class="relative">
            <input class="c-input block border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base pr-12 w-full c-input--sm" id="table-with-sticky-columns-header-filter-7" name="table-with-sticky-columns-header-filter-7" type="search" placeholder="Filtrar" aria-describedby="table-with-sticky-columns-header-7">
            <button type="submit" class="absolute top-0 right-0 m-sm p-0.5 text-primary-base hover:text-primary-dark focus:bg-warning-base focus:outline-none focus:shadow-outline-focus m-xs p-0.5 text-xs">
              <span class="sr-only">Buscar</span>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1.375em" height="1.375em" aria-hidden="true">
                <path d="M23.498 23.487a1.713 1.713 0 000-2.421l-4.572-4.575a.43.43 0 01-.062-.539 10.283 10.283 0 10-2.911 2.911.43.43 0 01.539.055l4.574 4.574a1.712 1.712 0 002.433-.005zM3.451 10.289a6.85 6.85 0 116.85 6.85 6.85 6.85 0 01-6.85-6.85z" fill="currentColor" />
              </svg>
            </button>
          </div>
          <!-- /searchbar -->
        </td>
        <td tabindex="-1" class="align-top px-base pb-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark text-right sticky right-0 z-10 w-60 bg-white">
          <!-- searchbar -->
          <!-- label -->
          <label class="block sr-only sr-only" for="table-with-sticky-columns-header-filter-8">Filtrar en esta columna</label>
          <!-- /label -->
          <div class="relative">
            <input class="c-input block border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base pr-12 w-full c-input--sm" id="table-with-sticky-columns-header-filter-8" name="table-with-sticky-columns-header-filter-8" type="search" placeholder="Filtrar" aria-describedby="table-with-sticky-columns-header-8">
            <button type="submit" class="absolute top-0 right-0 m-sm p-0.5 text-primary-base hover:text-primary-dark focus:bg-warning-base focus:outline-none focus:shadow-outline-focus m-xs p-0.5 text-xs">
              <span class="sr-only">Buscar</span>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1.375em" height="1.375em" aria-hidden="true">
                <path d="M23.498 23.487a1.713 1.713 0 000-2.421l-4.572-4.575a.43.43 0 01-.062-.539 10.283 10.283 0 10-2.911 2.911.43.43 0 01.539.055l4.574 4.574a1.712 1.712 0 002.433-.005zM3.451 10.289a6.85 6.85 0 116.85 6.85 6.85 6.85 0 01-6.85-6.85z" fill="currentColor" />
              </svg>
            </button>
          </div>
          <!-- /searchbar -->
        </td>
      </tr>
      <tr class="border-t border-b border-neutral-base hover:bg-neutral-lighter">
        <td class="px-base py-sm sticky left-0 z-10 w-0 bg-white" tabindex="-1">
          <div class="c-checkboxes c-checkboxes--sm">
            <div>
              <div class="relative flex items-start">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base text-primary-base" id="table-with-sticky-columns-checkbox-0" name="table-with-sticky-columns-checkbox-0" type="checkbox" value="table-checkbox">
                </div>
                <div class="pt-0.5 leading-5">
                  <label class="sr-only block text-sm -mt-1" for="table-with-sticky-columns-checkbox-0">Selecciona fila 2</label>
                </div>
              </div>
            </div>
          </div>
        </td>
        <th scope="row" class="px-base py-xs border-neutral-base border-b-0 border-r text-left font-normal text-sm text-neutral-dark sticky left-16 z-10 w-60 bg-white">First row</th>
        <td tabindex="-1" class="px-base py-sm">Enero</td>
        <td tabindex="-1" class="px-base py-sm text-right">85€</td>
        <td tabindex="-1" class="px-base py-sm text-right">95€</td>
        <td tabindex="-1" class="px-base py-sm text-right">85€</td>
        <td tabindex="-1" class="px-base py-sm text-right">95€</td>
        <td tabindex="-1" class="px-base py-sm text-right">95€</td>
        <td tabindex="-1" class="px-base py-sm text-right">95€</td>
        <td tabindex="-1" class="px-base py-sm text-right sticky z-10 right-0 w-60 bg-white">95€</td>
      </tr>
      <tr class="border-t border-b border-neutral-base hover:bg-neutral-lighter">
        <td class="px-base py-sm sticky left-0 z-10 w-0 bg-white" tabindex="-1">
          <div class="c-checkboxes c-checkboxes--sm">
            <div>
              <div class="relative flex items-start">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base text-primary-base" id="table-with-sticky-columns-checkbox-1" name="table-with-sticky-columns-checkbox-1" type="checkbox" value="table-checkbox">
                </div>
                <div class="pt-0.5 leading-5">
                  <label class="sr-only block text-sm -mt-1" for="table-with-sticky-columns-checkbox-1">Selecciona fila 3</label>
                </div>
              </div>
            </div>
          </div>
        </td>
        <th scope="row" class="px-base py-xs border-neutral-base border-b-0 border-r text-left font-normal text-sm text-neutral-dark sticky left-16 z-10 w-60 bg-white">Second row</th>
        <td tabindex="-1" class="px-base py-sm">Febrero</td>
        <td tabindex="-1" class="px-base py-sm text-right">75€</td>
        <td tabindex="-1" class="px-base py-sm text-right">55€</td>
        <td tabindex="-1" class="px-base py-sm text-right">85€</td>
        <td tabindex="-1" class="px-base py-sm text-right">95€</td>
        <td tabindex="-1" class="px-base py-sm text-right">95€</td>
        <td tabindex="-1" class="px-base py-sm text-right">95€</td>
        <td tabindex="-1" class="px-base py-sm text-right sticky right-0 z-10 w-60 bg-white">95€</td>
      </tr>
      <tr class="border-t border-b border-neutral-base hover:bg-neutral-lighter">
        <td class="px-base py-sm sticky left-0 z-10 w-0 bg-white" tabindex="-1">
          <div class="c-checkboxes c-checkboxes--sm">
            <div>
              <div class="relative flex items-start">
                <div class="flex items-center mx-sm">
                  <input class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base text-primary-base" id="table-with-sticky-columns-checkbox-2" name="table-with-sticky-columns-checkbox-2" type="checkbox" value="table-checkbox">
                </div>
                <div class="pt-0.5 leading-5">
                  <label class="sr-only block text-sm -mt-1" for="table-with-sticky-columns-checkbox-2">Selecciona fila 4</label>
                </div>
              </div>
            </div>
          </div>
        </td>
        <th scope="row" class="px-base py-xs border-neutral-base border-b-0 border-r text-left font-normal text-sm text-neutral-dark sticky left-16 z-10 w-60 bg-white">Third row</th>
        <td tabindex="-1" class="px-base py-sm">Marzo</td>
        <td tabindex="-1" class="px-base py-sm text-right">165€</td>
        <td tabindex="-1" class="px-base py-sm text-right">125€</td>
        <td tabindex="-1" class="px-base py-sm text-right">85€</td>
        <td tabindex="-1" class="px-base py-sm text-right">95€</td>
        <td tabindex="-1" class="px-base py-sm text-right">95€</td>
        <td tabindex="-1" class="px-base py-sm text-right">95€</td>
        <td tabindex="-1" class="px-base py-sm text-right sticky z-10 right-0 w-60 bg-white">95€</td>
      </tr>
    </tbody>
    <tfoot>
    </tfoot>
  </table>
</div>
<!-- /table-advanced -->

Ejemplo: "Tabla con columnas sticky", de código Nunjucks, para maquetar el componente: "Table Advanced", versión: 12.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-advanced/_macro.table-advanced.njk" import componentTableAdvanced %}

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

Contenido

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

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