Table-advanced examples

Show params

Params

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

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

default

January 85€ 95€
February 75€ 55€
March 165€ 125€
Show code

Macro

{% from "components/table-advanced/_macro.table-advanced.njk" import componentTableAdvanced %}
{{ componentTableAdvanced({
  "rows": [
    [
      {
        "text": "January"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "February"
      },
      {
        "text": "75€",
        "classes": "text-right"
      },
      {
        "text": "55€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "March"
      },
      {
        "text": "165€",
        "classes": "text-right"
      },
      {
        "text": "125€",
        "classes": "text-right"
      }
    ]
  ],
  "classes": "min-w-full"
})  }}

Markup



<!-- 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">
    <tbody>
          <tr class="border-t border-b border-neutral-base hover:bg-neutral-lighter">
            <td  tabindex="-1" class="px-base py-sm">January</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">February</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">March</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>
  </table>
<!-- /table-advanced -->

table with head

Month you apply Rate for bicycles Rate for vehicles
January 85€ 95€
February 75€ 55€
March 165€ 125€
Show code

Macro

{% from "components/table-advanced/_macro.table-advanced.njk" import componentTableAdvanced %}
{{ componentTableAdvanced({
  "idPrefix": "table-with-head",
  "head": [
    {
      "text": "Month you apply"
    },
    {
      "text": "Rate for bicycles",
      "classes": "text-right"
    },
    {
      "text": "Rate for vehicles",
      "classes": "text-right"
    }
  ],
  "rows": [
    [
      {
        "text": "January"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "February"
      },
      {
        "text": "75€",
        "classes": "text-right"
      },
      {
        "text": "55€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "March"
      },
      {
        "text": "165€",
        "classes": "text-right"
      },
      {
        "text": "125€",
        "classes": "text-right"
      }
    ]
  ],
  "classes": "min-w-full"
})  }}

Markup



<!-- 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-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">
            Month you apply
          </span>
        </th>
<th scope="col" id="table-with-head-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">
            Rate for bicycles
          </span>
        </th>
<th scope="col" id="table-with-head-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">
            Rate for vehicles
          </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">January</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">February</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">March</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>
  </table>
<!-- /table-advanced -->

table with head and caption

Also with firstCellIsHeader: true

Caption 1: Months and rates
Month you apply Rate for bicycles Rate for vehicles
January 85€ 95€
February 75€ 55€
March 165€ 125€
Show code

Macro

{% from "components/table-advanced/_macro.table-advanced.njk" import componentTableAdvanced %}
{{ componentTableAdvanced({
  "idPrefix": "table-with-head-and-caption",
  "caption": "Caption 1: Months and rates",
  "captionClasses": "mb-base font-bold text-left text-lg",
  "firstCellIsHeader": true,
  "head": [
    {
      "text": "Month you apply"
    },
    {
      "text": "Rate for bicycles",
      "classes": "text-right"
    },
    {
      "text": "Rate for vehicles",
      "classes": "text-right"
    }
  ],
  "rows": [
    [
      {
        "text": "January"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "February"
      },
      {
        "text": "75€",
        "classes": "text-right"
      },
      {
        "text": "55€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "March"
      },
      {
        "text": "165€",
        "classes": "text-right"
      },
      {
        "text": "125€",
        "classes": "text-right"
      }
    ]
  ],
  "classes": "min-w-full"
})  }}

Markup



<!-- 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: Months and rates</caption>
    <thead>
      <tr class="border-t border-neutral-base divide-x divide-neutral-base">
<th scope="col" id="table-with-head-and-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">
            Month you apply
          </span>
        </th>
<th scope="col" id="table-with-head-and-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">
            Rate for bicycles
          </span>
        </th>
<th scope="col" id="table-with-head-and-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">
            Rate for vehicles
          </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">January</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">February</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">March</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>
  </table>
<!-- /table-advanced -->

table with orderBy in columns

orderBy: none, asc, desc

Month you apply Pulsa para ordenar por esta columna Rate for bicycles Pulsa para ordenar por esta columna Rate for vehicles Pulsa para ordenar por esta columna
January 85€ 95€
February 75€ 55€
March 165€ 125€
Show code

Macro

