Table 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: classes
    type: string
    required: false
    description: Classes to add to the table head cell.
  - name: colspan
    type: integer
    required: false
    description: Specify how many columns a cell extends.
  - name: rowspan
    type: integer
    required: false
    description: Specify how many rows a cell extends.
  - name: attributes
    type: object
    required: false
    description: HTML attributes (for example data attributes) to add to the table cell.
- name: caption
  type: string
  required: false
  description: Caption text
- name: captionClasses
  type: string
  required: false
  description: Classes for caption text size. Classes should correspond to the available typography heading classes.
- name: firstCellIsHeader
  type: boolean
  required: false
  description: If set to true, first cell in table row will be a TH instead of a TD.
- name: wrapper
  type: object
  required: false
  description: Options for a wrapper div outside the table
  params:
  - name: classes
    type: string
    required: false
    description: Classes to add to the wrapper (e.g. to show an horizontal scrollbar it there are many columns or in mobile)
- name: classes
  type: string
  required: false
  description: Classes to add to the table container.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the table container.

accessibilityCriteria: |
  ## 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/_macro.table.njk" import componentTable %}
{{ componentTable({
  "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"
      }
    ]
  ]
})  }}

Markup



<!-- table -->
  <table class="c-table">
  <tbody>
        <tr class="border-t border-b border-neutral-base">
          <td class="px-base py-sm">January</td>
          <td class="px-base py-sm text-right">85€</td>
          <td class="px-base py-sm text-right">95€</td>
        </tr>
        <tr class="border-t border-b border-neutral-base">
          <td class="px-base py-sm">February</td>
          <td class="px-base py-sm text-right">75€</td>
          <td class="px-base py-sm text-right">55€</td>
        </tr>
        <tr class="border-t border-b border-neutral-base">
          <td class="px-base py-sm">March</td>
          <td class="px-base py-sm text-right">165€</td>
          <td class="px-base py-sm text-right">125€</td>
        </tr>
  </tbody>
</table>
<!-- /table -->

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

Markup



<!-- table -->
  <table class="c-table">
  <thead>
    <tr class="border-t border-b border-neutral-base">
      <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark">Month you apply</th>
      <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark text-right">Rate for bicycles</th>
      <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark text-right">Rate for vehicles</th>
    </tr>
  </thead>
  <tbody>
        <tr class="border-t border-b border-neutral-base">
          <td class="px-base py-sm">January</td>
          <td class="px-base py-sm text-right">85€</td>
          <td class="px-base py-sm text-right">95€</td>
        </tr>
        <tr class="border-t border-b border-neutral-base">
          <td class="px-base py-sm">February</td>
          <td class="px-base py-sm text-right">75€</td>
          <td class="px-base py-sm text-right">55€</td>
        </tr>
        <tr class="border-t border-b border-neutral-base">
          <td class="px-base py-sm">March</td>
          <td class="px-base py-sm text-right">165€</td>
          <td class="px-base py-sm text-right">125€</td>
        </tr>
  </tbody>
</table>
<!-- /table -->

table with head and caption

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

Markup



<!-- table -->
  <table class="c-table">
  <caption class="mb-base font-bold text-left text-lg">Caption 1: Months and rates</caption>
  <thead>
    <tr class="border-t border-b border-neutral-base">
      <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark">Month you apply</th>
      <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark text-right">Rate for bicycles</th>
      <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark text-right">Rate for vehicles</th>
    </tr>
  </thead>
  <tbody>
        <tr class="border-t border-b border-neutral-base">
          <th scope="row" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark">January</th>
          <td class="px-base py-sm text-right">85€</td>
          <td class="px-base py-sm text-right">95€</td>
        </tr>
        <tr class="border-t border-b border-neutral-base">
          <th scope="row" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark">February</th>
          <td class="px-base py-sm text-right">75€</td>
          <td class="px-base py-sm text-right">55€</td>
        </tr>
        <tr class="border-t border-b border-neutral-base">
          <th scope="row" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark">March</th>
          <td class="px-base py-sm text-right">165€</td>
          <td class="px-base py-sm text-right">125€</td>
        </tr>
  </tbody>
</table>
<!-- /table -->

table with wrapper

