在行跨度中将对象的React显示数组显示到表

import React from "react";

const DataTable = ({ data }) => {
  // 渲染表头
  const renderTableHeader = () => {
    if (data.length > 0) {
      return (
        <tr>
          {Object.keys(data[0]).map((key) => (
            <th key={key}>{key}</th>
          ))}
        </tr>
      );
    }
  };

  // 渲染表格内容
  const renderTableData = () => {
    return data.map((row, index) => {
      return (
        <tr key={index}>
          {Object.values(row).map((value, index) => (
            <td key={index}>{value}</td>
          ))}
        </tr>
      );
    });
  };

  return (
    <table>
      <thead>{renderTableHeader()}</thead>
      <tbody>{renderTableData()}</tbody>
    </table>
  );
};

export default DataTable;