TTMT.ManageWebGUI/src/components/tables/version-table.tsx

import {
  flexRender,
  getCoreRowModel,
  getPaginationRowModel,
  useReactTable,
  type ColumnDef,
} from "@tanstack/react-table";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { ScrollArea } from "@/components/ui/scroll-area";
import { CustomPagination } from "@/components/pagination/pagination";
import { useEffect, useState } from "react";

interface VersionTableProps<TData> {
  data: TData[];
  columns: ColumnDef<TData, any>[];
  isLoading: boolean;
  onTableInit?: (table: any) => void;
  onRowClick?: (row: TData) => void;
  scrollable?: boolean;
  maxHeight?: string;
  // Pagination options
  enablePagination?: boolean;
  defaultPageSize?: number;
  pageSizeOptions?: number[];
}

export function VersionTable<TData>({
  data,
  columns,
  isLoading,
  onTableInit,
  onRowClick,
  scrollable = false,
  maxHeight = "calc(100vh - 320px)",
  enablePagination = false,
  defaultPageSize = 10,
  pageSizeOptions = [5, 10, 15, 20],
}: VersionTableProps<TData>) {
  const [pagination, setPagination] = useState({
    pageIndex: 0,
    pageSize: defaultPageSize,
  });

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    ...(enablePagination && {
      getPaginationRowModel: getPaginationRowModel(),
      state: { pagination },
      onPaginationChange: setPagination,
    }),
    getRowId: (row: any) => row.id?.toString(),
    enableRowSelection: true,
  });

  useEffect(() => {
    onTableInit?.(table);
  }, [table, onTableInit]);

  const tableContent = (
    <Table>
      <TableHeader>
        {table.getHeaderGroups().map((headerGroup) => (
          <TableRow key={headerGroup.id}>
            {headerGroup.headers.map((header) => (
              <TableHead key={header.id}>
                {header.isPlaceholder
                  ? null
                  : flexRender(
                      header.column.columnDef.header,
                      header.getContext()
                    )}
              </TableHead>
            ))}
          </TableRow>
        ))}
      </TableHeader>

      <TableBody>
        {isLoading ? (
          <TableRow>
            <TableCell colSpan={columns.length}>Đang tải dữ liệu...</TableCell>
          </TableRow>
        ) : table.getRowModel().rows.length === 0 ? (
          <TableRow>
            <TableCell colSpan={columns.length}>Không có dữ liệu.</TableCell>
          </TableRow>
        ) : (
          table.getRowModel().rows.map((row) => (
            <TableRow
              key={row.id}
              data-state={row.getIsSelected() && "selected"}
              onClick={() => onRowClick?.(row.original)}
              className={onRowClick ? "cursor-pointer hover:bg-muted/50" : ""}
            >
              {row.getVisibleCells().map((cell) => (
                <TableCell key={cell.id}>
                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
                </TableCell>
              ))}
            </TableRow>
          ))
        )}
      </TableBody>
    </Table>
  );

  if (scrollable) {
    return (
      <div className="space-y-4">
        <div className="rounded-md border">
          <ScrollArea className="w-full" style={{ height: maxHeight }}>
            {tableContent}
          </ScrollArea>
        </div>
        {enablePagination && data.length > 0 && (
          <CustomPagination
            currentPage={table.getState().pagination.pageIndex + 1}
            totalPages={table.getPageCount()}
            totalItems={data.length}
            itemsPerPage={table.getState().pagination.pageSize}
            onPageChange={(page) => table.setPageIndex(page - 1)}
            onPageSizeChange={(size) => table.setPageSize(size)}
            pageSizeOptions={pageSizeOptions}
          />
        )}
      </div>
    );
  }

  return (
    <div className="space-y-4">
      <div className="rounded-md border">{tableContent}</div>
      {enablePagination && data.length > 0 && (
        <CustomPagination
          currentPage={table.getState().pagination.pageIndex + 1}
          totalPages={table.getPageCount()}
          totalItems={data.length}
          itemsPerPage={table.getState().pagination.pageSize}
          onPageChange={(page) => table.setPageIndex(page - 1)}
          onPageSizeChange={(size) => table.setPageSize(size)}
          pageSizeOptions={pageSizeOptions}
        />
      )}
    </div>
  );
}