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

掲題通り。

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

![スクリーンショット 2024-08-10 2.44.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385175/ad53143a-83b8-6c56-90df-60fe643f1a37.png)


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

![スクリーンショット 2024-08-10 2.49.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/385175/0bf14ea2-83d3-068e-66f8-d19ed2f4e531.png)

```javascript
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](https://codesandbox.io/p/devbox/confident-currying-c97mjq?file=%2Fsrc%2FApp.jsx&welcome=true&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clzmy5y4g00063b6it2dgn0ma%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clzmy5y4g00023b6i91pcjh7x%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clzmy5y4g00043b6i7f49s34t%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clzmy5y4g00053b6igwf83my2%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clzmy5y4g00023b6i91pcjh7x%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clzmy5y4f00013b6icca7adsn%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Findex.html%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522id%2522%253A%2522clzmyrnhe00023b6ixgyzbbmr%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A23%252C%2522startColumn%2522%253A30%252C%2522endLineNumber%2522%253A23%252C%2522endColumn%2522%253A30%257D%255D%252C%2522filepath%2522%253A%2522%252Fsrc%252FApp.jsx%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clzmy5y4g00023b6i91pcjh7x%2522%252C%2522activeTabId%2522%253A%2522clzmyrnhe00023b6ixgyzbbmr%2522%257D%252C%2522clzmy5y4g00053b6igwf83my2%2522%253A%257B%2522id%2522%253A%2522clzmy5y4g00053b6igwf83my2%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522TASK_PORT%2522%252C%2522port%2522%253A5173%252C%2522taskId%2522%253A%2522dev%2522%252C%2522id%2522%253A%2522clzmy80f1001a3b6ixpdmwjju%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522activeTabId%2522%253A%2522clzmy80f1001a3b6ixpdmwjju%2522%257D%252C%2522clzmy5y4g00043b6i7f49s34t%2522%253A%257B%2522id%2522%253A%2522clzmy5y4g00043b6i7f49s34t%2522%252C%2522activeTabId%2522%253A%2522clzmy7sjz000x3b6i6huzz8b3%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clzmy5y4g00033b6ik6snsurd%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TERMINAL%2522%252C%2522shellId%2522%253A%2522clzmzhnxh008ddlg57ohe2ahu%2522%257D%252C%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522id%2522%253A%2522clzmy7sjz000x3b6i6huzz8b3%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D)

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