src/app/components/Table.tsx

import React, { useState } from 'react';
import Pagination from './Pagination';

type TableProps<T> = {
  data: T[];
  columns: {
    key: keyof T;
    label: string;
    render?: (value: T[keyof T]) => React.ReactNode;
  }[];
  orderBy?: keyof T;
  onOrderByChange?: (key: keyof T) => void;
  pageSize?: number;
};

export default function Table<T>({ data, columns, orderBy, onOrderByChange, pageSize = 100 }: TableProps<T>) {
  const [currentPage, setCurrentPage] = useState(1);

  const totalPages = Math.ceil(data.length / pageSize);

  const paginatedData = data.slice(
    (currentPage - 1) * pageSize,
    currentPage * pageSize
  );

  const handlePageChange = (page: number) => {
    setCurrentPage(page);
  };

  return (
    <>
      <table className="table-auto border-collapse w-full">
        <thead>
          <tr>
            {columns.map((column) => (
              <th
                key={column.key as string}
                className={`px-4 py-2 bg-gray-100 dark:bg-gray-800 text-left ${
                  onOrderByChange ? 'cursor-pointer' : ''
                }`}
                onClick={() => onOrderByChange && onOrderByChange(column.key)}
              >
                {column.label} {orderBy === column.key && '▼'}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {paginatedData.map((item, index) => (
            <tr key={index} className="border-t border-gray-200 dark:border-gray-700">
              {columns.map((column) => (
                <td key={column.key as string} className="px-4 py-2">
                  {column.render ? column.render(item[column.key]) : String(item[column.key])}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
      <Pagination
        currentPage={currentPage}
        totalPages={totalPages}
        onPageChange={handlePageChange}
      />
    </>
  );
}