Treegrid por defecto #
El Treegrid usa una tabla que se considera tabla compleja a nivel de accesibilidad. Así que tendría que tener una descripción con un details asociado a la tabla con el atributo aria-describedby.
| Documento | Importe | Fecha | Acciones |
|---|---|---|---|
| A0001 | 3.000,00€ | 05/01/2024 | Ver |
| A0001-1 | 1.000,00€ | 05/01/2024 | Ver |
| A0001-2 | 2.000,00€ | 05/01/2024 | Ver |
| A0001-2-1 | 1.000,00€ | 05/01/2024 | Ver |
| A0001-3 | 2.000,00€ | 05/01/2024 | Ver |
| A0001-3-1 | 5.000,00€ | 15/01/2024 | Ver |
| A0001-3-1-1 | 95€ | 15/01/2024 | Ver |
| A0001-3-1-2 | 5.000,00€ | 15/01/2024 | Ver |
Mostrar códigodel ejemplo: Treegrid por defecto
Contenido
Nunjucks macro
{% from "components/treegrid/_macro.treegrid.njk" import componentTreegrid %}
{{ componentTreegrid({
"caption": "Caption de la treegrid",
"captionClasses": "sr-only mb-base font-bold text-left text-lg",
"head": [
{
"text": "Documento"
},
{
"text": "Importe",
"classes": "lg:text-right"
},
{
"text": "Fecha"
},
{
"text": "Acciones"
}
],
"rows": [
{
"level": 1,
"posinset": 1,
"setsize": 1,
"expanded": false,
"cells": [
{
"text": "A0001",
"attributes": {
"id": "A0001"
}
},
{
"text": "3.000,00€",
"classes": "lg:text-right"
},
{
"text": "05/01/2024"
},
{
"html": "<a href='#' id='A0001-action' class='c-link' aria-labelledby='A0001-action A0001'>Ver</a>"
}
]
},
{
"level": 2,
"posinset": 1,
"setsize": 3,
"cells": [
{
"text": "A0001-1",
"attributes": {
"id": "A0001-1"
}
},
{
"text": "1.000,00€",
"classes": "lg:text-right"
},
{
"text": "05/01/2024"
},
{
"html": "<a href='#' id='A0001-1-action' class='c-link' aria-labelledby='A0001-1-action A0001-1'>Ver</a>"
}
]
},
{
"level": 2,
"posinset": 2,
"setsize": 3,
"expanded": false,
"cells": [
{
"text": "A0001-2",
"attributes": {
"id": "A0001-2"
}
},
{
"text": "2.000,00€",
"classes": "lg:text-right"
},
{
"text": "05/01/2024"
},
{
"html": "<a href='#' id='A0001-2-action' class='c-link' aria-labelledby='A0001-2-action A0001-2'>Ver</a>"
}
]
},
{
"level": 3,
"posinset": 1,
"setsize": 1,
"cells": [
{
"text": "A0001-2-1",
"attributes": {
"id": "A0001-2-1"
}
},
{
"text": "1.000,00€",
"classes": "lg:text-right"
},
{
"text": "05/01/2024"
},
{
"html": "<a href='#' id='A0001-2-1-action' class='c-link' aria-labelledby='A0001-2-1-action A0001-2-1'>Ver</a>"
}
]
},
{
"level": 2,
"posinset": 3,
"setsize": 3,
"expanded": false,
"cells": [
{
"text": "A0001-3",
"attributes": {
"id": "A0001-3"
}
},
{
"text": "2.000,00€",
"classes": "lg:text-right"
},
{
"text": "05/01/2024"
},
{
"html": "<a href='#' id='A0001-3-action' class='c-link' aria-labelledby='A0001-3-action A0001-3'>Ver</a>"
}
]
},
{
"level": 3,
"posinset": 1,
"setsize": 1,
"expanded": false,
"cells": [
{
"text": "A0001-3-1",
"attributes": {
"id": "A0001-3-1"
}
},
{
"text": "5.000,00€",
"classes": "lg:text-right"
},
{
"text": "15/01/2024"
},
{
"html": "<a href='#' id='A0001-3-1-action' class='c-link' aria-labelledby='A0001-3-1-action A0001-3-1'>Ver</a>"
}
]
},
{
"level": 4,
"posinset": 1,
"setsize": 2,
"cells": [
{
"text": "A0001-3-1-1",
"attributes": {
"id": "A0001-3-1-1"
}
},
{
"text": "95€",
"classes": "lg:text-right"
},
{
"text": "15/01/2024"
},
{
"html": "<a href='#' id='A0001-3-1-1-action' class='c-link' aria-labelledby='A0001-3-1-1-action A0001-3-1-1'>Ver</a>"
}
]
},
{
"level": 4,
"posinset": 2,
"setsize": 2,
"cells": [
{
"text": "A0001-3-1-2",
"attributes": {
"id": "A0001-3-1-2"
}
},
{
"text": "5.000,00€",
"classes": "lg:text-right"
},
{
"text": "15/01/2024"
},
{
"html": "<a href='#' id='A0001-3-1-2-action' class='c-link' aria-labelledby='A0001-3-1-2-action A0001-3-1-2'>Ver</a>"
}
]
}
],
"wrapper": {
"classes": "relative overflow-x-auto pb-base focus:outline-hidden focus:shadow-outline-black",
"attributes": {
"tabindex": "0",
"role": "region",
"aria-label": "Treegrid con scroll del ejemplo Treegrid con wrapper"
}
},
"classes": "w-full",
"attributes": {
"id": "treegrid",
"aria-describedby": "treegrid-desc"
}
}) }}