desy-html

Treegrid

Parámetros Nunjucks del componente: "Treegrid". Versión: 14.0.0

Los parámetros de Nunjucks para este componente están dentro de la siguiente etiqueta code en formato yaml.

        {"val":"params:\n- name: rows\n  type: object\n  required: true\n  description: table rows in treegrid.\n  params:\n  - name: level\n    type: integer\n    required: false\n    description: Specify the hierarchical level of the row. Level 1 is the top level. This will add the appropriate aria-level attribute to the row.\n  - name: posinset\n    type: integer\n    required: false\n    description: Specify the position of the row within its current level, starting at 1. This will add the appropriate aria-posinset attribute to the row.\n  - name: setsize\n    type: integer\n    required: false\n    description: Specify the number of rows within the current level. This will add the appropriate aria-setsize attribute to the row.\n  - name: expanded\n    type: boolean\n    required: false\n    description: If true, row sub will be expanded.\n  - name: cells\n    type: array\n    required: false\n    description: Provide cells for the row.\n    params:\n      - name: text\n        type: string\n        required: true\n        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.\n      - name: html\n        type: string\n        required: true\n        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\n      - name: classes\n        type: string\n        required: false\n        description: Classes to add to the table cell.\n      - name: attributes\n        type: object\n        required: false\n        description: HTML attributes (for example data attributes) to add to the table cell.\n  - name: attributes\n    type: object\n    required: false\n    description: HTML attributes (for example data attributes) to add to the table row.\n- name: head\n  type: array\n  required: false\n  description: Array of table head cells.\n  params:\n  - name: text\n    type: string\n    required: false\n    description: If `html` is set, this is not required. Text for table head cells. If `html` is provided, the `text` argument will be ignored.\n  - name: html\n    type: string\n    required: false\n    description: If `text` is set, this is not required. HTML for table head cells. If `html` is provided, the `text` argument will be ignore\n  - name: classes\n    type: string\n    required: false\n    description: Classes to add to the table head cell.\n  - name: attributes\n    type: object\n    required: false\n    description: HTML attributes (for example data attributes) to add to the table cell.\n- name: foot\n  type: array\n  required: false\n  description: Array of table tfoot cells.\n  params:\n  - name: text\n    type: string\n    required: false\n    description: If `html` is set, this is not required. Text for table tfoot cells. If `html` is provided, the `text` argument will be ignored.\n  - name: html\n    type: string\n    required: false\n    description: If `text` is set, this is not required. HTML for table tfoot cells. If `html` is provided, the `text` argument will be ignore\n  - name: classes\n    type: string\n    required: false\n    description: Classes to add to the table tfoot cell.\n  - name: attributes\n    type: object\n    required: false\n    description: HTML attributes (for example data attributes) to add to the table cell.\n- name: caption\n  type: string\n  required: false\n  description: Caption text\n- name: captionClasses\n  type: string\n  required: false\n  description: Classes for caption text size. Classes should correspond to the available typography heading classes.\n- name: firstCellIsHeader\n  type: boolean\n  required: false\n  description: If set to true, first cell in table row will be a TH instead of a TD.\n- name: wrapper\n  type: object\n  required: false\n  description: Options for a wrapper div outside the table\n  params:\n  - name: classes\n    type: string\n    required: false\n    description: Classes to add to the wrapper (e.g. to show an horizontal scrollbar it there are many columns or in mobile)\n  - name: attributes\n    type: object\n    required: false\n    description: HTML attributes to add to the wrapper div. For accessibility it needs tabindex=0, role=section and aria-label or aria-labelledby.\n- name: classes\n  type: string\n  required: false\n  description: Classes to add to the table container.\n- name: attributes\n  type: object\n  required: false\n  description: HTML attributes (for example data attributes) to add to the table container.\n\naccessibilityCriteria: |\n  ## Las tablas deben:\n    1. Debe tener al menos una celda de encabezado (TH) en las filas o columnas exteriores.\n    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).\n    3. El título de la tabla debe estar marcado como <caption>\n    4. La primera fila de la tabla no puede tener todas las celdas unidas, o se interpreta que se está simulando un caption.\n    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>\n    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.\n    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.","length":5930}

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.

Ejemplo: "Treegrid por defecto", de código HTML, para maquetar el componente: "Treegrid", versión: 14.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- treegrid -->
<div class="relative overflow-x-auto pb-base focus:outline-none focus:shadow-outline-black" tabindex="0" role="region" aria-label="Treegrid con scroll del ejemplo Treegrid con wrapper">
  <table data-module="c-treegrid" class="c-treegrid w-full" id="treegrid" aria-describedby="treegrid-desc" role="treegrid">
    <caption class="sr-only mb-base font-bold text-left text-lg">Caption de la treegrid</caption>
    <colgroup>
      <col class="treegrid-col-1">
      <col class="treegrid-col-2">
      <col class="treegrid-col-3">
      <col class="treegrid-col-4">
    </colgroup>
    <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">Documento</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:text-right">Importe</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark">Fecha</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark">Acciones</th>
      </tr>
    </thead>
    <tbody>
      <tr role="row" class="mb-0 text-left border-t border-b border-neutral-base" aria-level="1" style="--level: 1" aria-posinset="1" aria-setsize="1" aria-expanded="false">
        <td role="gridcell" class="text-left px-base py-sm flex items-start" data-label="Documento"
          id="A0001">
          <span class="c-treegrid__icon inline-block relative after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4" role="presentation">
            <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
              <rect width="24" height="24" fill="none" />
              <path d="M15.0111 12.387C15.0621 12.3362 15.1025 12.2759 15.13 12.2094C15.1576 12.143 15.1718 12.0718 15.1718 11.9998C15.1718 11.9279 15.1576 11.8567 15.13 11.7903C15.1025 11.7238 15.0621 11.6635 15.0111 11.6127L11.1839 7.78547C11.1074 7.70887 11.0099 7.65669 10.9038 7.63554C10.7976 7.61439 10.6875 7.62522 10.5875 7.66666C10.4875 7.70811 10.4021 7.77829 10.342 7.86834C10.2819 7.95838 10.2499 8.06423 10.25 8.17248L10.25 15.8272C10.2498 15.9355 10.2818 16.0414 10.3419 16.1315C10.4019 16.2216 10.4874 16.2918 10.5874 16.3333C10.6874 16.3748 10.7975 16.3856 10.9037 16.3645C11.0099 16.3433 11.1074 16.2911 11.1839 16.2145L15.0111 12.387Z" fill="currentColor" />
            </svg>
          </span>
          A0001
        </td>
        <td role="gridcell" class="text-left px-base py-sm lg:text-right" data-label="Importe">
          3.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Fecha">
          05/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Acciones">
          <a href="#" id="A0001-action" class="c-link" aria-labelledby="A0001-action A0001">Ver</a>
        </td>
      </tr>
      <tr role="row" class="mb-0 text-left border-t border-b border-neutral-base" aria-level="2" style="--level: 2" aria-posinset="1" aria-setsize="3">
        <td role="gridcell" class="text-left px-base py-sm" data-label="Documento"
          id="A0001-1">
          A0001-1</td>
        <td role="gridcell" class="text-left px-base py-sm lg:text-right" data-label="Importe">
          1.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Fecha">
          05/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Acciones">
          <a href="#" id="A0001-1-action" class="c-link" aria-labelledby="A0001-1-action A0001-1">Ver</a>
        </td>
      </tr>
      <tr role="row" class="mb-0 text-left border-t border-b border-neutral-base" aria-level="2" style="--level: 2" aria-posinset="2" aria-setsize="3" aria-expanded="false">
        <td role="gridcell" class="text-left px-base py-sm flex items-start" data-label="Documento"
          id="A0001-2">
          <span class="c-treegrid__icon inline-block relative after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4" role="presentation">
            <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
              <rect width="24" height="24" fill="none" />
              <path d="M15.0111 12.387C15.0621 12.3362 15.1025 12.2759 15.13 12.2094C15.1576 12.143 15.1718 12.0718 15.1718 11.9998C15.1718 11.9279 15.1576 11.8567 15.13 11.7903C15.1025 11.7238 15.0621 11.6635 15.0111 11.6127L11.1839 7.78547C11.1074 7.70887 11.0099 7.65669 10.9038 7.63554C10.7976 7.61439 10.6875 7.62522 10.5875 7.66666C10.4875 7.70811 10.4021 7.77829 10.342 7.86834C10.2819 7.95838 10.2499 8.06423 10.25 8.17248L10.25 15.8272C10.2498 15.9355 10.2818 16.0414 10.3419 16.1315C10.4019 16.2216 10.4874 16.2918 10.5874 16.3333C10.6874 16.3748 10.7975 16.3856 10.9037 16.3645C11.0099 16.3433 11.1074 16.2911 11.1839 16.2145L15.0111 12.387Z" fill="currentColor" />
            </svg>
          </span>
          A0001-2
        </td>
        <td role="gridcell" class="text-left px-base py-sm lg:text-right" data-label="Importe">
          2.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Fecha">
          05/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Acciones">
          <a href="#" id="A0001-2-action" class="c-link" aria-labelledby="A0001-2-action A0001-2">Ver</a>
        </td>
      </tr>
      <tr role="row" class="mb-0 text-left border-t border-b border-neutral-base" aria-level="3" style="--level: 3" aria-posinset="1" aria-setsize="1">
        <td role="gridcell" class="text-left px-base py-sm" data-label="Documento"
          id="A0001-2-1">
          A0001-2-1</td>
        <td role="gridcell" class="text-left px-base py-sm lg:text-right" data-label="Importe">
          1.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Fecha">
          05/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Acciones">
          <a href="#" id="A0001-2-1-action" class="c-link" aria-labelledby="A0001-2-1-action A0001-2-1">Ver</a>
        </td>
      </tr>
      <tr role="row" class="mb-0 text-left border-t border-b border-neutral-base" aria-level="2" style="--level: 2" aria-posinset="3" aria-setsize="3" aria-expanded="false">
        <td role="gridcell" class="text-left px-base py-sm flex items-start" data-label="Documento"
          id="A0001-3">
          <span class="c-treegrid__icon inline-block relative after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4" role="presentation">
            <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
              <rect width="24" height="24" fill="none" />
              <path d="M15.0111 12.387C15.0621 12.3362 15.1025 12.2759 15.13 12.2094C15.1576 12.143 15.1718 12.0718 15.1718 11.9998C15.1718 11.9279 15.1576 11.8567 15.13 11.7903C15.1025 11.7238 15.0621 11.6635 15.0111 11.6127L11.1839 7.78547C11.1074 7.70887 11.0099 7.65669 10.9038 7.63554C10.7976 7.61439 10.6875 7.62522 10.5875 7.66666C10.4875 7.70811 10.4021 7.77829 10.342 7.86834C10.2819 7.95838 10.2499 8.06423 10.25 8.17248L10.25 15.8272C10.2498 15.9355 10.2818 16.0414 10.3419 16.1315C10.4019 16.2216 10.4874 16.2918 10.5874 16.3333C10.6874 16.3748 10.7975 16.3856 10.9037 16.3645C11.0099 16.3433 11.1074 16.2911 11.1839 16.2145L15.0111 12.387Z" fill="currentColor" />
            </svg>
          </span>
          A0001-3
        </td>
        <td role="gridcell" class="text-left px-base py-sm lg:text-right" data-label="Importe">
          2.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Fecha">
          05/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Acciones">
          <a href="#" id="A0001-3-action" class="c-link" aria-labelledby="A0001-3-action A0001-3">Ver</a>
        </td>
      </tr>
      <tr role="row" class="mb-0 text-left border-t border-b border-neutral-base" aria-level="3" style="--level: 3" aria-posinset="1" aria-setsize="1" aria-expanded="false">
        <td role="gridcell" class="text-left px-base py-sm flex items-start" data-label="Documento"
          id="A0001-3-1">
          <span class="c-treegrid__icon inline-block relative after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4" role="presentation">
            <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
              <rect width="24" height="24" fill="none" />
              <path d="M15.0111 12.387C15.0621 12.3362 15.1025 12.2759 15.13 12.2094C15.1576 12.143 15.1718 12.0718 15.1718 11.9998C15.1718 11.9279 15.1576 11.8567 15.13 11.7903C15.1025 11.7238 15.0621 11.6635 15.0111 11.6127L11.1839 7.78547C11.1074 7.70887 11.0099 7.65669 10.9038 7.63554C10.7976 7.61439 10.6875 7.62522 10.5875 7.66666C10.4875 7.70811 10.4021 7.77829 10.342 7.86834C10.2819 7.95838 10.2499 8.06423 10.25 8.17248L10.25 15.8272C10.2498 15.9355 10.2818 16.0414 10.3419 16.1315C10.4019 16.2216 10.4874 16.2918 10.5874 16.3333C10.6874 16.3748 10.7975 16.3856 10.9037 16.3645C11.0099 16.3433 11.1074 16.2911 11.1839 16.2145L15.0111 12.387Z" fill="currentColor" />
            </svg>
          </span>
          A0001-3-1
        </td>
        <td role="gridcell" class="text-left px-base py-sm lg:text-right" data-label="Importe">
          5.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Fecha">
          15/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Acciones">
          <a href="#" id="A0001-3-1-action" class="c-link" aria-labelledby="A0001-3-1-action A0001-3-1">Ver</a>
        </td>
      </tr>
      <tr role="row" class="mb-0 text-left border-t border-b border-neutral-base" aria-level="4" style="--level: 4" aria-posinset="1" aria-setsize="2">
        <td role="gridcell" class="text-left px-base py-sm" data-label="Documento"
          id="A0001-3-1-1">
          A0001-3-1-1</td>
        <td role="gridcell" class="text-left px-base py-sm lg:text-right" data-label="Importe">
          95€</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Fecha">
          15/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Acciones">
          <a href="#" id="A0001-3-1-1-action" class="c-link" aria-labelledby="A0001-3-1-1-action A0001-3-1-1">Ver</a>
        </td>
      </tr>
      <tr role="row" class="mb-0 text-left border-t border-b border-neutral-base" aria-level="4" style="--level: 4" aria-posinset="2" aria-setsize="2">
        <td role="gridcell" class="text-left px-base py-sm" data-label="Documento"
          id="A0001-3-1-2">
          A0001-3-1-2</td>
        <td role="gridcell" class="text-left px-base py-sm lg:text-right" data-label="Importe">
          5.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Fecha">
          15/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Acciones">
          <a href="#" id="A0001-3-1-2-action" class="c-link" aria-labelledby="A0001-3-1-2-action A0001-3-1-2">Ver</a>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<!-- /treegrid -->

