AntデザインのTableで使用するデータが可変長の配列の場合に、Grouping table headの要素をその配列の要素数の最大値に合わせて作成したい

掲題通り。

下記のAntデザイン Grouping table headを使用したテーブルで、オブジェクト内のパラメータが可変の配列の場合に、その長さに合わせた子ヘッダーを作成しつつデータを表示する方法に四苦八苦したため(サンプルコードは固定長だった)、備忘録として残す。

下記のような形で作成できた。

import { Table } from "antd";
import "./styles.css";

export default function App() {
  const dataList = [
    {
      firstName: "太郎",
      lastName: "田中",
      arrayData: [1, 2, 3, 4],
    },
    {
      firstName: "次郎",
      lastName: "鈴木",
      arrayData: [1, 2, 3, 4, 5, 6],
    },
  ];
  const maxArrayDataLength = dataList.reduce((maxLength, data) => {
    return Math.max(maxLength, data.arrayData.length);
  }, 0);

  const createChildren = (maxLength) =>
    Array.from({ length: maxLength }, (_, index) => ({
      title: `data${index + 1}`,
      key: `data${index}`,
      dataIndex: ["arrayData", `${index}`],
    }));

  const columns = [
    {
      title: "firstName",
      dataIndex: "firstName",
    },
    {
      title: "lastName",
      dataIndex: "lastName",
    },
    {
      title: "arrayData",
      children: createChildren(maxArrayDataLength),
    },
  ];
  return (
    <div className="App">
      <Table dataSource={dataList} columns={columns} pagination={false} />
    </div>
  );
}

CodeSandBox

renderのrecordを使用することばかりを考えていたが、
dataIndexでdataIndex: ["パラメータ名", "インデックス値"],というような指定方法で取得できる様子(Antデザイン公式のdocかissueか何かに記載があった)