React: How to implement virtualized tables in React?

1import { FixedSizeList } from "react-window";
2
3const Row = ({ index, style, data }) => (
4  <div style={style} className="table-row">
5    <div className="cell">{data[index].name}</div>
6    <div className="cell">{data[index].email}</div>
7    <div className="cell">{data[index].role}</div>
8  </div>
9);
10
11function VirtualTable({ data }) {
12  return (
13    <div className="table-container">
14      <div className="table-header">
15        <div className="cell">Name</div>
16        <div className="cell">Email</div>
17        <div className="cell">Role</div>
18      </div>
19      <FixedSizeList
20        height={500}
21        width="100%"
22        itemCount={data.length}
23        itemSize={50}
24        itemData={data}
25      >
26        {Row}
27      </FixedSizeList>
28    </div>
29  );
30}

1function SortableVirtualTable({ data }) {
2  const [sortConfig, setSortConfig] = useState({ key: "name", direction: "asc" });
3
4  const sortedData = useMemo(() => {
5    return [...data].sort((a, b) => {
6      if (a[sortConfig.key] < b[sortConfig.key])
7        return sortConfig.direction === "asc" ? -1 : 1;
8      if (a[sortConfig.key] > b[sortConfig.key])
9        return sortConfig.direction === "asc" ? 1 : -1;
10      return 0;
11    });
12  }, [data, sortConfig]);
13
14  const handleSort = (key) => {
15    setSortConfig(prev => ({
16      key,
17      direction: prev.key === key && prev.direction === "asc" ? "desc" : "asc",
18    }));
19  };
20
21  // ... render with sortedData
22}