Ejemplo: "Treegrid por defecto", de código Nunjucks, para maquetar el componente: "Treegrid", versión: 14.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% 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-none 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"
  }
}) }}
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-none 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.

Ejemplo: "Treegrid con tfoot", de código HTML, para maquetar el componente: "Treegrid", versión: 14.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- treegrid -->
<div class="relative overflow-x-auto pb-base focus:outline-none focus:shadow-outline-black" tabindex="0" role="region" aria-label="Treegrid con scroll del ejemplo Treegrid con wrapper">
  <table data-module="c-treegrid" class="c-treegrid w-full" id="treegrid-B" aria-describedby="treegrid-B-desc" role="treegrid">
    <caption class="sr-only mb-base font-bold text-left text-lg">Caption de la treegrid</caption>
    <colgroup>
      <col class="treegrid-col-1">
      <col class="treegrid-col-2">
      <col class="treegrid-col-3">
      <col class="treegrid-col-4">
    </colgroup>
    <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">Documento</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:text-right">Importe</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark">Fecha</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark">Acciones</th>
      </tr>
    </thead>
    <tbody>
      <tr role="row" class="mb-0 text-left border-t border-b border-neutral-base" aria-level="1" style="--level: 1" aria-posinset="1" aria-setsize="1" aria-expanded="true">
        <td role="gridcell" class="text-left px-base py-sm flex items-start" data-label="Documento"
          id="B0001">
          <span class="c-treegrid__icon inline-block relative after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4" role="presentation">
            <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
              <rect width="24" height="24" fill="none" />
              <path d="M15.0111 12.387C15.0621 12.3362 15.1025 12.2759 15.13 12.2094C15.1576 12.143 15.1718 12.0718 15.1718 11.9998C15.1718 11.9279 15.1576 11.8567 15.13 11.7903C15.1025 11.7238 15.0621 11.6635 15.0111 11.6127L11.1839 7.78547C11.1074 7.70887 11.0099 7.65669 10.9038 7.63554C10.7976 7.61439 10.6875 7.62522 10.5875 7.66666C10.4875 7.70811 10.4021 7.77829 10.342 7.86834C10.2819 7.95838 10.2499 8.06423 10.25 8.17248L10.25 15.8272C10.2498 15.9355 10.2818 16.0414 10.3419 16.1315C10.4019 16.2216 10.4874 16.2918 10.5874 16.3333C10.6874 16.3748 10.7975 16.3856 10.9037 16.3645C11.0099 16.3433 11.1074 16.2911 11.1839 16.2145L15.0111 12.387Z" fill="currentColor" />
            </svg>
          </span>
          B0001
        </td>
        <td role="gridcell" class="text-left px-base py-sm lg:text-right" data-label="Importe">
          3.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Fecha">
          05/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Acciones">
          <a href="#" id="B0001-action" class="c-link" aria-labelledby="B0001-action B0001">Ver</a>
        </td>
      </tr>
      <tr role="row" class="mb-0 text-left border-t border-b border-neutral-base" aria-level="2" style="--level: 2" aria-posinset="1" aria-setsize="3">
        <td role="gridcell" class="text-left px-base py-sm" data-label="Documento"
          id="B0001-1">
          B0001-1</td>
        <td role="gridcell" class="text-left px-base py-sm lg:text-right" data-label="Importe">
          1.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Fecha">
          05/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Acciones">
          <a href="#" id="B0001-1-action" class="c-link" aria-labelledby="B0001-1-action B0001-1">Ver</a>
        </td>
      </tr>
      <tr role="row" class="mb-0 text-left border-t border-b border-neutral-base" aria-level="2" style="--level: 2" aria-posinset="2" aria-setsize="3" aria-expanded="false">
        <td role="gridcell" class="text-left px-base py-sm flex items-start" data-label="Documento"
          id="B0001-2">
          <span class="c-treegrid__icon inline-block relative after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4" role="presentation">
            <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
              <rect width="24" height="24" fill="none" />
              <path d="M15.0111 12.387C15.0621 12.3362 15.1025 12.2759 15.13 12.2094C15.1576 12.143 15.1718 12.0718 15.1718 11.9998C15.1718 11.9279 15.1576 11.8567 15.13 11.7903C15.1025 11.7238 15.0621 11.6635 15.0111 11.6127L11.1839 7.78547C11.1074 7.70887 11.0099 7.65669 10.9038 7.63554C10.7976 7.61439 10.6875 7.62522 10.5875 7.66666C10.4875 7.70811 10.4021 7.77829 10.342 7.86834C10.2819 7.95838 10.2499 8.06423 10.25 8.17248L10.25 15.8272C10.2498 15.9355 10.2818 16.0414 10.3419 16.1315C10.4019 16.2216 10.4874 16.2918 10.5874 16.3333C10.6874 16.3748 10.7975 16.3856 10.9037 16.3645C11.0099 16.3433 11.1074 16.2911 11.1839 16.2145L15.0111 12.387Z" fill="currentColor" />
            </svg>
          </span>
          B0001-2
        </td>
        <td role="gridcell" class="text-left px-base py-sm lg:text-right" data-label="Importe">
          2.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Fecha">
          05/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Acciones">
          <a href="#" id="B0001-2-action" class="c-link" aria-labelledby="B0001-2-action B0001-2">Ver</a>
        </td>
      </tr>
      <tr role="row" class="mb-0 text-left border-t border-b border-neutral-base" aria-level="3" style="--level: 3" aria-posinset="1" aria-setsize="1">
        <td role="gridcell" class="text-left px-base py-sm" data-label="Documento"
          id="B0001-2-1">
          B0001-2-1</td>
        <td role="gridcell" class="text-left px-base py-sm lg:text-right" data-label="Importe">
          1.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Fecha">
          05/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Acciones">
          <a href="#" id="B0001-2-1-action" class="c-link" aria-labelledby="B0001-2-1-action B0001-2-1">Ver</a>
        </td>
      </tr>
      <tr role="row" class="mb-0 text-left border-t border-b border-neutral-base" aria-level="2" style="--level: 2" aria-posinset="3" aria-setsize="3" aria-expanded="false">
        <td role="gridcell" class="text-left px-base py-sm flex items-start" data-label="Documento"
          id="B0001-3">
          <span class="c-treegrid__icon inline-block relative after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4" role="presentation">
            <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
              <rect width="24" height="24" fill="none" />
              <path d="M15.0111 12.387C15.0621 12.3362 15.1025 12.2759 15.13 12.2094C15.1576 12.143 15.1718 12.0718 15.1718 11.9998C15.1718 11.9279 15.1576 11.8567 15.13 11.7903C15.1025 11.7238 15.0621 11.6635 15.0111 11.6127L11.1839 7.78547C11.1074 7.70887 11.0099 7.65669 10.9038 7.63554C10.7976 7.61439 10.6875 7.62522 10.5875 7.66666C10.4875 7.70811 10.4021 7.77829 10.342 7.86834C10.2819 7.95838 10.2499 8.06423 10.25 8.17248L10.25 15.8272C10.2498 15.9355 10.2818 16.0414 10.3419 16.1315C10.4019 16.2216 10.4874 16.2918 10.5874 16.3333C10.6874 16.3748 10.7975 16.3856 10.9037 16.3645C11.0099 16.3433 11.1074 16.2911 11.1839 16.2145L15.0111 12.387Z" fill="currentColor" />
            </svg>
          </span>
          B0001-3
        </td>
        <td role="gridcell" class="text-left px-base py-sm lg:text-right" data-label="Importe">
          2.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Fecha">
          05/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Acciones">
          <a href="#" id="B0001-3-action" class="c-link" aria-labelledby="B0001-3-action B0001-3">Ver</a>
        </td>
      </tr>
      <tr role="row" class="mb-0 text-left border-t border-b border-neutral-base" aria-level="3" style="--level: 3" aria-posinset="1" aria-setsize="1" aria-expanded="false">
        <td role="gridcell" class="text-left px-base py-sm flex items-start" data-label="Documento"
          id="B0001-3-1">
          <span class="c-treegrid__icon inline-block relative after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4" role="presentation">
            <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
              <rect width="24" height="24" fill="none" />
              <path d="M15.0111 12.387C15.0621 12.3362 15.1025 12.2759 15.13 12.2094C15.1576 12.143 15.1718 12.0718 15.1718 11.9998C15.1718 11.9279 15.1576 11.8567 15.13 11.7903C15.1025 11.7238 15.0621 11.6635 15.0111 11.6127L11.1839 7.78547C11.1074 7.70887 11.0099 7.65669 10.9038 7.63554C10.7976 7.61439 10.6875 7.62522 10.5875 7.66666C10.4875 7.70811 10.4021 7.77829 10.342 7.86834C10.2819 7.95838 10.2499 8.06423 10.25 8.17248L10.25 15.8272C10.2498 15.9355 10.2818 16.0414 10.3419 16.1315C10.4019 16.2216 10.4874 16.2918 10.5874 16.3333C10.6874 16.3748 10.7975 16.3856 10.9037 16.3645C11.0099 16.3433 11.1074 16.2911 11.1839 16.2145L15.0111 12.387Z" fill="currentColor" />
            </svg>
          </span>
          B0001-3-1
        </td>
        <td role="gridcell" class="text-left px-base py-sm lg:text-right" data-label="Importe">
          5.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Fecha">
          15/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Acciones">
          <a href="#" id="B0001-3-1-action" class="c-link" aria-labelledby="B0001-3-1-action B0001-3-1">Ver</a>
        </td>
      </tr>
      <tr role="row" class="mb-0 text-left border-t border-b border-neutral-base" aria-level="4" style="--level: 4" aria-posinset="1" aria-setsize="2">
        <td role="gridcell" class="text-left px-base py-sm" data-label="Documento"
          id="B0001-3-1-1">
          B0001-3-1-1</td>
        <td role="gridcell" class="text-left px-base py-sm lg:text-right" data-label="Importe">
          95€</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Fecha">
          15/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Acciones">
          <a href="#" id="B0001-3-1-1-action" class="c-link" aria-labelledby="B0001-3-1-1-action B0001-3-1-1">Ver</a>
        </td>
      </tr>
      <tr role="row" class="mb-0 text-left border-t border-b border-neutral-base" aria-level="4" style="--level: 4" aria-posinset="2" aria-setsize="2">
        <td role="gridcell" class="text-left px-base py-sm" data-label="Documento"
          id="B0001-3-1-2">
          B0001-3-1-2</td>
        <td role="gridcell" class="text-left px-base py-sm lg:text-right" data-label="Importe">
          5.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Fecha">
          15/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Acciones">
          <a href="#" id="B0001-3-1-2-action" class="c-link" aria-labelledby="B0001-3-1-2-action B0001-3-1-2">Ver</a>
        </td>
      </tr>
    </tbody>
    <tfoot>
      <tr class="border-t-2 border-b border-neutral-base">
        <td class="text-left px-base py-sm uppercase"
          data-label="Documento">Suma</td>
        <td class="text-left px-base py-sm lg:text-right"
          data-label="Importe">10.045€</td>
        <td class="text-left px-base py-sm"
          data-label="Fecha"></td>
        <td class="text-left px-base py-sm"
          data-label="Acciones"></td>
      </tr>
    </tfoot>
  </table>