{% from "components/table-advanced/_macro.table-advanced.njk" import componentTableAdvanced %}
{{ componentTableAdvanced({
  "idPrefix": "table-with-orderby",
  "head": [
    {
      "text": "Month you apply",
      "orderBy": "none"
    },
    {
      "text": "Rate for bicycles",
      "orderBy": "none",
      "classes": "text-right"
    },
    {
      "text": "Rate for vehicles",
      "orderBy": "none",
      "classes": "text-right"
    }
  ],
  "rows": [
    [
      {
        "text": "January"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "February"
      },
      {
        "text": "75€",
        "classes": "text-right"
      },
      {
        "text": "55€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "March"
      },
      {
        "text": "165€",
        "classes": "text-right"
      },
      {
        "text": "125€",
        "classes": "text-right"
      }
    ]
  ],
  "classes": "min-w-full"
})  }}

Markup



<!-- 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">
            Month you apply
            <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-base" 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">
            Rate for bicycles
            <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-base" 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">
            Rate for vehicles
            <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-base" 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">January</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">February</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">March</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>
  </table>
<!-- /table-advanced -->

table with head and filters

hasFilter: true and filterClasses: text-right in numeric columns

Month you apply Rate for bicycles Rate for vehicles
January 85€ 95€
February 75€ 55€
March 165€ 125€
Show code

Macro

{% from "components/table-advanced/_macro.table-advanced.njk" import componentTableAdvanced %}
{{ componentTableAdvanced({
  "idPrefix": "table-with-head-and-filters",
  "head": [
    {
      "text": "Month you apply",
      "hasFilter": true
    },
    {
      "text": "Rate for bicycles",
      "classes": "text-right"
    },
    {
      "text": "Rate for vehicles",
      "classes": "text-right",
      "hasFilter": true
    }
  ],
  "rows": [
    [
      {
        "text": "January"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "February"
      },
      {
        "text": "75€",
        "classes": "text-right"
      },
      {
        "text": "55€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "March"
      },
      {
        "text": "165€",
        "classes": "text-right"
      },
      {
        "text": "125€",
        "classes": "text-right"
      }
    ]
  ],
  "classes": "min-w-full"
})  }}

Markup



<!-- 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">
            Month you apply
          </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">
            Rate for bicycles
          </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">
            Rate for vehicles
          </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 -->
<div class="relative">
  <!-- label -->
  <label class="block sr-only" for="table-with-head-and-filters-header-filter-0">Buscar en esta columna</label>
  
  <!-- /label -->
  <input class="c-input block mt-sm pr-12 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 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="Buscar" 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">
            </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 -->
<div class="relative">
  <!-- label -->
  <label class="block sr-only" for="table-with-head-and-filters-header-filter-2">Buscar en esta columna</label>
  
  <!-- /label -->
  <input class="c-input block mt-sm pr-12 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 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="Buscar" 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">January</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">February</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">March</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>
  </table>
<!-- /table-advanced -->

table with checkboxes

Seleccionar fila Month you apply Rate for bicycles Rate for vehicles
January 85€ 95€
February 75€ 55€
March 165€ 125€
Show code

Macro

{% from "components/table-advanced/_macro.table-advanced.njk" import componentTableAdvanced %}
{{ componentTableAdvanced({
  "idPrefix": "table-with-checkboxes",
  "hasCheckboxes": true,
  "head": [
    {
      "text": "Month you apply"
    },
    {
      "text": "Rate for bicycles",
      "classes": "text-right"
    },
    {
      "text": "Rate for vehicles",
      "classes": "text-right"
    }
  ],
  "rows": [
    [
      {
        "text": "January"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "February"
      },
      {
        "text": "75€",
        "classes": "text-right"
      },
      {
        "text": "55€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "March"
      },
      {
        "text": "165€",
        "classes": "text-right"
      },
      {
        "text": "125€",
        "classes": "text-right"
      }
    ]
  ],
  "classes": "min-w-full"
})  }}

Markup



<!-- 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">
            Month you apply
          </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">
            Rate for bicycles
          </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">
            Rate for vehicles
          </span>
        </th>
      </tr>
    </thead>
    <tbody>
          <tr x-data="{ isChecked: false }" :class="{ 'bg-neutral-light': isChecked === true }" 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 x-model="isChecked" 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">January</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 x-data="{ isChecked: false }" :class="{ 'bg-neutral-light': isChecked === true }" 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 x-model="isChecked" 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">February</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 x-data="{ isChecked: false }" :class="{ 'bg-neutral-light': isChecked === true }" 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 x-model="isChecked" 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">March</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>
  </table>
