# Ejemplo de código de Tabla. DESY. Sistema de diseño del Gobierno de Aragón.

## Componentes Índice de páginas

Componentes

# Tabla

Datos

Componente para ordenar valores relacionados en filas y columnas.

# Treegrid

Mostrar parámetros

## Parámetros Nunjucks del componente: "Treegrid"

```yaml
params:
- name: rows
  type: object
  required: true
  description: table rows in treegrid.
  params:
  - name: level
    type: integer
    required: false
    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.
  - name: posinset
    type: integer
    required: false
    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.
  - name: setsize
    type: integer
    required: false
    description: Specify the number of rows within the current level. This will add the appropriate aria-setsize attribute to the row.
  - name: expanded
    type: boolean
    required: false
    description: If true, row sub will be expanded.
  - name: cells
    type: array
    required: false
    description: Provide cells for the row.
    params:
      - name: text
        type: string
        required: true
        description: If `html` is set, this is not required. Text for cells in table rows. If `html` is provided, the `text` argument will be ignored.
      - name: html
        type: string
        required: true
        description: If `text` is set, this is not required. HTML for cells in table rows. If `html` is provided, the `text` argument will be ignore
      - name: classes
        type: string
        required: false
        description: Classes to add to the table cell.
      - name: attributes
        type: object
        required: false
        description: HTML attributes (for example data attributes) to add to the table cell.
  - name: attributes
    type: object
    required: false
    description: HTML attributes (for example data attributes) to add to the table row.
- name: head
  type: array
  required: false
  description: Array of table head cells.
  params:
  - name: text
    type: string
    required: false
    description: If `html` is set, this is not required. Text for table head cells. If `html` is provided, the `text` argument will be ignored.
  - name: html
    type: string
    required: false
    description: If `text` is set, this is not required. HTML for table head cells. If `html` is provided, the `text` argument will be ignore
  - name: classes
    type: string
    required: false
    description: Classes to add to the table head cell.
  - name: attributes
    type: object
    required: false
    description: HTML attributes (for example data attributes) to add to the table cell.
- name: foot
  type: array
  required: false
  description: Array of table tfoot cells.
  params:
  - name: text
    type: string
    required: false
    description: If `html` is set, this is not required. Text for table tfoot cells. If `html` is provided, the `text` argument will be ignored.
  - name: html
    type: string
    required: false
    description: If `text` is set, this is not required. HTML for table tfoot cells. If `html` is provided, the `text` argument will be ignore
  - name: classes
    type: string
    required: false
    description: Classes to add to the table tfoot cell.
  - name: attributes
    type: object
    required: false
    description: HTML attributes (for example data attributes) to add to the table cell.
- name: caption
  type: string
  required: false
  description: Caption text
- name: captionClasses
  type: string
  required: false
  description: Classes for caption text size. Classes should correspond to the available typography heading classes.
- name: firstCellIsHeader
  type: boolean
  required: false
  description: If set to true, first cell in table row will be a TH instead of a TD.
- name: wrapper
  type: object
  required: false
  description: Options for a wrapper div outside the table
  params:
  - name: classes
    type: string
    required: false
    description: Classes to add to the wrapper (e.g. to show an horizontal scrollbar it there are many columns or in mobile)
  - name: attributes
    type: object
    required: false
    description: HTML attributes to add to the wrapper div. For accessibility it needs tabindex=0, role=section and aria-label or aria-labelledby.
- name: classes
  type: string
  required: false
  description: Classes to add to the table container.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the table container.

accessibilityCriteria: |
  ## Las tablas deben:
    1. Debe tener al menos una celda de encabezado (TH) en las filas o columnas exteriores.
    2. Si la tabla tiene más de un nivel de encabezado (si hay elementos th en dos filas o en dos columnas) las celdas de datos y de encabezado deben estar asociadas con los atributos id (en los th) /headers (en los td).
    3. El título de la tabla debe estar marcado como <caption>
    4. La primera fila de la tabla no puede tener todas las celdas unidas, o se interpreta que se está simulando un caption.
    5. Después de un encabezado (h1, h2…) no puede ir directamente una tabla, o se entiende que se está usando el encabezado para lo que debería ser el <caption>
    6. La tabla debe tener una descripción especialmente si la tabla es grande o compleja, tiene varios niveles de encabezados, tiene totales o enlaces, etc. La descripción intenta suplir la primera impresión que tienen de la tabla las personas que pueden verla, por ejemplo, vemos que en la última columna hay enlaces o en la última fila hay totales. Como en HTML 5 ya no está admitido el atributo summary en las tablas, lo que se hace es poner la descripción en un párrafo antes de la tabla y asociarlo a la tabla con aria-describedby (así se evita también el error 5). El caption y la descripción no deben ser iguales.
    7. El validador del OAW dará error si hay tablas de una única columna y 3 o más filas con texto menor de 150 caracteres, pues considerará que se está simulando una lista.
```

### Treegrid por defecto [#](#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.

