如何在React中创建自定义的Table？

import React from 'react';

class CustomTable extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: props.data || []
    };
  }

  render() {
    const { data } = this.state;

    return (
      <table>
        <thead>
          <tr>
            {Object.keys(data[0]).map((key, index) => (
              <th key={index}>{key}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {data.map((row, rowIndex) => (
            <tr key={rowIndex}>
              {Object.values(row).map((value, colIndex) => (
                <td key={colIndex}>{value}</td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    );
  }
}

export default CustomTable;

import React from 'react';
import CustomTable from './CustomTable';

const App = () => {
  const tableData = [
    { name: 'Alice', age: 24 },
    { name: 'Bob', age: 27 },
    { name: 'Charlie', age: 22 }
  ];

  return (
    <div>
      <h1>Custom Table Example</h1>
      <CustomTable data={tableData} />
    </div>
  );
};

export default App;

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
}

th {
  background-color: #f2f2f2;
}