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

import {
  flexRender,
  getCoreRowModel,
  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 { useEffect } 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;
}

export function VersionTable<TData>({
  data,
  columns,
  isLoading,
  onTableInit,
  onRowClick,
  scrollable = false,
  maxHeight = "calc(100vh - 320px)",
}: VersionTableProps<TData>) {
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    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="rounded-md border">
        <ScrollArea className="w-full" style={{ height: maxHeight }}>
          {tableContent}
        </ScrollArea>
      </div>
    );
  }

  return <div className="rounded-md border">{tableContent}</div>;
}