<!-- /table-advanced -->

table with all

orderBy, hasCheckboxes, hasFilter and firstCellIsHeader

Seleccionar fila Row number Month you apply Pulsa para ordenar por esta columna Rate for bicycles Pulsa para ordenar por esta columna Rate for vehicles Pulsa para ordenar por esta columna
First row January 85€ 95€
Second row February 75€ 55€
Third row March 165€ 125€
Show code

Macro

{% from "components/table-advanced/_macro.table-advanced.njk" import componentTableAdvanced %}
{{ componentTableAdvanced({
  "idPrefix": "table-with-all",
  "hasCheckboxes": true,
  "firstCellIsHeader": true,
  "head": [
    {
      "text": "Row number"
    },
    {
      "text": "Month you apply",
      "orderBy": "none",
      "hasFilter": true
    },
    {
      "text": "Rate for bicycles",
      "orderBy": "none",
      "classes": "text-right",
      "hasFilter": true
    },
    {
      "text": "Rate for vehicles",
      "orderBy": "none",
      "classes": "text-right",
      "hasFilter": true
    }
  ],
  "rows": [
    [
      {
        "text": "First row"
      },
      {
        "text": "January"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "Second row"
      },
      {
        "text": "February"
      },
      {
        "text": "75€",
        "classes": "text-right"
      },
      {
        "text": "55€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "Third row"
      },
      {
        "text": "March"
      },
      {
        "text": "165€",
        "classes": "text-right"
      },
      {
        "text": "125€",
        "classes": "text-right"
      }
    ]
  ],
  "classes": "min-w-full"
})  }}

Markup



<!-- 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">
            Row number
          </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">
            Month you apply
            <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-base" 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">
            Rate for bicycles
            <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-base" 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">
            Rate for vehicles
            <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-base" 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 -->
<div class="relative">
  <!-- label -->
  <label class="block sr-only" for="table-with-all-header-filter-1">Buscar en esta columna</label>
  
  <!-- /label -->
  <input class="c-input block mt-sm pr-12 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 w-full c-input--sm" id="table-with-all-header-filter-1" name="table-with-all-header-filter-1" type="search" placeholder="Buscar" 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">
                

<!-- searchbar -->
<div class="relative">
  <!-- label -->
  <label class="block sr-only" for="table-with-all-header-filter-2">Buscar en esta columna</label>
  
  <!-- /label -->
  <input class="c-input block mt-sm pr-12 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 w-full c-input--sm" id="table-with-all-header-filter-2" name="table-with-all-header-filter-2" type="search" placeholder="Buscar" aria-describedby="table-with-all-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 -->
<div class="relative">
  <!-- label -->
  <label class="block sr-only" for="table-with-all-header-filter-3">Buscar en esta columna</label>
  
  <!-- /label -->
  <input class="c-input block mt-sm pr-12 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 w-full c-input--sm" id="table-with-all-header-filter-3" name="table-with-all-header-filter-3" type="search" placeholder="Buscar" 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 x-data="{ isChecked: false }" :class="{ 'bg-neutral-light': isChecked === true }" 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 x-model="isChecked" 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">First row</th>
            <td  tabindex="-1" class="px-base py-sm">January</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 x-data="{ isChecked: false }" :class="{ 'bg-neutral-light': isChecked === true }" 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 x-model="isChecked" 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">Second row</th>
            <td  tabindex="-1" class="px-base py-sm">February</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 x-data="{ isChecked: false }" :class="{ 'bg-neutral-light': isChecked === true }" 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 x-model="isChecked" 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">Third row</th>
            <td  tabindex="-1" class="px-base py-sm">March</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>
  </table>
<!-- /table-advanced -->

table with sticky columns

orderBy, hasCheckboxes, hasFilter and firstCellIsHeader

Seleccionar fila Row number Month you apply Pulsa para ordenar por esta columna Rate for bicycles Pulsa para ordenar por esta columna Rate for vehicles 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 January 85€ 95€ 85€ 95€ 95€ 95€ 95€
Second row February 75€ 55€ 85€ 95€ 95€ 95€ 95€
Third row March 165€ 125€ 85€ 95€ 95€ 95€ 95€
Show code

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": "Row number",
      "classes": "sticky left-16 z-10 w-60 bg-white"
    },
    {
      "text": "Month you apply",
      "orderBy": "none",
      "hasFilter": true
    },
    {
      "text": "Rate for bicycles",
      "orderBy": "none",
      "classes": "text-right",
      "hasFilter": true
    },
    {
      "text": "Rate for vehicles",
      "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": "January"
      },
      {
        "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": "February"
      },
      {
        "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": "March"
      },
      {
        "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"
})  }}