</div>
<!-- /treegrid -->

Ejemplo: "Treegrid con tfoot", de código Nunjucks, para maquetar el componente: "Treegrid", versión: 14.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% 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-none 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"
  }
}) }}
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-none 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.

Ejemplo: "Treegrid con caption visible", de código HTML, para maquetar el componente: "Treegrid", versión: 14.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- treegrid -->
<div class="relative overflow-x-auto pb-base focus:outline-none focus:shadow-outline-black" tabindex="0" role="region" aria-label="Treegrid con scroll del ejemplo Treegrid con wrapper">
  <table data-module="c-treegrid" class="c-treegrid w-full" id="treegrid-B" aria-describedby="treegrid-B-desc" role="treegrid">
    <caption class="mb-base font-bold text-left text-lg">Documentos contables</caption>
    <colgroup>
      <col class="treegrid-col-1">
      <col class="treegrid-col-2">
      <col class="treegrid-col-3">
      <col class="treegrid-col-4">
    </colgroup>
    <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">Documento</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:text-right">Importe</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark">Fecha</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark">Acciones</th>
      </tr>
    </thead>
    <tbody>
      <tr role="row" class="mb-0 text-left border-t border-b border-neutral-base" aria-level="1" style="--level: 1" aria-posinset="1" aria-setsize="1" aria-expanded="true">
        <td role="gridcell" class="text-left px-base py-sm flex items-start" data-label="Documento"
          id="C0001">
          <span class="c-treegrid__icon inline-block relative after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4" role="presentation">
            <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
              <rect width="24" height="24" fill="none" />
              <path d="M15.0111 12.387C15.0621 12.3362 15.1025 12.2759 15.13 12.2094C15.1576 12.143 15.1718 12.0718 15.1718 11.9998C15.1718 11.9279 15.1576 11.8567 15.13 11.7903C15.1025 11.7238 15.0621 11.6635 15.0111 11.6127L11.1839 7.78547C11.1074 7.70887 11.0099 7.65669 10.9038 7.63554C10.7976 7.61439 10.6875 7.62522 10.5875 7.66666C10.4875 7.70811 10.4021 7.77829 10.342 7.86834C10.2819 7.95838 10.2499 8.06423 10.25 8.17248L10.25 15.8272C10.2498 15.9355 10.2818 16.0414 10.3419 16.1315C10.4019 16.2216 10.4874 16.2918 10.5874 16.3333C10.6874 16.3748 10.7975 16.3856 10.9037 16.3645C11.0099 16.3433 11.1074 16.2911 11.1839 16.2145L15.0111 12.387Z" fill="currentColor" />
            </svg>
          </span>
          C0001
        </td>
        <td role="gridcell" class="text-left px-base py-sm lg:text-right" data-label="Importe">
          3.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Fecha">
          05/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Acciones">
          <a href="#" id="C0001-action" class="c-link" aria-labelledby="C0001-action C0001">Ver</a>
        </td>
      </tr>
      <tr role="row" class="mb-0 text-left border-t border-b border-neutral-base" aria-level="2" style="--level: 2" aria-posinset="1" aria-setsize="3">
        <td role="gridcell" class="text-left px-base py-sm" data-label="Documento"
          id="C0001-1">
          C0001-1</td>
        <td role="gridcell" class="text-left px-base py-sm lg:text-right" data-label="Importe">
          1.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Fecha">
          05/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Acciones">
          <a href="#" id="C0001-1-action" class="c-link" aria-labelledby="C0001-1-action C0001-1">Ver</a>
        </td>
      </tr>
      <tr role="row" class="mb-0 text-left border-t border-b border-neutral-base" aria-level="2" style="--level: 2" aria-posinset="2" aria-setsize="3" aria-expanded="false">
        <td role="gridcell" class="text-left px-base py-sm flex items-start" data-label="Documento"
          id="C0001-2">
          <span class="c-treegrid__icon inline-block relative after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4" role="presentation">
            <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
              <rect width="24" height="24" fill="none" />
              <path d="M15.0111 12.387C15.0621 12.3362 15.1025 12.2759 15.13 12.2094C15.1576 12.143 15.1718 12.0718 15.1718 11.9998C15.1718 11.9279 15.1576 11.8567 15.13 11.7903C15.1025 11.7238 15.0621 11.6635 15.0111 11.6127L11.1839 7.78547C11.1074 7.70887 11.0099 7.65669 10.9038 7.63554C10.7976 7.61439 10.6875 7.62522 10.5875 7.66666C10.4875 7.70811 10.4021 7.77829 10.342 7.86834C10.2819 7.95838 10.2499 8.06423 10.25 8.17248L10.25 15.8272C10.2498 15.9355 10.2818 16.0414 10.3419 16.1315C10.4019 16.2216 10.4874 16.2918 10.5874 16.3333C10.6874 16.3748 10.7975 16.3856 10.9037 16.3645C11.0099 16.3433 11.1074 16.2911 11.1839 16.2145L15.0111 12.387Z" fill="currentColor" />
            </svg>
          </span>
          C0001-2
        </td>
        <td role="gridcell" class="text-left px-base py-sm lg:text-right" data-label="Importe">
          2.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Fecha">
          05/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Acciones">
          <a href="#" id="C0001-2-action" class="c-link" aria-labelledby="C0001-2-action C0001-2">Ver</a>
        </td>
      </tr>
      <tr role="row" class="mb-0 text-left border-t border-b border-neutral-base" aria-level="3" style="--level: 3" aria-posinset="1" aria-setsize="1">
        <td role="gridcell" class="text-left px-base py-sm" data-label="Documento"
          id="C0001-2-1">
          C0001-2-1</td>
        <td role="gridcell" class="text-left px-base py-sm lg:text-right" data-label="Importe">
          1.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Fecha">
          05/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Acciones">
          <a href="#" id="C0001-2-1-action" class="c-link" aria-labelledby="C0001-2-1-action C0001-2-1">Ver</a>
        </td>
      </tr>
      <tr role="row" class="mb-0 text-left border-t border-b border-neutral-base" aria-level="2" style="--level: 2" aria-posinset="3" aria-setsize="3" aria-expanded="false">
        <td role="gridcell" class="text-left px-base py-sm flex items-start" data-label="Documento"
          id="C0001-3">
          <span class="c-treegrid__icon inline-block relative after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4" role="presentation">
            <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
              <rect width="24" height="24" fill="none" />
              <path d="M15.0111 12.387C15.0621 12.3362 15.1025 12.2759 15.13 12.2094C15.1576 12.143 15.1718 12.0718 15.1718 11.9998C15.1718 11.9279 15.1576 11.8567 15.13 11.7903C15.1025 11.7238 15.0621 11.6635 15.0111 11.6127L11.1839 7.78547C11.1074 7.70887 11.0099 7.65669 10.9038 7.63554C10.7976 7.61439 10.6875 7.62522 10.5875 7.66666C10.4875 7.70811 10.4021 7.77829 10.342 7.86834C10.2819 7.95838 10.2499 8.06423 10.25 8.17248L10.25 15.8272C10.2498 15.9355 10.2818 16.0414 10.3419 16.1315C10.4019 16.2216 10.4874 16.2918 10.5874 16.3333C10.6874 16.3748 10.7975 16.3856 10.9037 16.3645C11.0099 16.3433 11.1074 16.2911 11.1839 16.2145L15.0111 12.387Z" fill="currentColor" />
            </svg>
          </span>
          C0001-3
        </td>
        <td role="gridcell" class="text-left px-base py-sm lg:text-right" data-label="Importe">
          2.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Fecha">
          05/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Acciones">
          <a href="#" id="C0001-3-action" class="c-link" aria-labelledby="C0001-3-action C0001-3">Ver</a>
        </td>
      </tr>
      <tr role="row" class="mb-0 text-left border-t border-b border-neutral-base" aria-level="3" style="--level: 3" aria-posinset="1" aria-setsize="1" aria-expanded="false">
        <td role="gridcell" class="text-left px-base py-sm flex items-start" data-label="Documento"
          id="C0001-3-1">
          <span class="c-treegrid__icon inline-block relative after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4" role="presentation">
            <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
              <rect width="24" height="24" fill="none" />
              <path d="M15.0111 12.387C15.0621 12.3362 15.1025 12.2759 15.13 12.2094C15.1576 12.143 15.1718 12.0718 15.1718 11.9998C15.1718 11.9279 15.1576 11.8567 15.13 11.7903C15.1025 11.7238 15.0621 11.6635 15.0111 11.6127L11.1839 7.78547C11.1074 7.70887 11.0099 7.65669 10.9038 7.63554C10.7976 7.61439 10.6875 7.62522 10.5875 7.66666C10.4875 7.70811 10.4021 7.77829 10.342 7.86834C10.2819 7.95838 10.2499 8.06423 10.25 8.17248L10.25 15.8272C10.2498 15.9355 10.2818 16.0414 10.3419 16.1315C10.4019 16.2216 10.4874 16.2918 10.5874 16.3333C10.6874 16.3748 10.7975 16.3856 10.9037 16.3645C11.0099 16.3433 11.1074 16.2911 11.1839 16.2145L15.0111 12.387Z" fill="currentColor" />
            </svg>
          </span>
          C0001-3-1
        </td>
        <td role="gridcell" class="text-left px-base py-sm lg:text-right" data-label="Importe">
          5.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Fecha">
          15/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Acciones">
          <a href="#" id="C0001-3-1-action" class="c-link" aria-labelledby="C0001-3-1-action C0001-3-1">Ver</a>
        </td>
      </tr>
      <tr role="row" class="mb-0 text-left border-t border-b border-neutral-base" aria-level="4" style="--level: 4" aria-posinset="1" aria-setsize="2">
        <td role="gridcell" class="text-left px-base py-sm" data-label="Documento"
          id="C0001-3-1-1">
          C0001-3-1-1</td>
        <td role="gridcell" class="text-left px-base py-sm lg:text-right" data-label="Importe">
          95€</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Fecha">
          15/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Acciones">
          <a href="#" id="C0001-3-1-1-action" class="c-link" aria-labelledby="C0001-3-1-1-action C0001-3-1-1">Ver</a>
        </td>
      </tr>
      <tr role="row" class="mb-0 text-left border-t border-b border-neutral-base" aria-level="4" style="--level: 4" aria-posinset="2" aria-setsize="2">
        <td role="gridcell" class="text-left px-base py-sm" data-label="Documento"
          id="C0001-3-1-2">
          C0001-3-1-2</td>
        <td role="gridcell" class="text-left px-base py-sm lg:text-right" data-label="Importe">
          5.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Fecha">
          15/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Acciones">
          <a href="#" id="C0001-3-1-2-action" class="c-link" aria-labelledby="C0001-3-1-2-action C0001-3-1-2">Ver</a>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<!-- /treegrid -->

