ocs-portal-web/components/module/data-table/index.tsx

"use client";

import {
    ColumnDef,
    flexRender,
    getCoreRowModel,
    getPaginationRowModel,
    useReactTable,
} from "@tanstack/react-table"

import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from "@/components/ui/table"
import { DataTablePagination } from "../data-table-pagination";
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";

interface PaginationState {
    pageIndex: number
    pageSize: number
    pageCount: number
    setPageIndex: (page: number) => void
    setPageSize: (size: number) => void
}

interface AlertDialogState {
    isOpen: boolean
    title?: string
    description?: string
    confirmText?: string
    cancelText?: string
    setOpen: (isOpen: boolean) => void
    onConfirm: () => void
    onCancel: () => void
}

interface DataTableProps<TData, TValue> {
    columns: ColumnDef<TData, TValue>[]
    data: TData[]
    pagination?: PaginationState,
    alertDialog?: AlertDialogState,
}

const DataTable = <TData, TValue>({
    data,
    columns,
    pagination,
    alertDialog
}: DataTableProps<TData, TValue>) => {
    const table = useReactTable({
        data,
        columns,
        pageCount: pagination?.pageCount,
        state: {
            pagination: {
                pageIndex: pagination?.pageIndex ?? 0,
                pageSize: pagination?.pageSize ?? 10,
            },
        },
        onPaginationChange: (updater) => {
            if (!pagination) return;
            const next = typeof updater === 'function'
                ? updater({ pageIndex: pagination.pageIndex, pageSize: pagination.pageSize })
                : updater;
            pagination.setPageIndex(next.pageIndex)
            pagination.setPageSize(next.pageSize)
        },
        manualPagination: true,
        getCoreRowModel: getCoreRowModel(),
        getPaginationRowModel: getPaginationRowModel(),
    })

    return (
        <div className="mx-8 space-y-4">
            <div className="rounded-md mt-4">
                <Table className="border-separate border-spacing-0">
                    <TableHeader className="bg-primary rounded-lg">
                        {table.getHeaderGroups().map((headerGroup) => (
                            <TableRow key={headerGroup.id}>
                                {headerGroup.headers.map((header, index) => {
                                    const isFirst = index === 0;
                                    const isLast = index === headerGroup.headers.length - 1;
                                    return (
                                        <TableHead
                                            key={header.id}
                                            className={`text-white ${isFirst ? "rounded-tl-md" : ""} ${isLast ? "rounded-tr-md" : ""}`}
                                        >
                                            {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"}
                                >
                                    {row.getVisibleCells().map((cell) => (
                                        <TableCell key={cell.id} className="border-b border-[#00879E]">
                                            {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>
            <DataTablePagination table={table} />
            <AlertDialog open={alertDialog?.isOpen} onOpenChange={alertDialog?.setOpen}>
                <AlertDialogContent>
                    <AlertDialogHeader>
                        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
                        <AlertDialogDescription>
                            This action cannot be undone. This will permanently remove your data
                            from our servers.
                        </AlertDialogDescription>
                    </AlertDialogHeader>
                    <AlertDialogFooter>
                        <AlertDialogCancel onClick={alertDialog?.onCancel}>Cancel</AlertDialogCancel>
                        <AlertDialogAction onClick={alertDialog?.onConfirm}>Continue</AlertDialogAction>
                    </AlertDialogFooter>
                </AlertDialogContent>
            </AlertDialog>

        </div>
    )

}

export default DataTable