Caption 1: Months and rates
Month you apply Rate for bicycles Rate for vehicles Rate for A Rate for B Rate for C Rate for D Rate for E Rate for F Rate for G Rate for H
January 85€ 95€ 85€ 95€ 85€ 95€ 85€ 95€ 85€ 95€
February 75€ 55€ 85€ 95€ 85€ 95€ 85€ 95€ 85€ 95€
March 165€ 125€ 85€ 95€ 85€ 95€ 85€ 95€ 85€ 95€
Show code

Macro

{% from "components/table/_macro.table.njk" import componentTable %}
{{ componentTable({
  "caption": "Caption 1: Months and rates",
  "captionClasses": "sticky left-0 w-0 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"
    },
    {
      "text": "Rate for A",
      "classes": "text-right"
    },
    {
      "text": "Rate for B",
      "classes": "text-right"
    },
    {
      "text": "Rate for C",
      "classes": "text-right"
    },
    {
      "text": "Rate for D",
      "classes": "text-right"
    },
    {
      "text": "Rate for E",
      "classes": "text-right"
    },
    {
      "text": "Rate for F",
      "classes": "text-right"
    },
    {
      "text": "Rate for G",
      "classes": "text-right"
    },
    {
      "text": "Rate for H",
      "classes": "text-right"
    }
  ],
  "rows": [
    [
      {
        "text": "January"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "February"
      },
      {
        "text": "75€",
        "classes": "text-right"
      },
      {
        "text": "55€",
        "classes": "text-right"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      }
    ],
    [
      {
        "text": "March"
      },
      {
        "text": "165€",
        "classes": "text-right"
      },
      {
        "text": "125€",
        "classes": "text-right"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      }
    ]
  ],
  "wrapper": {
    "classes": "relative overflow-x-auto pb-base"
  },
  "classes": "whitespace-nowrap"
})  }}

Markup



<!-- table -->
<div class="relative overflow-x-auto pb-base">
  <table class="c-table whitespace-nowrap">
  <caption class="sticky left-0 w-0 mb-base font-bold text-left text-lg">Caption 1: Months and rates</caption>
  <thead>
    <tr class="border-t border-b border-neutral-base">
      <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark">Month you apply</th>
      <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark text-right">Rate for bicycles</th>
      <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark text-right">Rate for vehicles</th>
      <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark text-right">Rate for A</th>
      <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark text-right">Rate for B</th>
      <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark text-right">Rate for C</th>
      <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark text-right">Rate for D</th>
      <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark text-right">Rate for E</th>
      <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark text-right">Rate for F</th>
      <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark text-right">Rate for G</th>
      <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark text-right">Rate for H</th>
    </tr>
  </thead>
  <tbody>
        <tr class="border-t border-b border-neutral-base">
          <th scope="row" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark">January</th>
          <td class="px-base py-sm text-right">85€</td>
          <td class="px-base py-sm text-right">95€</td>
          <td class="px-base py-sm text-right">85€</td>
          <td class="px-base py-sm text-right">95€</td>
          <td class="px-base py-sm text-right">85€</td>
          <td class="px-base py-sm text-right">95€</td>
          <td class="px-base py-sm text-right">85€</td>
          <td class="px-base py-sm text-right">95€</td>
          <td class="px-base py-sm text-right">85€</td>
          <td class="px-base py-sm text-right">95€</td>
        </tr>
        <tr class="border-t border-b border-neutral-base">
          <th scope="row" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark">February</th>
          <td class="px-base py-sm text-right">75€</td>
          <td class="px-base py-sm text-right">55€</td>
          <td class="px-base py-sm text-right">85€</td>
          <td class="px-base py-sm text-right">95€</td>
          <td class="px-base py-sm text-right">85€</td>
          <td class="px-base py-sm text-right">95€</td>
          <td class="px-base py-sm text-right">85€</td>
          <td class="px-base py-sm text-right">95€</td>
          <td class="px-base py-sm text-right">85€</td>
          <td class="px-base py-sm text-right">95€</td>
        </tr>
        <tr class="border-t border-b border-neutral-base">
          <th scope="row" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark">March</th>
          <td class="px-base py-sm text-right">165€</td>
          <td class="px-base py-sm text-right">125€</td>
          <td class="px-base py-sm text-right">85€</td>
          <td class="px-base py-sm text-right">95€</td>
          <td class="px-base py-sm text-right">85€</td>
          <td class="px-base py-sm text-right">95€</td>
          <td class="px-base py-sm text-right">85€</td>
          <td class="px-base py-sm text-right">95€</td>
          <td class="px-base py-sm text-right">85€</td>
          <td class="px-base py-sm text-right">95€</td>
        </tr>
  </tbody>