Markup



<!-- 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">
            Row number
          </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">
            Month you apply
            <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-base" 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">
            Rate for bicycles
            <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-base" 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">
            Rate for vehicles
            <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-base" 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-base" 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-base" 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-base" 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-base" 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-base" 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 -->
<div class="relative">
  <!-- label -->
  <label class="block sr-only" for="table-with-sticky-columns-header-filter-1">Buscar en esta columna</label>
  
  <!-- /label -->
  <input class="c-input block mt-sm pr-12 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 w-full c-input--sm" id="table-with-sticky-columns-header-filter-1" name="table-with-sticky-columns-header-filter-1" type="search" placeholder="Buscar" 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 -->
<div class="relative">
  <!-- label -->
  <label class="block sr-only" for="table-with-sticky-columns-header-filter-2">Buscar en esta columna</label>
  
  <!-- /label -->
  <input class="c-input block mt-sm pr-12 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 w-full c-input--sm" id="table-with-sticky-columns-header-filter-2" name="table-with-sticky-columns-header-filter-2" type="search" placeholder="Buscar" 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 -->
<div class="relative">
  <!-- label -->
  <label class="block sr-only" for="table-with-sticky-columns-header-filter-3">Buscar en esta columna</label>
  
  <!-- /label -->
  <input class="c-input block mt-sm pr-12 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 w-full c-input--sm" id="table-with-sticky-columns-header-filter-3" name="table-with-sticky-columns-header-filter-3" type="search" placeholder="Buscar" 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 -->
<div class="relative">
  <!-- label -->
  <label class="block sr-only" for="table-with-sticky-columns-header-filter-4">Buscar en esta columna</label>
  
  <!-- /label -->
  <input class="c-input block mt-sm pr-12 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 w-full c-input--sm" id="table-with-sticky-columns-header-filter-4" name="table-with-sticky-columns-header-filter-4" type="search" placeholder="Buscar" 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 -->
<div class="relative">
  <!-- label -->
  <label class="block sr-only" for="table-with-sticky-columns-header-filter-5">Buscar en esta columna</label>
  
  <!-- /label -->
  <input class="c-input block mt-sm pr-12 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 w-full c-input--sm" id="table-with-sticky-columns-header-filter-5" name="table-with-sticky-columns-header-filter-5" type="search" placeholder="Buscar" 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 -->
<div class="relative">
  <!-- label -->
  <label class="block sr-only" for="table-with-sticky-columns-header-filter-6">Buscar en esta columna</label>
  
  <!-- /label -->
  <input class="c-input block mt-sm pr-12 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 w-full c-input--sm" id="table-with-sticky-columns-header-filter-6" name="table-with-sticky-columns-header-filter-6" type="search" placeholder="Buscar" 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 -->
<div class="relative">
  <!-- label -->
  <label class="block sr-only" for="table-with-sticky-columns-header-filter-7">Buscar en esta columna</label>
  
  <!-- /label -->
  <input class="c-input block mt-sm pr-12 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 w-full c-input--sm" id="table-with-sticky-columns-header-filter-7" name="table-with-sticky-columns-header-filter-7" type="search" placeholder="Buscar" 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 -->
<div class="relative">
  <!-- label -->
  <label class="block sr-only" for="table-with-sticky-columns-header-filter-8">Buscar en esta columna</label>
  
  <!-- /label -->
  <input class="c-input block mt-sm pr-12 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 w-full c-input--sm" id="table-with-sticky-columns-header-filter-8" name="table-with-sticky-columns-header-filter-8" type="search" placeholder="Buscar" 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 x-data="{ isChecked: false }" :class="{ 'bg-neutral-light': isChecked === true }" 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 x-model="isChecked" 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">January</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 x-data="{ isChecked: false }" :class="{ 'bg-neutral-light': isChecked === true }" 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 x-model="isChecked" 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">February</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 x-data="{ isChecked: false }" :class="{ 'bg-neutral-light': isChecked === true }" 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 x-model="isChecked" 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">March</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>
  </table>
</div>
<!-- /table-advanced -->