React: 取得した配列を要素を指定せずに全表示したい

Question

Backendから取得するデータを配列に入れて，React内で表示する事を考えております。

例えば以下の様なデータであれば，

[{
    "col1": "a1",
    "col2": "a2",
    "col3": "a3",
    "col4": "a4"
},{
    "col1": "b1",
    "col2": "b2",
    "col3": "b3",
    "col4": "b4"
}]

以下の様な表示イメージです。

col1	col2	col3	col4
a1	a3	a4
b1	b3	b4

こちら，毎回取得するデータ構造が同じであれば，map関数の中で個別の要素を指定して表示すればできそうなのですが，例えばデータによってはcol5やcol6が追加されたりする場合，どの様にすればひとつずつの要素を指定せず，可変的に表を作成できますでしょうか？

Answer 1

こんな感じでしょうか。

const data = [
  {
    "col1": "a1",
    "col2": "a2",
    "col3": "a3",
    "col4": "a4"
  },
  {
    "col1": "b1",
    "col2": "b2",
    "col4": "b4",
    "col5": "b5"
  },
  {
    "col1": "c1",
    "col3": "c3",
    "col4": "c4",
    "col6": "c6"
  },
  {
    "col2": "d2",
    "col3": "d3",
    "col5": "d5",
    "col6": "d6"
  },
  {
    "col3": "e3",
    "col4": "e4",
    "col7": "e7",
    "col8": "e8"
  }
];

function App() {
  const keys = data.reduce(
    (keys, obj) => [...keys, ...Object.keys(obj).filter(key => !keys.includes(key))],
    []);

  return (
    <>
      <style>
        {`
          th, td { border: 1px solid #ddd; padding: 8px; text-align: center; }
          thead tr { background: #f5f5f5; }
          tbody tr:nth-child(odd) { background: #fff; }
          tbody tr:nth-child(even) { background: #fbfbfb; }
        `}
      </style>
      <table>
        <thead>
          <tr>
            {keys.map(key => <th key={key}>{key}</th>)}
          </tr>
        </thead>
        <tbody>
          {data.map((obj, index) => (
            <tr key={index}>
              {keys.map(key => <td key={key}>{obj[key]}</td>)}
            </tr>
          ))}
        </tbody>
      </table>
    </>
  );
}

表示例

col1	col2	col3	col4	col5	col6	col7	col8
a1	a2	a3	a4
b1	b2	b4	b5
c1	c3	c4	c6
	d2	d3	d5	d6
	e3	e4		e7	e8

Comments

[caveatld]

ご教示ありがとうございました！完璧に意図通りでした！！
大変助かりました。

[caveatld]

重ねての質問で恐縮なのですが，
const data = [
{'Subject': ['100', '101', '102']},
{'Height': [189, 200, 174]},
{'Country': ["Japan", "US", "India"]}
]
上記の様な，入れ子になった配列を表示したいのですが，ご教示頂いたコードをどの様に変更すれば対応可能でしょうか？

現状，ひとつのセルに，100101102, JapanUSIndiaの様に結合されて表示されていまいます。。

[hoshi-takanori]

それをどのように表示したいのでしょうか？ また、配列のサイズは可変ですか？

[caveatld]

ご連絡ありがとうございます！

配列のサイズは可変です。表示したい形としては，
Subject | Height | Country
---------------------------
100 | 189 | Japan
101 | 200 | US
102 | 174 | India
という感じに表示できればと思っております。。

[hoshi-takanori]

うーん、それは元の質問とはだいぶ違う条件ですね。かつ、仕様がいまいち曖昧…。

[caveatld]

そうですよね！teratail初心者のため，失礼いたしました。
別途質問を立てたいと思います，ありがとうございました！！