</table>
</div>
<!-- /table -->

table with sticky columns

Caption 1: Months and rates
Month you apply Rate for bicycles Rate for vehicles Rate for A Rate for B Rate for C Rate for D Rate for E Rate for F Rate for G Rate for H
January 85€ 95€ 85€ 95€ 85€ 95€ 85€ 95€ 85€ 95€
February 75€ 55€ 85€ 95€ 85€ 95€ 85€ 95€ 85€ 95€
March 165€ 125€ 85€ 95€ 85€ 95€ 85€ 95€ 85€ 95€
Show code

Macro

{% from "components/table/_macro.table.njk" import componentTable %}
{{ componentTable({
  "caption": "Caption 1: Months and rates",
  "captionClasses": "sticky top-0 left-0 w-0 mb-base font-bold text-left text-lg",
  "firstCellIsHeader": true,
  "head": [
    {
      "text": "Month you apply",
      "classes": "sticky left-0 w-60 bg-white"
    },
    {
      "text": "Rate for bicycles",
      "classes": "text-right"
    },
    {
      "text": "Rate for vehicles",
      "classes": "text-right"
    },
    {
      "text": "Rate for A",
      "classes": "text-right"
    },
    {
      "text": "Rate for B",
      "classes": "text-right"
    },
    {
      "text": "Rate for C",
      "classes": "text-right"
    },
    {
      "text": "Rate for D",
      "classes": "text-right"
    },
    {
      "text": "Rate for E",
      "classes": "text-right"
    },
    {
      "text": "Rate for F",
      "classes": "text-right"
    },
    {
      "text": "Rate for G",
      "classes": "text-right"
    },
    {
      "text": "Rate for H",
      "classes": "text-right sticky right-0 w-60 bg-white"
    }
  ],
  "rows": [
    [
      {
        "text": "January",
        "classes": "sticky left-0 w-60 bg-white"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right sticky right-0 w-60 bg-white"
      }
    ],
    [
      {
        "text": "February",
        "classes": "sticky left-0 w-60 bg-white"
      },
      {
        "text": "75€",
        "classes": "text-right"
      },
      {
        "text": "55€",
        "classes": "text-right"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right sticky right-0 w-60 bg-white"
      }
    ],
    [
      {
        "text": "March",
        "classes": "sticky left-0 w-60 bg-white"
      },
      {
        "text": "165€",
        "classes": "text-right"
      },
      {
        "text": "125€",
        "classes": "text-right"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right"
      },
      {
        "text": "85€",
        "classes": "text-right"
      },
      {
        "text": "95€",
        "classes": "text-right sticky right-0 w-60 bg-white"
      }
    ]
  ],
  "wrapper": {
    "classes": "overflow-x-auto pb-base"
  },
  "classes": "relative whitespace-nowrap"
})  }}

Markup



