Table
Mostrar parámetros
Parámetros del componente
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: foot
type: array
required: false
description: Array of table tfoot cells.
params:
- name: text
type: string
required: false
description: If `html` is set, this is not required. Text for table tfoot 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 tfoot cells. If `html` is provided, the `text` argument will be ignore
- name: classes
type: string
required: false
description: Classes to add to the table tfoot 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: |
## Las tablas deben:
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.
Tabla por defecto #
Mes de pago | Primer pago | Segundo pago |
---|---|---|
Enero | 85€ | 95€ |
Febrero | 75€ | 55€ |
Marzo | 165€ | 125€ |
Mostrar códigodel ejemplo: Tabla por defecto
Contenido
Nunjucks macro
{% from "components/table/_macro.table.njk" import componentTable %}
{{ componentTable({
"caption": "Caption de la tabla",
"captionClasses": "sr-only mb-base font-bold text-left text-lg",
"head": [
{
"text": "Mes de pago"
},
{
"text": "Primer pago",
"classes": "text-right"
},
{
"text": "Segundo pago",
"classes": "text-right"
}
],
"rows": [
[
{
"text": "Enero"
},
{
"text": "85€",
"classes": "text-right"
},
{
"text": "95€",
"classes": "text-right"
}
],
[
{
"text": "Febrero"
},
{
"text": "75€",
"classes": "text-right"
},
{
"text": "55€",
"classes": "text-right"
}
],
[
{
"text": "Marzo"
},
{
"text": "165€",
"classes": "text-right"
},
{
"text": "125€",
"classes": "text-right"
}
]
]
}) }}
HTML
<!-- table -->
<table class="c-table">
<caption class="sr-only mb-base font-bold text-left text-lg">Caption de la tabla</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">Mes de pago</th>
<th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark text-right">Primer pago</th>
<th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark text-right">Segundo pago</th>
</tr>
</thead>
<tbody>
<tr class="border-t border-b border-neutral-base">
<td class="px-base py-sm">Enero</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">Febrero</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">Marzo</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 -->
Tabla con tfoot #
Mes de pago | Primer pago | Segundo pago |
---|---|---|
Enero | 85€ | 95€ |
Febrero | 75€ | 55€ |
Marzo | 165€ | 125€ |
Suma | 325€ | 275€ |
Mostrar códigodel ejemplo: Tabla con tfoot
Contenido
Nunjucks macro
{% from "components/table/_macro.table.njk" import componentTable %}
{{ componentTable({
"caption": "Caption de la tabla",
"captionClasses": "sr-only mb-base font-bold text-left text-lg",
"head": [
{
"text": "Mes de pago"
},
{
"text": "Primer pago",
"classes": "text-right"
},
{
"text": "Segundo pago",
"classes": "text-right"
}
],
"rows": [
[
{
"text": "Enero"
},
{
"text": "85€",
"classes": "text-right"
},
{
"text": "95€",
"classes": "text-right"
}
],
[
{
"text": "Febrero"
},
{
"text": "75€",
"classes": "text-right"
},
{
"text": "55€",
"classes": "text-right"
}
],
[
{
"text": "Marzo"
},
{
"text": "165€",
"classes": "text-right"
},
{
"text": "125€",
"classes": "text-right"
}
]
],
"foot": [
{
"text": "Suma",
"classes": "uppercase"
},
{
"text": "325€",
"classes": "text-right"
},
{
"text": "275€",
"classes": "text-right"
}
]
}) }}
HTML
<!-- table -->
<table class="c-table">
<caption class="sr-only mb-base font-bold text-left text-lg">Caption de la tabla</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">Mes de pago</th>
<th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark text-right">Primer pago</th>
<th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark text-right">Segundo pago</th>
</tr>
</thead>
<tbody>
<tr class="border-t border-b border-neutral-base">
<td class="px-base py-sm">Enero</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">Febrero</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">Marzo</td>
<td class="px-base py-sm text-right">165€</td>
<td class="px-base py-sm text-right">125€</td>
</tr>
</tbody>
<tfoot>
<tr class="border-t-2 border-b border-neutral-base">
<td scope="col" class="px-base py-sm uppercase">Suma</td>
<td scope="col" class="px-base py-sm text-right">325€</td>
<td scope="col" class="px-base py-sm text-right">275€</td>
</tr>
</tfoot>
</table>
<!-- /table -->
Tabla con caption visible #
Mes de pago | Primer pago | Segundo pago |
---|---|---|
Enero | 85€ | 95€ |
Febrero | 75€ | 55€ |
Marzo | 165€ | 125€ |
Mostrar códigodel ejemplo: Tabla con caption visible
Contenido
Nunjucks macro
{% from "components/table/_macro.table.njk" import componentTable %}
{{ componentTable({
"caption": "Caption 1: Meses y pagos",
"captionClasses": "mb-base font-bold text-left text-lg",
"firstCellIsHeader": true,
"head": [
{
"text": "Mes de pago"
},
{
"text": "Primer pago",
"classes": "text-right"
},
{
"text": "Segundo pago",
"classes": "text-right"
}
],
"rows": [
[
{
"text": "Enero"
},
{
"text": "85€",
"classes": "text-right"
},
{
"text": "95€",
"classes": "text-right"
}
],
[
{
"text": "Febrero"
},
{
"text": "75€",
"classes": "text-right"
},
{
"text": "55€",
"classes": "text-right"
}
],
[
{
"text": "Marzo"
},
{
"text": "165€",
"classes": "text-right"
},
{
"text": "125€",
"classes": "text-right"
}
]
]
}) }}
HTML
<!-- table -->
<table class="c-table">
<caption class="mb-base font-bold text-left text-lg">Caption 1: Meses y pagos</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">Mes de pago</th>
<th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark text-right">Primer pago</th>
<th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark text-right">Segundo pago</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">Enero</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">Febrero</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">Marzo</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 -->
Tabla con wrapper #
Usa el parámetro wrapper
para rodear la tabla con un <div>
y poder añadir clases, normalmente para hacer scroll horizontal en la tabla en anchuras pequeñas.
Mes de pago | Primer pago | Segundo pago | Rate for A | Rate for B | Rate for C | Rate for D | Rate for E | Rate for F | Rate for G | Rate for H |
---|---|---|---|---|---|---|---|---|---|---|
Enero | 85€ | 95€ | 85€ | 95€ | 85€ | 95€ | 85€ | 95€ | 85€ | 95€ |
Febrero | 75€ | 55€ | 85€ | 95€ | 85€ | 95€ | 85€ | 95€ | 85€ | 95€ |
Marzo | 165€ | 125€ | 85€ | 95€ | 85€ | 95€ | 85€ | 95€ | 85€ | 95€ |
Mostrar códigodel ejemplo: Tabla con wrapper
Contenido
Nunjucks macro
{% from "components/table/_macro.table.njk" import componentTable %}
{{ componentTable({
"caption": "Caption 1: Meses y pagos",
"captionClasses": "sticky left-0 w-0 mb-base font-bold text-left text-lg",
"firstCellIsHeader": true,
"head": [
{
"text": "Mes de pago"
},
{
"text": "Primer pago",
"classes": "text-right"
},
{
"text": "Segundo pago",
"classes": "text-right"
},
{
"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": "Enero"
},
{
"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": "Febrero"
},
{
"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": "Marzo"
},
{
"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"
}) }}
HTML
<!-- 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: Meses y pagos</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">Mes de pago</th>
<th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark text-right">Primer pago</th>
<th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark text-right">Segundo pago</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">Enero</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">Febrero</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">Marzo</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 con columnas sticky #
En este ejemplo la primera y última columna se mantienen fijas y el resto hacen scroll horizontal si la anchura es pequeña.
Mes de pago | Primer pago | Segundo pago | Rate for A | Rate for B | Rate for C | Rate for D | Rate for E | Rate for F | Rate for G | Rate for H |
---|---|---|---|---|---|---|---|---|---|---|
Enero | 85€ | 95€ | 85€ | 95€ | 85€ | 95€ | 85€ | 95€ | 85€ | 95€ |
Febrero | 75€ | 55€ | 85€ | 95€ | 85€ | 95€ | 85€ | 95€ | 85€ | 95€ |
Marzo | 165€ | 125€ | 85€ | 95€ | 85€ | 95€ | 85€ | 95€ | 85€ | 95€ |
Mostrar códigodel ejemplo: Table con columnas sticky
Contenido
Nunjucks macro
{% from "components/table/_macro.table.njk" import componentTable %}
{{ componentTable({
"caption": "Caption 1: Meses y pagos",
"captionClasses": "sticky top-0 left-0 w-0 mb-base font-bold text-left text-lg",
"firstCellIsHeader": true,
"head": [
{
"text": "Mes de pago",
"classes": "sticky left-0 w-60 bg-white"
},
{
"text": "Primer pago",
"classes": "text-right"
},
{
"text": "Segundo pago",
"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": "Enero",
"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": "Febrero",
"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": "Marzo",
"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"
}) }}
HTML
<!-- 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: Meses y pagos</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">Mes de pago</th>
<th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark text-right">Primer pago</th>
<th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark text-right">Segundo pago</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">Enero</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">Febrero</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">Marzo</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 #
Mostrar códigodel ejemplo: Classes
Contenido
Nunjucks macro
{% from "components/table/_macro.table.njk" import componentTable %}
{{ componentTable({
"classes": "bg-primary-light"
}) }}
HTML
<!-- table -->
<table class="c-table bg-primary-light">
<tbody>
</tbody>
</table>
<!-- /table -->
Atributos #
Mostrar códigodel ejemplo: Atributos
Contenido
Nunjucks macro
{% from "components/table/_macro.table.njk" import componentTable %}
{{ componentTable({
"attributes": {
"data-foo": "bar"
}
}) }}
HTML
<!-- table -->
<table class="c-table" data-foo="bar">
<tbody>
</tbody>
</table>
<!-- /table -->
Html como texto #
Foo <strong>bar</strong> |
---|
Foo <strong>bar</strong> |
Mostrar códigodel ejemplo: Html como texto
Contenido
Nunjucks macro
{% from "components/table/_macro.table.njk" import componentTable %}
{{ componentTable({
"head": [
{
"text": "Foo <strong>bar</strong>"
}
],
"rows": [
[
{
"text": "Foo <strong>bar</strong>"
}
]
]
}) }}
HTML
<!-- 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 -->
Html #
Foo bar |
---|
Foo bar |
Mostrar códigodel ejemplo: Html
Contenido
Nunjucks macro
{% from "components/table/_macro.table.njk" import componentTable %}
{{ componentTable({
"head": [
{
"html": "Foo <strong>bar</strong>"
}
],
"rows": [
[
{
"html": "Foo <strong>bar</strong>"
}
]
]
}) }}
HTML
<!-- 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 con clases #
Foo |
---|
Mostrar códigodel ejemplo: Head con clases
Contenido
Nunjucks macro
{% from "components/table/_macro.table.njk" import componentTable %}
{{ componentTable({
"head": [
{
"text": "Foo",
"classes": "bg-primary-light"
}
]
}) }}
HTML
<!-- 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-primary-light">Foo</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<!-- /table -->
Head con rowspan y colspan #
Foo |
---|
Mostrar códigodel ejemplo: Head con rowspan y colspan
Contenido
Nunjucks macro
{% from "components/table/_macro.table.njk" import componentTable %}
{{ componentTable({
"head": [
{
"text": "Foo",
"rowspan": 1,
"colspan": 1
}
]
}) }}
HTML
<!-- 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 con atributos #
Mostrar códigodel ejemplo: Head con atributos
Contenido
Nunjucks macro
{% from "components/table/_macro.table.njk" import componentTable %}
{{ componentTable({
"head": [
{
"attributes": {
"data-fizz": "buzz"
}
}
]
}) }}
HTML
<!-- 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 -->
Con firstcellisheader true #
Enero | 85€ | 95€ |
---|---|---|
Febrero | 75€ | 55€ |
Marzo | 165€ | 125€ |
Mostrar códigodel ejemplo: Con firstcellisheader true
Contenido
Nunjucks macro
{% from "components/table/_macro.table.njk" import componentTable %}
{{ componentTable({
"firstCellIsHeader": true,
"rows": [
[
{
"text": "Enero"
},
{
"text": "85€",
"classes": "text-right"
},
{
"text": "95€",
"classes": "text-right"
}
],
[
{
"text": "Febrero"
},
{
"text": "75€",
"classes": "text-right"
},
{
"text": "55€",
"classes": "text-right"
}
],
[
{
"text": "Marzo"
},
{
"text": "165€",
"classes": "text-right"
},
{
"text": "125€",
"classes": "text-right"
}
]
]
}) }}
HTML
<!-- 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">Enero</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">Febrero</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">Marzo</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 con clases #
Foo |
---|
Mostrar códigodel ejemplo: Firstcellisheader con clases
Contenido
Nunjucks macro
{% from "components/table/_macro.table.njk" import componentTable %}
{{ componentTable({
"firstCellIsHeader": true,
"rows": [
[
{
"text": "Foo",
"classes": "bg-primary-light"
}
]
]
}) }}
HTML
<!-- 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-primary-light">Foo</th>
</tr>
</tbody>
</table>
<!-- /table -->
Firstcellisheader con html #
Foo bar |
---|
Mostrar códigodel ejemplo: Firstcellisheader con html
Contenido
Nunjucks macro
{% from "components/table/_macro.table.njk" import componentTable %}
{{ componentTable({
"firstCellIsHeader": true,
"rows": [
[
{
"html": "Foo <strong>bar</strong>"
}
]
]
}) }}
HTML
<!-- 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 con html como texto #
Foo <strong>bar</strong> |
---|
Mostrar códigodel ejemplo: Firstcellisheader con html como texto
Contenido
Nunjucks macro
{% from "components/table/_macro.table.njk" import componentTable %}
{{ componentTable({
"firstCellIsHeader": true,
"rows": [
[
{
"text": "Foo <strong>bar</strong>"
}
]
]
}) }}
HTML
<!-- 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 con rowspan y colspan #
Foo |
---|
Mostrar códigodel ejemplo: Firstcellisheader con rowspan y colspan
Contenido
Nunjucks macro
{% from "components/table/_macro.table.njk" import componentTable %}
{{ componentTable({
"firstCellIsHeader": true,
"rows": [
[
{
"text": "Foo",
"rowspan": 1,
"colspan": 1
}
]
]
}) }}
HTML
<!-- 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 con atributos #
Foo |
---|
Mostrar códigodel ejemplo: Firstcellisheader con atributos
Contenido
Nunjucks macro
{% from "components/table/_macro.table.njk" import componentTable %}
{{ componentTable({
"firstCellIsHeader": true,
"rows": [
[
{
"text": "Foo",
"attributes": {
"data-fizz": "buzz"
}
}
]
]
}) }}
HTML
<!-- 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 -->
Con items falsos #
A | 1 |
B | 2 |
C | 3 |
Mostrar códigodel ejemplo: Con items falsos
Contenido
Nunjucks macro
{% from "components/table/_macro.table.njk" import componentTable %}
{{ componentTable({
"rows": [
[
{
"text": "A"
},
{
"text": 1
}
],
false,
null,
[
{
"text": "B"
},
{
"text": 2
}
],
[
{
"text": "C"
},
{
"text": 3
}
]
]
}) }}
HTML
<!-- 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 -->
Filas con clases #
Foo |
Mostrar códigodel ejemplo: Filas con clases
Contenido
Nunjucks macro
{% from "components/table/_macro.table.njk" import componentTable %}
{{ componentTable({
"rows": [
[
{
"text": "Foo",
"classes": "bg-primary-light"
}
]
]
}) }}
HTML
<!-- table -->
<table class="c-table">
<tbody>
<tr class="border-t border-b border-neutral-base">
<td class="px-base py-sm bg-primary-light">Foo</td>
</tr>
</tbody>
</table>
<!-- /table -->
Filas con rowspan y colspan #
Foo |
Mostrar códigodel ejemplo: Filas con rowspan y colspan
Contenido
Nunjucks macro
{% from "components/table/_macro.table.njk" import componentTable %}
{{ componentTable({
"rows": [
[
{
"text": "Foo",
"rowspan": 1,
"colspan": 1
}
]
]
}) }}
HTML
<!-- 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 -->
Filas con atributos #
Foo |
Mostrar códigodel ejemplo: Filas con atributos
Contenido
Nunjucks macro
{% from "components/table/_macro.table.njk" import componentTable %}
{{ componentTable({
"rows": [
[
{
"text": "Foo",
"attributes": {
"data-fizz": "buzz"
}
}
]
]
}) }}
HTML
<!-- 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 -->