如何将react.js中具有适当列和行跨度的表中的深度嵌套对象映射到动态数据？

import React from 'react';

class NestedTable extends React.Component {
  state = {
    data: {
      column1: {
        row1: 'Value 1',
        row2: 'Value 2',
      },
      column2: {
        row1: 'Value 3',
        row2: 'Value 4',
      },
    },
  };

  renderTableHeader() {
    return Object.keys(this.state.data).map((column) => (
      <th key={column}>{column}</th>
    ));
  }

  renderTableData() {
    return Object.values(this.state.data).map((columnData) => (
      <tr key={Object.keys(columnData)[0]}>
        {Object.entries(columnData).map(([row, value]) => (
          <td key={row}>{typeof value === 'object' ? this.renderNestedTable(value) : value}</td>
        ))}
      </tr>
    ));
  }

  renderNestedTable(data) {
    return (
      <table>
        <tbody>
          {Object.entries(data).map(([row, value]) => (
            <tr key={row}>
              <td>{row}</td>
              <td>{typeof value === 'object' ? this.renderNestedTable(value) : value}</td>
            </tr>
          ))}
        </tbody>
      </table>
    );
  }

  render() {
    return (
      <table>
        <thead>
          <tr>{this.renderTableHeader()}</tr>
        </thead>
        <tbody>{this.renderTableData()}</tbody>
      </table>
    );
  }
}

export default NestedTable;