<!-- table -->
<div class="overflow-x-auto pb-base">
  <table class="c-table relative whitespace-nowrap">
  <caption class="sticky top-0 left-0 w-0 mb-base font-bold text-left text-lg">Caption 1: Months and rates</caption>
  <thead>
    <tr class="border-t border-b border-neutral-base">
      <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark sticky left-0 w-60 bg-white">Month you apply</th>
      <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark text-right">Rate for bicycles</th>
      <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark text-right">Rate for vehicles</th>
      <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark text-right">Rate for A</th>
      <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark text-right">Rate for B</th>
      <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark text-right">Rate for C</th>
      <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark text-right">Rate for D</th>
      <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark text-right">Rate for E</th>
      <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark text-right">Rate for F</th>
      <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark text-right">Rate for G</th>
      <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark text-right sticky right-0 w-60 bg-white">Rate for H</th>
    </tr>
  </thead>
  <tbody>
        <tr class="border-t border-b border-neutral-base">
          <th scope="row" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark sticky left-0 w-60 bg-white">January</th>
          <td class="px-base py-sm text-right">85€</td>
          <td class="px-base py-sm text-right">95€</td>
          <td class="px-base py-sm text-right">85€</td>
          <td class="px-base py-sm text-right">95€</td>
          <td class="px-base py-sm text-right">85€</td>
          <td class="px-base py-sm text-right">95€</td>
          <td class="px-base py-sm text-right">85€</td>
          <td class="px-base py-sm text-right">95€</td>
          <td class="px-base py-sm text-right">85€</td>
          <td class="px-base py-sm text-right sticky right-0 w-60 bg-white">95€</td>
        </tr>
        <tr class="border-t border-b border-neutral-base">
          <th scope="row" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark sticky left-0 w-60 bg-white">February</th>
          <td class="px-base py-sm text-right">75€</td>
          <td class="px-base py-sm text-right">55€</td>
          <td class="px-base py-sm text-right">85€</td>
          <td class="px-base py-sm text-right">95€</td>
          <td class="px-base py-sm text-right">85€</td>
          <td class="px-base py-sm text-right">95€</td>
          <td class="px-base py-sm text-right">85€</td>
          <td class="px-base py-sm text-right">95€</td>
          <td class="px-base py-sm text-right">85€</td>
          <td class="px-base py-sm text-right sticky right-0 w-60 bg-white">95€</td>
        </tr>
        <tr class="border-t border-b border-neutral-base">
          <th scope="row" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark sticky left-0 w-60 bg-white">March</th>
          <td class="px-base py-sm text-right">165€</td>
          <td class="px-base py-sm text-right">125€</td>
          <td class="px-base py-sm text-right">85€</td>
          <td class="px-base py-sm text-right">95€</td>
          <td class="px-base py-sm text-right">85€</td>
          <td class="px-base py-sm text-right">95€</td>
          <td class="px-base py-sm text-right">85€</td>
          <td class="px-base py-sm text-right">95€</td>
          <td class="px-base py-sm text-right">85€</td>
          <td class="px-base py-sm text-right sticky right-0 w-60 bg-white">95€</td>
        </tr>
  </tbody>
</table>
</div>
<!-- /table -->

classes

Show code

Macro

{% from "components/table/_macro.table.njk" import componentTable %}
{{ componentTable({
  "classes": "bg-warning-light"
})  }}

Markup



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

attributes

Show code

Macro

{% from "components/table/_macro.table.njk" import componentTable %}
{{ componentTable({
  "attributes": {
    "data-foo": "bar"
  }
})  }}

Markup



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

html as text

Foo <script>hacking.do(1337)</script>
Foo <script>hacking.do(1337)</script>
Show code

Macro

{% from "components/table/_macro.table.njk" import componentTable %}
{{ componentTable({
  "head": [
    {
      "text": "Foo <script>hacking.do(1337)</script>"
    }
  ],
  "rows": [
    [
      {
        "text": "Foo <script>hacking.do(1337)</script>"
      }
    ]
  ]
})  }}

Markup



<!-- table -->
  <table class="c-table">
  <thead>
    <tr class="border-t border-b border-neutral-base">
      <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark">Foo &lt;script&gt;hacking.do(1337)&lt;/script&gt;</th>
    </tr>
  </thead>
  <tbody>
        <tr class="border-t border-b border-neutral-base">
          <td class="px-base py-sm">Foo &lt;script&gt;hacking.do(1337)&lt;/script&gt;</td>
        </tr>
  </tbody>
</table>
<!-- /table -->

html

Foo bar
Foo bar
Show code

Macro

{% from "components/table/_macro.table.njk" import componentTable %}
{{ componentTable({
  "head": [
    {
      "html": "Foo <strong>bar</strong>"
    }
  ],
  "rows": [
    [
      {
        "html": "Foo <strong>bar</strong>"
      }
    ]
  ]
})  }}

Markup



