diff options
Diffstat (limited to 'lib/rfqs-ship/vendor-table/vendor-list/vendor-list-table-column.tsx')
| -rw-r--r-- | lib/rfqs-ship/vendor-table/vendor-list/vendor-list-table-column.tsx | 154 |
1 files changed, 154 insertions, 0 deletions
diff --git a/lib/rfqs-ship/vendor-table/vendor-list/vendor-list-table-column.tsx b/lib/rfqs-ship/vendor-table/vendor-list/vendor-list-table-column.tsx new file mode 100644 index 00000000..bfcbe75b --- /dev/null +++ b/lib/rfqs-ship/vendor-table/vendor-list/vendor-list-table-column.tsx @@ -0,0 +1,154 @@ +"use client" +// Because columns rely on React state/hooks for row actions + +import * as React from "react" +import { ColumnDef, Row } from "@tanstack/react-table" +import { VendorData } from "./vendor-list-table" +import { ClientDataTableColumnHeaderSimple } from "@/components/client-data-table/data-table-column-simple-header" +import { formatDate } from "@/lib/utils" +import { Checkbox } from "@/components/ui/checkbox" + +export interface DataTableRowAction<TData> { + row: Row<TData> + type: "open" | "update" | "delete" +} + +interface GetColumnsProps { + setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<VendorData> | null>> + setSelectedVendorIds: React.Dispatch<React.SetStateAction<number[]>> // Changed to array +} + +/** getColumns: return array of ColumnDef for 'vendors' data */ +export function getColumns({ + setRowAction, + setSelectedVendorIds, // Changed parameter name +}: GetColumnsProps): ColumnDef<VendorData>[] { + return [ + // MULTIPLE SELECT COLUMN + { + id: "select", + enableSorting: false, + enableHiding: false, + size: 40, + // Add checkbox in header for select all functionality + header: ({ table }) => ( + <Checkbox + checked={ + table.getFilteredSelectedRowModel().rows.length > 0 && + table.getFilteredSelectedRowModel().rows.length === table.getFilteredRowModel().rows.length + } + onCheckedChange={(checked) => { + table.toggleAllRowsSelected(!!checked) + + // Update selectedVendorIds based on all rows selection + if (checked) { + const allIds = table.getFilteredRowModel().rows.map(row => row.original.id) + setSelectedVendorIds(allIds) + } else { + setSelectedVendorIds([]) + } + }} + aria-label="Select all" + /> + ), + cell: ({ row }) => { + const isSelected = row.getIsSelected() + + return ( + <Checkbox + checked={isSelected} + onCheckedChange={(checked) => { + row.toggleSelected(!!checked) + + // Update the selectedVendorIds state by adding or removing this ID + setSelectedVendorIds(prevIds => { + if (checked) { + // Add this ID if it doesn't exist + return prevIds.includes(row.original.id) + ? prevIds + : [...prevIds, row.original.id] + } else { + // Remove this ID + return prevIds.filter(id => id !== row.original.id) + } + }) + }} + aria-label="Select row" + /> + ) + }, + }, + + // Vendor Name + { + accessorKey: "vendorName", + header: ({ column }) => ( + <ClientDataTableColumnHeaderSimple column={column} title="Vendor Name" /> + ), + cell: ({ row }) => row.getValue("vendorName"), + }, + + // Vendor Code + { + accessorKey: "vendorCode", + header: ({ column }) => ( + <ClientDataTableColumnHeaderSimple column={column} title="Vendor Code" /> + ), + cell: ({ row }) => row.getValue("vendorCode"), + }, + + // Status + { + accessorKey: "status", + header: ({ column }) => ( + <ClientDataTableColumnHeaderSimple column={column} title="Status" /> + ), + cell: ({ row }) => row.getValue("status"), + }, + + // Country + { + accessorKey: "country", + header: ({ column }) => ( + <ClientDataTableColumnHeaderSimple column={column} title="Country" /> + ), + cell: ({ row }) => row.getValue("country"), + }, + + // Email + { + accessorKey: "email", + header: ({ column }) => ( + <ClientDataTableColumnHeaderSimple column={column} title="Email" /> + ), + cell: ({ row }) => row.getValue("email"), + }, + + // Phone + { + accessorKey: "phone", + header: ({ column }) => ( + <ClientDataTableColumnHeaderSimple column={column} title="Phone" /> + ), + cell: ({ row }) => row.getValue("phone"), + }, + + // Created At + { + accessorKey: "createdAt", + header: ({ column }) => ( + <ClientDataTableColumnHeaderSimple column={column} title="Created At" /> + ), + cell: ({ cell }) => formatDate(cell.getValue() as Date), + }, + + // Updated At + { + accessorKey: "updatedAt", + header: ({ column }) => ( + <ClientDataTableColumnHeaderSimple column={column} title="Updated At" /> + ), + cell: ({ cell }) => formatDate(cell.getValue() as Date), + }, + ] +}
\ No newline at end of file |