diff options
Diffstat (limited to 'lib/tech-vendors/items-table')
| -rw-r--r-- | lib/tech-vendors/items-table/add-item-dialog.tsx | 308 | ||||
| -rw-r--r-- | lib/tech-vendors/items-table/feature-flags-provider.tsx | 108 | ||||
| -rw-r--r-- | lib/tech-vendors/items-table/item-table-columns.tsx | 192 | ||||
| -rw-r--r-- | lib/tech-vendors/items-table/item-table-toolbar-actions.tsx | 104 | ||||
| -rw-r--r-- | lib/tech-vendors/items-table/item-table.tsx | 83 |
5 files changed, 0 insertions, 795 deletions
diff --git a/lib/tech-vendors/items-table/add-item-dialog.tsx b/lib/tech-vendors/items-table/add-item-dialog.tsx deleted file mode 100644 index 21875295..00000000 --- a/lib/tech-vendors/items-table/add-item-dialog.tsx +++ /dev/null @@ -1,308 +0,0 @@ -"use client" - -import * as React from "react" -import { useForm } from "react-hook-form" -import { zodResolver } from "@hookform/resolvers/zod" -import { Check, ChevronsUpDown } from "lucide-react" -import { useRouter } from "next/navigation" - -import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog" -import { Button } from "@/components/ui/button" -import { Input } from "@/components/ui/input" -import { - Form, - FormControl, - FormField, - FormItem, - FormLabel, -} from "@/components/ui/form" -import { - Popover, - PopoverContent, - PopoverTrigger, -} from "@/components/ui/popover" -import { - Command, - CommandEmpty, - CommandGroup, - CommandInput, - CommandItem, - CommandList, -} from "@/components/ui/command" -import { cn } from "@/lib/utils" -import { toast } from "sonner" - -import { - createTechVendorItemSchema, - type CreateTechVendorItemSchema, -} from "@/lib/tech-vendors/validations" - -import { createTechVendorItem, getItemsForTechVendor, ItemDropdownOption } from "../service" - -interface AddItemDialogProps { - vendorId: number - vendorType: string // UI에서 전달하지만 내부적으로는 사용하지 않음 -} - -export function AddItemDialog({ vendorId }: AddItemDialogProps) { - const router = useRouter() - const [open, setOpen] = React.useState(false) - const [commandOpen, setCommandOpen] = React.useState(false) - const [items, setItems] = React.useState<ItemDropdownOption[]>([]) - const [filteredItems, setFilteredItems] = React.useState<ItemDropdownOption[]>([]) - const [isLoading, setIsLoading] = React.useState(false) - const [searchTerm, setSearchTerm] = React.useState("") - - const [selectedItem, setSelectedItem] = React.useState<{ - itemName: string; - description: string; - } | null>(null) - - const form = useForm<CreateTechVendorItemSchema>({ - resolver: zodResolver(createTechVendorItemSchema), - defaultValues: { - vendorId, - itemCode: "", - }, - }) - - const fetchItems = React.useCallback(async () => { - if (items.length > 0) return - - console.log(`[AddItemDialog] fetchItems - 벤더 ID: ${vendorId} 시작`) - - setIsLoading(true) - try { - console.log(`[AddItemDialog] getItemsForTechVendor 호출 - vendorId: ${vendorId}`) - const result = await getItemsForTechVendor(vendorId) - console.log(`[AddItemDialog] getItemsForTechVendor 결과:`, result) - - if (result.data) { - console.log(`[AddItemDialog] 사용 가능한 아이템 목록:`, result.data) - setItems(result.data as ItemDropdownOption[]) - setFilteredItems(result.data as ItemDropdownOption[]) - } else if (result.error) { - console.error("[AddItemDialog] 아이템 조회 실패:", result.error) - toast.error(result.error) - } - } catch (err) { - console.error("[AddItemDialog] 아이템 조회 실패:", err) - toast.error("아이템 목록을 불러오는데 실패했습니다.") - } finally { - setIsLoading(false) - console.log(`[AddItemDialog] fetchItems 완료`) - } - }, [items.length, vendorId]) - - React.useEffect(() => { - if (commandOpen) { - console.log(`[AddItemDialog] Popover 열림 - fetchItems 호출`) - fetchItems() - } - }, [commandOpen, fetchItems]) - - React.useEffect(() => { - if (!items.length) return - - if (!searchTerm.trim()) { - setFilteredItems(items) - return - } - - console.log(`[AddItemDialog] 검색어로 필터링: "${searchTerm}"`) - const lowerSearch = searchTerm.toLowerCase() - const filtered = items.filter(item => - item.itemCode.toLowerCase().includes(lowerSearch) || - item.itemList.toLowerCase().includes(lowerSearch) || - (item.subItemList && item.subItemList.toLowerCase().includes(lowerSearch)) - ) - - console.log(`[AddItemDialog] 필터링 결과: ${filtered.length}개 아이템`) - setFilteredItems(filtered) - }, [searchTerm, items]) - - const handleSelectItem = (item: ItemDropdownOption) => { - console.log(`[AddItemDialog] 아이템 선택: ${item.itemCode}`) - form.setValue("itemCode", item.itemCode, { shouldValidate: true }) - setSelectedItem({ - itemName: item.itemList, - description: item.subItemList || "", - }) - console.log(`[AddItemDialog] 선택된 아이템 정보:`, { - itemCode: item.itemCode, - itemName: item.itemList, - description: item.subItemList || "" - }) - setCommandOpen(false) - } - - async function onSubmit(data: CreateTechVendorItemSchema) { - console.log(`[AddItemDialog] 폼 제출 시작 - 데이터:`, data) - try { - if (!data.itemCode) { - console.error(`[AddItemDialog] itemCode가 없습니다.`) - toast.error("아이템을 선택해주세요.") - return - } - - console.log(`[AddItemDialog] createTechVendorItem 호출 - vendorId: ${data.vendorId}, itemCode: ${data.itemCode}`) - const submitData = { - ...data, - itemName: selectedItem?.itemName || "기술영업" - } - console.log(`[AddItemDialog] 최종 제출 데이터:`, submitData) - - const result = await createTechVendorItem(submitData) - console.log(`[AddItemDialog] createTechVendorItem 결과:`, result) - - if (result.error) { - console.error(`[AddItemDialog] 추가 실패:`, result.error) - toast.error(result.error) - return - } - - console.log(`[AddItemDialog] 아이템 추가 성공`) - toast.success("아이템이 추가되었습니다.") - form.reset() - setSelectedItem(null) - setOpen(false) - console.log(`[AddItemDialog] 화면 새로고침 시작`) - router.refresh() - console.log(`[AddItemDialog] 화면 새로고침 완료`) - } catch (err) { - console.error("[AddItemDialog] 아이템 추가 오류:", err) - toast.error("아이템 추가 중 오류가 발생했습니다.") - } - } - - function handleDialogOpenChange(nextOpen: boolean) { - console.log(`[AddItemDialog] 다이얼로그 상태 변경: ${nextOpen ? '열림' : '닫힘'}`) - if (!nextOpen) { - form.reset() - setSelectedItem(null) - } - setOpen(nextOpen) - } - - const selectedItemCode = form.watch("itemCode") - console.log(`[AddItemDialog] 현재 선택된 itemCode:`, selectedItemCode) - const displayItemName = selectedItem?.itemName || "" - - return ( - <Dialog open={open} onOpenChange={handleDialogOpenChange}> - <DialogTrigger asChild> - <Button variant="default" size="sm"> - Add Item - </Button> - </DialogTrigger> - - <DialogContent className="max-h-[90vh] overflow-hidden flex flex-col"> - <DialogHeader> - <DialogTitle>Create New Item</DialogTitle> - <DialogDescription> - 아이템을 선택한 후 <b>Create</b> 버튼을 누르세요. - </DialogDescription> - </DialogHeader> - - <Form {...form}> - <form onSubmit={(e) => { - console.log(`[AddItemDialog] 폼 제출 이벤트 발생`) - form.handleSubmit(onSubmit)(e) - }} className="flex flex-col flex-1 overflow-hidden"> - <div className="space-y-4 py-4 flex-1 overflow-y-auto"> - <div> - <FormLabel className="text-sm font-medium">아이템 선택</FormLabel> - <Popover open={commandOpen} onOpenChange={setCommandOpen}> - <PopoverTrigger asChild> - <Button - variant="outline" - role="combobox" - aria-expanded={commandOpen} - className="w-full justify-between mt-1" - > - {selectedItemCode - ? `${selectedItemCode} - ${displayItemName}` - : "아이템 선택..."} - <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" /> - </Button> - </PopoverTrigger> - <PopoverContent className="w-[400px] p-0"> - <Command> - <CommandInput - placeholder="아이템 코드/이름 검색..." - onValueChange={setSearchTerm} - /> - <CommandList className="max-h-[200px]"> - <CommandEmpty>검색 결과가 없습니다</CommandEmpty> - {isLoading ? ( - <div className="py-6 text-center text-sm">로딩 중...</div> - ) : ( - <CommandGroup> - {filteredItems.map((item) => ( - <CommandItem - key={item.itemCode} - value={`${item.itemCode} ${item.itemList}`} - onSelect={() => handleSelectItem(item)} - > - <Check - className={cn( - "mr-2 h-4 w-4", - selectedItemCode === item.itemCode - ? "opacity-100" - : "opacity-0" - )} - /> - <span className="font-medium">{item.itemCode}</span> - <span className="ml-2 text-gray-500 truncate">- {item.itemList}</span> - </CommandItem> - ))} - </CommandGroup> - )} - </CommandList> - </Command> - </PopoverContent> - </Popover> - </div> - - {selectedItem && ( - <div className="rounded-md border p-3 mt-4 overflow-hidden"> - <h3 className="font-medium text-sm mb-2">선택된 아이템 정보</h3> - - <FormField - control={form.control} - name="itemCode" - render={({ field }) => ( - <FormItem className="hidden"> - <FormControl> - <Input {...field} /> - </FormControl> - </FormItem> - )} - /> - - <div className="mb-2"> - <div className="text-sm font-medium text-gray-500">Item Name</div> - <div className="text-sm">{selectedItem.itemName}</div> - </div> - - {selectedItem.description && ( - <div> - <div className="text-sm font-medium text-gray-500">Description</div> - <div className="text-sm">{selectedItem.description}</div> - </div> - )} - </div> - )} - </div> - - <DialogFooter className="pt-4 border-t"> - <Button type="submit" disabled={!selectedItemCode}> - Create - </Button> - </DialogFooter> - </form> - </Form> - </DialogContent> - </Dialog> - ) -}
\ No newline at end of file diff --git a/lib/tech-vendors/items-table/feature-flags-provider.tsx b/lib/tech-vendors/items-table/feature-flags-provider.tsx deleted file mode 100644 index 81131894..00000000 --- a/lib/tech-vendors/items-table/feature-flags-provider.tsx +++ /dev/null @@ -1,108 +0,0 @@ -"use client" - -import * as React from "react" -import { useQueryState } from "nuqs" - -import { dataTableConfig, type DataTableConfig } from "@/config/data-table" -import { cn } from "@/lib/utils" -import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group" -import { - Tooltip, - TooltipContent, - TooltipTrigger, -} from "@/components/ui/tooltip" - -type FeatureFlagValue = DataTableConfig["featureFlags"][number]["value"] - -interface FeatureFlagsContextProps { - featureFlags: FeatureFlagValue[] - setFeatureFlags: (value: FeatureFlagValue[]) => void -} - -const FeatureFlagsContext = React.createContext<FeatureFlagsContextProps>({ - featureFlags: [], - setFeatureFlags: () => {}, -}) - -export function useFeatureFlags() { - const context = React.useContext(FeatureFlagsContext) - if (!context) { - throw new Error( - "useFeatureFlags must be used within a FeatureFlagsProvider" - ) - } - return context -} - -interface FeatureFlagsProviderProps { - children: React.ReactNode -} - -export function FeatureFlagsProvider({ children }: FeatureFlagsProviderProps) { - const [featureFlags, setFeatureFlags] = useQueryState<FeatureFlagValue[]>( - "flags", - { - defaultValue: [], - parse: (value) => value.split(",") as FeatureFlagValue[], - serialize: (value) => value.join(","), - eq: (a, b) => - a.length === b.length && a.every((value, index) => value === b[index]), - clearOnDefault: true, - shallow: false, - } - ) - - return ( - <FeatureFlagsContext.Provider - value={{ - featureFlags, - setFeatureFlags: (value) => void setFeatureFlags(value), - }} - > - <div className="w-full overflow-x-auto"> - <ToggleGroup - type="multiple" - variant="outline" - size="sm" - value={featureFlags} - onValueChange={(value: FeatureFlagValue[]) => setFeatureFlags(value)} - className="w-fit gap-0" - > - {dataTableConfig.featureFlags.map((flag, index) => ( - <Tooltip key={flag.value}> - <ToggleGroupItem - value={flag.value} - className={cn( - "gap-2 whitespace-nowrap rounded-none px-3 text-xs data-[state=on]:bg-accent/70 data-[state=on]:hover:bg-accent/90", - { - "rounded-l-sm border-r-0": index === 0, - "rounded-r-sm": - index === dataTableConfig.featureFlags.length - 1, - } - )} - asChild - > - <TooltipTrigger> - <flag.icon className="size-3.5 shrink-0" aria-hidden="true" /> - {flag.label} - </TooltipTrigger> - </ToggleGroupItem> - <TooltipContent - align="start" - side="bottom" - sideOffset={6} - className="flex max-w-60 flex-col space-y-1.5 border bg-background py-2 font-semibold text-foreground" - > - <div>{flag.tooltipTitle}</div> - <div className="text-xs text-muted-foreground"> - {flag.tooltipDescription} - </div> - </TooltipContent> - </Tooltip> - ))} - </ToggleGroup> - </div> - {children} - </FeatureFlagsContext.Provider> - ) -} diff --git a/lib/tech-vendors/items-table/item-table-columns.tsx b/lib/tech-vendors/items-table/item-table-columns.tsx deleted file mode 100644 index 72986849..00000000 --- a/lib/tech-vendors/items-table/item-table-columns.tsx +++ /dev/null @@ -1,192 +0,0 @@ -"use client" - -import * as React from "react" -import { type DataTableRowAction } from "@/types/table" -import { type ColumnDef } from "@tanstack/react-table" -import { MoreHorizontal } from "lucide-react" -import { format } from "date-fns" -import { ko } from "date-fns/locale" - -import { Badge } from "@/components/ui/badge" -import { Button } from "@/components/ui/button" -import { Checkbox } from "@/components/ui/checkbox" -import { - DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuLabel, - DropdownMenuTrigger, -} from "@/components/ui/dropdown-menu" - -import { TechVendorItemsView } from "@/db/schema/techVendors" -import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header" -import { - techVendorItemsColumnsConfig, - shipbuildingColumnsConfig, - offshoreTopColumnsConfig, - offshoreHullColumnsConfig -} from "@/config/techVendorItemsColumnsConfig" - -interface ColumnConfig { - id: string - label: string - excelHeader: string - type: string - minWidth: number - defaultWidth: number - group?: string -} - -interface GetColumnsOptions { - setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<TechVendorItemsView> | null>> - vendorType: string -} - -export function getColumns({ setRowAction, vendorType }: GetColumnsOptions): ColumnDef<TechVendorItemsView>[] { - // 벤더 타입에 따라 적절한 컬럼 설정 선택 - const columnsConfig = (() => { - switch (vendorType) { - case "조선": - return shipbuildingColumnsConfig; - case "해양TOP": - return offshoreTopColumnsConfig; - case "해양HULL": - return offshoreHullColumnsConfig; - default: - return techVendorItemsColumnsConfig; - } - })(); - - // ---------------------------------------------------------------- - // 1) select 컬럼 (체크박스) - // ---------------------------------------------------------------- - const selectColumn: ColumnDef<TechVendorItemsView> = { - id: "select", - header: ({ table }) => ( - <Checkbox - checked={ - table.getIsAllPageRowsSelected() || - (table.getIsSomePageRowsSelected() && "indeterminate") - } - onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)} - aria-label="Select all" - className="translate-y-[2px]" - /> - ), - cell: ({ row }) => ( - <Checkbox - checked={row.getIsSelected()} - onCheckedChange={(value) => row.toggleSelected(!!value)} - aria-label="Select row" - className="translate-y-[2px]" - /> - ), - enableSorting: false, - enableHiding: false, - } - - // ---------------------------------------------------------------- - // 2) actions 컬럼 (Dropdown 메뉴) - // ---------------------------------------------------------------- - // const actionsColumn: ColumnDef<TechVendorItemsView> = { - // id: "actions", - // cell: ({ row }) => { - // return ( - // <DropdownMenu> - // <DropdownMenuTrigger asChild> - // <Button variant="ghost" className="h-8 w-8 p-0"> - // <span className="sr-only">Open menu</span> - // <MoreHorizontal className="h-4 w-4" /> - // </Button> - // </DropdownMenuTrigger> - // <DropdownMenuContent align="end"> - // <DropdownMenuLabel>Actions</DropdownMenuLabel> - // <DropdownMenuItem onClick={() => - // setRowAction({ - // type: "update", - // row, - // }) - // }> - // View Details - // </DropdownMenuItem> - // </DropdownMenuContent> - // </DropdownMenu> - // ) - // }, - // } - - // ---------------------------------------------------------------- - // 3) 일반 컬럼들을 "그룹"별로 묶어 중첩 columns 생성 - // ---------------------------------------------------------------- - const groupMap: Record<string, ColumnDef<TechVendorItemsView>[]> = {} - - columnsConfig.forEach((cfg: ColumnConfig) => { - // 만약 group가 없으면 "_noGroup" 처리 - const groupName = cfg.group || "_noGroup" - - if (!groupMap[groupName]) { - groupMap[groupName] = [] - } - - // child column 정의 - const childCol: ColumnDef<TechVendorItemsView> = { - accessorKey: cfg.id, - enableResizing: true, - header: ({ column }) => ( - <DataTableColumnHeaderSimple column={column} title={cfg.label} /> - ), - minSize: cfg.minWidth, - size: cfg.defaultWidth, - meta: { - excelHeader: cfg.excelHeader, - group: cfg.group, - type: cfg.type, - }, - cell: ({ row, cell }) => { - if (cfg.id === "createdAt" || cfg.id === "updatedAt") { - const dateVal = cell.getValue() as Date - return format(dateVal, "PPP", { locale: ko }) - } - - if (cfg.id === "techVendorType") { - const type = cell.getValue() as string - return type ? ( - <Badge variant="outline" className="capitalize"> - {type} - </Badge> - ) : null - } - - return row.getValue(cfg.id) ?? "" - }, - } - - groupMap[groupName].push(childCol) - }) - - // ---------------------------------------------------------------- - // 3-2) groupMap에서 실제 상위 컬럼(그룹)을 만들기 - // ---------------------------------------------------------------- - const nestedColumns: ColumnDef<TechVendorItemsView>[] = [] - - Object.entries(groupMap).forEach(([groupName, colDefs]) => { - if (groupName === "_noGroup") { - nestedColumns.push(...colDefs) - } else { - nestedColumns.push({ - id: groupName, - header: groupName, - columns: colDefs, - }) - } - }) - - // ---------------------------------------------------------------- - // 4) 최종 컬럼 배열: select, nestedColumns, actions - // ---------------------------------------------------------------- - return [ - selectColumn, - ...nestedColumns, - // actionsColumn, - ] -}
\ No newline at end of file diff --git a/lib/tech-vendors/items-table/item-table-toolbar-actions.tsx b/lib/tech-vendors/items-table/item-table-toolbar-actions.tsx deleted file mode 100644 index b327ff56..00000000 --- a/lib/tech-vendors/items-table/item-table-toolbar-actions.tsx +++ /dev/null @@ -1,104 +0,0 @@ -"use client" - -import * as React from "react" -import { type Table } from "@tanstack/react-table" -import { Download, Upload } from "lucide-react" -import { toast } from "sonner" - -import { exportTableToExcel } from "@/lib/export" -import { Button } from "@/components/ui/button" -import { TechVendorItemsView } from "@/db/schema/techVendors" -import { AddItemDialog } from "./add-item-dialog" -import { importTasksExcel } from "@/lib/tasks/service" - -interface TechVendorItemsTableToolbarActionsProps { - table: Table<TechVendorItemsView> - vendorId: number - vendorType: string -} - -export function TechVendorItemsTableToolbarActions({ table, vendorId, vendorType }: TechVendorItemsTableToolbarActionsProps) { - // 파일 input을 숨기고, 버튼 클릭 시 참조해 클릭하는 방식 - const fileInputRef = React.useRef<HTMLInputElement>(null) - - // 파일이 선택되었을 때 처리 - async function onFileChange(event: React.ChangeEvent<HTMLInputElement>) { - const file = event.target.files?.[0] - if (!file) return - - // 파일 초기화 (동일 파일 재업로드 시에도 onChange가 트리거되도록) - event.target.value = "" - - // 서버 액션 or API 호출 - try { - // 예: 서버 액션 호출 - const { errorFile, errorMessage } = await importTasksExcel(file) - - if (errorMessage) { - toast.error(errorMessage) - } - if (errorFile) { - // 에러 엑셀을 다운로드 - const url = URL.createObjectURL(errorFile) - const link = document.createElement("a") - link.href = url - link.download = "errors.xlsx" - link.click() - URL.revokeObjectURL(url) - } else { - // 성공 - toast.success("Import success") - // 필요 시 revalidateTag("tasks") 등 - } - - } catch (err) { - console.error("파일 업로드 중 오류가 발생했습니다:", err) - toast.error("파일 업로드 중 오류가 발생했습니다.") - } - } - - function handleImportClick() { - // 숨겨진 <input type="file" /> 요소를 클릭 - fileInputRef.current?.click() - } - - return ( - <div className="flex items-center gap-2"> - - {/* <AddItemDialog vendorId={vendorId} vendorType={vendorType} /> */} - - {/** 3) Import 버튼 (파일 업로드) */} - <Button variant="outline" size="sm" className="gap-2" onClick={handleImportClick}> - <Upload className="size-4" aria-hidden="true" /> - <span className="hidden sm:inline">Import</span> - </Button> - {/* - 실제로는 숨겨진 input과 연결: - - accept=".xlsx,.xls" 등으로 Excel 파일만 업로드 허용 - */} - <input - ref={fileInputRef} - type="file" - accept=".xlsx,.xls" - className="hidden" - onChange={onFileChange} - /> - - {/** 4) Export 버튼 */} - <Button - variant="outline" - size="sm" - onClick={() => - exportTableToExcel(table, { - filename: "tech-vendor-items", - excludeColumns: ["select", "actions"], - }) - } - className="gap-2" - > - <Download className="size-4" aria-hidden="true" /> - <span className="hidden sm:inline">Export</span> - </Button> - </div> - ) -}
\ No newline at end of file diff --git a/lib/tech-vendors/items-table/item-table.tsx b/lib/tech-vendors/items-table/item-table.tsx deleted file mode 100644 index 2eecd829..00000000 --- a/lib/tech-vendors/items-table/item-table.tsx +++ /dev/null @@ -1,83 +0,0 @@ -"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 { getVendorItemsByType } from "@/lib/tech-vendors/service" -import { TechVendorItemsTableToolbarActions } from "./item-table-toolbar-actions" - -interface TechVendorItemsTableProps { - promises: Promise<Awaited<ReturnType<typeof getVendorItemsByType>>> - vendorId: number - vendorType: string -} - -export function TechVendorItemsTable({ promises, vendorId, vendorType }: TechVendorItemsTableProps) { - // Suspense로 받아온 데이터 - const { data } = React.use(promises) - - const [rowAction, setRowAction] = React.useState<DataTableRowAction<any> | null>(null) - - const columns = React.useMemo( - () => getColumns({ - setRowAction, - vendorType - }), - [vendorType] - ) - - const filterFields: DataTableFilterField<any>[] = [] - - const advancedFilterFields: DataTableAdvancedFilterField<any>[] = [ - { id: "itemList", label: "Item List", type: "text" }, - { id: "itemCode", label: "Item Code", type: "text" }, - { id: "workType", label: "Work Type", type: "text" }, - { id: "subItemList", label: "Sub Item List", 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 |
