DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

Tabla

Datos

Componente para ordenar valores relacionados en filas y columnas.

Treegrid

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

Tabla jerárquica con encabezados "Documento", "Importe", "Fecha" y "Acciones" en texto negro sobre fondo blanco. Filas expandibles con iconos triangulares negros, montos numéricos alineados a la derecha, fechas formato DD/MM/YYYY, y enlaces azules "Ver" en la columna de acciones. Estructura de árbol con hasta 3 niveles de indentación visual, bordes grises claros separando filas, identificadores alfanuméricos en negro (A0001, A0001-1, etc.).

Caption de la treegrid
Documento Importe Fecha Acciones
A0001-1 1.000,00€ 05/01/2024 Ver
A0001-2-1 1.000,00€ 05/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"
  }
}) }}

Treegrid con tfoot

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

Tabla jerárquica con encabezados "Documento", "Importe", "Fecha" y "Acciones" en texto negro sobre fondo blanco. Filas expandibles con iconos triangulares negros, montos numéricos alineados a la derecha, fechas formato DD/MM/YYYY, y enlaces azules "Ver" en la columna de acciones. Fila inferior con fondo blanco mostrando texto "SUMA" en negro y valor total "10.045€", estructura de árbol con hasta 3 niveles de indentación, bordes grises claros entre filas.

