sortTableData.js

import { useState } from "react";

const usersData = [
  { id: 1, name: "Lalit", age: 30 },
  { id: 2, name: "Amit", age: 25 },
  { id: 3, name: "Priya", age: 28 },
];

export default function SortTable() {
  const [users, setUsers] = useState(usersData);
  const [order, setOrder] = useState("asc");

  const sortByAge = () => {
    const sorted = [...users].sort((a, b) => {
      return order === "asc" ? a.age - b.age : b.age - a.age;
    });

    setUsers(sorted);
    setOrder((prev) => (prev === "asc" ? "desc" : "asc"));
  };

  return (
    <table border="1">
      <thead>
        <tr>
          <th>Name</th>
          <th onClick={sortByAge}>Age</th>
        </tr>
      </thead>

      <tbody>
        {users.map((user) => (
          <tr key={user.id}>
            <td>{user.name}</td>
            <td>{user.age}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}