如何将多层级树形表格表头转换为单列缩进展示结构

抱歉标题表述不够精准，我未能找到最贴切的问题描述方式。

• 现有一组层级化表格表头数据，需要将其从多列树形结构转换为单列缩进结构进行渲染。
• 树形结构表头展示效果：
  
• 目标实现的单列缩进结构展示效果：
  

树形展示中，黄色单元格为rollup单元格，本身不承载实际展示信息，仅作为对齐占位符使用。

现有数据结构 #

1. 表头基础结构 #

{
    "headers": [
        [
            {
                "label": "A",
                "span": "9"
            }
        ],
        [
            {
                "label": "B",
                "span": "9"
            }
        ],
        [
            {
                "label": "C",
                "span": "1"
            },
            {
                "label": "D",
                "span": "4"
            },
            {
                "label": "E",
                "span": "1"
            },
            {
                "label": "F",
                "span": "3"
            }
        ],
        [
            {
                "rollup": true,
                "span": "1"
            },
            {
                "label": "G",
                "span": "2"
            },
            {
                "label": "H",
                "span": "2"
            },
            {
                "rollup": true,
                "span": "1"
            },
            {
                "label": "I",
                "span": "1"
            },
            {
                "label": "J",
                "span": "1"
            },
            {
                "label": "K",
                "span": "1"
            }
        ],
        [
            {
                "rollup": true,
                "span": "1"
            },
            {
                "label": "L",
                "span": "1"
            },
            {
                "label": "M",
                "span": "1"
            },
            {
                "label": "N",
                "span": "1"
            },
            {
                "label": "O",
                "span": "1"
            },
            {
                "rollup": true,
                "span": "1"
            },
            {
                "rollup": true,
                "span": "1"
            },
            {
                "rollup": true,
                "span": "1"
            },
            {
                "rollup": true,
                "span": "1"
            }
        ]
    ]
}

2. 业务值数据结构 #

表格实际业务值支持多列嵌套数组，空单元格会携带"empty":true标记：

const rows = {
    "data": [
        [
            {
                "value": 100,
                "empty": false // 用于标记单元格是否为空
            }
        ],
        [
            {
                "value": 200
            }
        ],
        [
            {
                "value": 300
            }
        ],
        [
            {
                "value": 400
            }
        ],
        [
            {
                "value": 500
            }
        ],
        [
            {
                "value": 600
            }
        ],
        [
            {
                "value": 700
            }
        ],
        [
            {
                "value": 800
            }
        ],
        [
            {
                "value": 900
            }
        ]
    ]
}

3. 预处理后的表头矩阵结构 #

渲染树形表格时，会先将初始数据结构转换为9×5矩阵，数组对应空缺位置用null填充，处理后的yHeaders结构如下：

const yHeaders = {
    "headers": [
        [
            {
                "label": "A",
                "span": "9"
            },
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null
        ],
        [
            {
                "label": "B",
                "span": "9"
            },
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null
        ],
        [
            {
                "label": "C",
                "span": "1"
            },
            {
                "label": "D",
                "span": "4"
            },
            null,
            null,
            null,
            {
                "label": "E",
                "span": "1"
            },
            {
                "label": "F",
                "span": "3"
            },
            null,
            null
        ],
        [
            {
                "rollup": true,
                "span": "1"
            },
            {
                "label": "G",
                "span": "2"
            },
            null,
            {
                "label": "H",
                "span": "2"
            },
            null,
            {
                "rollup": true,
                "span": "1"
            },
            {
                "label": "I",
                "span": "1"
            },
            {
                "label": "J",
                "span": "1"
            },
            {
                "label": "K",
                "span": "1"
            }
        ],
        [
            {
                "rollup": true,
                "span": "1"
            },
            {
                "label": "L",
                "span": "1"
            },
            {
                "label": "M",
                "span": "1"
            },
            {
                "label": "N",
                "span": "1"
            },
            {
                "label": "O",
                "span": "1"
            },
            {
                "rollup": true,
                "span": "1"
            },
            {
                "rollup": true,
                "span": "1"
            },
            {
                "rollup": true,
                "span": "1"
            },
            {
                "rollup": true,
                "span": "1"
            }
        ]
    ]
}

现有树形表格渲染逻辑 #

当前渲染第一种树形表格使用的React代码逻辑如下：

const renderBodyRow = (row: any, key: number, rows: any) => {
  return (
    <tr key={key}>
      {yHeaders.headers.map((yHeaderColumn: any[], rowColumnHeaderKey: number) => {
        // 多数遍历位置的yHeaderColumn[key]为null，该位置由上方单元格的rowSpan跨行列覆盖
        return (
          yHeaderColumn.length > key &&
          yHeaderColumn[key] && (
            <th
              key={rowColumnHeaderKey}
              rowSpan={+get(yHeaderColumn[key], "span", 1)}
            >
              {get(yHeaderColumn[key], "label")}
            </th>
          )
        );
      })}
      {row.map((cell: any, cellIndex: number) => {
        return <td key={cellIndex}>{get(cell, "value", "")}</td>;
      })}
    </tr>
  );
};


return (
        <table id={tableId}>
          <thead>...</thead>
          <tbody >
            {rows.data.map(renderBodyRow)}
          </tbody>
        </table>
)

待实现需求 #

需要基于上述数据实现单列缩进表头样式的渲染，目前暂未找到可行方案。

内容的提问来源于stack exchange，提问作者Tyler