categorytable

frontend/edu-connect/src/app/(admin)/admin/category/_partials/CategoryTable.tsx

@@ -0,0 +1,113 @@
+import DataTable from "@/components/(dashboard)/common/DataTable/DataTable"
+import { Button } from "@/components/(dashboard)/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { routes } from "@/lib/routes"
+import { ColumnDef } from "@tanstack/react-table"
+import { ArrowUpDown } from "lucide-react"
+
+const CategoryTable: React.FC<{
+    mutate: () => void
+    Data: Array<any>
+    isLoading: boolean
+}> = ({
+          mutate,
+          Data,
+          isLoading
+      }) => {
+
+    const columns: ColumnDef<any>[] = [
+        {
+            accessorKey: "sn",
+            header: "SN",
+            cell: ({ row }) => (
+                <div className="capitalize">{row.index + 1}</div>
+            ),
+        },
+        {
+            id: 'name',
+            accessorFn: (row: any) => row.original?.name,
+            header: ({ column }) => (
+                <Button
+                    variant="ghost"
+                    className="!px-0"
+                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+                >
+                    Name
+                    <ArrowUpDown className="ml-2 h-4 w-4" />
+                </Button>
+            ),
+            cell: ({ row }) => (
+                <div className="capitalize">
+                    <p>{row.original?.name}</p>
+                </div>
+            ),
+        },
+        {
+            id: 'description',
+            accessorFn: (row: any) => row.original?.description,
+            header: ({ column }) => (
+                <Button
+                    variant="ghost"
+                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+                    className="!px-0"
+                >
+                    Description
+                    <ArrowUpDown className="ml-2 h-4 w-4" />
+                </Button>
+            ),
+            cell: ({ row }) => (
+                <div className="max-w-[300px] truncate">{row.original?.description ?? '-'}</div>
+            ),
+        },
+        {
+            id: 'creationDate',
+            accessorFn: (row: any) => row.original?.creationDate,
+            header: ({ column }) => (
+                <Button
+                    variant="ghost"
+                    className="!px-0"
+                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+                >
+                    Created Date
+                    <ArrowUpDown className="ml-2 h-4 w-4" />
+                </Button>
+            ),
+            cell: ({ row }) => (
+                <div className="whitespace-nowrap">
+                    {row.original?.creationDate ? new Date(row.original.creationDate).toLocaleDateString() : '-'}
+                </div>
+            ),
+        },
+        {
+            id: 'isActive',
+            accessorFn: (row: any) => row.original?.isActive,
+            header: ({ column }) => (
+                <Button
+                    variant="ghost"
+                    className="!px-0"
+                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+                >
+                    Status
+                    <ArrowUpDown className="ml-2 h-4 w-4" />
+                </Button>
+            ),
+            cell: ({ row }) => (
+                <div>{row.original?.isActive ? <Badge variant={'success'}>Active</Badge> : <Badge variant={'destructive'}>Deactive</Badge>}</div>
+            ),
+        },
+    ]
+
+    return(
+        <>
+            <DataTable
+                data={Data}
+                columns={columns}
+                mutate={mutate}
+                searchKey="name"
+                isLoading={isLoading}
+            />
+        </>
+    )
+}
+
+export default CategoryTable