init project portal web

components/module/data-table/index.tsx

@@ -0,0 +1,150 @@
+"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