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.
Descripción visual
Componente treegrid con aspecto de tabla jerárquica con encabezados en texto negro sobre fondo blanco. Filas expandibles con iconos triangulares negros. Estructura de árbol con varios niveles de indentación visual, bordes grises claros separando filas.
| 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"
}
}) }}