了解将JSON对象循环到HTML表(排序和条件)

import React from 'react';

const data = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 3, name: 'Charlie', age: 35 }
];

function Table() {
  return (
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Age</th>
        </tr>
      </thead>
      <tbody>
        {data.map(item => (
          <tr key={item.id}>
            <td>{item.id}</td>
            <td>{item.name}</td>
            <td>{item.age}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

export default Table;

function sortData(key) {
  const sortedData = [...data].sort((a, b) => a[key] - b[key]);
  return sortedData;
}

function Table() {
  const [sortedKey, setSortedKey] = React.useState(null);

  const handleSort = (key) => {
    setSortedKey(key);
  };

  const sortedData = sortData(sortedKey || 'id');

  return (
    <table>
      <thead>
        <tr>
          <th onClick={() => handleSort('id')}>ID</th>
          <th onClick={() => handleSort('name')}>Name</th>
          <th onClick={() => handleSort('age')}>Age</th>
        </4>
      </thead>
      <tbody>
        {sortedData.map(item => (
          <tr key={item.id}>
            <td>{item.id}</td>
            <td>{item.name}</td>
            <td>{item.age}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

function filterData(keyword) {
  return data.filter(item => item.name.includes(keyword));
}

function Table() {
  const [keyword, setKeyword] = React.useState('');

  const handleFilter = (e) => {
    setKeyword(e.target.value);
  };

  const filteredData = filterData(keyword);

  return (
    <div>
      <input type="text" value={keyword} onChange={handleFilter} placeholder="Filter by name" />
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Age</th>
          </tr>
        </thead>
        <tbody>
          {filteredData.map(item => (
            <tr key={item.id}>
              <td>{item.id}</td>
              <td>{item.name}</td>
              <td>{item.age}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}