Ejemplo: "Treegrid con caption visible", de código Nunjucks, para maquetar el componente: "Treegrid", versión: 14.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% 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-none 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"
  }
}) }}
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-none 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.

Ejemplo: "Treegrid con primera celda como header", de código HTML, para maquetar el componente: "Treegrid", versión: 14.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- treegrid -->
<div class="relative overflow-x-auto pb-base focus:outline-none focus:shadow-outline-black" tabindex="0" role="region" aria-label="Treegrid con scroll del ejemplo Treegrid con wrapper">
  <table data-module="c-treegrid" class="c-treegrid w-full" id="treegrid" aria-describedby="treegrid-desc" role="treegrid">
    <caption class="sr-only mb-base font-bold text-left text-lg">Caption de la treegrid</caption>
    <colgroup>
      <col class="treegrid-col-1">
      <col class="treegrid-col-2">
      <col class="treegrid-col-3">
      <col class="treegrid-col-4">
    </colgroup>
    <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">Documento</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:text-right">Importe</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark">Fecha</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark">Acciones</th>
      </tr>
    </thead>
    <tbody>
      <tr role="row" class="mb-0 text-left border-t border-b border-neutral-base" aria-level="1" style="--level: 1" aria-posinset="1" aria-setsize="1" aria-expanded="true">
        <th scope="row" class="align-top px-base py-sm text-left font-normal text-sm leading-relaxed text-neutral-dark flex items-start" data-label="Documento"
          id="E0001">
          <span class="c-treegrid__icon inline-block relative after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4" role="presentation">
            <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
              <rect width="24" height="24" fill="none" />
              <path d="M15.0111 12.387C15.0621 12.3362 15.1025 12.2759 15.13 12.2094C15.1576 12.143 15.1718 12.0718 15.1718 11.9998C15.1718 11.9279 15.1576 11.8567 15.13 11.7903C15.1025 11.7238 15.0621 11.6635 15.0111 11.6127L11.1839 7.78547C11.1074 7.70887 11.0099 7.65669 10.9038 7.63554C10.7976 7.61439 10.6875 7.62522 10.5875 7.66666C10.4875 7.70811 10.4021 7.77829 10.342 7.86834C10.2819 7.95838 10.2499 8.06423 10.25 8.17248L10.25 15.8272C10.2498 15.9355 10.2818 16.0414 10.3419 16.1315C10.4019 16.2216 10.4874 16.2918 10.5874 16.3333C10.6874 16.3748 10.7975 16.3856 10.9037 16.3645C11.0099 16.3433 11.1074 16.2911 11.1839 16.2145L15.0111 12.387Z" fill="currentColor" />
            </svg>
          </span>
          E0001
        </th>
        <td role="gridcell" class="text-left px-base py-sm lg:text-right" data-label="Importe">
          3.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Fecha">
          05/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Acciones">
          <a href="#" id="E0001-action" class="c-link" aria-labelledby="E0001-action E0001">Ver</a>
        </td>
      </tr>
      <tr role="row" class="mb-0 text-left border-t border-b border-neutral-base" aria-level="2" style="--level: 2" aria-posinset="1" aria-setsize="3">
        <th scope="row" class="align-top px-base py-sm text-left font-normal text-sm leading-relaxed text-neutral-dark" data-label="Documento"
          id="E0001-1">
          E0001-1</th>
        <td role="gridcell" class="text-left px-base py-sm lg:text-right" data-label="Importe">
          1.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Fecha">
          05/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Acciones">
          <a href="#" id="E0001-1-action" class="c-link" aria-labelledby="E0001-1-action E0001-1">Ver</a>
        </td>
      </tr>
      <tr role="row" class="mb-0 text-left border-t border-b border-neutral-base" aria-level="2" style="--level: 2" aria-posinset="2" aria-setsize="3" aria-expanded="false">
        <th scope="row" class="align-top px-base py-sm text-left font-normal text-sm leading-relaxed text-neutral-dark flex items-start" data-label="Documento"
          id="E0001-2">
          <span class="c-treegrid__icon inline-block relative after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4" role="presentation">
            <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
              <rect width="24" height="24" fill="none" />
              <path d="M15.0111 12.387C15.0621 12.3362 15.1025 12.2759 15.13 12.2094C15.1576 12.143 15.1718 12.0718 15.1718 11.9998C15.1718 11.9279 15.1576 11.8567 15.13 11.7903C15.1025 11.7238 15.0621 11.6635 15.0111 11.6127L11.1839 7.78547C11.1074 7.70887 11.0099 7.65669 10.9038 7.63554C10.7976 7.61439 10.6875 7.62522 10.5875 7.66666C10.4875 7.70811 10.4021 7.77829 10.342 7.86834C10.2819 7.95838 10.2499 8.06423 10.25 8.17248L10.25 15.8272C10.2498 15.9355 10.2818 16.0414 10.3419 16.1315C10.4019 16.2216 10.4874 16.2918 10.5874 16.3333C10.6874 16.3748 10.7975 16.3856 10.9037 16.3645C11.0099 16.3433 11.1074 16.2911 11.1839 16.2145L15.0111 12.387Z" fill="currentColor" />
            </svg>
          </span>
          E0001-2
        </th>
        <td role="gridcell" class="text-left px-base py-sm lg:text-right" data-label="Importe">
          2.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Fecha">
          05/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Acciones">
          <a href="#" id="E0001-2-action" class="c-link" aria-labelledby="E0001-2-action E0001-2">Ver</a>
        </td>
      </tr>
      <tr role="row" class="mb-0 text-left border-t border-b border-neutral-base" aria-level="3" style="--level: 3" aria-posinset="1" aria-setsize="1">
        <th scope="row" class="align-top px-base py-sm text-left font-normal text-sm leading-relaxed text-neutral-dark" data-label="Documento"
          id="E0001-2-1">
          E0001-2-1</th>
        <td role="gridcell" class="text-left px-base py-sm lg:text-right" data-label="Importe">
          1.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Fecha">
          05/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Acciones">
          <a href="#" id="E0001-2-1-action" class="c-link" aria-labelledby="E0001-2-1-action E0001-2-1">Ver</a>
        </td>
      </tr>
      <tr role="row" class="mb-0 text-left border-t border-b border-neutral-base" aria-level="2" style="--level: 2" aria-posinset="3" aria-setsize="3" aria-expanded="false">
        <th scope="row" class="align-top px-base py-sm text-left font-normal text-sm leading-relaxed text-neutral-dark flex items-start" data-label="Documento"
          id="E0001-3">
          <span class="c-treegrid__icon inline-block relative after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4" role="presentation">
            <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
              <rect width="24" height="24" fill="none" />
              <path d="M15.0111 12.387C15.0621 12.3362 15.1025 12.2759 15.13 12.2094C15.1576 12.143 15.1718 12.0718 15.1718 11.9998C15.1718 11.9279 15.1576 11.8567 15.13 11.7903C15.1025 11.7238 15.0621 11.6635 15.0111 11.6127L11.1839 7.78547C11.1074 7.70887 11.0099 7.65669 10.9038 7.63554C10.7976 7.61439 10.6875 7.62522 10.5875 7.66666C10.4875 7.70811 10.4021 7.77829 10.342 7.86834C10.2819 7.95838 10.2499 8.06423 10.25 8.17248L10.25 15.8272C10.2498 15.9355 10.2818 16.0414 10.3419 16.1315C10.4019 16.2216 10.4874 16.2918 10.5874 16.3333C10.6874 16.3748 10.7975 16.3856 10.9037 16.3645C11.0099 16.3433 11.1074 16.2911 11.1839 16.2145L15.0111 12.387Z" fill="currentColor" />
            </svg>
          </span>
          E0001-3
        </th>
        <td role="gridcell" class="text-left px-base py-sm lg:text-right" data-label="Importe">
          2.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Fecha">
          05/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Acciones">
          <a href="#" id="E0001-3-action" class="c-link" aria-labelledby="E0001-3-action E0001-3">Ver</a>
        </td>
      </tr>
      <tr role="row" class="mb-0 text-left border-t border-b border-neutral-base" aria-level="3" style="--level: 3" aria-posinset="1" aria-setsize="1" aria-expanded="false">
        <th scope="row" class="align-top px-base py-sm text-left font-normal text-sm leading-relaxed text-neutral-dark flex items-start" data-label="Documento"
          id="E0001-3-1">
          <span class="c-treegrid__icon inline-block relative after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4" role="presentation">
            <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
              <rect width="24" height="24" fill="none" />
              <path d="M15.0111 12.387C15.0621 12.3362 15.1025 12.2759 15.13 12.2094C15.1576 12.143 15.1718 12.0718 15.1718 11.9998C15.1718 11.9279 15.1576 11.8567 15.13 11.7903C15.1025 11.7238 15.0621 11.6635 15.0111 11.6127L11.1839 7.78547C11.1074 7.70887 11.0099 7.65669 10.9038 7.63554C10.7976 7.61439 10.6875 7.62522 10.5875 7.66666C10.4875 7.70811 10.4021 7.77829 10.342 7.86834C10.2819 7.95838 10.2499 8.06423 10.25 8.17248L10.25 15.8272C10.2498 15.9355 10.2818 16.0414 10.3419 16.1315C10.4019 16.2216 10.4874 16.2918 10.5874 16.3333C10.6874 16.3748 10.7975 16.3856 10.9037 16.3645C11.0099 16.3433 11.1074 16.2911 11.1839 16.2145L15.0111 12.387Z" fill="currentColor" />
            </svg>
          </span>
          E0001-3-1
        </th>
        <td role="gridcell" class="text-left px-base py-sm lg:text-right" data-label="Importe">
          5.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Fecha">
          15/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Acciones">
          <a href="#" id="E0001-3-1-action" class="c-link" aria-labelledby="E0001-3-1-action E0001-3-1">Ver</a>
        </td>
      </tr>
      <tr role="row" class="mb-0 text-left border-t border-b border-neutral-base" aria-level="4" style="--level: 4" aria-posinset="1" aria-setsize="2">
        <th scope="row" class="align-top px-base py-sm text-left font-normal text-sm leading-relaxed text-neutral-dark" data-label="Documento"
          id="E0001-3-1-1">
          E0001-3-1-1</th>
        <td role="gridcell" class="text-left px-base py-sm lg:text-right" data-label="Importe">
          95€</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Fecha">
          15/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Acciones">
          <a href="#" id="E0001-3-1-1-action" class="c-link" aria-labelledby="E0001-3-1-1-action E0001-3-1-1">Ver</a>
        </td>
      </tr>
      <tr role="row" class="mb-0 text-left border-t border-b border-neutral-base" aria-level="4" style="--level: 4" aria-posinset="2" aria-setsize="2">
        <th scope="row" class="align-top px-base py-sm text-left font-normal text-sm leading-relaxed text-neutral-dark" data-label="Documento"
          id="E0001-3-1-2">
          E0001-3-1-2</th>
        <td role="gridcell" class="text-left px-base py-sm lg:text-right" data-label="Importe">
          5.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Fecha">
          15/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Acciones">
          <a href="#" id="E0001-3-1-2-action" class="c-link" aria-labelledby="E0001-3-1-2-action E0001-3-1-2">Ver</a>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<!-- /treegrid -->

