prowler/components/findings/table/DataTableFindings.tsx

"use client";

import { Button } from "@nextui-org/react";
import {
  ColumnDef,
  flexRender,
  getCoreRowModel,
  getPaginationRowModel,
  Row,
  useReactTable,
} from "@tanstack/react-table";
import clsx from "clsx";

import { FindingsCard } from "@/components/findings";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui";
import { FindingProps } from "@/types";

interface DataTableFindingsProps<TData extends FindingProps, TValue> {
  columns: ColumnDef<TData, TValue>[];
  data: TData[];
}

export function DataTableFindings<TData extends FindingProps, TValue>({
  columns,
  data,
}: DataTableFindingsProps<TData, TValue>) {
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
  });

  const selectedRow = table.getSelectedRowModel().rows[0]?.original;

  const onClick = (row: Row<TData>) => {
    table.resetRowSelection(true);
    row.toggleSelected();
    return;
  };

  return (
    <>
      <div className="flex flex-row w-full">
        <div
          className={clsx("transition-all duration-300", {
            "w-2/3": selectedRow,
            "w-full": !selectedRow,
          })}
        >
          <div className="rounded-md border">
            <Table>
              <TableHeader>
                {table.getHeaderGroups().map((headerGroup) => (
                  <TableRow key={headerGroup.id}>
                    {headerGroup.headers.map((header) => {
                      return (
                        <TableHead key={header.id}>
                          {header.isPlaceholder
                            ? null
                            : flexRender(
                                header.column.columnDef.header,
                                header.getContext(),
                              )}
                        </TableHead>
                      );
                    })}
                  </TableRow>
                ))}
              </TableHeader>
              <TableBody>
                {table.getRowModel().rows?.length ? (
                  table.getRowModel().rows.map((row) => (
                    <TableRow
                      key={row.id}
                      data-state={row.getIsSelected() && "selected"}
                      onClick={() => onClick(row)}
                      className={"hover:cursor-pointer"}
                    >
                      {row.getVisibleCells().map((cell) => (
                        <TableCell key={cell.id}>
                          {flexRender(
                            cell.column.columnDef.cell,
                            cell.getContext(),
                          )}
                        </TableCell>
                      ))}
                    </TableRow>
                  ))
                ) : (
                  <TableRow>
                    <TableCell
                      colSpan={columns.length}
                      className="h-24 text-center"
                    >
                      No results.
                    </TableCell>
                  </TableRow>
                )}
              </TableBody>
            </Table>
          </div>
          <div className="flex items-center justify-end space-x-2 py-4">
            <Button
              variant="solid"
              size="sm"
              onClick={() => table.previousPage()}
              disabled={!table.getCanPreviousPage()}
            >
              Previous
            </Button>
            <Button
              variant="solid"
              size="sm"
              onClick={() => table.nextPage()}
              disabled={!table.getCanNextPage()}
            >
              Next
            </Button>
          </div>
        </div>
        <FindingsCard selectedRow={selectedRow} />
      </div>
    </>
  );
}