React-Hooks:如何创建具有动态内容的可重用数据表组件

import React, { useState } from 'react';

const DataTable = ({ data }) => {
  const [sortOrder, setSortOrder] = useState('asc');

  const handleSort = () => {
    // 在这里处理排序逻辑
    // 可以使用sortOrder状态来决定升序还是降序
  };

  return (
    <table>
      <thead>
        <tr>
          <th>列1</th>
          <th>列2</th>
          <th>列3</th>
        </tr>
      </thead>
      <tbody>
        {data.map((item, index) => (
          <tr key={index}>
            <td>{item.column1}</td>
            <td>{item.column2}</td>
            <td>{item.column3}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export default DataTable;