Caption de la treegrid
Documento Importe Fecha Acciones
B0001 3.000,00€ 05/01/2024 Ver
B0001-1 1.000,00€ 05/01/2024 Ver
B0001-2-1 1.000,00€ 05/01/2024 Ver
B0001-3-1-1 95€ 15/01/2024 Ver
B0001-3-1-2 5.000,00€ 15/01/2024 Ver
Suma 10.045€
Mostrar códigodel ejemplo: Treegrid con tfoot

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": true,
      "cells": [
        {
          "text": "B0001",
          "attributes": {
            "id": "B0001"
          }
        },
        {
          "text": "3.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "05/01/2024"
        },
        {
          "html": "<a href='#' id='B0001-action' class='c-link' aria-labelledby='B0001-action B0001'>Ver</a>"
        }
      ]
    },
    {
      "level": 2,
      "posinset": 1,
      "setsize": 3,
      "cells": [
        {
          "text": "B0001-1",
          "attributes": {
            "id": "B0001-1"
          }
        },
        {
          "text": "1.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "05/01/2024"
        },
        {
          "html": "<a href='#' id='B0001-1-action' class='c-link' aria-labelledby='B0001-1-action B0001-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 2,
      "posinset": 2,
      "setsize": 3,
      "expanded": false,
      "cells": [
        {
          "text": "B0001-2",
          "attributes": {
            "id": "B0001-2"
          }
        },
        {
          "text": "2.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "05/01/2024"
        },
        {
          "html": "<a href='#' id='B0001-2-action' class='c-link' aria-labelledby='B0001-2-action B0001-2'>Ver</a>"
        }
      ]
    },
    {
      "level": 3,
      "posinset": 1,
      "setsize": 1,
      "cells": [
        {
          "text": "B0001-2-1",
          "attributes": {
            "id": "B0001-2-1"
          }
        },
        {
          "text": "1.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "05/01/2024"
        },
        {
          "html": "<a href='#' id='B0001-2-1-action' class='c-link' aria-labelledby='B0001-2-1-action B0001-2-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 2,
      "posinset": 3,
      "setsize": 3,
      "expanded": false,
      "cells": [
        {
          "text": "B0001-3",
          "attributes": {
            "id": "B0001-3"
          }
        },
        {
          "text": "2.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "05/01/2024"
        },
        {
          "html": "<a href='#' id='B0001-3-action' class='c-link' aria-labelledby='B0001-3-action B0001-3'>Ver</a>"
        }
      ]
    },
    {
      "level": 3,
      "posinset": 1,
      "setsize": 1,
      "expanded": false,
      "cells": [
        {
          "text": "B0001-3-1",
          "attributes": {
            "id": "B0001-3-1"
          }
        },
        {
          "text": "5.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "15/01/2024"
        },
        {
          "html": "<a href='#' id='B0001-3-1-action' class='c-link' aria-labelledby='B0001-3-1-action B0001-3-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 4,
      "posinset": 1,
      "setsize": 2,
      "cells": [
        {
          "text": "B0001-3-1-1",
          "attributes": {
            "id": "B0001-3-1-1"
          }
        },
        {
          "text": "95€",
          "classes": "lg:text-right"
        },
        {
          "text": "15/01/2024"
        },
        {
          "html": "<a href='#' id='B0001-3-1-1-action' class='c-link' aria-labelledby='B0001-3-1-1-action B0001-3-1-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 4,
      "posinset": 2,
      "setsize": 2,
      "cells": [
        {
          "text": "B0001-3-1-2",
          "attributes": {
            "id": "B0001-3-1-2"
          }
        },
        {
          "text": "5.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "15/01/2024"
        },
        {
          "html": "<a href='#' id='B0001-3-1-2-action' class='c-link' aria-labelledby='B0001-3-1-2-action B0001-3-1-2'>Ver</a>"
        }
      ]
    }
  ],
  "foot": [
    {
      "text": "Suma",
      "classes": "uppercase"
    },
    {
      "text": "10.045€",
      "classes": "lg:text-right"
    },
    {
      "text": ""
    },
    {
      "text": ""
    }
  ],
  "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-B",
    "aria-describedby": "treegrid-B-desc"
  }
}) }}

Treegrid con caption visible

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

Tabla jerárquica con título "Documentos contables" en negro arriba, seguido de encabezados "Importe", "Fecha" y "Acciones" en texto negro sobre fondo blanco. Filas expandibles con iconos triangulares negros, montos numéricos alineados a la derecha, fechas formato DD/MM/YYYY, y enlaces azules "Ver" en la columna de acciones. Estructura de árbol con hasta 3 niveles de indentación visual, identificadores alfanuméricos C0001 en negro, bordes grises claros separando filas.

Documentos contables
Documento Importe Fecha Acciones
C0001 3.000,00€ 05/01/2024 Ver
C0001-1 1.000,00€ 05/01/2024 Ver
C0001-2-1 1.000,00€ 05/01/2024 Ver
C0001-3-1-1 95€ 15/01/2024 Ver
C0001-3-1-2 5.000,00€ 15/01/2024 Ver
Mostrar códigodel ejemplo: Treegrid con caption visible

Contenido

Nunjucks macro
{% from "components/treegrid/_macro.treegrid.njk" import componentTreegrid %}
{{ componentTreegrid({
  "caption": "Documentos contables",
  "captionClasses": "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": true,
      "cells": [
        {
          "text": "C0001",
          "attributes": {
            "id": "C0001"
          }
        },
        {
          "text": "3.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "05/01/2024"
        },
        {
          "html": "<a href='#' id='C0001-action' class='c-link' aria-labelledby='C0001-action C0001'>Ver</a>"
        }
      ]
    },
    {
      "level": 2,
      "posinset": 1,
      "setsize": 3,
      "cells": [
        {
          "text": "C0001-1",
          "attributes": {
            "id": "C0001-1"
          }
        },
        {
          "text": "1.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "05/01/2024"
        },
        {
          "html": "<a href='#' id='C0001-1-action' class='c-link' aria-labelledby='C0001-1-action C0001-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 2,
      "posinset": 2,
      "setsize": 3,
      "expanded": false,
      "cells": [
        {
          "text": "C0001-2",
          "attributes": {
            "id": "C0001-2"
          }
        },
        {
          "text": "2.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "05/01/2024"
        },
        {
          "html": "<a href='#' id='C0001-2-action' class='c-link' aria-labelledby='C0001-2-action C0001-2'>Ver</a>"
        }
      ]
    },
    {
      "level": 3,
      "posinset": 1,
      "setsize": 1,
      "cells": [
        {
          "text": "C0001-2-1",
          "attributes": {
            "id": "C0001-2-1"
          }
        },
        {
          "text": "1.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "05/01/2024"
        },
        {
          "html": "<a href='#' id='C0001-2-1-action' class='c-link' aria-labelledby='C0001-2-1-action C0001-2-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 2,
      "posinset": 3,
      "setsize": 3,
      "expanded": false,
      "cells": [
        {
          "text": "C0001-3",
          "attributes": {
            "id": "C0001-3"
          }
        },
        {
          "text": "2.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "05/01/2024"
        },
        {
          "html": "<a href='#' id='C0001-3-action' class='c-link' aria-labelledby='C0001-3-action C0001-3'>Ver</a>"
        }
      ]
    },
    {
      "level": 3,
      "posinset": 1,
      "setsize": 1,
      "expanded": false,
      "cells": [
        {
          "text": "C0001-3-1",
          "attributes": {
            "id": "C0001-3-1"
          }
        },
        {
          "text": "5.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "15/01/2024"
        },
        {
          "html": "<a href='#' id='C0001-3-1-action' class='c-link' aria-labelledby='C0001-3-1-action C0001-3-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 4,
      "posinset": 1,
      "setsize": 2,
      "cells": [
        {
          "text": "C0001-3-1-1",
          "attributes": {
            "id": "C0001-3-1-1"
          }
        },
        {
          "text": "95€",
          "classes": "lg:text-right"
        },
        {
          "text": "15/01/2024"
        },
        {
          "html": "<a href='#' id='C0001-3-1-1-action' class='c-link' aria-labelledby='C0001-3-1-1-action C0001-3-1-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 4,
      "posinset": 2,
      "setsize": 2,
      "cells": [
        {
          "text": "C0001-3-1-2",
          "attributes": {
            "id": "C0001-3-1-2"
          }
        },
        {
          "text": "5.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "15/01/2024"
        },
        {
          "html": "<a href='#' id='C0001-3-1-2-action' class='c-link' aria-labelledby='C0001-3-1-2-action C0001-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-B",
    "aria-describedby": "treegrid-B-desc"
  }
}) }}

Treegrid con primera celda como header

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

Tabla con estructura jerárquica expandible mediante triángulos negros a la izquierda de cada fila padre. Filas con identificadores de documento en texto negro con sangría progresiva (E0001, E0001-1, E0001-2-1), columnas de "Importe" en negro, "Fecha" en negro, y "Acciones" con enlaces "Ver" en azul. Fondo blanco con bordes grises horizontales separando filas, cabecera en texto negro sobre fondo gris claro.

Caption de la treegrid
Documento Importe Fecha Acciones
E0001 3.000,00€ 05/01/2024 Ver
E0001-1 1.000,00€ 05/01/2024 Ver
E0001-2-1 1.000,00€ 05/01/2024 Ver
E0001-3-1-1 95€ 15/01/2024 Ver
E0001-3-1-2 5.000,00€ 15/01/2024 Ver
Mostrar códigodel ejemplo: Treegrid con primera celda como header

Contenido

Nunjucks macro
{% from "components/treegrid/_macro.treegrid.njk" import componentTreegrid %}
{{ componentTreegrid({
  "firstCellIsHeader": true,
  "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": true,
      "cells": [
        {
          "text": "E0001",
          "attributes": {
            "id": "E0001"
          }
        },
        {
          "text": "3.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "05/01/2024"
        },
        {
          "html": "<a href='#' id='E0001-action' class='c-link' aria-labelledby='E0001-action E0001'>Ver</a>"
        }
      ]
    },
    {
      "level": 2,
      "posinset": 1,
      "setsize": 3,
      "cells": [
        {
          "text": "E0001-1",
          "attributes": {
            "id": "E0001-1"
          }
        },
        {
          "text": "1.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "05/01/2024"
        },
        {
          "html": "<a href='#' id='E0001-1-action' class='c-link' aria-labelledby='E0001-1-action E0001-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 2,
      "posinset": 2,
      "setsize": 3,
      "expanded": false,
      "cells": [
        {
          "text": "E0001-2",
          "attributes": {
            "id": "E0001-2"
          }
        },
        {
          "text": "2.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "05/01/2024"
        },
        {
          "html": "<a href='#' id='E0001-2-action' class='c-link' aria-labelledby='E0001-2-action E0001-2'>Ver</a>"
        }
      ]
    },
    {
      "level": 3,
      "posinset": 1,
      "setsize": 1,
      "cells": [
        {
          "text": "E0001-2-1",
          "attributes": {
            "id": "E0001-2-1"
          }
        },
        {
          "text": "1.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "05/01/2024"
        },
        {
          "html": "<a href='#' id='E0001-2-1-action' class='c-link' aria-labelledby='E0001-2-1-action E0001-2-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 2,
      "posinset": 3,
      "setsize": 3,
      "expanded": false,
      "cells": [
        {
          "text": "E0001-3",
          "attributes": {
            "id": "E0001-3"
          }
        },
        {
          "text": "2.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "05/01/2024"
        },
        {
          "html": "<a href='#' id='E0001-3-action' class='c-link' aria-labelledby='E0001-3-action E0001-3'>Ver</a>"
        }
      ]
    },
    {
      "level": 3,
      "posinset": 1,
      "setsize": 1,
      "expanded": false,
      "cells": [
        {
          "text": "E0001-3-1",
          "attributes": {
            "id": "E0001-3-1"
          }
        },
        {
          "text": "5.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "15/01/2024"
        },
        {
          "html": "<a href='#' id='E0001-3-1-action' class='c-link' aria-labelledby='E0001-3-1-action E0001-3-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 4,
      "posinset": 1,
      "setsize": 2,
      "cells": [
        {
          "text": "E0001-3-1-1",
          "attributes": {
            "id": "E0001-3-1-1"
          }
        },
        {
          "text": "95€",
          "classes": "lg:text-right"
        },
        {
          "text": "15/01/2024"
        },
        {
          "html": "<a href='#' id='E0001-3-1-1-action' class='c-link' aria-labelledby='E0001-3-1-1-action E0001-3-1-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 4,
      "posinset": 2,
      "setsize": 2,
      "cells": [
        {
          "text": "E0001-3-1-2",
          "attributes": {
            "id": "E0001-3-1-2"
          }
        },
        {
          "text": "5.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "15/01/2024"
        },
        {
          "html": "<a href='#' id='E0001-3-1-2-action' class='c-link' aria-labelledby='E0001-3-1-2-action E0001-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"
  }
}) }}

Treegrid con 15 niveles de profundidad

Ejemplo de Treegrid con 15 niveles de anidación.

Descripción visual

Tabla jerárquica con 15 niveles de anidación visible mediante sangría incremental de izquierda a derecha. Identificadores de documento (F0001, F0001-1, F0001-1-1, hasta F0001-1-1-1-1-1-1-1-1-1-1-1) en texto negro con triángulos de expansión, columnas de importes en negro con símbolo €, fechas en formato DD/MM/AAAA, y enlaces "Ver" en azul en columna de acciones. Fondo blanco con líneas divisorias grises horizontales entre filas, cabecera con texto negro sobre fondo gris claro.

Caption de la treegrid con 15 niveles
Documento Importe Fecha Acciones
F0001-1-1-1-1-1-1-1-1-1-1-1-1-1-1 1500 € 09/01/2024 Ver
F0002-1 1.000,00€ 05/01/2024 Ver
F0002-2-1 1.000,00€ 05/01/2024 Ver
F0002-3-1-1 95€ 15/01/2024 Ver
F0002-3-1-2 5.000,00€ 15/01/2024 Ver
Mostrar códigodel ejemplo: Treegrid con 15 niveles de profundidad

Contenido

Nunjucks macro
{% from "components/treegrid/_macro.treegrid.njk" import componentTreegrid %}
{{ componentTreegrid({
  "caption": "Caption de la treegrid con 15 niveles",
  "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": "F0001",
          "attributes": {
            "id": "F0001"
          }
        },
        {
          "text": "100 €",
          "classes": "lg:text-right"
        },
        {
          "text": "01/01/2024"
        },
        {
          "html": "<a href='#' id='F0001-action' class='c-link' aria-labelledby='F0001-action F0001'>Ver</a>"
        }
      ]
    },
    {
      "level": 2,
      "posinset": 1,
      "setsize": 1,
      "expanded": false,
      "cells": [
        {
          "text": "F0001-1",
          "attributes": {
            "id": "F0001-1"
          }
        },
        {
          "text": "200 €",
          "classes": "lg:text-right"
        },
        {
          "text": "02/01/2024"
        },
        {
          "html": "<a href='#' id='F0001-1-action' class='c-link' aria-labelledby='F0001-1-action F0001-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 3,
      "posinset": 1,
      "setsize": 1,
      "expanded": false,
      "cells": [
        {
          "text": "F0001-1-1",
          "attributes": {
            "id": "F0001-1-1"
          }
        },
        {
          "text": "300 €",
          "classes": "lg:text-right"
        },
        {
          "text": "03/01/2024"
        },
        {
          "html": "<a href='#' id='F0001-1-1-action' class='c-link' aria-labelledby='F0001-1-1-action F0001-1-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 4,
      "posinset": 1,
      "setsize": 1,
      "expanded": false,
      "cells": [
        {
          "text": "F0001-1-1-1",
          "attributes": {
            "id": "F0001-1-1-1"
          }
        },
        {
          "text": "400 €",
          "classes": "lg:text-right"
        },
        {
          "text": "04/01/2024"
        },
        {
          "html": "<a href='#' id='F0001-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-action F0001-1-1-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 5,
      "posinset": 1,
      "setsize": 1,
      "expanded": false,
      "cells": [
        {
          "text": "F0001-1-1-1-1",
          "attributes": {
            "id": "F0001-1-1-1-1"
          }
        },
        {
          "text": "500 €",
          "classes": "lg:text-right"
        },
        {
          "text": "05/01/2024"
        },
        {
          "html": "<a href='#' id='F0001-1-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-1-action F0001-1-1-1-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 6,
      "posinset": 1,
      "setsize": 1,
      "expanded": false,
      "cells": [
        {
          "text": "F0001-1-1-1-1-1",
          "attributes": {
            "id": "F0001-1-1-1-1-1"
          }
        },
        {
          "text": "600 €",
          "classes": "lg:text-right"
        },
        {
          "text": "06/01/2024"
        },
        {
          "html": "<a href='#' id='F0001-1-1-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-1-1-action F0001-1-1-1-1-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 7,
      "posinset": 1,
      "setsize": 1,
      "expanded": false,
      "cells": [
        {
          "text": "F0001-1-1-1-1-1-1",
          "attributes": {
            "id": "F0001-1-1-1-1-1-1"
          }
        },
        {
          "text": "700 €",
          "classes": "lg:text-right"
        },
        {
          "text": "07/01/2024"
        },
        {
          "html": "<a href='#' id='F0001-1-1-1-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-1-1-1-action F0001-1-1-1-1-1-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 8,
      "posinset": 1,
      "setsize": 1,
      "expanded": false,
      "cells": [
        {
          "text": "F0001-1-1-1-1-1-1-1",
          "attributes": {
            "id": "F0001-1-1-1-1-1-1-1"
          }
        },
        {
          "text": "800 €",
          "classes": "lg:text-right"
        },
        {
          "text": "08/01/2024"
        },
        {
          "html": "<a href='#' id='F0001-1-1-1-1-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-1-1-1-1-action F0001-1-1-1-1-1-1-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 9,
      "posinset": 1,
      "setsize": 1,
      "expanded": false,
      "cells": [
        {
          "text": "F0001-1-1-1-1-1-1-1-1",
          "attributes": {
            "id": "F0001-1-1-1-1-1-1-1-1"
          }
        },
        {
          "text": "900 €",
          "classes": "lg:text-right"
        },
        {
          "text": "09/01/2024"
        },
        {
          "html": "<a href='#' id='F0001-1-1-1-1-1-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-1-1-1-1-1-action F0001-1-1-1-1-1-1-1-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 10,
      "posinset": 1,
      "setsize": 1,
      "expanded": false,
      "cells": [
        {
          "text": "F0001-1-1-1-1-1-1-1-1-1",
          "attributes": {
            "id": "F0001-1-1-1-1-1-1-1-1-1"
          }
        },
        {
          "text": "1000 €",
          "classes": "lg:text-right"
        },
        {
          "text": "09/01/2024"
        },
        {
          "html": "<a href='#' id='F0001-1-1-1-1-1-1-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-1-1-1-1-1-1-action F0001-1-1-1-1-1-1-1-1-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 11,
      "posinset": 1,
      "setsize": 1,
      "expanded": false,
      "cells": [
        {
          "text": "F0001-1-1-1-1-1-1-1-1-1-1",
          "attributes": {
            "id": "F0001-1-1-1-1-1-1-1-1-1-1"
          }
        },
        {
          "text": "1100 €",
          "classes": "lg:text-right"
        },
        {
          "text": "09/01/2024"
        },
        {
          "html": "<a href='#' id='F0001-1-1-1-1-1-1-1-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-1-1-1-1-1-1-1-action F0001-1-1-1-1-1-1-1-1-1-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 12,
      "posinset": 1,
      "setsize": 1,
      "expanded": false,
      "cells": [
        {
          "text": "F0001-1-1-1-1-1-1-1-1-1-1-1",
          "attributes": {
            "id": "F0001-1-1-1-1-1-1-1-1-1-1-1"
          }
        },
        {
          "text": "1200 €",
          "classes": "lg:text-right"
        },
        {
          "text": "09/01/2024"
        },
        {
          "html": "<a href='#' id='F0001-1-1-1-1-1-1-1-1-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-1-1-1-1-1-1-1-1-action F0001-1-1-1-1-1-1-1-1-1-1-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 13,
      "posinset": 1,
      "setsize": 1,
      "expanded": false,
      "cells": [
        {
          "text": "F0001-1-1-1-1-1-1-1-1-1-1-1-1",
          "attributes": {
            "id": "F0001-1-1-1-1-1-1-1-1-1-1-1-1"
          }
        },
        {
          "text": "1300 €",
          "classes": "lg:text-right"
        },
        {
          "text": "09/01/2024"
        },
        {
          "html": "<a href='#' id='F0001-1-1-1-1-1-1-1-1-1-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-1-1-1-1-1-1-1-1-1-action F0001-1-1-1-1-1-1-1-1-1-1-1-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 14,
      "posinset": 1,
      "setsize": 1,
      "expanded": false,
      "cells": [
        {
          "text": "F0001-1-1-1-1-1-1-1-1-1-1-1-1-1",
          "attributes": {
            "id": "F0001-1-1-1-1-1-1-1-1-1-1-1-1-1"
          }
        },
        {
          "text": "1400 €",
          "classes": "lg:text-right"
        },
        {
          "text": "09/01/2024"
        },
        {
          "html": "<a href='#' id='F0001-1-1-1-1-1-1-1-1-1-1-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-1-1-1-1-1-1-1-1-1-1-action F0001-1-1-1-1-1-1-1-1-1-1-1-1-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 15,
      "posinset": 1,
      "setsize": 1,
      "cells": [
        {
          "text": "F0001-1-1-1-1-1-1-1-1-1-1-1-1-1-1",
          "attributes": {
            "id": "F0001-1-1-1-1-1-1-1-1-1-1-1-1-1-1"
          }
        },
        {
          "text": "1500 €",
          "classes": "lg:text-right"
        },
        {
          "text": "09/01/2024"
        },
        {
          "html": "<a href='#' id='F0001-1-1-1-1-1-1-1-1-1-1-1-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-1-1-1-1-1-1-1-1-1-1-1-action F0001-1-1-1-1-1-1-1-1-1-1-1-1-1-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 1,
      "posinset": 1,
      "setsize": 1,
      "expanded": false,
      "cells": [
        {
          "text": "F0002",
          "attributes": {
            "id": "F0002"
          }
        },
        {
          "text": "3.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "05/01/2024"
        },
        {
          "html": "<a href='#' id='F0002-action' class='c-link' aria-labelledby='F0002-action F0002'>Ver</a>"
        }
      ]
    },
    {
      "level": 2,
      "posinset": 1,
      "setsize": 3,
      "cells": [
        {
          "text": "F0002-1",
          "attributes": {
            "id": "F0002-1"
          }
        },
        {
          "text": "1.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "05/01/2024"
        },
        {
          "html": "<a href='#' id='F0002-1-action' class='c-link' aria-labelledby='F0002-1-action F0002-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 2,
      "posinset": 2,
      "setsize": 3,
      "expanded": false,
      "cells": [
        {
          "text": "F0002-2",
          "attributes": {
            "id": "F0002-2"
          }
        },
        {
          "text": "2.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "05/01/2024"
        },
        {
          "html": "<a href='#' id='F0002-2-action' class='c-link' aria-labelledby='F0002-2-action F0002-2'>Ver</a>"
        }
      ]
    },
    {
      "level": 3,
      "posinset": 1,
      "setsize": 1,
      "cells": [
        {
          "text": "F0002-2-1",
          "attributes": {
            "id": "F0002-2-1"
          }
        },
        {
          "text": "1.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "05/01/2024"
        },
        {
          "html": "<a href='#' id='F0002-2-1-action' class='c-link' aria-labelledby='F0002-2-1-action F0002-2-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 2,
      "posinset": 3,
      "setsize": 3,
      "expanded": false,
      "cells": [
        {
          "text": "F0002-3",
          "attributes": {
            "id": "F0002-3"
          }
        },
        {
          "text": "2.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "05/01/2024"
        },
        {
          "html": "<a href='#' id='F0002-3-action' class='c-link' aria-labelledby='F0002-3-action F0002-3'>Ver</a>"
        }
      ]
    },
    {
      "level": 3,
      "posinset": 1,
      "setsize": 1,
      "expanded": false,
      "cells": [
        {
          "text": "F0002-3-1",
          "attributes": {
            "id": "F0002-3-1"
          }
        },
        {
          "text": "5.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "15/01/2024"
        },
        {
          "html": "<a href='#' id='F0002-3-1-action' class='c-link' aria-labelledby='F0002-3-1-action F0002-3-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 4,
      "posinset": 1,
      "setsize": 2,
      "cells": [
        {
          "text": "F0002-3-1-1",
          "attributes": {
            "id": "F0002-3-1-1"
          }
        },
        {
          "text": "95€",
          "classes": "lg:text-right"
        },
        {
          "text": "15/01/2024"
        },
        {
          "html": "<a href='#' id='F0002-3-1-1-action' class='c-link' aria-labelledby='F0002-3-1-1-action F0002-3-1-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 4,
      "posinset": 2,
      "setsize": 2,
      "cells": [
        {
          "text": "F0002-3-1-2",
          "attributes": {
            "id": "F0002-3-1-2"
          }
        },
        {
          "text": "5.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "15/01/2024"
        },
        {
          "html": "<a href='#' id='F0002-3-1-2-action' class='c-link' aria-labelledby='F0002-3-1-2-action F0002-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-9",
    "aria-describedby": "treegrid-9-desc"
  }
}) }}