<!-- table -->
  <table class="c-table">
  <thead>
    <tr class="border-t border-b border-neutral-base">
      <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark">Foo <strong>bar</strong></th>
    </tr>
  </thead>
  <tbody>
        <tr class="border-t border-b border-neutral-base">
          <td class="px-base py-sm">Foo <strong>bar</strong></td>
        </tr>
  </tbody>
</table>
<!-- /table -->

head with classes

Foo
Show code

Macro

{% from "components/table/_macro.table.njk" import componentTable %}
{{ componentTable({
  "head": [
    {
      "text": "Foo",
      "classes": "bg-warning-light"
    }
  ]
})  }}

Markup



<!-- table -->
  <table class="c-table">
  <thead>
    <tr class="border-t border-b border-neutral-base">
      <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark bg-warning-light">Foo</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>
<!-- /table -->

head with rowspan and colspan

Foo
Show code

Macro

{% from "components/table/_macro.table.njk" import componentTable %}
{{ componentTable({
  "head": [
    {
      "text": "Foo",
      "rowspan": 1,
      "colspan": 1
    }
  ]
})  }}

Markup



<!-- table -->
  <table class="c-table">
  <thead>
    <tr class="border-t border-b border-neutral-base">
      <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark" colspan="1" rowspan="1">Foo</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>
<!-- /table -->

head with attributes

Show code

Macro

{% from "components/table/_macro.table.njk" import componentTable %}
{{ componentTable({
  "head": [
    {
      "attributes": {
        "data-fizz": "buzz"
      }
    }
  ]
})  }}

Markup



<!-- table -->
  <table class="c-table">
  <thead>
    <tr class="border-t border-b border-neutral-base">
      <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark" data-fizz="buzz"></th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>
<!-- /table -->

with firstCellIsHeader true

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

Macro

{% from "components/table/_macro.table.njk" import componentTable %}
{{ componentTable({
  "firstCellIsHeader": 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"
      }
    ]
  ]
})  }}

Markup



<!-- table -->
  <table class="c-table">
  <tbody>
        <tr class="border-t border-b border-neutral-base">
          <th scope="row" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark">January</th>
          <td class="px-base py-sm text-right">85€</td>
          <td class="px-base py-sm text-right">95€</td>
        </tr>
        <tr class="border-t border-b border-neutral-base">
          <th scope="row" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark">February</th>
          <td class="px-base py-sm text-right">75€</td>
          <td class="px-base py-sm text-right">55€</td>
        </tr>
        <tr class="border-t border-b border-neutral-base">
          <th scope="row" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark">March</th>
          <td class="px-base py-sm text-right">165€</td>
          <td class="px-base py-sm text-right">125€</td>
        </tr>
  </tbody>
</table>
<!-- /table -->

firstCellIsHeader with classes

Foo
Show code

Macro

{% from "components/table/_macro.table.njk" import componentTable %}
{{ componentTable({
  "firstCellIsHeader": true,
  "rows": [
    [
      {
        "text": "Foo",
        "classes": "bg-warning-light"
      }
    ]
  ]
})  }}

Markup



<!-- table -->
  <table class="c-table">
  <tbody>
        <tr class="border-t border-b border-neutral-base">
          <th scope="row" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark bg-warning-light">Foo</th>
        </tr>
  </tbody>
</table>
<!-- /table -->

firstCellIsHeader with html

Foo bar
Show code

Macro

{% from "components/table/_macro.table.njk" import componentTable %}
{{ componentTable({
  "firstCellIsHeader": true,
  "rows": [
    [
      {
        "html": "Foo <strong>bar</strong>"
      }
    ]
  ]
})  }}

Markup



<!-- table -->
  <table class="c-table">
  <tbody>
        <tr class="border-t border-b border-neutral-base">
          <th scope="row" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark">Foo <strong>bar</strong></th>
        </tr>
  </tbody>
</table>
<!-- /table -->

firstCellIsHeader with html as text

Foo <script>hacking.do(1337)</script>
Show code

Macro

{% from "components/table/_macro.table.njk" import componentTable %}
{{ componentTable({
  "firstCellIsHeader": true,
  "rows": [
    [
      {
        "text": "Foo <script>hacking.do(1337)</script>"
      }
    ]
  ]
})  }}

Markup