Ejemplo: "Treegrid con primera celda como header", de código Nunjucks, para maquetar el componente: "Treegrid", versión: 14.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% 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-none 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"
  }
}) }}
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-none 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.

Ejemplo: "Treegrid con 15 niveles de profundidad", de código HTML, para maquetar el componente: "Treegrid", versión: 14.0.0, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- treegrid -->
<div class="relative overflow-x-auto pb-base focus:outline-none focus:shadow-outline-black" tabindex="0" role="region" aria-label="Treegrid con scroll del ejemplo Treegrid con wrapper">
  <table data-module="c-treegrid" class="c-treegrid w-full" id="treegrid-9" aria-describedby="treegrid-9-desc" role="treegrid">
    <caption class="sr-only mb-base font-bold text-left text-lg">Caption de la treegrid con 15 niveles</caption>
    <colgroup>
      <col class="treegrid-col-1">
      <col class="treegrid-col-2">
      <col class="treegrid-col-3">
      <col class="treegrid-col-4">
    </colgroup>
    <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">Documento</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark lg:text-right">Importe</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark">Fecha</th>
        <th scope="col" class="align-top px-base py-sm text-left font-normal text-sm text-neutral-dark">Acciones</th>
      </tr>
    </thead>
    <tbody>
      <tr role="row" class="mb-0 text-left border-t border-b border-neutral-base" aria-level="1" style="--level: 1" aria-posinset="1" aria-setsize="1" aria-expanded="false">
        <td role="gridcell" class="text-left px-base py-sm flex items-start" data-label="Documento"
          id="F0001">
          <span class="c-treegrid__icon inline-block relative after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4" role="presentation">
            <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
              <rect width="24" height="24" fill="none" />
              <path d="M15.0111 12.387C15.0621 12.3362 15.1025 12.2759 15.13 12.2094C15.1576 12.143 15.1718 12.0718 15.1718 11.9998C15.1718 11.9279 15.1576 11.8567 15.13 11.7903C15.1025 11.7238 15.0621 11.6635 15.0111 11.6127L11.1839 7.78547C11.1074 7.70887 11.0099 7.65669 10.9038 7.63554C10.7976 7.61439 10.6875 7.62522 10.5875 7.66666C10.4875 7.70811 10.4021 7.77829 10.342 7.86834C10.2819 7.95838 10.2499 8.06423 10.25 8.17248L10.25 15.8272C10.2498 15.9355 10.2818 16.0414 10.3419 16.1315C10.4019 16.2216 10.4874 16.2918 10.5874 16.3333C10.6874 16.3748 10.7975 16.3856 10.9037 16.3645C11.0099 16.3433 11.1074 16.2911 11.1839 16.2145L15.0111 12.387Z" fill="currentColor" />
            </svg>
          </span>
          F0001
        </td>
        <td role="gridcell" class="text-left px-base py-sm lg:text-right" data-label="Importe">
          100 €</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Fecha">
          01/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Acciones">
          <a href="#" id="F0001-action" class="c-link" aria-labelledby="F0001-action F0001">Ver</a>
        </td>
      </tr>
      <tr role="row" class="mb-0 text-left border-t border-b border-neutral-base" aria-level="2" style="--level: 2" aria-posinset="1" aria-setsize="1" aria-expanded="false">
        <td role="gridcell" class="text-left px-base py-sm flex items-start" data-label="Documento"
          id="F0001-1">
          <span class="c-treegrid__icon inline-block relative after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4" role="presentation">
            <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
              <rect width="24" height="24" fill="none" />
              <path d="M15.0111 12.387C15.0621 12.3362 15.1025 12.2759 15.13 12.2094C15.1576 12.143 15.1718 12.0718 15.1718 11.9998C15.1718 11.9279 15.1576 11.8567 15.13 11.7903C15.1025 11.7238 15.0621 11.6635 15.0111 11.6127L11.1839 7.78547C11.1074 7.70887 11.0099 7.65669 10.9038 7.63554C10.7976 7.61439 10.6875 7.62522 10.5875 7.66666C10.4875 7.70811 10.4021 7.77829 10.342 7.86834C10.2819 7.95838 10.2499 8.06423 10.25 8.17248L10.25 15.8272C10.2498 15.9355 10.2818 16.0414 10.3419 16.1315C10.4019 16.2216 10.4874 16.2918 10.5874 16.3333C10.6874 16.3748 10.7975 16.3856 10.9037 16.3645C11.0099 16.3433 11.1074 16.2911 11.1839 16.2145L15.0111 12.387Z" fill="currentColor" />
            </svg>
          </span>
          F0001-1
        </td>
        <td role="gridcell" class="text-left px-base py-sm lg:text-right" data-label="Importe">
          200 €</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Fecha">
          02/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Acciones">
          <a href="#" id="F0001-1-action" class="c-link" aria-labelledby="F0001-1-action F0001-1">Ver</a>
        </td>
      </tr>
      <tr role="row" class="mb-0 text-left border-t border-b border-neutral-base" aria-level="3" style="--level: 3" aria-posinset="1" aria-setsize="1" aria-expanded="false">
        <td role="gridcell" class="text-left px-base py-sm flex items-start" data-label="Documento"
          id="F0001-1-1">
          <span class="c-treegrid__icon inline-block relative after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4" role="presentation">
            <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
              <rect width="24" height="24" fill="none" />
              <path d="M15.0111 12.387C15.0621 12.3362 15.1025 12.2759 15.13 12.2094C15.1576 12.143 15.1718 12.0718 15.1718 11.9998C15.1718 11.9279 15.1576 11.8567 15.13 11.7903C15.1025 11.7238 15.0621 11.6635 15.0111 11.6127L11.1839 7.78547C11.1074 7.70887 11.0099 7.65669 10.9038 7.63554C10.7976 7.61439 10.6875 7.62522 10.5875 7.66666C10.4875 7.70811 10.4021 7.77829 10.342 7.86834C10.2819 7.95838 10.2499 8.06423 10.25 8.17248L10.25 15.8272C10.2498 15.9355 10.2818 16.0414 10.3419 16.1315C10.4019 16.2216 10.4874 16.2918 10.5874 16.3333C10.6874 16.3748 10.7975 16.3856 10.9037 16.3645C11.0099 16.3433 11.1074 16.2911 11.1839 16.2145L15.0111 12.387Z" fill="currentColor" />
            </svg>
          </span>
          F0001-1-1
        </td>
        <td role="gridcell" class="text-left px-base py-sm lg:text-right" data-label="Importe">
          300 €</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Fecha">
          03/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Acciones">
          <a href="#" id="F0001-1-1-action" class="c-link" aria-labelledby="F0001-1-1-action F0001-1-1">Ver</a>
        </td>
      </tr>
      <tr role="row" class="mb-0 text-left border-t border-b border-neutral-base" aria-level="4" style="--level: 4" aria-posinset="1" aria-setsize="1" aria-expanded="false">
        <td role="gridcell" class="text-left px-base py-sm flex items-start" data-label="Documento"
          id="F0001-1-1-1">
          <span class="c-treegrid__icon inline-block relative after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4" role="presentation">
            <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
              <rect width="24" height="24" fill="none" />
              <path d="M15.0111 12.387C15.0621 12.3362 15.1025 12.2759 15.13 12.2094C15.1576 12.143 15.1718 12.0718 15.1718 11.9998C15.1718 11.9279 15.1576 11.8567 15.13 11.7903C15.1025 11.7238 15.0621 11.6635 15.0111 11.6127L11.1839 7.78547C11.1074 7.70887 11.0099 7.65669 10.9038 7.63554C10.7976 7.61439 10.6875 7.62522 10.5875 7.66666C10.4875 7.70811 10.4021 7.77829 10.342 7.86834C10.2819 7.95838 10.2499 8.06423 10.25 8.17248L10.25 15.8272C10.2498 15.9355 10.2818 16.0414 10.3419 16.1315C10.4019 16.2216 10.4874 16.2918 10.5874 16.3333C10.6874 16.3748 10.7975 16.3856 10.9037 16.3645C11.0099 16.3433 11.1074 16.2911 11.1839 16.2145L15.0111 12.387Z" fill="currentColor" />
            </svg>
          </span>
          F0001-1-1-1
        </td>
        <td role="gridcell" class="text-left px-base py-sm lg:text-right" data-label="Importe">
          400 €</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Fecha">
          04/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Acciones">
          <a href="#" id="F0001-1-1-1-action" class="c-link" aria-labelledby="F0001-1-1-1-action F0001-1-1-1">Ver</a>
        </td>
      </tr>
      <tr role="row" class="mb-0 text-left border-t border-b border-neutral-base" aria-level="5" style="--level: 5" aria-posinset="1" aria-setsize="1" aria-expanded="false">
        <td role="gridcell" class="text-left px-base py-sm flex items-start" data-label="Documento"
          id="F0001-1-1-1-1">
          <span class="c-treegrid__icon inline-block relative after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4" role="presentation">
            <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
              <rect width="24" height="24" fill="none" />
              <path d="M15.0111 12.387C15.0621 12.3362 15.1025 12.2759 15.13 12.2094C15.1576 12.143 15.1718 12.0718 15.1718 11.9998C15.1718 11.9279 15.1576 11.8567 15.13 11.7903C15.1025 11.7238 15.0621 11.6635 15.0111 11.6127L11.1839 7.78547C11.1074 7.70887 11.0099 7.65669 10.9038 7.63554C10.7976 7.61439 10.6875 7.62522 10.5875 7.66666C10.4875 7.70811 10.4021 7.77829 10.342 7.86834C10.2819 7.95838 10.2499 8.06423 10.25 8.17248L10.25 15.8272C10.2498 15.9355 10.2818 16.0414 10.3419 16.1315C10.4019 16.2216 10.4874 16.2918 10.5874 16.3333C10.6874 16.3748 10.7975 16.3856 10.9037 16.3645C11.0099 16.3433 11.1074 16.2911 11.1839 16.2145L15.0111 12.387Z" fill="currentColor" />
            </svg>
          </span>
          F0001-1-1-1-1
        </td>
        <td role="gridcell" class="text-left px-base py-sm lg:text-right" data-label="Importe">
          500 €</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Fecha">
          05/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Acciones">
          <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>
        </td>
      </tr>
      <tr role="row" class="mb-0 text-left border-t border-b border-neutral-base" aria-level="6" style="--level: 6" aria-posinset="1" aria-setsize="1" aria-expanded="false">
        <td role="gridcell" class="text-left px-base py-sm flex items-start" data-label="Documento"
          id="F0001-1-1-1-1-1">
          <span class="c-treegrid__icon inline-block relative after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4" role="presentation">
            <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
              <rect width="24" height="24" fill="none" />
              <path d="M15.0111 12.387C15.0621 12.3362 15.1025 12.2759 15.13 12.2094C15.1576 12.143 15.1718 12.0718 15.1718 11.9998C15.1718 11.9279 15.1576 11.8567 15.13 11.7903C15.1025 11.7238 15.0621 11.6635 15.0111 11.6127L11.1839 7.78547C11.1074 7.70887 11.0099 7.65669 10.9038 7.63554C10.7976 7.61439 10.6875 7.62522 10.5875 7.66666C10.4875 7.70811 10.4021 7.77829 10.342 7.86834C10.2819 7.95838 10.2499 8.06423 10.25 8.17248L10.25 15.8272C10.2498 15.9355 10.2818 16.0414 10.3419 16.1315C10.4019 16.2216 10.4874 16.2918 10.5874 16.3333C10.6874 16.3748 10.7975 16.3856 10.9037 16.3645C11.0099 16.3433 11.1074 16.2911 11.1839 16.2145L15.0111 12.387Z" fill="currentColor" />
            </svg>
          </span>
          F0001-1-1-1-1-1
        </td>
        <td role="gridcell" class="text-left px-base py-sm lg:text-right" data-label="Importe">
          600 €</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Fecha">
          06/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Acciones">
          <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>
        </td>
      </tr>
      <tr role="row" class="mb-0 text-left border-t border-b border-neutral-base" aria-level="7" style="--level: 7" aria-posinset="1" aria-setsize="1" aria-expanded="false">
        <td role="gridcell" class="text-left px-base py-sm flex items-start" data-label="Documento"
          id="F0001-1-1-1-1-1-1">
          <span class="c-treegrid__icon inline-block relative after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4" role="presentation">
            <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
              <rect width="24" height="24" fill="none" />
              <path d="M15.0111 12.387C15.0621 12.3362 15.1025 12.2759 15.13 12.2094C15.1576 12.143 15.1718 12.0718 15.1718 11.9998C15.1718 11.9279 15.1576 11.8567 15.13 11.7903C15.1025 11.7238 15.0621 11.6635 15.0111 11.6127L11.1839 7.78547C11.1074 7.70887 11.0099 7.65669 10.9038 7.63554C10.7976 7.61439 10.6875 7.62522 10.5875 7.66666C10.4875 7.70811 10.4021 7.77829 10.342 7.86834C10.2819 7.95838 10.2499 8.06423 10.25 8.17248L10.25 15.8272C10.2498 15.9355 10.2818 16.0414 10.3419 16.1315C10.4019 16.2216 10.4874 16.2918 10.5874 16.3333C10.6874 16.3748 10.7975 16.3856 10.9037 16.3645C11.0099 16.3433 11.1074 16.2911 11.1839 16.2145L15.0111 12.387Z" fill="currentColor" />
            </svg>
          </span>
          F0001-1-1-1-1-1-1
        </td>
        <td role="gridcell" class="text-left px-base py-sm lg:text-right" data-label="Importe">
          700 €</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Fecha">
          07/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Acciones">
          <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>
        </td>
      </tr>
      <tr role="row" class="mb-0 text-left border-t border-b border-neutral-base" aria-level="8" style="--level: 8" aria-posinset="1" aria-setsize="1" aria-expanded="false">
        <td role="gridcell" class="text-left px-base py-sm flex items-start" data-label="Documento"
          id="F0001-1-1-1-1-1-1-1">
          <span class="c-treegrid__icon inline-block relative after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4" role="presentation">
            <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
              <rect width="24" height="24" fill="none" />
              <path d="M15.0111 12.387C15.0621 12.3362 15.1025 12.2759 15.13 12.2094C15.1576 12.143 15.1718 12.0718 15.1718 11.9998C15.1718 11.9279 15.1576 11.8567 15.13 11.7903C15.1025 11.7238 15.0621 11.6635 15.0111 11.6127L11.1839 7.78547C11.1074 7.70887 11.0099 7.65669 10.9038 7.63554C10.7976 7.61439 10.6875 7.62522 10.5875 7.66666C10.4875 7.70811 10.4021 7.77829 10.342 7.86834C10.2819 7.95838 10.2499 8.06423 10.25 8.17248L10.25 15.8272C10.2498 15.9355 10.2818 16.0414 10.3419 16.1315C10.4019 16.2216 10.4874 16.2918 10.5874 16.3333C10.6874 16.3748 10.7975 16.3856 10.9037 16.3645C11.0099 16.3433 11.1074 16.2911 11.1839 16.2145L15.0111 12.387Z" fill="currentColor" />
            </svg>
          </span>
          F0001-1-1-1-1-1-1-1
        </td>
        <td role="gridcell" class="text-left px-base py-sm lg:text-right" data-label="Importe">
          800 €</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Fecha">
          08/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Acciones">
          <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>
        </td>
      </tr>
      <tr role="row" class="mb-0 text-left border-t border-b border-neutral-base" aria-level="9" style="--level: 9" aria-posinset="1" aria-setsize="1" aria-expanded="false">
        <td role="gridcell" class="text-left px-base py-sm flex items-start" data-label="Documento"
          id="F0001-1-1-1-1-1-1-1-1">
          <span class="c-treegrid__icon inline-block relative after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4" role="presentation">
            <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
              <rect width="24" height="24" fill="none" />
              <path d="M15.0111 12.387C15.0621 12.3362 15.1025 12.2759 15.13 12.2094C15.1576 12.143 15.1718 12.0718 15.1718 11.9998C15.1718 11.9279 15.1576 11.8567 15.13 11.7903C15.1025 11.7238 15.0621 11.6635 15.0111 11.6127L11.1839 7.78547C11.1074 7.70887 11.0099 7.65669 10.9038 7.63554C10.7976 7.61439 10.6875 7.62522 10.5875 7.66666C10.4875 7.70811 10.4021 7.77829 10.342 7.86834C10.2819 7.95838 10.2499 8.06423 10.25 8.17248L10.25 15.8272C10.2498 15.9355 10.2818 16.0414 10.3419 16.1315C10.4019 16.2216 10.4874 16.2918 10.5874 16.3333C10.6874 16.3748 10.7975 16.3856 10.9037 16.3645C11.0099 16.3433 11.1074 16.2911 11.1839 16.2145L15.0111 12.387Z" fill="currentColor" />
            </svg>
          </span>
          F0001-1-1-1-1-1-1-1-1
        </td>
        <td role="gridcell" class="text-left px-base py-sm lg:text-right" data-label="Importe">
          900 €</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Fecha">
          09/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Acciones">
          <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>
        </td>
      </tr>
      <tr role="row" class="mb-0 text-left border-t border-b border-neutral-base" aria-level="10" style="--level: 10" aria-posinset="1" aria-setsize="1" aria-expanded="false">
        <td role="gridcell" class="text-left px-base py-sm flex items-start" data-label="Documento"
          id="F0001-1-1-1-1-1-1-1-1-1">
          <span class="c-treegrid__icon inline-block relative after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4" role="presentation">
            <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
              <rect width="24" height="24" fill="none" />
              <path d="M15.0111 12.387C15.0621 12.3362 15.1025 12.2759 15.13 12.2094C15.1576 12.143 15.1718 12.0718 15.1718 11.9998C15.1718 11.9279 15.1576 11.8567 15.13 11.7903C15.1025 11.7238 15.0621 11.6635 15.0111 11.6127L11.1839 7.78547C11.1074 7.70887 11.0099 7.65669 10.9038 7.63554C10.7976 7.61439 10.6875 7.62522 10.5875 7.66666C10.4875 7.70811 10.4021 7.77829 10.342 7.86834C10.2819 7.95838 10.2499 8.06423 10.25 8.17248L10.25 15.8272C10.2498 15.9355 10.2818 16.0414 10.3419 16.1315C10.4019 16.2216 10.4874 16.2918 10.5874 16.3333C10.6874 16.3748 10.7975 16.3856 10.9037 16.3645C11.0099 16.3433 11.1074 16.2911 11.1839 16.2145L15.0111 12.387Z" fill="currentColor" />
            </svg>
          </span>
          F0001-1-1-1-1-1-1-1-1-1
        </td>
        <td role="gridcell" class="text-left px-base py-sm lg:text-right" data-label="Importe">
          1000 €</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Fecha">
          09/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Acciones">
          <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>
        </td>
      </tr>
      <tr role="row" class="mb-0 text-left border-t border-b border-neutral-base" aria-level="11" style="--level: 11" aria-posinset="1" aria-setsize="1" aria-expanded="false">
        <td role="gridcell" class="text-left px-base py-sm flex items-start" data-label="Documento"
          id="F0001-1-1-1-1-1-1-1-1-1-1">
          <span class="c-treegrid__icon inline-block relative after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4" role="presentation">
            <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
              <rect width="24" height="24" fill="none" />
              <path d="M15.0111 12.387C15.0621 12.3362 15.1025 12.2759 15.13 12.2094C15.1576 12.143 15.1718 12.0718 15.1718 11.9998C15.1718 11.9279 15.1576 11.8567 15.13 11.7903C15.1025 11.7238 15.0621 11.6635 15.0111 11.6127L11.1839 7.78547C11.1074 7.70887 11.0099 7.65669 10.9038 7.63554C10.7976 7.61439 10.6875 7.62522 10.5875 7.66666C10.4875 7.70811 10.4021 7.77829 10.342 7.86834C10.2819 7.95838 10.2499 8.06423 10.25 8.17248L10.25 15.8272C10.2498 15.9355 10.2818 16.0414 10.3419 16.1315C10.4019 16.2216 10.4874 16.2918 10.5874 16.3333C10.6874 16.3748 10.7975 16.3856 10.9037 16.3645C11.0099 16.3433 11.1074 16.2911 11.1839 16.2145L15.0111 12.387Z" fill="currentColor" />
            </svg>
          </span>
          F0001-1-1-1-1-1-1-1-1-1-1
        </td>
        <td role="gridcell" class="text-left px-base py-sm lg:text-right" data-label="Importe">
          1100 €</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Fecha">
          09/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Acciones">
          <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>
        </td>
      </tr>
      <tr role="row" class="mb-0 text-left border-t border-b border-neutral-base" aria-level="12" style="--level: 12" aria-posinset="1" aria-setsize="1" aria-expanded="false">
        <td role="gridcell" class="text-left px-base py-sm flex items-start" data-label="Documento"
          id="F0001-1-1-1-1-1-1-1-1-1-1-1">
          <span class="c-treegrid__icon inline-block relative after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4" role="presentation">
            <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
              <rect width="24" height="24" fill="none" />
              <path d="M15.0111 12.387C15.0621 12.3362 15.1025 12.2759 15.13 12.2094C15.1576 12.143 15.1718 12.0718 15.1718 11.9998C15.1718 11.9279 15.1576 11.8567 15.13 11.7903C15.1025 11.7238 15.0621 11.6635 15.0111 11.6127L11.1839 7.78547C11.1074 7.70887 11.0099 7.65669 10.9038 7.63554C10.7976 7.61439 10.6875 7.62522 10.5875 7.66666C10.4875 7.70811 10.4021 7.77829 10.342 7.86834C10.2819 7.95838 10.2499 8.06423 10.25 8.17248L10.25 15.8272C10.2498 15.9355 10.2818 16.0414 10.3419 16.1315C10.4019 16.2216 10.4874 16.2918 10.5874 16.3333C10.6874 16.3748 10.7975 16.3856 10.9037 16.3645C11.0099 16.3433 11.1074 16.2911 11.1839 16.2145L15.0111 12.387Z" fill="currentColor" />
            </svg>
          </span>
          F0001-1-1-1-1-1-1-1-1-1-1-1
        </td>
        <td role="gridcell" class="text-left px-base py-sm lg:text-right" data-label="Importe">
          1200 €</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Fecha">
          09/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Acciones">
          <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>
        </td>
      </tr>
      <tr role="row" class="mb-0 text-left border-t border-b border-neutral-base" aria-level="13" style="--level: 13" aria-posinset="1" aria-setsize="1" aria-expanded="false">
        <td role="gridcell" class="text-left px-base py-sm flex items-start" data-label="Documento"
          id="F0001-1-1-1-1-1-1-1-1-1-1-1-1">
          <span class="c-treegrid__icon inline-block relative after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4" role="presentation">
            <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
              <rect width="24" height="24" fill="none" />
              <path d="M15.0111 12.387C15.0621 12.3362 15.1025 12.2759 15.13 12.2094C15.1576 12.143 15.1718 12.0718 15.1718 11.9998C15.1718 11.9279 15.1576 11.8567 15.13 11.7903C15.1025 11.7238 15.0621 11.6635 15.0111 11.6127L11.1839 7.78547C11.1074 7.70887 11.0099 7.65669 10.9038 7.63554C10.7976 7.61439 10.6875 7.62522 10.5875 7.66666C10.4875 7.70811 10.4021 7.77829 10.342 7.86834C10.2819 7.95838 10.2499 8.06423 10.25 8.17248L10.25 15.8272C10.2498 15.9355 10.2818 16.0414 10.3419 16.1315C10.4019 16.2216 10.4874 16.2918 10.5874 16.3333C10.6874 16.3748 10.7975 16.3856 10.9037 16.3645C11.0099 16.3433 11.1074 16.2911 11.1839 16.2145L15.0111 12.387Z" fill="currentColor" />
            </svg>
          </span>
          F0001-1-1-1-1-1-1-1-1-1-1-1-1
        </td>
        <td role="gridcell" class="text-left px-base py-sm lg:text-right" data-label="Importe">
          1300 €</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Fecha">
          09/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Acciones">
          <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>
        </td>
      </tr>
      <tr role="row" class="mb-0 text-left border-t border-b border-neutral-base" aria-level="14" style="--level: 14" aria-posinset="1" aria-setsize="1" aria-expanded="false">
        <td role="gridcell" class="text-left px-base py-sm flex items-start" data-label="Documento"
          id="F0001-1-1-1-1-1-1-1-1-1-1-1-1-1">
          <span class="c-treegrid__icon inline-block relative after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4" role="presentation">
            <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
              <rect width="24" height="24" fill="none" />
              <path d="M15.0111 12.387C15.0621 12.3362 15.1025 12.2759 15.13 12.2094C15.1576 12.143 15.1718 12.0718 15.1718 11.9998C15.1718 11.9279 15.1576 11.8567 15.13 11.7903C15.1025 11.7238 15.0621 11.6635 15.0111 11.6127L11.1839 7.78547C11.1074 7.70887 11.0099 7.65669 10.9038 7.63554C10.7976 7.61439 10.6875 7.62522 10.5875 7.66666C10.4875 7.70811 10.4021 7.77829 10.342 7.86834C10.2819 7.95838 10.2499 8.06423 10.25 8.17248L10.25 15.8272C10.2498 15.9355 10.2818 16.0414 10.3419 16.1315C10.4019 16.2216 10.4874 16.2918 10.5874 16.3333C10.6874 16.3748 10.7975 16.3856 10.9037 16.3645C11.0099 16.3433 11.1074 16.2911 11.1839 16.2145L15.0111 12.387Z" fill="currentColor" />
            </svg>
          </span>
          F0001-1-1-1-1-1-1-1-1-1-1-1-1-1
        </td>
        <td role="gridcell" class="text-left px-base py-sm lg:text-right" data-label="Importe">
          1400 €</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Fecha">
          09/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Acciones">
          <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>
        </td>
      </tr>
      <tr role="row" class="mb-0 text-left border-t border-b border-neutral-base" aria-level="15" style="--level: 15" aria-posinset="1" aria-setsize="1">
        <td role="gridcell" class="text-left px-base py-sm" data-label="Documento"
          id="F0001-1-1-1-1-1-1-1-1-1-1-1-1-1-1">
          F0001-1-1-1-1-1-1-1-1-1-1-1-1-1-1</td>
        <td role="gridcell" class="text-left px-base py-sm lg:text-right" data-label="Importe">
          1500 €</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Fecha">
          09/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Acciones">
          <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>
        </td>
      </tr>
      <tr role="row" class="mb-0 text-left border-t border-b border-neutral-base" aria-level="1" style="--level: 1" aria-posinset="1" aria-setsize="1" aria-expanded="false">
        <td role="gridcell" class="text-left px-base py-sm flex items-start" data-label="Documento"
          id="F0002">
          <span class="c-treegrid__icon inline-block relative after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4" role="presentation">
            <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
              <rect width="24" height="24" fill="none" />
              <path d="M15.0111 12.387C15.0621 12.3362 15.1025 12.2759 15.13 12.2094C15.1576 12.143 15.1718 12.0718 15.1718 11.9998C15.1718 11.9279 15.1576 11.8567 15.13 11.7903C15.1025 11.7238 15.0621 11.6635 15.0111 11.6127L11.1839 7.78547C11.1074 7.70887 11.0099 7.65669 10.9038 7.63554C10.7976 7.61439 10.6875 7.62522 10.5875 7.66666C10.4875 7.70811 10.4021 7.77829 10.342 7.86834C10.2819 7.95838 10.2499 8.06423 10.25 8.17248L10.25 15.8272C10.2498 15.9355 10.2818 16.0414 10.3419 16.1315C10.4019 16.2216 10.4874 16.2918 10.5874 16.3333C10.6874 16.3748 10.7975 16.3856 10.9037 16.3645C11.0099 16.3433 11.1074 16.2911 11.1839 16.2145L15.0111 12.387Z" fill="currentColor" />
            </svg>
          </span>
          F0002
        </td>
        <td role="gridcell" class="text-left px-base py-sm lg:text-right" data-label="Importe">
          3.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Fecha">
          05/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Acciones">
          <a href="#" id="F0002-action" class="c-link" aria-labelledby="F0002-action F0002">Ver</a>
        </td>
      </tr>
      <tr role="row" class="mb-0 text-left border-t border-b border-neutral-base" aria-level="2" style="--level: 2" aria-posinset="1" aria-setsize="3">
        <td role="gridcell" class="text-left px-base py-sm" data-label="Documento"
          id="F0002-1">
          F0002-1</td>
        <td role="gridcell" class="text-left px-base py-sm lg:text-right" data-label="Importe">
          1.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Fecha">
          05/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Acciones">
          <a href="#" id="F0002-1-action" class="c-link" aria-labelledby="F0002-1-action F0002-1">Ver</a>
        </td>
      </tr>
      <tr role="row" class="mb-0 text-left border-t border-b border-neutral-base" aria-level="2" style="--level: 2" aria-posinset="2" aria-setsize="3" aria-expanded="false">
        <td role="gridcell" class="text-left px-base py-sm flex items-start" data-label="Documento"
          id="F0002-2">
          <span class="c-treegrid__icon inline-block relative after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4" role="presentation">
            <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
              <rect width="24" height="24" fill="none" />
              <path d="M15.0111 12.387C15.0621 12.3362 15.1025 12.2759 15.13 12.2094C15.1576 12.143 15.1718 12.0718 15.1718 11.9998C15.1718 11.9279 15.1576 11.8567 15.13 11.7903C15.1025 11.7238 15.0621 11.6635 15.0111 11.6127L11.1839 7.78547C11.1074 7.70887 11.0099 7.65669 10.9038 7.63554C10.7976 7.61439 10.6875 7.62522 10.5875 7.66666C10.4875 7.70811 10.4021 7.77829 10.342 7.86834C10.2819 7.95838 10.2499 8.06423 10.25 8.17248L10.25 15.8272C10.2498 15.9355 10.2818 16.0414 10.3419 16.1315C10.4019 16.2216 10.4874 16.2918 10.5874 16.3333C10.6874 16.3748 10.7975 16.3856 10.9037 16.3645C11.0099 16.3433 11.1074 16.2911 11.1839 16.2145L15.0111 12.387Z" fill="currentColor" />
            </svg>
          </span>
          F0002-2
        </td>
        <td role="gridcell" class="text-left px-base py-sm lg:text-right" data-label="Importe">
          2.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Fecha">
          05/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Acciones">
          <a href="#" id="F0002-2-action" class="c-link" aria-labelledby="F0002-2-action F0002-2">Ver</a>
        </td>
      </tr>
      <tr role="row" class="mb-0 text-left border-t border-b border-neutral-base" aria-level="3" style="--level: 3" aria-posinset="1" aria-setsize="1">
        <td role="gridcell" class="text-left px-base py-sm" data-label="Documento"
          id="F0002-2-1">
          F0002-2-1</td>
        <td role="gridcell" class="text-left px-base py-sm lg:text-right" data-label="Importe">
          1.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Fecha">
          05/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Acciones">
          <a href="#" id="F0002-2-1-action" class="c-link" aria-labelledby="F0002-2-1-action F0002-2-1">Ver</a>
        </td>
      </tr>
      <tr role="row" class="mb-0 text-left border-t border-b border-neutral-base" aria-level="2" style="--level: 2" aria-posinset="3" aria-setsize="3" aria-expanded="false">
        <td role="gridcell" class="text-left px-base py-sm flex items-start" data-label="Documento"
          id="F0002-3">
          <span class="c-treegrid__icon inline-block relative after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4" role="presentation">
            <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
              <rect width="24" height="24" fill="none" />
              <path d="M15.0111 12.387C15.0621 12.3362 15.1025 12.2759 15.13 12.2094C15.1576 12.143 15.1718 12.0718 15.1718 11.9998C15.1718 11.9279 15.1576 11.8567 15.13 11.7903C15.1025 11.7238 15.0621 11.6635 15.0111 11.6127L11.1839 7.78547C11.1074 7.70887 11.0099 7.65669 10.9038 7.63554C10.7976 7.61439 10.6875 7.62522 10.5875 7.66666C10.4875 7.70811 10.4021 7.77829 10.342 7.86834C10.2819 7.95838 10.2499 8.06423 10.25 8.17248L10.25 15.8272C10.2498 15.9355 10.2818 16.0414 10.3419 16.1315C10.4019 16.2216 10.4874 16.2918 10.5874 16.3333C10.6874 16.3748 10.7975 16.3856 10.9037 16.3645C11.0099 16.3433 11.1074 16.2911 11.1839 16.2145L15.0111 12.387Z" fill="currentColor" />
            </svg>
          </span>
          F0002-3
        </td>
        <td role="gridcell" class="text-left px-base py-sm lg:text-right" data-label="Importe">
          2.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Fecha">
          05/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Acciones">
          <a href="#" id="F0002-3-action" class="c-link" aria-labelledby="F0002-3-action F0002-3">Ver</a>
        </td>
      </tr>
      <tr role="row" class="mb-0 text-left border-t border-b border-neutral-base" aria-level="3" style="--level: 3" aria-posinset="1" aria-setsize="1" aria-expanded="false">
        <td role="gridcell" class="text-left px-base py-sm flex items-start" data-label="Documento"
          id="F0002-3-1">
          <span class="c-treegrid__icon inline-block relative after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4" role="presentation">
            <svg width="24" height="24" viewBox="0 0 24 24" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
              <rect width="24" height="24" fill="none" />
              <path d="M15.0111 12.387C15.0621 12.3362 15.1025 12.2759 15.13 12.2094C15.1576 12.143 15.1718 12.0718 15.1718 11.9998C15.1718 11.9279 15.1576 11.8567 15.13 11.7903C15.1025 11.7238 15.0621 11.6635 15.0111 11.6127L11.1839 7.78547C11.1074 7.70887 11.0099 7.65669 10.9038 7.63554C10.7976 7.61439 10.6875 7.62522 10.5875 7.66666C10.4875 7.70811 10.4021 7.77829 10.342 7.86834C10.2819 7.95838 10.2499 8.06423 10.25 8.17248L10.25 15.8272C10.2498 15.9355 10.2818 16.0414 10.3419 16.1315C10.4019 16.2216 10.4874 16.2918 10.5874 16.3333C10.6874 16.3748 10.7975 16.3856 10.9037 16.3645C11.0099 16.3433 11.1074 16.2911 11.1839 16.2145L15.0111 12.387Z" fill="currentColor" />
            </svg>
          </span>
          F0002-3-1
        </td>
        <td role="gridcell" class="text-left px-base py-sm lg:text-right" data-label="Importe">
          5.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Fecha">
          15/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Acciones">
          <a href="#" id="F0002-3-1-action" class="c-link" aria-labelledby="F0002-3-1-action F0002-3-1">Ver</a>
        </td>
      </tr>
      <tr role="row" class="mb-0 text-left border-t border-b border-neutral-base" aria-level="4" style="--level: 4" aria-posinset="1" aria-setsize="2">
        <td role="gridcell" class="text-left px-base py-sm" data-label="Documento"
          id="F0002-3-1-1">
          F0002-3-1-1</td>
        <td role="gridcell" class="text-left px-base py-sm lg:text-right" data-label="Importe">
          95€</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Fecha">
          15/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Acciones">
          <a href="#" id="F0002-3-1-1-action" class="c-link" aria-labelledby="F0002-3-1-1-action F0002-3-1-1">Ver</a>
        </td>
      </tr>
      <tr role="row" class="mb-0 text-left border-t border-b border-neutral-base" aria-level="4" style="--level: 4" aria-posinset="2" aria-setsize="2">
        <td role="gridcell" class="text-left px-base py-sm" data-label="Documento"
          id="F0002-3-1-2">
          F0002-3-1-2</td>
        <td role="gridcell" class="text-left px-base py-sm lg:text-right" data-label="Importe">
          5.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Fecha">
          15/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm" data-label="Acciones">
          <a href="#" id="F0002-3-1-2-action" class="c-link" aria-labelledby="F0002-3-1-2-action F0002-3-1-2">Ver</a>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<!-- /treegrid -->

Ejemplo: "Treegrid con 15 niveles de profundidad", de código Nunjucks, para maquetar el componente: "Treegrid", versión: 14.0.0, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% 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-none 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"
  }
}) }}
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-none 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"
  }
}) }}