Estoy usando un componente de tabla de un marco de interfaz de usuario que me genera los siguientes encabezados

en base a esta configuración

(resultado final)

 [ [ { "title": "Section 1", "rowspan": "4", "colspan": "1" }, { "title": "Section 2", "rowspan": "1", "colspan": "2" }, { "title": "Section 3", "rowspan": "1", "colspan": "3" }, { "title": "Section 4", "rowspan": "1", "colspan": "1" } ], [ { "title": "Section 2.1", "rowspan": "3", "colspan": "1" }, { "title": "Section 2.2", "rowspan": "3", "colspan": "1" }, { "title": "Section 3.1", "rowspan": "3", "colspan": "1" }, { "title": "Section 3.2", "rowspan": "1", "colspan": "2" }, { "title": "Section 4.1", "rowspan": "1", "colspan": "1" } ], [ { "title": "Section 3.2.1", "rowspan": "2", "colspan": "1" }, { "title": "Section 3.2.2", "rowspan": "2", "colspan": "1" }, { "title": "Section 4.1.1", "rowspan": "1", "colspan": "1" } ], [ { "title": "Section 4.1.1.1", "rowspan": "1", "colspan": "1" } ] ]

Quiero simplificar la configuración. Debería haber solo una estructura similar a un árbol y quiero calcular las filas y los colspans dinámicamente

(punto de partida)

 [ { "title": "Section 1" }, { "title": "Section 2", "children": [ { "title": "Section 2.1" }, { "title": "Section 2.2" } ] }, { "title": "Section 3", "children": [ { "title": "Section 3.1" }, { "title": "Section 3.2", "children": [ { "title": "Section 3.2.1" }, { "title": "Section 3.2.2" } ] } ] }, { "title": "Section 4", "children": [ { "title": "Section 4.1", "children": [ { "title": "Section 4.1.1", "children": [ { "title": "Section 4.1.1.1" } ] } ] } ] } ]

Pensé en cómo asignar la matriz de puntos de partida a la matriz de resultados final. Estas son mis suposiciones:

• Recorrer la matriz recursivamente
• Calcule el colspan (ancho) así
  • si no hay hijos => 1
  • si hay hijos => suma de colspans de todos los hijos de la siguiente profundidad
• Calcular el ancho de fila (altura)
  • si no hay niños => profundidad máxima de todo el árbol - profundidad actual
  • si hay hijos => 1

Mi enfoque actual

 const configuredHeaders = [{ title: "Section 1" }, { title: "Section 2", children: [{ title: "Section 2.1" }, { title: "Section 2.2" } ] }, { title: "Section 3", children: [{ title: "Section 3.1" }, { title: "Section 3.2", children: [{ title: "Section 3.2.1" }, { title: "Section 3.2.2" } ] } ] }, { title: "Section 4", children: [{ title: "Section 4.1", children: [{ title: "Section 4.1.1", children: [{ title: "Section 4.1.1.1" }] }] }] }]; const finalHeaders = []; traverseColumnHeaders(configuredHeaders, -1); // first depth should start with 0 function traverseColumnHeaders(headers, parentDepth) { headers.forEach(header => { header.currentDepth = parentDepth + 1; if (header.children) { traverseColumnHeaders(header.children, header.currentDepth); header.colspan = header.children.reduce((currentSum, child) => currentSum + child.colspan, 0); // sum of child colspans header.rowspan = 1; } else { header.colspan = 1; // header.rowspan = ... maximum depth - header.currentDepth ... } addHeaderToFinalHeaders(header); }); } function addHeaderToFinalHeaders({ currentDepth, title, rowspan, colspan }) { const depthExistsInFinalHeaders = currentDepth in finalHeaders; if (!depthExistsInFinalHeaders) { finalHeaders[currentDepth] = []; } finalHeaders[currentDepth].push({ title, rowspan, colspan }); } console.log(finalHeaders);

Este se ve bastante bien para mí porque solo necesito recorrer la colección una vez. Pero como puede ver, algunos campos de rowspan de filas aún no se calculan porque no conozco la profundidad máxima en este momento.

Para resolver esto, podría inicializar una variable global, buscar la profundidad máxima así

(Tomé la solución de aquí Obtener la profundidad de una estructura de datos de árbol de una manera más simple por ahora)

 function getMaximumDepth(headers) { return getDepth(headers) -1; }; function getDepth(headers) { return 1 + Math.max(0, ...headers.map(({ children = [] }) => getDepth(children))); } const maximumDepth = getMaximumDepth(configuredHeaders);

y calcular

 header.rowspan = maximumDepth - header.currentDepth

pero ahora tengo que atravesar la estructura dos veces. ¿Hay alguna forma de optimizar mi solución?