diff options
Diffstat (limited to 'lib/tech-vendors/items-table/item-table.tsx')
| -rw-r--r-- | lib/tech-vendors/items-table/item-table.tsx | 78 |
1 files changed, 78 insertions, 0 deletions
diff --git a/lib/tech-vendors/items-table/item-table.tsx b/lib/tech-vendors/items-table/item-table.tsx new file mode 100644 index 00000000..52e5a57f --- /dev/null +++ b/lib/tech-vendors/items-table/item-table.tsx @@ -0,0 +1,78 @@ +"use client" + +import * as React from "react" +import type { + DataTableAdvancedFilterField, + DataTableFilterField, + DataTableRowAction, +} from "@/types/table" + +import { useDataTable } from "@/hooks/use-data-table" +import { DataTable } from "@/components/data-table/data-table" +import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar" +import { getColumns } from "./item-table-columns" +import { TechVendorItemsView } from "@/db/schema/techVendors" +import { TechVendorItemsTableToolbarActions } from "./item-table-toolbar-actions" + +interface TechVendorItemsTableProps { + data: (TechVendorItemsView & { techVendorType?: string })[] + vendorId: number + vendorType: string +} + +export function TechVendorItemsTable({ data, vendorId, vendorType }: TechVendorItemsTableProps) { + const [rowAction, setRowAction] = React.useState<DataTableRowAction<TechVendorItemsView> | null>(null) + + const columns = React.useMemo( + () => getColumns({ + setRowAction, + vendorType + }), + [vendorType] + ) + + const filterFields: DataTableFilterField<TechVendorItemsView>[] = [] + + const advancedFilterFields: DataTableAdvancedFilterField<TechVendorItemsView>[] = [ + { id: "itemName", label: "Item Name", type: "text" }, + { id: "itemCode", label: "Item Code", type: "text" }, + { id: "createdAt", label: "Created at", type: "date" }, + { id: "updatedAt", label: "Updated at", type: "date" }, + ] + + const { table } = useDataTable({ + data, + columns, + pageCount: 1, + filterFields, + enablePinning: true, + enableAdvancedFilter: true, + initialState: { + sorting: [{ id: "createdAt", desc: true }], + columnPinning: { right: ["actions"] }, + }, + getRowId: (originalRow) => String(originalRow.itemCode), + shallow: false, + clearOnDefault: true, + }) + + return ( + <> + <DataTable + table={table} + > + <DataTableAdvancedToolbar + table={table} + filterFields={advancedFilterFields} + shallow={false} + > + <TechVendorItemsTableToolbarActions + table={table} + vendorId={vendorId} + vendorType={vendorType} + /> + </DataTableAdvancedToolbar> + </DataTable> + </> + ) +}
\ No newline at end of file |
