diff options
Diffstat (limited to 'lib/items-tech/table/hull/offshore-hull-table-columns.tsx')
| -rw-r--r-- | lib/items-tech/table/hull/offshore-hull-table-columns.tsx | 282 |
1 files changed, 282 insertions, 0 deletions
diff --git a/lib/items-tech/table/hull/offshore-hull-table-columns.tsx b/lib/items-tech/table/hull/offshore-hull-table-columns.tsx new file mode 100644 index 00000000..f5db40d8 --- /dev/null +++ b/lib/items-tech/table/hull/offshore-hull-table-columns.tsx @@ -0,0 +1,282 @@ +"use client"
+
+import * as React from "react"
+import { type DataTableRowAction } from "@/types/table"
+import { type ColumnDef } from "@tanstack/react-table"
+import { Ellipsis } from "lucide-react"
+
+import { formatDate } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Checkbox } from "@/components/ui/checkbox"
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuSeparator,
+ DropdownMenuShortcut,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header"
+
+// 테이블 표시에 필요한 데이터 타입 정의
+interface OffshoreHullTableItem {
+ id: number;
+ itemId: number;
+ workType: "HA" | "HE" | "HH" | "HM" | "NC";
+ itemList1: string | null;
+ itemList2: string | null;
+ itemList3: string | null;
+ itemList4: string | null;
+ itemCode: string;
+ itemName: string;
+ description: string | null;
+ createdAt: Date;
+ updatedAt: Date;
+}
+
+interface GetColumnsProps {
+ setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<OffshoreHullTableItem> | null>>
+}
+
+export function getOffshoreHullColumns({ setRowAction }: GetColumnsProps): ColumnDef<OffshoreHullTableItem>[] {
+ // ----------------------------------------------------------------
+ // 1) select 컬럼 (체크박스)
+ // ----------------------------------------------------------------
+ const selectColumn: ColumnDef<OffshoreHullTableItem> = {
+ id: "select",
+ header: ({ table }) => (
+ <Checkbox
+ checked={
+ table.getIsAllPageRowsSelected() ||
+ (table.getIsSomePageRowsSelected() && "indeterminate")
+ }
+ onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+ aria-label="Select all"
+ className="translate-y-0.5"
+ />
+ ),
+ cell: ({ row }) => (
+ <Checkbox
+ checked={row.getIsSelected()}
+ onCheckedChange={(value) => row.toggleSelected(!!value)}
+ aria-label="Select row"
+ className="translate-y-0.5"
+ />
+ ),
+ size: 40,
+ enableSorting: false,
+ enableHiding: false,
+ }
+
+ // ----------------------------------------------------------------
+ // 2) actions 컬럼 (Dropdown 메뉴)
+ // ----------------------------------------------------------------
+ const actionsColumn: ColumnDef<OffshoreHullTableItem> = {
+ id: "actions",
+ cell: ({ row }) => (
+ <DropdownMenu>
+ <DropdownMenuTrigger asChild>
+ <Button
+ aria-label="Open menu"
+ variant="ghost"
+ className="flex size-8 p-0 data-[state=open]:bg-muted"
+ >
+ <Ellipsis className="size-4" aria-hidden="true" />
+ </Button>
+ </DropdownMenuTrigger>
+ <DropdownMenuContent align="end" className="w-40">
+ <DropdownMenuItem
+ onSelect={() => setRowAction({ row, type: "update" })}
+ >
+ 수정
+ </DropdownMenuItem>
+ <DropdownMenuSeparator />
+ <DropdownMenuItem
+ onSelect={() => setRowAction({ row, type: "delete" })}
+ className="text-destructive"
+ >
+ 삭제
+ <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
+ </DropdownMenuItem>
+ </DropdownMenuContent>
+ </DropdownMenu>
+ ),
+ size: 40,
+ enableSorting: false,
+ enableHiding: false,
+ }
+
+ // ----------------------------------------------------------------
+ // 3) 데이터 컬럼들을 그룹별로 구성
+ // ----------------------------------------------------------------
+
+ // 3-1) 기본 정보 그룹 컬럼
+ const basicInfoColumns: ColumnDef<OffshoreHullTableItem>[] = [
+ {
+ accessorKey: "itemCode",
+ header: ({ column }) => (
+ <DataTableColumnHeaderSimple column={column} title="Material Group" />
+ ),
+ cell: ({ row }) => <div>{row.original.itemCode}</div>,
+ enableSorting: true,
+ enableHiding: true,
+ meta: {
+ excelHeader: "Material Group",
+ group: "기본 정보",
+ },
+ },
+ {
+ accessorKey: "itemName",
+ header: ({ column }) => (
+ <DataTableColumnHeaderSimple column={column} title="Description" />
+ ),
+ cell: ({ row }) => <div>{row.original.itemName}</div>,
+ enableSorting: true,
+ enableHiding: true,
+ meta: {
+ excelHeader: "Description",
+ group: "기본 정보",
+ },
+ },
+ {
+ accessorKey: "workType",
+ header: ({ column }) => (
+ <DataTableColumnHeaderSimple column={column} title="기능(공종)" />
+ ),
+ cell: ({ row }) => <div>{row.original.workType}</div>,
+ enableSorting: true,
+ enableHiding: true,
+ meta: {
+ excelHeader: "기능(공종)",
+ group: "기본 정보",
+ },
+ },
+ {
+ accessorKey: "description",
+ header: ({ column }) => (
+ <DataTableColumnHeaderSimple column={column} title="Size/Dimension" />
+ ),
+ cell: ({ row }) => <div>{row.original.description || "-"}</div>,
+ enableSorting: true,
+ enableHiding: true,
+ meta: {
+ excelHeader: "Size/Dimension",
+ group: "기본 정보",
+ },
+ },
+ ]
+
+ // 3-2) 아이템 리스트 그룹 컬럼
+ const itemListColumns: ColumnDef<OffshoreHullTableItem>[] = [
+ {
+ accessorKey: "itemList1",
+ header: ({ column }) => (
+ <DataTableColumnHeaderSimple column={column} title="아이템 리스트 1" />
+ ),
+ cell: ({ row }) => <div>{row.original.itemList1 || "-"}</div>,
+ enableSorting: true,
+ enableHiding: true,
+ meta: {
+ excelHeader: "아이템 리스트 1",
+ group: "아이템 리스트",
+ },
+ },
+ {
+ accessorKey: "itemList2",
+ header: ({ column }) => (
+ <DataTableColumnHeaderSimple column={column} title="아이템 리스트 2" />
+ ),
+ cell: ({ row }) => <div>{row.original.itemList2 || "-"}</div>,
+ enableSorting: true,
+ enableHiding: true,
+ meta: {
+ excelHeader: "아이템 리스트 2",
+ group: "아이템 리스트",
+ },
+ },
+ {
+ accessorKey: "itemList3",
+ header: ({ column }) => (
+ <DataTableColumnHeaderSimple column={column} title="아이템 리스트 3" />
+ ),
+ cell: ({ row }) => <div>{row.original.itemList3 || "-"}</div>,
+ enableSorting: true,
+ enableHiding: true,
+ meta: {
+ excelHeader: "아이템 리스트 3",
+ group: "아이템 리스트",
+ },
+ },
+ {
+ accessorKey: "itemList4",
+ header: ({ column }) => (
+ <DataTableColumnHeaderSimple column={column} title="아이템 리스트 4" />
+ ),
+ cell: ({ row }) => <div>{row.original.itemList4 || "-"}</div>,
+ enableSorting: true,
+ enableHiding: true,
+ meta: {
+ excelHeader: "아이템 리스트 4",
+ group: "아이템 리스트",
+ },
+ },
+ ]
+
+ // 3-3) 메타데이터 그룹 컬럼
+ const metadataColumns: ColumnDef<OffshoreHullTableItem>[] = [
+ {
+ accessorKey: "createdAt",
+ header: ({ column }) => (
+ <DataTableColumnHeaderSimple column={column} title="생성일" />
+ ),
+ cell: ({ row }) => formatDate(row.original.createdAt),
+ enableSorting: true,
+ enableHiding: true,
+ meta: {
+ excelHeader: "생성일",
+ group: "Metadata",
+ },
+ },
+ {
+ accessorKey: "updatedAt",
+ header: ({ column }) => (
+ <DataTableColumnHeaderSimple column={column} title="수정일" />
+ ),
+ cell: ({ row }) => formatDate(row.original.updatedAt),
+ enableSorting: true,
+ enableHiding: true,
+ meta: {
+ excelHeader: "수정일",
+ group: "Metadata",
+ },
+ }
+ ]
+
+ // 3-4) 그룹별 컬럼 구성
+ const groupedColumns: ColumnDef<OffshoreHullTableItem>[] = [
+ {
+ id: "기본 정보",
+ header: "기본 정보",
+ columns: basicInfoColumns,
+ },
+ {
+ id: "아이템 리스트",
+ header: "아이템 리스트",
+ columns: itemListColumns,
+ },
+ {
+ id: "Metadata",
+ header: "Metadata",
+ columns: metadataColumns,
+ }
+ ]
+
+ // ----------------------------------------------------------------
+ // 4) 최종 컬럼 배열: select, groupedColumns, actions
+ // ----------------------------------------------------------------
+ return [
+ selectColumn,
+ ...groupedColumns,
+ actionsColumn,
+ ]
+}
\ No newline at end of file |