Mostrar códigodel ejemplo: Treegrid por defecto

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% from "components/treegrid/_macro.treegrid.njk" import componentTreegrid %}
{{ componentTreegrid({
  "caption": "Caption de la treegrid",
  "captionClasses": "sr-only mb-base font-bold text-left text-lg",
  "head": [
    {
      "text": "Documento"
    },
    {
      "text": "Importe",
      "classes": "lg:text-right"
    },
    {
      "text": "Fecha"
    },
    {
      "text": "Acciones"
    }
  ],
  "rows": [
    {
      "level": 1,
      "posinset": 1,
      "setsize": 1,
      "expanded": false,
      "cells": [
        {
          "text": "A0001",
          "attributes": {
            "id": "A0001"
          }
        },
        {
          "text": "3.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "05/01/2024"
        },
        {
          "html": "<a href='#' id='A0001-action' class='c-link' aria-labelledby='A0001-action A0001'>Ver</a>"
        }
      ]
    },
    {
      "level": 2,
      "posinset": 1,
      "setsize": 3,
      "cells": [
        {
          "text": "A0001-1",
          "attributes": {
            "id": "A0001-1"
          }
        },
        {
          "text": "1.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "05/01/2024"
        },
        {
          "html": "<a href='#' id='A0001-1-action' class='c-link' aria-labelledby='A0001-1-action A0001-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 2,
      "posinset": 2,
      "setsize": 3,
      "expanded": false,
      "cells": [
        {
          "text": "A0001-2",
          "attributes": {
            "id": "A0001-2"
          }
        },
        {
          "text": "2.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "05/01/2024"
        },
        {
          "html": "<a href='#' id='A0001-2-action' class='c-link' aria-labelledby='A0001-2-action A0001-2'>Ver</a>"
        }
      ]
    },
    {
      "level": 3,
      "posinset": 1,
      "setsize": 1,
      "cells": [
        {
          "text": "A0001-2-1",
          "attributes": {
            "id": "A0001-2-1"
          }
        },
        {
          "text": "1.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "05/01/2024"
        },
        {
          "html": "<a href='#' id='A0001-2-1-action' class='c-link' aria-labelledby='A0001-2-1-action A0001-2-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 2,
      "posinset": 3,
      "setsize": 3,
      "expanded": false,
      "cells": [
        {
          "text": "A0001-3",
          "attributes": {
            "id": "A0001-3"
          }
        },
        {
          "text": "2.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "05/01/2024"
        },
        {
          "html": "<a href='#' id='A0001-3-action' class='c-link' aria-labelledby='A0001-3-action A0001-3'>Ver</a>"
        }
      ]
    },
    {
      "level": 3,
      "posinset": 1,
      "setsize": 1,
      "expanded": false,
      "cells": [
        {
          "text": "A0001-3-1",
          "attributes": {
            "id": "A0001-3-1"
          }
        },
        {
          "text": "5.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "15/01/2024"
        },
        {
          "html": "<a href='#' id='A0001-3-1-action' class='c-link' aria-labelledby='A0001-3-1-action A0001-3-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 4,
      "posinset": 1,
      "setsize": 2,
      "cells": [
        {
          "text": "A0001-3-1-1",
          "attributes": {
            "id": "A0001-3-1-1"
          }
        },
        {
          "text": "95€",
          "classes": "lg:text-right"
        },
        {
          "text": "15/01/2024"
        },
        {
          "html": "<a href='#' id='A0001-3-1-1-action' class='c-link' aria-labelledby='A0001-3-1-1-action A0001-3-1-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 4,
      "posinset": 2,
      "setsize": 2,
      "cells": [
        {
          "text": "A0001-3-1-2",
          "attributes": {
            "id": "A0001-3-1-2"
          }
        },
        {
          "text": "5.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "15/01/2024"
        },
        {
          "html": "<a href='#' id='A0001-3-1-2-action' class='c-link' aria-labelledby='A0001-3-1-2-action A0001-3-1-2'>Ver</a>"
        }
      ]
    }
  ],
  "wrapper": {
    "classes": "relative overflow-x-auto pb-base focus:outline-hidden focus:shadow-outline-black",
    "attributes": {
      "tabindex": "0",
      "role": "region",
      "aria-label": "Treegrid con scroll del ejemplo Treegrid con wrapper"
    }
  },
  "classes": "w-full",
  "attributes": {
    "id": "treegrid",
    "aria-describedby": "treegrid-desc"
  }
}) }}
```

##### HTML

```html
<!-- treegrid -->
<div class="relative overflow-x-auto pb-base focus:outline-hidden 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 focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus flex items-start" data-label="Documento"
          id="A0001">
          <span class="c-treegrid__icon absolute text-primary-base transition-transform duration-200 ease-out cursor-pointer select-none after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4 focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus lg:text-right" data-label="Importe">
          3.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Fecha">
          05/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" 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 focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" aria-level="2" style="--level: 2" aria-posinset="1" aria-setsize="3">
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Documento"
          id="A0001-1">
          A0001-1</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus lg:text-right" data-label="Importe">
          1.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Fecha">
          05/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" 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 focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus flex items-start" data-label="Documento"
          id="A0001-2">
          <span class="c-treegrid__icon absolute text-primary-base transition-transform duration-200 ease-out cursor-pointer select-none after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4 focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus lg:text-right" data-label="Importe">
          2.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Fecha">
          05/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" 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 focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" aria-level="3" style="--level: 3" aria-posinset="1" aria-setsize="1">
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Documento"
          id="A0001-2-1">
          A0001-2-1</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus lg:text-right" data-label="Importe">
          1.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Fecha">
          05/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" 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 focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus flex items-start" data-label="Documento"
          id="A0001-3">
          <span class="c-treegrid__icon absolute text-primary-base transition-transform duration-200 ease-out cursor-pointer select-none after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4 focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus lg:text-right" data-label="Importe">
          2.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Fecha">
          05/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" 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 focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus flex items-start" data-label="Documento"
          id="A0001-3-1">
          <span class="c-treegrid__icon absolute text-primary-base transition-transform duration-200 ease-out cursor-pointer select-none after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4 focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus lg:text-right" data-label="Importe">
          5.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Fecha">
          15/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" 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 focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" aria-level="4" style="--level: 4" aria-posinset="1" aria-setsize="2">
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Documento"
          id="A0001-3-1-1">
          A0001-3-1-1</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus lg:text-right" data-label="Importe">
          95€</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Fecha">
          15/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" 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 focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" aria-level="4" style="--level: 4" aria-posinset="2" aria-setsize="2">
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Documento"
          id="A0001-3-1-2">
          A0001-3-1-2</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus lg:text-right" data-label="Importe">
          5.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Fecha">
          15/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" 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 -->
```

### Treegrid con tfoot [#](#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.

Mostrar códigodel ejemplo: Treegrid con tfoot

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% from "components/treegrid/_macro.treegrid.njk" import componentTreegrid %}
{{ componentTreegrid({
  "caption": "Caption de la treegrid",
  "captionClasses": "sr-only mb-base font-bold text-left text-lg",
  "head": [
    {
      "text": "Documento"
    },
    {
      "text": "Importe",
      "classes": "lg:text-right"
    },
    {
      "text": "Fecha"
    },
    {
      "text": "Acciones"
    }
  ],
  "rows": [
    {
      "level": 1,
      "posinset": 1,
      "setsize": 1,
      "expanded": true,
      "cells": [
        {
          "text": "B0001",
          "attributes": {
            "id": "B0001"
          }
        },
        {
          "text": "3.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "05/01/2024"
        },
        {
          "html": "<a href='#' id='B0001-action' class='c-link' aria-labelledby='B0001-action B0001'>Ver</a>"
        }
      ]
    },
    {
      "level": 2,
      "posinset": 1,
      "setsize": 3,
      "cells": [
        {
          "text": "B0001-1",
          "attributes": {
            "id": "B0001-1"
          }
        },
        {
          "text": "1.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "05/01/2024"
        },
        {
          "html": "<a href='#' id='B0001-1-action' class='c-link' aria-labelledby='B0001-1-action B0001-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 2,
      "posinset": 2,
      "setsize": 3,
      "expanded": false,
      "cells": [
        {
          "text": "B0001-2",
          "attributes": {
            "id": "B0001-2"
          }
        },
        {
          "text": "2.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "05/01/2024"
        },
        {
          "html": "<a href='#' id='B0001-2-action' class='c-link' aria-labelledby='B0001-2-action B0001-2'>Ver</a>"
        }
      ]
    },
    {
      "level": 3,
      "posinset": 1,
      "setsize": 1,
      "cells": [
        {
          "text": "B0001-2-1",
          "attributes": {
            "id": "B0001-2-1"
          }
        },
        {
          "text": "1.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "05/01/2024"
        },
        {
          "html": "<a href='#' id='B0001-2-1-action' class='c-link' aria-labelledby='B0001-2-1-action B0001-2-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 2,
      "posinset": 3,
      "setsize": 3,
      "expanded": false,
      "cells": [
        {
          "text": "B0001-3",
          "attributes": {
            "id": "B0001-3"
          }
        },
        {
          "text": "2.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "05/01/2024"
        },
        {
          "html": "<a href='#' id='B0001-3-action' class='c-link' aria-labelledby='B0001-3-action B0001-3'>Ver</a>"
        }
      ]
    },
    {
      "level": 3,
      "posinset": 1,
      "setsize": 1,
      "expanded": false,
      "cells": [
        {
          "text": "B0001-3-1",
          "attributes": {
            "id": "B0001-3-1"
          }
        },
        {
          "text": "5.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "15/01/2024"
        },
        {
          "html": "<a href='#' id='B0001-3-1-action' class='c-link' aria-labelledby='B0001-3-1-action B0001-3-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 4,
      "posinset": 1,
      "setsize": 2,
      "cells": [
        {
          "text": "B0001-3-1-1",
          "attributes": {
            "id": "B0001-3-1-1"
          }
        },
        {
          "text": "95€",
          "classes": "lg:text-right"
        },
        {
          "text": "15/01/2024"
        },
        {
          "html": "<a href='#' id='B0001-3-1-1-action' class='c-link' aria-labelledby='B0001-3-1-1-action B0001-3-1-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 4,
      "posinset": 2,
      "setsize": 2,
      "cells": [
        {
          "text": "B0001-3-1-2",
          "attributes": {
            "id": "B0001-3-1-2"
          }
        },
        {
          "text": "5.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "15/01/2024"
        },
        {
          "html": "<a href='#' id='B0001-3-1-2-action' class='c-link' aria-labelledby='B0001-3-1-2-action B0001-3-1-2'>Ver</a>"
        }
      ]
    }
  ],
  "foot": [
    {
      "text": "Suma",
      "classes": "uppercase"
    },
    {
      "text": "10.045€",
      "classes": "lg:text-right"
    },
    {
      "text": ""
    },
    {
      "text": ""
    }
  ],
  "wrapper": {
    "classes": "relative overflow-x-auto pb-base focus:outline-hidden focus:shadow-outline-black",
    "attributes": {
      "tabindex": "0",
      "role": "region",
      "aria-label": "Treegrid con scroll del ejemplo Treegrid con wrapper"
    }
  },
  "classes": "w-full",
  "attributes": {
    "id": "treegrid-B",
    "aria-describedby": "treegrid-B-desc"
  }
}) }}
```

##### HTML

```html
<!-- treegrid -->
<div class="relative overflow-x-auto pb-base focus:outline-hidden 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 focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus flex items-start" data-label="Documento"
          id="B0001">
          <span class="c-treegrid__icon absolute text-primary-base transition-transform duration-200 ease-out cursor-pointer select-none after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4 focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus lg:text-right" data-label="Importe">
          3.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Fecha">
          05/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" 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 focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" aria-level="2" style="--level: 2" aria-posinset="1" aria-setsize="3">
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Documento"
          id="B0001-1">
          B0001-1</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus lg:text-right" data-label="Importe">
          1.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Fecha">
          05/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" 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 focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus flex items-start" data-label="Documento"
          id="B0001-2">
          <span class="c-treegrid__icon absolute text-primary-base transition-transform duration-200 ease-out cursor-pointer select-none after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4 focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus lg:text-right" data-label="Importe">
          2.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Fecha">
          05/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" 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 focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" aria-level="3" style="--level: 3" aria-posinset="1" aria-setsize="1">
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Documento"
          id="B0001-2-1">
          B0001-2-1</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus lg:text-right" data-label="Importe">
          1.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Fecha">
          05/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" 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 focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus flex items-start" data-label="Documento"
          id="B0001-3">
          <span class="c-treegrid__icon absolute text-primary-base transition-transform duration-200 ease-out cursor-pointer select-none after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4 focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus lg:text-right" data-label="Importe">
          2.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Fecha">
          05/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" 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 focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus flex items-start" data-label="Documento"
          id="B0001-3-1">
          <span class="c-treegrid__icon absolute text-primary-base transition-transform duration-200 ease-out cursor-pointer select-none after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4 focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus lg:text-right" data-label="Importe">
          5.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Fecha">
          15/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" 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 focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" aria-level="4" style="--level: 4" aria-posinset="1" aria-setsize="2">
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Documento"
          id="B0001-3-1-1">
          B0001-3-1-1</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus lg:text-right" data-label="Importe">
          95€</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Fecha">
          15/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" 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 focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" aria-level="4" style="--level: 4" aria-posinset="2" aria-setsize="2">
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Documento"
          id="B0001-3-1-2">
          B0001-3-1-2</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus lg:text-right" data-label="Importe">
          5.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Fecha">
          15/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" 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 -->
```

### Treegrid con caption visible [#](#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.

Mostrar códigodel ejemplo: Treegrid con caption visible

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% from "components/treegrid/_macro.treegrid.njk" import componentTreegrid %}
{{ componentTreegrid({
  "caption": "Documentos contables",
  "captionClasses": "mb-base font-bold text-left text-lg",
  "head": [
    {
      "text": "Documento"
    },
    {
      "text": "Importe",
      "classes": "lg:text-right"
    },
    {
      "text": "Fecha"
    },
    {
      "text": "Acciones"
    }
  ],
  "rows": [
    {
      "level": 1,
      "posinset": 1,
      "setsize": 1,
      "expanded": true,
      "cells": [
        {
          "text": "C0001",
          "attributes": {
            "id": "C0001"
          }
        },
        {
          "text": "3.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "05/01/2024"
        },
        {
          "html": "<a href='#' id='C0001-action' class='c-link' aria-labelledby='C0001-action C0001'>Ver</a>"
        }
      ]
    },
    {
      "level": 2,
      "posinset": 1,
      "setsize": 3,
      "cells": [
        {
          "text": "C0001-1",
          "attributes": {
            "id": "C0001-1"
          }
        },
        {
          "text": "1.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "05/01/2024"
        },
        {
          "html": "<a href='#' id='C0001-1-action' class='c-link' aria-labelledby='C0001-1-action C0001-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 2,
      "posinset": 2,
      "setsize": 3,
      "expanded": false,
      "cells": [
        {
          "text": "C0001-2",
          "attributes": {
            "id": "C0001-2"
          }
        },
        {
          "text": "2.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "05/01/2024"
        },
        {
          "html": "<a href='#' id='C0001-2-action' class='c-link' aria-labelledby='C0001-2-action C0001-2'>Ver</a>"
        }
      ]
    },
    {
      "level": 3,
      "posinset": 1,
      "setsize": 1,
      "cells": [
        {
          "text": "C0001-2-1",
          "attributes": {
            "id": "C0001-2-1"
          }
        },
        {
          "text": "1.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "05/01/2024"
        },
        {
          "html": "<a href='#' id='C0001-2-1-action' class='c-link' aria-labelledby='C0001-2-1-action C0001-2-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 2,
      "posinset": 3,
      "setsize": 3,
      "expanded": false,
      "cells": [
        {
          "text": "C0001-3",
          "attributes": {
            "id": "C0001-3"
          }
        },
        {
          "text": "2.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "05/01/2024"
        },
        {
          "html": "<a href='#' id='C0001-3-action' class='c-link' aria-labelledby='C0001-3-action C0001-3'>Ver</a>"
        }
      ]
    },
    {
      "level": 3,
      "posinset": 1,
      "setsize": 1,
      "expanded": false,
      "cells": [
        {
          "text": "C0001-3-1",
          "attributes": {
            "id": "C0001-3-1"
          }
        },
        {
          "text": "5.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "15/01/2024"
        },
        {
          "html": "<a href='#' id='C0001-3-1-action' class='c-link' aria-labelledby='C0001-3-1-action C0001-3-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 4,
      "posinset": 1,
      "setsize": 2,
      "cells": [
        {
          "text": "C0001-3-1-1",
          "attributes": {
            "id": "C0001-3-1-1"
          }
        },
        {
          "text": "95€",
          "classes": "lg:text-right"
        },
        {
          "text": "15/01/2024"
        },
        {
          "html": "<a href='#' id='C0001-3-1-1-action' class='c-link' aria-labelledby='C0001-3-1-1-action C0001-3-1-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 4,
      "posinset": 2,
      "setsize": 2,
      "cells": [
        {
          "text": "C0001-3-1-2",
          "attributes": {
            "id": "C0001-3-1-2"
          }
        },
        {
          "text": "5.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "15/01/2024"
        },
        {
          "html": "<a href='#' id='C0001-3-1-2-action' class='c-link' aria-labelledby='C0001-3-1-2-action C0001-3-1-2'>Ver</a>"
        }
      ]
    }
  ],
  "wrapper": {
    "classes": "relative overflow-x-auto pb-base focus:outline-hidden focus:shadow-outline-black",
    "attributes": {
      "tabindex": "0",
      "role": "region",
      "aria-label": "Treegrid con scroll del ejemplo Treegrid con wrapper"
    }
  },
  "classes": "w-full",
  "attributes": {
    "id": "treegrid-B",
    "aria-describedby": "treegrid-B-desc"
  }
}) }}
```

##### HTML

```html
<!-- treegrid -->
<div class="relative overflow-x-auto pb-base focus:outline-hidden 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 focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus flex items-start" data-label="Documento"
          id="C0001">
          <span class="c-treegrid__icon absolute text-primary-base transition-transform duration-200 ease-out cursor-pointer select-none after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4 focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus lg:text-right" data-label="Importe">
          3.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Fecha">
          05/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" 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 focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" aria-level="2" style="--level: 2" aria-posinset="1" aria-setsize="3">
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Documento"
          id="C0001-1">
          C0001-1</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus lg:text-right" data-label="Importe">
          1.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Fecha">
          05/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" 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 focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus flex items-start" data-label="Documento"
          id="C0001-2">
          <span class="c-treegrid__icon absolute text-primary-base transition-transform duration-200 ease-out cursor-pointer select-none after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4 focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus lg:text-right" data-label="Importe">
          2.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Fecha">
          05/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" 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 focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" aria-level="3" style="--level: 3" aria-posinset="1" aria-setsize="1">
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Documento"
          id="C0001-2-1">
          C0001-2-1</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus lg:text-right" data-label="Importe">
          1.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Fecha">
          05/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" 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 focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus flex items-start" data-label="Documento"
          id="C0001-3">
          <span class="c-treegrid__icon absolute text-primary-base transition-transform duration-200 ease-out cursor-pointer select-none after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4 focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus lg:text-right" data-label="Importe">
          2.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Fecha">
          05/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" 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 focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus flex items-start" data-label="Documento"
          id="C0001-3-1">
          <span class="c-treegrid__icon absolute text-primary-base transition-transform duration-200 ease-out cursor-pointer select-none after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4 focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus lg:text-right" data-label="Importe">
          5.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Fecha">
          15/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" 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 focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" aria-level="4" style="--level: 4" aria-posinset="1" aria-setsize="2">
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Documento"
          id="C0001-3-1-1">
          C0001-3-1-1</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus lg:text-right" data-label="Importe">
          95€</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Fecha">
          15/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" 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 focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" aria-level="4" style="--level: 4" aria-posinset="2" aria-setsize="2">
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Documento"
          id="C0001-3-1-2">
          C0001-3-1-2</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus lg:text-right" data-label="Importe">
          5.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Fecha">
          15/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" 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 -->
```

### Treegrid con primera celda como header [#](#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.

Mostrar códigodel ejemplo: Treegrid con primera celda como header

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% from "components/treegrid/_macro.treegrid.njk" import componentTreegrid %}
{{ componentTreegrid({
  "firstCellIsHeader": true,
  "caption": "Caption de la treegrid",
  "captionClasses": "sr-only mb-base font-bold text-left text-lg",
  "head": [
    {
      "text": "Documento"
    },
    {
      "text": "Importe",
      "classes": "lg:text-right"
    },
    {
      "text": "Fecha"
    },
    {
      "text": "Acciones"
    }
  ],
  "rows": [
    {
      "level": 1,
      "posinset": 1,
      "setsize": 1,
      "expanded": true,
      "cells": [
        {
          "text": "E0001",
          "attributes": {
            "id": "E0001"
          }
        },
        {
          "text": "3.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "05/01/2024"
        },
        {
          "html": "<a href='#' id='E0001-action' class='c-link' aria-labelledby='E0001-action E0001'>Ver</a>"
        }
      ]
    },
    {
      "level": 2,
      "posinset": 1,
      "setsize": 3,
      "cells": [
        {
          "text": "E0001-1",
          "attributes": {
            "id": "E0001-1"
          }
        },
        {
          "text": "1.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "05/01/2024"
        },
        {
          "html": "<a href='#' id='E0001-1-action' class='c-link' aria-labelledby='E0001-1-action E0001-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 2,
      "posinset": 2,
      "setsize": 3,
      "expanded": false,
      "cells": [
        {
          "text": "E0001-2",
          "attributes": {
            "id": "E0001-2"
          }
        },
        {
          "text": "2.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "05/01/2024"
        },
        {
          "html": "<a href='#' id='E0001-2-action' class='c-link' aria-labelledby='E0001-2-action E0001-2'>Ver</a>"
        }
      ]
    },
    {
      "level": 3,
      "posinset": 1,
      "setsize": 1,
      "cells": [
        {
          "text": "E0001-2-1",
          "attributes": {
            "id": "E0001-2-1"
          }
        },
        {
          "text": "1.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "05/01/2024"
        },
        {
          "html": "<a href='#' id='E0001-2-1-action' class='c-link' aria-labelledby='E0001-2-1-action E0001-2-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 2,
      "posinset": 3,
      "setsize": 3,
      "expanded": false,
      "cells": [
        {
          "text": "E0001-3",
          "attributes": {
            "id": "E0001-3"
          }
        },
        {
          "text": "2.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "05/01/2024"
        },
        {
          "html": "<a href='#' id='E0001-3-action' class='c-link' aria-labelledby='E0001-3-action E0001-3'>Ver</a>"
        }
      ]
    },
    {
      "level": 3,
      "posinset": 1,
      "setsize": 1,
      "expanded": false,
      "cells": [
        {
          "text": "E0001-3-1",
          "attributes": {
            "id": "E0001-3-1"
          }
        },
        {
          "text": "5.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "15/01/2024"
        },
        {
          "html": "<a href='#' id='E0001-3-1-action' class='c-link' aria-labelledby='E0001-3-1-action E0001-3-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 4,
      "posinset": 1,
      "setsize": 2,
      "cells": [
        {
          "text": "E0001-3-1-1",
          "attributes": {
            "id": "E0001-3-1-1"
          }
        },
        {
          "text": "95€",
          "classes": "lg:text-right"
        },
        {
          "text": "15/01/2024"
        },
        {
          "html": "<a href='#' id='E0001-3-1-1-action' class='c-link' aria-labelledby='E0001-3-1-1-action E0001-3-1-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 4,
      "posinset": 2,
      "setsize": 2,
      "cells": [
        {
          "text": "E0001-3-1-2",
          "attributes": {
            "id": "E0001-3-1-2"
          }
        },
        {
          "text": "5.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "15/01/2024"
        },
        {
          "html": "<a href='#' id='E0001-3-1-2-action' class='c-link' aria-labelledby='E0001-3-1-2-action E0001-3-1-2'>Ver</a>"
        }
      ]
    }
  ],
  "wrapper": {
    "classes": "relative overflow-x-auto pb-base focus:outline-hidden focus:shadow-outline-black",
    "attributes": {
      "tabindex": "0",
      "role": "region",
      "aria-label": "Treegrid con scroll del ejemplo Treegrid con wrapper"
    }
  },
  "classes": "w-full",
  "attributes": {
    "id": "treegrid",
    "aria-describedby": "treegrid-desc"
  }
}) }}
```

##### HTML

```html
<!-- treegrid -->
<div class="relative overflow-x-auto pb-base focus:outline-hidden 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 focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus flex items-start" data-label="Documento"
          id="E0001">
          <span class="c-treegrid__icon absolute text-primary-base transition-transform duration-200 ease-out cursor-pointer select-none 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus lg:text-right" data-label="Importe">
          3.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Fecha">
          05/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" 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 focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Documento"
          id="E0001-1">
          E0001-1</th>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus lg:text-right" data-label="Importe">
          1.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Fecha">
          05/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" 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 focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus flex items-start" data-label="Documento"
          id="E0001-2">
          <span class="c-treegrid__icon absolute text-primary-base transition-transform duration-200 ease-out cursor-pointer select-none 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus lg:text-right" data-label="Importe">
          2.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Fecha">
          05/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" 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 focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Documento"
          id="E0001-2-1">
          E0001-2-1</th>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus lg:text-right" data-label="Importe">
          1.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Fecha">
          05/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" 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 focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus flex items-start" data-label="Documento"
          id="E0001-3">
          <span class="c-treegrid__icon absolute text-primary-base transition-transform duration-200 ease-out cursor-pointer select-none 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus lg:text-right" data-label="Importe">
          2.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Fecha">
          05/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" 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 focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus flex items-start" data-label="Documento"
          id="E0001-3-1">
          <span class="c-treegrid__icon absolute text-primary-base transition-transform duration-200 ease-out cursor-pointer select-none 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus lg:text-right" data-label="Importe">
          5.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Fecha">
          15/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" 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 focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Documento"
          id="E0001-3-1-1">
          E0001-3-1-1</th>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus lg:text-right" data-label="Importe">
          95€</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Fecha">
          15/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" 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 focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Documento"
          id="E0001-3-1-2">
          E0001-3-1-2</th>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus lg:text-right" data-label="Importe">
          5.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Fecha">
          15/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" 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 -->
```

### Treegrid con 15 niveles de profundidad [#](#treegrid-con-15-niveles-de-profundidad)

Ejemplo de Treegrid con 15 niveles de anidación.

Mostrar códigodel ejemplo: Treegrid con 15 niveles de profundidad

#### Contenido

Nunjucks macro HTML

##### Nunjucks macro

```js
{% from "components/treegrid/_macro.treegrid.njk" import componentTreegrid %}
{{ componentTreegrid({
  "caption": "Caption de la treegrid con 15 niveles",
  "captionClasses": "sr-only mb-base font-bold text-left text-lg",
  "head": [
    {
      "text": "Documento"
    },
    {
      "text": "Importe",
      "classes": "lg:text-right"
    },
    {
      "text": "Fecha"
    },
    {
      "text": "Acciones"
    }
  ],
  "rows": [
    {
      "level": 1,
      "posinset": 1,
      "setsize": 1,
      "expanded": false,
      "cells": [
        {
          "text": "F0001",
          "attributes": {
            "id": "F0001"
          }
        },
        {
          "text": "100 €",
          "classes": "lg:text-right"
        },
        {
          "text": "01/01/2024"
        },
        {
          "html": "<a href='#' id='F0001-action' class='c-link' aria-labelledby='F0001-action F0001'>Ver</a>"
        }
      ]
    },
    {
      "level": 2,
      "posinset": 1,
      "setsize": 1,
      "expanded": false,
      "cells": [
        {
          "text": "F0001-1",
          "attributes": {
            "id": "F0001-1"
          }
        },
        {
          "text": "200 €",
          "classes": "lg:text-right"
        },
        {
          "text": "02/01/2024"
        },
        {
          "html": "<a href='#' id='F0001-1-action' class='c-link' aria-labelledby='F0001-1-action F0001-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 3,
      "posinset": 1,
      "setsize": 1,
      "expanded": false,
      "cells": [
        {
          "text": "F0001-1-1",
          "attributes": {
            "id": "F0001-1-1"
          }
        },
        {
          "text": "300 €",
          "classes": "lg:text-right"
        },
        {
          "text": "03/01/2024"
        },
        {
          "html": "<a href='#' id='F0001-1-1-action' class='c-link' aria-labelledby='F0001-1-1-action F0001-1-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 4,
      "posinset": 1,
      "setsize": 1,
      "expanded": false,
      "cells": [
        {
          "text": "F0001-1-1-1",
          "attributes": {
            "id": "F0001-1-1-1"
          }
        },
        {
          "text": "400 €",
          "classes": "lg:text-right"
        },
        {
          "text": "04/01/2024"
        },
        {
          "html": "<a href='#' id='F0001-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-action F0001-1-1-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 5,
      "posinset": 1,
      "setsize": 1,
      "expanded": false,
      "cells": [
        {
          "text": "F0001-1-1-1-1",
          "attributes": {
            "id": "F0001-1-1-1-1"
          }
        },
        {
          "text": "500 €",
          "classes": "lg:text-right"
        },
        {
          "text": "05/01/2024"
        },
        {
          "html": "<a href='#' id='F0001-1-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-1-action F0001-1-1-1-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 6,
      "posinset": 1,
      "setsize": 1,
      "expanded": false,
      "cells": [
        {
          "text": "F0001-1-1-1-1-1",
          "attributes": {
            "id": "F0001-1-1-1-1-1"
          }
        },
        {
          "text": "600 €",
          "classes": "lg:text-right"
        },
        {
          "text": "06/01/2024"
        },
        {
          "html": "<a href='#' id='F0001-1-1-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-1-1-action F0001-1-1-1-1-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 7,
      "posinset": 1,
      "setsize": 1,
      "expanded": false,
      "cells": [
        {
          "text": "F0001-1-1-1-1-1-1",
          "attributes": {
            "id": "F0001-1-1-1-1-1-1"
          }
        },
        {
          "text": "700 €",
          "classes": "lg:text-right"
        },
        {
          "text": "07/01/2024"
        },
        {
          "html": "<a href='#' id='F0001-1-1-1-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-1-1-1-action F0001-1-1-1-1-1-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 8,
      "posinset": 1,
      "setsize": 1,
      "expanded": false,
      "cells": [
        {
          "text": "F0001-1-1-1-1-1-1-1",
          "attributes": {
            "id": "F0001-1-1-1-1-1-1-1"
          }
        },
        {
          "text": "800 €",
          "classes": "lg:text-right"
        },
        {
          "text": "08/01/2024"
        },
        {
          "html": "<a href='#' id='F0001-1-1-1-1-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-1-1-1-1-action F0001-1-1-1-1-1-1-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 9,
      "posinset": 1,
      "setsize": 1,
      "expanded": false,
      "cells": [
        {
          "text": "F0001-1-1-1-1-1-1-1-1",
          "attributes": {
            "id": "F0001-1-1-1-1-1-1-1-1"
          }
        },
        {
          "text": "900 €",
          "classes": "lg:text-right"
        },
        {
          "text": "09/01/2024"
        },
        {
          "html": "<a href='#' id='F0001-1-1-1-1-1-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-1-1-1-1-1-action F0001-1-1-1-1-1-1-1-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 10,
      "posinset": 1,
      "setsize": 1,
      "expanded": false,
      "cells": [
        {
          "text": "F0001-1-1-1-1-1-1-1-1-1",
          "attributes": {
            "id": "F0001-1-1-1-1-1-1-1-1-1"
          }
        },
        {
          "text": "1000 €",
          "classes": "lg:text-right"
        },
        {
          "text": "09/01/2024"
        },
        {
          "html": "<a href='#' id='F0001-1-1-1-1-1-1-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-1-1-1-1-1-1-action F0001-1-1-1-1-1-1-1-1-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 11,
      "posinset": 1,
      "setsize": 1,
      "expanded": false,
      "cells": [
        {
          "text": "F0001-1-1-1-1-1-1-1-1-1-1",
          "attributes": {
            "id": "F0001-1-1-1-1-1-1-1-1-1-1"
          }
        },
        {
          "text": "1100 €",
          "classes": "lg:text-right"
        },
        {
          "text": "09/01/2024"
        },
        {
          "html": "<a href='#' id='F0001-1-1-1-1-1-1-1-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-1-1-1-1-1-1-1-action F0001-1-1-1-1-1-1-1-1-1-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 12,
      "posinset": 1,
      "setsize": 1,
      "expanded": false,
      "cells": [
        {
          "text": "F0001-1-1-1-1-1-1-1-1-1-1-1",
          "attributes": {
            "id": "F0001-1-1-1-1-1-1-1-1-1-1-1"
          }
        },
        {
          "text": "1200 €",
          "classes": "lg:text-right"
        },
        {
          "text": "09/01/2024"
        },
        {
          "html": "<a href='#' id='F0001-1-1-1-1-1-1-1-1-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-1-1-1-1-1-1-1-1-action F0001-1-1-1-1-1-1-1-1-1-1-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 13,
      "posinset": 1,
      "setsize": 1,
      "expanded": false,
      "cells": [
        {
          "text": "F0001-1-1-1-1-1-1-1-1-1-1-1-1",
          "attributes": {
            "id": "F0001-1-1-1-1-1-1-1-1-1-1-1-1"
          }
        },
        {
          "text": "1300 €",
          "classes": "lg:text-right"
        },
        {
          "text": "09/01/2024"
        },
        {
          "html": "<a href='#' id='F0001-1-1-1-1-1-1-1-1-1-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-1-1-1-1-1-1-1-1-1-action F0001-1-1-1-1-1-1-1-1-1-1-1-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 14,
      "posinset": 1,
      "setsize": 1,
      "expanded": false,
      "cells": [
        {
          "text": "F0001-1-1-1-1-1-1-1-1-1-1-1-1-1",
          "attributes": {
            "id": "F0001-1-1-1-1-1-1-1-1-1-1-1-1-1"
          }
        },
        {
          "text": "1400 €",
          "classes": "lg:text-right"
        },
        {
          "text": "09/01/2024"
        },
        {
          "html": "<a href='#' id='F0001-1-1-1-1-1-1-1-1-1-1-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-1-1-1-1-1-1-1-1-1-1-action F0001-1-1-1-1-1-1-1-1-1-1-1-1-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 15,
      "posinset": 1,
      "setsize": 1,
      "cells": [
        {
          "text": "F0001-1-1-1-1-1-1-1-1-1-1-1-1-1-1",
          "attributes": {
            "id": "F0001-1-1-1-1-1-1-1-1-1-1-1-1-1-1"
          }
        },
        {
          "text": "1500 €",
          "classes": "lg:text-right"
        },
        {
          "text": "09/01/2024"
        },
        {
          "html": "<a href='#' id='F0001-1-1-1-1-1-1-1-1-1-1-1-1-1-1-action' class='c-link' aria-labelledby='F0001-1-1-1-1-1-1-1-1-1-1-1-1-1-1-action F0001-1-1-1-1-1-1-1-1-1-1-1-1-1-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 1,
      "posinset": 1,
      "setsize": 1,
      "expanded": false,
      "cells": [
        {
          "text": "F0002",
          "attributes": {
            "id": "F0002"
          }
        },
        {
          "text": "3.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "05/01/2024"
        },
        {
          "html": "<a href='#' id='F0002-action' class='c-link' aria-labelledby='F0002-action F0002'>Ver</a>"
        }
      ]
    },
    {
      "level": 2,
      "posinset": 1,
      "setsize": 3,
      "cells": [
        {
          "text": "F0002-1",
          "attributes": {
            "id": "F0002-1"
          }
        },
        {
          "text": "1.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "05/01/2024"
        },
        {
          "html": "<a href='#' id='F0002-1-action' class='c-link' aria-labelledby='F0002-1-action F0002-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 2,
      "posinset": 2,
      "setsize": 3,
      "expanded": false,
      "cells": [
        {
          "text": "F0002-2",
          "attributes": {
            "id": "F0002-2"
          }
        },
        {
          "text": "2.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "05/01/2024"
        },
        {
          "html": "<a href='#' id='F0002-2-action' class='c-link' aria-labelledby='F0002-2-action F0002-2'>Ver</a>"
        }
      ]
    },
    {
      "level": 3,
      "posinset": 1,
      "setsize": 1,
      "cells": [
        {
          "text": "F0002-2-1",
          "attributes": {
            "id": "F0002-2-1"
          }
        },
        {
          "text": "1.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "05/01/2024"
        },
        {
          "html": "<a href='#' id='F0002-2-1-action' class='c-link' aria-labelledby='F0002-2-1-action F0002-2-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 2,
      "posinset": 3,
      "setsize": 3,
      "expanded": false,
      "cells": [
        {
          "text": "F0002-3",
          "attributes": {
            "id": "F0002-3"
          }
        },
        {
          "text": "2.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "05/01/2024"
        },
        {
          "html": "<a href='#' id='F0002-3-action' class='c-link' aria-labelledby='F0002-3-action F0002-3'>Ver</a>"
        }
      ]
    },
    {
      "level": 3,
      "posinset": 1,
      "setsize": 1,
      "expanded": false,
      "cells": [
        {
          "text": "F0002-3-1",
          "attributes": {
            "id": "F0002-3-1"
          }
        },
        {
          "text": "5.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "15/01/2024"
        },
        {
          "html": "<a href='#' id='F0002-3-1-action' class='c-link' aria-labelledby='F0002-3-1-action F0002-3-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 4,
      "posinset": 1,
      "setsize": 2,
      "cells": [
        {
          "text": "F0002-3-1-1",
          "attributes": {
            "id": "F0002-3-1-1"
          }
        },
        {
          "text": "95€",
          "classes": "lg:text-right"
        },
        {
          "text": "15/01/2024"
        },
        {
          "html": "<a href='#' id='F0002-3-1-1-action' class='c-link' aria-labelledby='F0002-3-1-1-action F0002-3-1-1'>Ver</a>"
        }
      ]
    },
    {
      "level": 4,
      "posinset": 2,
      "setsize": 2,
      "cells": [
        {
          "text": "F0002-3-1-2",
          "attributes": {
            "id": "F0002-3-1-2"
          }
        },
        {
          "text": "5.000,00€",
          "classes": "lg:text-right"
        },
        {
          "text": "15/01/2024"
        },
        {
          "html": "<a href='#' id='F0002-3-1-2-action' class='c-link' aria-labelledby='F0002-3-1-2-action F0002-3-1-2'>Ver</a>"
        }
      ]
    }
  ],
  "wrapper": {
    "classes": "relative overflow-x-auto pb-base focus:outline-hidden focus:shadow-outline-black",
    "attributes": {
      "tabindex": "0",
      "role": "region",
      "aria-label": "Treegrid con scroll del ejemplo Treegrid con wrapper"
    }
  },
  "classes": "w-full",
  "attributes": {
    "id": "treegrid-9",
    "aria-describedby": "treegrid-9-desc"
  }
}) }}
```

##### HTML

```html
<!-- treegrid -->
<div class="relative overflow-x-auto pb-base focus:outline-hidden 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 focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus flex items-start" data-label="Documento"
          id="F0001">
          <span class="c-treegrid__icon absolute text-primary-base transition-transform duration-200 ease-out cursor-pointer select-none after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4 focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus lg:text-right" data-label="Importe">
          100 €</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Fecha">
          01/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" 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 focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus flex items-start" data-label="Documento"
          id="F0001-1">
          <span class="c-treegrid__icon absolute text-primary-base transition-transform duration-200 ease-out cursor-pointer select-none after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4 focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus lg:text-right" data-label="Importe">
          200 €</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Fecha">
          02/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" 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 focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus flex items-start" data-label="Documento"
          id="F0001-1-1">
          <span class="c-treegrid__icon absolute text-primary-base transition-transform duration-200 ease-out cursor-pointer select-none after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4 focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus lg:text-right" data-label="Importe">
          300 €</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Fecha">
          03/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" 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 focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus flex items-start" data-label="Documento"
          id="F0001-1-1-1">
          <span class="c-treegrid__icon absolute text-primary-base transition-transform duration-200 ease-out cursor-pointer select-none after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4 focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus lg:text-right" data-label="Importe">
          400 €</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Fecha">
          04/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" 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 focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus flex items-start" data-label="Documento"
          id="F0001-1-1-1-1">
          <span class="c-treegrid__icon absolute text-primary-base transition-transform duration-200 ease-out cursor-pointer select-none after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4 focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus lg:text-right" data-label="Importe">
          500 €</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Fecha">
          05/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" 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 focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus flex items-start" data-label="Documento"
          id="F0001-1-1-1-1-1">
          <span class="c-treegrid__icon absolute text-primary-base transition-transform duration-200 ease-out cursor-pointer select-none after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4 focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus lg:text-right" data-label="Importe">
          600 €</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Fecha">
          06/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" 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 focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus flex items-start" data-label="Documento"
          id="F0001-1-1-1-1-1-1">
          <span class="c-treegrid__icon absolute text-primary-base transition-transform duration-200 ease-out cursor-pointer select-none after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4 focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus lg:text-right" data-label="Importe">
          700 €</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Fecha">
          07/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" 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 focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus flex items-start" data-label="Documento"
          id="F0001-1-1-1-1-1-1-1">
          <span class="c-treegrid__icon absolute text-primary-base transition-transform duration-200 ease-out cursor-pointer select-none after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4 focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus lg:text-right" data-label="Importe">
          800 €</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Fecha">
          08/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" 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 focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus flex items-start" data-label="Documento"
          id="F0001-1-1-1-1-1-1-1-1">
          <span class="c-treegrid__icon absolute text-primary-base transition-transform duration-200 ease-out cursor-pointer select-none after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4 focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus lg:text-right" data-label="Importe">
          900 €</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Fecha">
          09/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" 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 focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus flex items-start" data-label="Documento"
          id="F0001-1-1-1-1-1-1-1-1-1">
          <span class="c-treegrid__icon absolute text-primary-base transition-transform duration-200 ease-out cursor-pointer select-none after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4 focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus lg:text-right" data-label="Importe">
          1000 €</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Fecha">
          09/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" 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 focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus flex items-start" data-label="Documento"
          id="F0001-1-1-1-1-1-1-1-1-1-1">
          <span class="c-treegrid__icon absolute text-primary-base transition-transform duration-200 ease-out cursor-pointer select-none after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4 focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus lg:text-right" data-label="Importe">
          1100 €</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Fecha">
          09/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" 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 focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus flex items-start" data-label="Documento"
          id="F0001-1-1-1-1-1-1-1-1-1-1-1">
          <span class="c-treegrid__icon absolute text-primary-base transition-transform duration-200 ease-out cursor-pointer select-none after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4 focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus lg:text-right" data-label="Importe">
          1200 €</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Fecha">
          09/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" 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 focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus 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 absolute text-primary-base transition-transform duration-200 ease-out cursor-pointer select-none after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4 focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus lg:text-right" data-label="Importe">
          1300 €</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Fecha">
          09/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" 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 focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus 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 absolute text-primary-base transition-transform duration-200 ease-out cursor-pointer select-none after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4 focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus lg:text-right" data-label="Importe">
          1400 €</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Fecha">
          09/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" 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 focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" aria-level="15" style="--level: 15" aria-posinset="1" aria-setsize="1">
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus lg:text-right" data-label="Importe">
          1500 €</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Fecha">
          09/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" 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 focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus flex items-start" data-label="Documento"
          id="F0002">
          <span class="c-treegrid__icon absolute text-primary-base transition-transform duration-200 ease-out cursor-pointer select-none after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4 focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus lg:text-right" data-label="Importe">
          3.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Fecha">
          05/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" 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 focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" aria-level="2" style="--level: 2" aria-posinset="1" aria-setsize="3">
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Documento"
          id="F0002-1">
          F0002-1</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus lg:text-right" data-label="Importe">
          1.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Fecha">
          05/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" 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 focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus flex items-start" data-label="Documento"
          id="F0002-2">
          <span class="c-treegrid__icon absolute text-primary-base transition-transform duration-200 ease-out cursor-pointer select-none after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4 focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus lg:text-right" data-label="Importe">
          2.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Fecha">
          05/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" 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 focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" aria-level="3" style="--level: 3" aria-posinset="1" aria-setsize="1">
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Documento"
          id="F0002-2-1">
          F0002-2-1</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus lg:text-right" data-label="Importe">
          1.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Fecha">
          05/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" 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 focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus flex items-start" data-label="Documento"
          id="F0002-3">
          <span class="c-treegrid__icon absolute text-primary-base transition-transform duration-200 ease-out cursor-pointer select-none after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4 focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus lg:text-right" data-label="Importe">
          2.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Fecha">
          05/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" 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 focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus flex items-start" data-label="Documento"
          id="F0002-3-1">
          <span class="c-treegrid__icon absolute text-primary-base transition-transform duration-200 ease-out cursor-pointer select-none after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4 focus:text-black" 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 focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus lg:text-right" data-label="Importe">
          5.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Fecha">
          15/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" 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 focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" aria-level="4" style="--level: 4" aria-posinset="1" aria-setsize="2">
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Documento"
          id="F0002-3-1-1">
          F0002-3-1-1</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus lg:text-right" data-label="Importe">
          95€</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Fecha">
          15/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" 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 focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black" aria-level="4" style="--level: 4" aria-posinset="2" aria-setsize="2">
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Documento"
          id="F0002-3-1-2">
          F0002-3-1-2</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus lg:text-right" data-label="Importe">
          5.000,00€</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" data-label="Fecha">
          15/01/2024</td>
        <td role="gridcell" class="text-left px-base py-sm focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus" 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 -->
```