<!-- table -->
  <table class="c-table">
  <tbody>
        <tr class="border-t border-b border-neutral-base">
          <th scope="row" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark">Foo &lt;script&gt;hacking.do(1337)&lt;/script&gt;</th>
        </tr>
  </tbody>
</table>
<!-- /table -->

firstCellIsHeader with rowspan and colspan

Foo
Show code

Macro

{% from "components/table/_macro.table.njk" import componentTable %}
{{ componentTable({
  "firstCellIsHeader": true,
  "rows": [
    [
      {
        "text": "Foo",
        "rowspan": 1,
        "colspan": 1
      }
    ]
  ]
})  }}

Markup



<!-- table -->
  <table class="c-table">
  <tbody>
        <tr class="border-t border-b border-neutral-base">
          <th scope="row" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark" colspan="1" rowspan="1">Foo</th>
        </tr>
  </tbody>
</table>
<!-- /table -->

firstCellIsHeader with attributes

Foo
Show code

Macro

{% from "components/table/_macro.table.njk" import componentTable %}
{{ componentTable({
  "firstCellIsHeader": true,
  "rows": [
    [
      {
        "text": "Foo",
        "attributes": {
          "data-fizz": "buzz"
        }
      }
    ]
  ]
})  }}

Markup



<!-- table -->
  <table class="c-table">
  <tbody>
        <tr class="border-t border-b border-neutral-base">
          <th scope="row" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark" data-fizz="buzz">Foo</th>
        </tr>
  </tbody>
</table>
<!-- /table -->

with falsey items

A 1
B 2
C 3
Show code

Macro

{% from "components/table/_macro.table.njk" import componentTable %}
{{ componentTable({
  "rows": [
    [
      {
        "text": "A"
      },
      {
        "text": 1
      }
    ],
    false,
    null,
    [
      {
        "text": "B"
      },
      {
        "text": 2
      }
    ],
    [
      {
        "text": "C"
      },
      {
        "text": 3
      }
    ]
  ]
})  }}

Markup



<!-- table -->
  <table class="c-table">
  <tbody>
        <tr class="border-t border-b border-neutral-base">
          <td class="px-base py-sm">A</td>
          <td class="px-base py-sm">1</td>
        </tr>
        <tr class="border-t border-b border-neutral-base">
          <td class="px-base py-sm">B</td>
          <td class="px-base py-sm">2</td>
        </tr>
        <tr class="border-t border-b border-neutral-base">
          <td class="px-base py-sm">C</td>
          <td class="px-base py-sm">3</td>
        </tr>
  </tbody>
</table>
<!-- /table -->

rows with classes

Foo
Show code

Macro

{% from "components/table/_macro.table.njk" import componentTable %}
{{ componentTable({
  "rows": [
    [
      {
        "text": "Foo",
        "classes": "bg-warning-light"
      }
    ]
  ]
})  }}

Markup



<!-- table -->
  <table class="c-table">
  <tbody>
        <tr class="border-t border-b border-neutral-base">
          <td class="px-base py-sm bg-warning-light">Foo</td>
        </tr>
  </tbody>
</table>
<!-- /table -->

rows with rowspan and colspan

Foo
Show code

Macro

{% from "components/table/_macro.table.njk" import componentTable %}
{{ componentTable({
  "rows": [
    [
      {
        "text": "Foo",
        "rowspan": 1,
        "colspan": 1
      }
    ]
  ]
})  }}

Markup



<!-- table -->
  <table class="c-table">
  <tbody>
        <tr class="border-t border-b border-neutral-base">
          <td class="px-base py-sm" colspan="1" rowspan="1">Foo</td>
        </tr>
  </tbody>
</table>
<!-- /table -->

rows with attributes

Foo
Show code

Macro

{% from "components/table/_macro.table.njk" import componentTable %}
{{ componentTable({
  "rows": [
    [
      {
        "text": "Foo",
        "attributes": {
          "data-fizz": "buzz"
        }
      }
    ]
  ]
})  }}

Markup



<!-- table -->
  <table class="c-table">
  <tbody>
        <tr class="border-t border-b border-neutral-base">
          <td class="px-base py-sm" data-fizz="buzz">Foo</td>
        </tr>
  </tbody>
</table>
<!-- /table -->