TypeScriptにて表のセル結合を綺麗に表示したい。

Question

TypeScript(フレームワークはReact)でテーブルを表示したいです。
そして一部カラムのデータを結合したいです。

前提:recordsは8レコードあるとする。

rowSpanを使用するのだと思っていますが、表全体がずれてしまいます。
例えば、カラム２でrowSpan={2}としても、↓画像のようになってしまいます。

イメージとしては、↓画像のようにずれることなく2行分結合したいです。

ところがrecordsが8あるのできっちりデータ2も8回表示され全体がずれてしまうのです。
これを回避する方法はありますでしょうか？
もっといえば、最終的には↓画像のように結合する行を色々設定したいです。

    <TableBody>
      <>
        {records.map((t) => {
          return (
            <TableRow key={t.Id}>
              {/* カラム１ */}
              <TableCell>{t.name}</TableCell>
              {/* カラム２ */}
              <TableCell rowSpan={2}>
                <Box>{t.text}</Box>
              </TableCell>
              {/* カラム３ */}
              <TableCell>
                <Box>{t.age}</Box>
              </TableCell>
            </TableRow>
          );
        })}
      </>
    </TableBody>

Comments

[blueky]

追記:イメージ画像のデータ部は
×カラム2 〇データ2です。

[hoshi-takanori]

カラム2を2行分結合したいなら、2行おきに出力する必要があるでしょうね。

[blueky]

なるほど、まとめて出力するよりインプットのrecordsの8を分割する感じってことですかね？
その場合どのように記述するのが吉でしょうか…？

Answer 1

こんな感じでしょうか。

type Record = {
  Id: number;
  name: string;
  rows: number;
  text: string;
  age: number;
};

const records: Record[] = [
  { Id: 1, name: 'a-1', rows: 5, text: 'aaa', age: 12 },
  { Id: 2, name: 'a-2', rows: 0, text: '', age: 23 },
  { Id: 3, name: 'a-3', rows: 0, text: '', age: 34 },
  { Id: 4, name: 'a-4', rows: 0, text: '', age: 45 },
  { Id: 5, name: 'a-5', rows: 0, text: '', age: 56 },
  { Id: 6, name: 'b-1', rows: 1, text: 'bbb', age: 67 },
  { Id: 7, name: 'c-1', rows: 2, text: 'ccc', age: 78 },
  { Id: 8, name: 'c-2', rows: 0, text: '', age: 89 },
];

function App() {
  return (
    <Table>
      <TableBody>
        {records.map((t) => {
          return (
            <TableRow key={t.Id}>
              {/* カラム１ */}
              <TableCell>{t.name}</TableCell>
              {/* カラム２ */}
              {
                t.rows > 0 && (
                  <TableCell rowSpan={t.rows}>
                    <Box>{t.text}</Box>
                  </TableCell>
                )
              }
              {/* カラム３ */}
              <TableCell>
                <Box>{t.age}</Box>
              </TableCell>
            </TableRow>
          );
        })}
      </TableBody>
    </Table>
  );
}