From 9cabe879404f1ec05dbf4e65d55162b5573aeced Mon Sep 17 00:00:00 2001 From: joonhoekim <26rote@gmail.com> Date: Fri, 28 Nov 2025 20:30:23 +0900 Subject: (김준회) dynamic table - init MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../client-table/client-table-column-header.tsx | 179 +++++++++++++++++++++ 1 file changed, 179 insertions(+) create mode 100644 components/client-table/client-table-column-header.tsx (limited to 'components/client-table/client-table-column-header.tsx') diff --git a/components/client-table/client-table-column-header.tsx b/components/client-table/client-table-column-header.tsx new file mode 100644 index 00000000..12dc57ac --- /dev/null +++ b/components/client-table/client-table-column-header.tsx @@ -0,0 +1,179 @@ +"use client" + +import * as React from "react" +import { Header } from "@tanstack/react-table" +import { useSortable } from "@dnd-kit/sortable" +import { CSS } from "@dnd-kit/utilities" +import { flexRender } from "@tanstack/react-table" +import { + ContextMenu, + ContextMenuContent, + ContextMenuItem, + ContextMenuSeparator, + ContextMenuTrigger, +} from "@/components/ui/context-menu" +import { + ArrowDown, + ArrowUp, + ChevronsUpDown, + EyeOff, + PinOff, + MoveLeft, + MoveRight, +} from "lucide-react" +import { cn } from "@/lib/utils" +import { ClientTableFilter } from "./client-table-filter" + +interface ClientTableColumnHeaderProps + extends React.HTMLAttributes { + header: Header + enableReordering?: boolean +} + +export function ClientTableColumnHeader({ + header, + enableReordering = true, + className, + ...props +}: ClientTableColumnHeaderProps) { + const column = header.column + const { + attributes, + listeners, + setNodeRef, + transform, + transition, + isDragging, + } = useSortable({ + id: header.id, + disabled: !enableReordering, + }) + + // -- Styles -- + const style: React.CSSProperties = { + // Apply transform only if reordering is enabled and active + transform: enableReordering ? CSS.Translate.toString(transform) : undefined, + transition: enableReordering ? transition : undefined, + width: header.getSize(), + zIndex: isDragging ? 100 : 0, + position: "relative", + ...props.style, + } + + // Pinning Styles + const isPinned = column.getIsPinned() + if (isPinned === "left") { + style.left = `${column.getStart("left")}px` + style.position = "sticky" + style.zIndex = 20 + } else if (isPinned === "right") { + style.right = `${column.getAfter("right")}px` + style.position = "sticky" + style.zIndex = 20 + } + + // -- Handlers -- + const handleHide = () => column.toggleVisibility(false) + const handlePinLeft = () => column.pin("left") + const handlePinRight = () => column.pin("right") + const handleUnpin = () => column.pin(false) + + // -- Content -- + const content = ( + <> +
+ {flexRender(column.columnDef.header, header.getContext())} + {column.getCanSort() && ( + + {column.getIsSorted() === "desc" ? ( + + ) : column.getIsSorted() === "asc" ? ( + + ) : ( + + )} + + )} +
+ + {/* Resize Handle */} +
e.stopPropagation()} // Prevent sort trigger + className={cn( + "absolute right-0 top-0 h-full w-2 cursor-col-resize select-none touch-none z-10", + "after:absolute after:right-0 after:top-0 after:h-full after:w-[1px] after:bg-border", // 시각적 구분선 + "hover:bg-primary/20 hover:w-4 hover:-right-2", // 호버 시 클릭 영역 확장 + header.column.getIsResizing() ? "bg-primary/50 w-1" : "bg-transparent" + )} + /> + + {/* Filter */} + {column.getCanFilter() && } + + ) + + if (header.isPlaceholder) { + return ( + + {null} + + ) + } + + return ( + + + + {content} + + + + + + Hide Column + + + + + Pin Left + + + + Pin Right + + {isPinned && ( + + + Unpin + + )} + + + ) +} -- cgit v1.2.3 From 81aa92fecc298d66eb420468316bcf7a7213171c Mon Sep 17 00:00:00 2001 From: joonhoekim <26rote@gmail.com> Date: Sun, 30 Nov 2025 17:12:17 +0900 Subject: (김준회) group 기능 추가, 기타 버그 수정, preset 기능추가, 테스트 페이지 추가 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/[lng]/test/table/page.tsx | 168 ++++++++ .../client-table/client-table-column-header.tsx | 70 +++- components/client-table/client-table-preset.tsx | 185 +++++++++ components/client-table/client-table-save-view.tsx | 185 +++++++++ components/client-table/client-table-toolbar.tsx | 23 +- .../client-table/client-table-view-options.tsx | 9 +- components/client-table/client-virtual-table.tsx | 457 ++++++++++++++++----- components/client-table/preset-actions.ts | 87 ++++ components/client-table/preset-types.ts | 13 + db/schema/index.ts | 2 + db/schema/user-custom-data/userCustomData.ts | 16 + 11 files changed, 1093 insertions(+), 122 deletions(-) create mode 100644 app/[lng]/test/table/page.tsx create mode 100644 components/client-table/client-table-preset.tsx create mode 100644 components/client-table/client-table-save-view.tsx create mode 100644 components/client-table/preset-actions.ts create mode 100644 components/client-table/preset-types.ts create mode 100644 db/schema/user-custom-data/userCustomData.ts (limited to 'components/client-table/client-table-column-header.tsx') diff --git a/app/[lng]/test/table/page.tsx b/app/[lng]/test/table/page.tsx new file mode 100644 index 00000000..88d050fc --- /dev/null +++ b/app/[lng]/test/table/page.tsx @@ -0,0 +1,168 @@ +"use client" + +import * as React from "react" +import { ColumnDef } from "@tanstack/react-table" +import { ClientVirtualTable } from "@/components/client-table/client-virtual-table" +import { Badge } from "@/components/ui/badge" +import { Button } from "@/components/ui/button" + +// 1. Define the data type +type TestData = { + id: string + name: string + email: string + role: "Admin" | "User" | "Guest" + status: "Active" | "Inactive" | "Pending" + lastLogin: string + amount: number +} + +// 2. Generate dummy data +const generateData = (count: number): TestData[] => { + const roles: TestData["role"][] = ["Admin", "User", "Guest"] + const statuses: TestData["status"][] = ["Active", "Inactive", "Pending"] + + return Array.from({ length: count }).map((_, i) => ({ + id: `ID-${i + 1}`, + name: `User ${i + 1}`, + email: `user${i + 1}@example.com`, + role: roles[Math.floor(Math.random() * roles.length)], + status: statuses[Math.floor(Math.random() * statuses.length)], + lastLogin: new Date(Date.now() - Math.floor(Math.random() * 10000000000)).toISOString().split('T')[0], + amount: Math.floor(Math.random() * 10000), + })) +} + +export default function TestTablePage() { + // State for data + const [data, setData] = React.useState([]) + const [isLoading, setIsLoading] = React.useState(true) + + // Load data on mount + React.useEffect(() => { + const timer = setTimeout(() => { + setData(generateData(100000)) // Generate 1000 rows + setIsLoading(false) + }, 500) + return () => clearTimeout(timer) + }, []) + + // 3. Define columns + const columns: ColumnDef[] = [ + { + accessorKey: "id", + header: "ID", + size: 80, + }, + { + accessorKey: "name", + header: "Name", + size: 150, + }, + { + accessorKey: "email", + header: "Email", + size: 200, + }, + { + accessorKey: "role", + header: "Role", + size: 100, + cell: ({ getValue }) => { + const role = getValue() as string + return ( + + {role} + + ) + } + }, + { + accessorKey: "status", + header: "Status", + size: 100, + cell: ({ getValue }) => { + const status = getValue() as string + let color = "bg-gray-500" + if (status === "Active") color = "bg-green-500" + if (status === "Inactive") color = "bg-red-500" + if (status === "Pending") color = "bg-yellow-500" + + return ( +
+
+ {status} +
+ ) + } + }, + { + accessorKey: "amount", + header: "Amount", + size: 200, + cell: ({ getValue }) => { + const amount = getValue() as number + return new Intl.NumberFormat("en-US", { + style: "currency", + currency: "USD", + }).format(amount) + }, + meta: { + align: "right" + } + }, + { + accessorKey: "lastLogin", + header: "Last Login", + size: 120, + }, + { + id: "actions", + header: "Actions", + size: 100, + cell: () => ( + + ), + enablePinning: true, + } + ] + + return ( +
+
+
+

Virtual Table Test

+

+ Testing the ClientVirtualTable component with 1000 generated rows. +

+
+
+ +
+
+ +
+ console.log("Row clicked:", row.original)} + enableUserPreset={true} + tableKey="test-table" + /> +
+
+ ) +} diff --git a/components/client-table/client-table-column-header.tsx b/components/client-table/client-table-column-header.tsx index 12dc57ac..2d8e5bce 100644 --- a/components/client-table/client-table-column-header.tsx +++ b/components/client-table/client-table-column-header.tsx @@ -1,7 +1,7 @@ "use client" import * as React from "react" -import { Header } from "@tanstack/react-table" +import { Header, Column } from "@tanstack/react-table" import { useSortable } from "@dnd-kit/sortable" import { CSS } from "@dnd-kit/utilities" import { flexRender } from "@tanstack/react-table" @@ -20,19 +20,29 @@ import { PinOff, MoveLeft, MoveRight, + Group, + Ungroup, } from "lucide-react" import { cn } from "@/lib/utils" -import { ClientTableFilter } from "./client-table-filter" +import { ClientTableFilter } from "../client-table/client-table-filter" interface ClientTableColumnHeaderProps extends React.HTMLAttributes { header: Header enableReordering?: boolean + renderHeaderVisualFeedback?: (props: { + column: Column + isPinned: boolean | string + isSorted: boolean | string + isFiltered: boolean + isGrouped: boolean + }) => React.ReactNode } export function ClientTableColumnHeader({ header, enableReordering = true, + renderHeaderVisualFeedback, className, ...props }: ClientTableColumnHeaderProps) { @@ -46,7 +56,7 @@ export function ClientTableColumnHeader({ isDragging, } = useSortable({ id: header.id, - disabled: !enableReordering, + disabled: !enableReordering || column.getIsResizing(), }) // -- Styles -- @@ -62,14 +72,18 @@ export function ClientTableColumnHeader({ // Pinning Styles const isPinned = column.getIsPinned() + const isSorted = column.getIsSorted() + const isFiltered = column.getFilterValue() !== undefined + const isGrouped = column.getIsGrouped() + if (isPinned === "left") { style.left = `${column.getStart("left")}px` style.position = "sticky" - style.zIndex = 20 + style.zIndex = 30 // Pinned columns needs to be higher than normal headers } else if (isPinned === "right") { style.right = `${column.getAfter("right")}px` style.position = "sticky" - style.zIndex = 20 + style.zIndex = 30 // Pinned columns needs to be higher than normal headers } // -- Handlers -- @@ -77,6 +91,7 @@ export function ClientTableColumnHeader({ const handlePinLeft = () => column.pin("left") const handlePinRight = () => column.pin("right") const handleUnpin = () => column.pin(false) + const handleToggleGrouping = () => column.toggleGrouping() // -- Content -- const content = ( @@ -100,12 +115,14 @@ export function ClientTableColumnHeader({ )} )} + {isGrouped && }
{/* Resize Handle */}
e.stopPropagation()} onClick={(e) => e.stopPropagation()} // Prevent sort trigger className={cn( "absolute right-0 top-0 h-full w-2 cursor-col-resize select-none touch-none z-10", @@ -117,6 +134,25 @@ export function ClientTableColumnHeader({ {/* Filter */} {column.getCanFilter() && } + + {/* Visual Feedback Indicators */} + {renderHeaderVisualFeedback ? ( + renderHeaderVisualFeedback({ + column, + isPinned, + isSorted, + isFiltered, + isGrouped, + }) + ) : ( + (isPinned || isFiltered || isGrouped) && ( +
+ {isPinned &&
} + {isFiltered &&
} + {isGrouped &&
} +
+ ) + )} ) @@ -141,9 +177,9 @@ export function ClientTableColumnHeader({ colSpan={header.colSpan} style={style} className={cn( - "border-b px-4 py-2 text-left text-sm font-medium bg-muted group", + "border-b px-4 py-2 text-left text-sm font-medium bg-muted group transition-colors", isDragging ? "opacity-50 bg-accent" : "", - isPinned ? "bg-muted shadow-[0_0_10px_rgba(0,0,0,0.1)]" : "", + isPinned ? "shadow-[0_0_10px_rgba(0,0,0,0.1)]" : "", className )} {...attributes} @@ -158,6 +194,26 @@ export function ClientTableColumnHeader({ Hide Column + + {column.getCanGroup() && ( + <> + + + {isGrouped ? ( + <> + + Ungroup + + ) : ( + <> + + Group by {column.id} + + )} + + + )} + diff --git a/components/client-table/client-table-preset.tsx b/components/client-table/client-table-preset.tsx new file mode 100644 index 00000000..64930e7a --- /dev/null +++ b/components/client-table/client-table-preset.tsx @@ -0,0 +1,185 @@ +"use client"; + +import * as React from "react"; +import { Table } from "@tanstack/react-table"; +import { useSession } from "next-auth/react"; +import { Button } from "@/components/ui/button"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu"; +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, +} from "@/components/ui/dialog"; +import { Input } from "@/components/ui/input"; +import { Bookmark, Save, Trash2 } from "lucide-react"; +import { + getPresets, + savePreset, + deletePreset, +} from "./preset-actions"; +import { Preset } from "./preset-types"; +import { toast } from "sonner"; + +interface ClientTablePresetProps { + table: Table; + tableKey: string; +} + +export function ClientTablePreset({ + table, + tableKey, +}: ClientTablePresetProps) { + const { data: session } = useSession(); + const [savedPresets, setSavedPresets] = React.useState([]); + const [isPresetDialogOpen, setIsPresetDialogOpen] = React.useState(false); + const [newPresetName, setNewPresetName] = React.useState(""); + const [isLoading, setIsLoading] = React.useState(false); + + const fetchSettings = React.useCallback(async () => { + const userIdVal = session?.user?.id; + if (!userIdVal) return; + + const userId = Number(userIdVal); + if (isNaN(userId)) return; + + const res = await getPresets(tableKey, userId); + if (res.success && res.data) { + setSavedPresets(res.data); + } + }, [session, tableKey]); + + React.useEffect(() => { + if (session) { + fetchSettings(); + } + }, [fetchSettings, session]); + + const handleSavePreset = async () => { + const userIdVal = session?.user?.id; + if (!newPresetName.trim() || !userIdVal) return; + const userId = Number(userIdVal); + if (isNaN(userId)) return; + + setIsLoading(true); + const state = table.getState(); + const settingToSave = { + sorting: state.sorting, + columnFilters: state.columnFilters, + globalFilter: state.globalFilter, + columnVisibility: state.columnVisibility, + columnPinning: state.columnPinning, + columnOrder: state.columnOrder, + grouping: state.grouping, + pagination: { pageSize: state.pagination.pageSize }, + }; + + const res = await savePreset(userId, tableKey, newPresetName, settingToSave); + setIsLoading(false); + + if (res.success) { + toast.success("Preset saved successfully"); + setIsPresetDialogOpen(false); + setNewPresetName(""); + fetchSettings(); + } else { + toast.error("Failed to save preset"); + } + }; + + const handleLoadPreset = (preset: Preset) => { + const s = preset.setting as Record; + if (!s) return; + + if (s.sorting) table.setSorting(s.sorting); + if (s.columnFilters) table.setColumnFilters(s.columnFilters); + if (s.globalFilter !== undefined) table.setGlobalFilter(s.globalFilter); + if (s.columnVisibility) table.setColumnVisibility(s.columnVisibility); + if (s.columnPinning) table.setColumnPinning(s.columnPinning); + if (s.columnOrder) table.setColumnOrder(s.columnOrder); + if (s.grouping) table.setGrouping(s.grouping); + if (s.pagination?.pageSize) table.setPageSize(s.pagination.pageSize); + + toast.success(`Preset "${preset.name}" loaded`); + }; + + const handleDeletePreset = async (e: React.MouseEvent, id: string) => { + e.stopPropagation(); + if (!confirm("Are you sure you want to delete this preset?")) return; + + const res = await deletePreset(id); + if (res.success) { + toast.success("Preset deleted"); + fetchSettings(); + } else { + toast.error("Failed to delete preset"); + } + }; + + if (!session) return null; + + return ( + <> + + + + + + Saved Presets + + {savedPresets.length === 0 ? ( +
No saved presets
+ ) : ( + savedPresets.map((preset) => ( + handleLoadPreset(preset)} className="flex justify-between cursor-pointer"> + {preset.name} + + + )) + )} + + setIsPresetDialogOpen(true)} className="cursor-pointer"> + + Save Current Preset + + + + + + + + Save Preset + + Save the current table configuration as a preset. + + +
+ setNewPresetName(e.target.value)} + /> +
+ + + + + + + + ); +} diff --git a/components/client-table/client-table-save-view.tsx b/components/client-table/client-table-save-view.tsx new file mode 100644 index 00000000..73935d00 --- /dev/null +++ b/components/client-table/client-table-save-view.tsx @@ -0,0 +1,185 @@ +"use client"; + +import * as React from "react"; +import { Table } from "@tanstack/react-table"; +import { useSession } from "next-auth/react"; +import { Button } from "@/components/ui/button"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu"; +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, +} from "@/components/ui/dialog"; +import { Input } from "@/components/ui/input"; +import { Bookmark, Save, Trash2 } from "lucide-react"; +import { + getUserCustomSettings, + saveUserCustomSetting, + deleteUserCustomSetting, +} from "@/actions/user-custom-data"; +import { toast } from "sonner"; + +interface ClientTableSaveViewProps { + table: Table; + tableKey: string; +} + +export function ClientTableSaveView({ + table, + tableKey, +}: ClientTableSaveViewProps) { + const { data: session } = useSession(); + const [savedViews, setSavedViews] = React.useState<{ id: string; customSettingName: string; customSetting: Record }[]>([]); + const [isSaveDialogOpen, setIsSaveDialogOpen] = React.useState(false); + const [newViewName, setNewViewName] = React.useState(""); + const [isLoading, setIsLoading] = React.useState(false); + + const fetchSettings = React.useCallback(async () => { + const userIdVal = session?.user?.id; + if (!userIdVal) return; + + const userId = Number(userIdVal); + if (isNaN(userId)) return; + + const res = await getUserCustomSettings(tableKey, userId); + if (res.success && res.data) { + // @ts-ignore - data from DB might need casting + setSavedViews(res.data); + } + }, [session, tableKey]); + + React.useEffect(() => { + if (session) { + fetchSettings(); + } + }, [fetchSettings, session]); + + const handleSaveView = async () => { + const userIdVal = session?.user?.id; + if (!newViewName.trim() || !userIdVal) return; + const userId = Number(userIdVal); + if (isNaN(userId)) return; + + setIsLoading(true); + const state = table.getState(); + const settingToSave = { + sorting: state.sorting, + columnFilters: state.columnFilters, + globalFilter: state.globalFilter, + columnVisibility: state.columnVisibility, + columnPinning: state.columnPinning, + columnOrder: state.columnOrder, + grouping: state.grouping, + pagination: { pageSize: state.pagination.pageSize }, + }; + + const res = await saveUserCustomSetting(userId, tableKey, newViewName, settingToSave); + setIsLoading(false); + + if (res.success) { + toast.success("View saved successfully"); + setIsSaveDialogOpen(false); + setNewViewName(""); + fetchSettings(); + } else { + toast.error("Failed to save view"); + } + }; + + const handleLoadView = (setting: { customSetting: Record | unknown; customSettingName: string }) => { + const s = setting.customSetting as Record; + if (!s) return; + + if (s.sorting) table.setSorting(s.sorting); + if (s.columnFilters) table.setColumnFilters(s.columnFilters); + if (s.globalFilter !== undefined) table.setGlobalFilter(s.globalFilter); + if (s.columnVisibility) table.setColumnVisibility(s.columnVisibility); + if (s.columnPinning) table.setColumnPinning(s.columnPinning); + if (s.columnOrder) table.setColumnOrder(s.columnOrder); + if (s.grouping) table.setGrouping(s.grouping); + if (s.pagination?.pageSize) table.setPageSize(s.pagination.pageSize); + + toast.success(`View "${setting.customSettingName}" loaded`); + }; + + const handleDeleteView = async (e: React.MouseEvent, id: string) => { + e.stopPropagation(); + if (!confirm("Are you sure you want to delete this view?")) return; + + const res = await deleteUserCustomSetting(id); + if (res.success) { + toast.success("View deleted"); + fetchSettings(); + } else { + toast.error("Failed to delete view"); + } + }; + + if (!session) return null; + + return ( + <> + + + + + + Saved Views + + {savedViews.length === 0 ? ( +
No saved views
+ ) : ( + savedViews.map((view) => ( + handleLoadView(view)} className="flex justify-between cursor-pointer"> + {view.customSettingName} + + + )) + )} + + setIsSaveDialogOpen(true)} className="cursor-pointer"> + + Save Current View + + + + + + + + Save View + + Save the current table configuration as a preset. + + +
+ setNewViewName(e.target.value)} + /> +
+ + + + + + + + ); +} diff --git a/components/client-table/client-table-toolbar.tsx b/components/client-table/client-table-toolbar.tsx index 43b0a032..089501e1 100644 --- a/components/client-table/client-table-toolbar.tsx +++ b/components/client-table/client-table-toolbar.tsx @@ -12,6 +12,8 @@ interface ClientTableToolbarProps { visibleRows: number onExport?: () => void actions?: React.ReactNode + customToolbar?: React.ReactNode + viewOptions?: React.ReactNode } export function ClientTableToolbar({ @@ -21,11 +23,13 @@ export function ClientTableToolbar({ visibleRows, onExport, actions, + customToolbar, + viewOptions, }: ClientTableToolbarProps) { return ( -
-
-
+
+
+
Showing {visibleRows} of {totalRows}
-
- -
- {actions} + {viewOptions} {onExport && ( - )} + )} +
+ +
+ {customToolbar} + {actions}
) } - diff --git a/components/client-table/client-table-view-options.tsx b/components/client-table/client-table-view-options.tsx index b65049b4..3b659fcd 100644 --- a/components/client-table/client-table-view-options.tsx +++ b/components/client-table/client-table-view-options.tsx @@ -42,14 +42,21 @@ export function ClientTableViewOptions({ typeof column.accessorFn !== "undefined" && column.getCanHide() ) .map((column) => { + const header = column.columnDef.header + let label = column.id + if (typeof header === "string") { + label = header + } + return ( column.toggleVisibility(!!value)} + onSelect={(e) => e.preventDefault()} // default action close the select menu. > - {column.id} + {label} ) })} diff --git a/components/client-table/client-virtual-table.tsx b/components/client-table/client-virtual-table.tsx index 4825741f..507057c7 100644 --- a/components/client-table/client-virtual-table.tsx +++ b/components/client-table/client-virtual-table.tsx @@ -8,6 +8,11 @@ import { getSortedRowModel, getFilteredRowModel, getPaginationRowModel, + getGroupedRowModel, + getExpandedRowModel, + getFacetedRowModel, + getFacetedUniqueValues, + getFacetedMinMaxValues, ColumnDef, SortingState, ColumnFiltersState, @@ -21,6 +26,9 @@ import { Table, RowSelectionState, Row, + Column, + GroupingState, + ExpandedState, } from "@tanstack/react-table" import { useVirtualizer } from "@tanstack/react-virtual" import { @@ -38,23 +46,41 @@ import { horizontalListSortingStrategy, } from "@dnd-kit/sortable" import { cn } from "@/lib/utils" +import { Loader2, ChevronRight, ChevronDown } from "lucide-react" -import { ClientTableToolbar } from "./client-table-toolbar" -import { exportToExcel } from "./export-utils" +import { ClientTableToolbar } from "../client-table/client-table-toolbar" +import { exportToExcel } from "../client-table/export-utils" import { ClientDataTablePagination } from "@/components/client-data-table/data-table-pagination" import { ClientTableColumnHeader } from "./client-table-column-header" -import { ClientTableViewOptions } from "./client-table-view-options" +import { ClientTableViewOptions } from "../client-table/client-table-view-options" +import { ClientTablePreset } from "./client-table-preset" + +// Moved outside for stability (Performance Optimization) +const fuzzyFilter: FilterFn = (row, columnId, value, addMeta) => { + const itemRank = rankItem(row.getValue(columnId), value) + addMeta({ itemRank }) + return itemRank.passed +} export interface ClientVirtualTableProps { data: TData[] columns: ColumnDef[] height?: string | number + estimateRowHeight?: number className?: string actions?: React.ReactNode + customToolbar?: React.ReactNode enableExport?: boolean onExport?: (data: TData[]) => void - - // Pagination Props + isLoading?: boolean + + // --- User Preset Saving --- + enableUserPreset?: boolean + tableKey?: string + + // --- State Control (Controlled or Uncontrolled) --- + + // Pagination enablePagination?: boolean manualPagination?: boolean pageCount?: number @@ -62,88 +88,184 @@ export interface ClientVirtualTableProps { pagination?: PaginationState onPaginationChange?: OnChangeFn - // Style Props - getRowClassName?: (originalRow: TData, index: number) => string + // Sorting + sorting?: SortingState + onSortingChange?: OnChangeFn - // Table Meta - meta?: any - - // Row ID - getRowId?: (originalRow: TData, index: number, parent?: any) => string + // Filtering + columnFilters?: ColumnFiltersState + onColumnFiltersChange?: OnChangeFn + globalFilter?: string + onGlobalFilterChange?: OnChangeFn + + // Visibility + columnVisibility?: VisibilityState + onColumnVisibilityChange?: OnChangeFn + + // Pinning + columnPinning?: ColumnPinningState + onColumnPinningChange?: OnChangeFn - // Selection Props + // Order + columnOrder?: ColumnOrderState + onColumnOrderChange?: OnChangeFn + + // Selection enableRowSelection?: boolean | ((row: Row) => boolean) enableMultiRowSelection?: boolean | ((row: Row) => boolean) rowSelection?: RowSelectionState onRowSelectionChange?: OnChangeFn + + // Grouping + enableGrouping?: boolean + grouping?: GroupingState + onGroupingChange?: OnChangeFn + expanded?: ExpandedState + onExpandedChange?: OnChangeFn + + // --- Event Handlers --- + onRowClick?: (row: Row, event: React.MouseEvent) => void + + // --- Styling --- + getRowClassName?: (originalRow: TData, index: number) => string + + // --- Advanced --- + meta?: Record + getRowId?: (originalRow: TData, index: number, parent?: any) => string + + // Custom Header Visual Feedback + renderHeaderVisualFeedback?: (props: { + column: Column + isPinned: boolean | string + isSorted: boolean | string + isFiltered: boolean + isGrouped: boolean + }) => React.ReactNode } function ClientVirtualTableInner( { data, columns, - height = "500px", // Default height + height = "100%", + estimateRowHeight = 40, className, actions, + customToolbar, enableExport = true, onExport, - - // Pagination defaults + isLoading = false, + + // User Preset Saving + enableUserPreset = false, + tableKey, + + // Pagination enablePagination = false, manualPagination = false, pageCount, rowCount, - pagination: controlledPagination, + pagination: propPagination, onPaginationChange, + // Sorting + sorting: propSorting, + onSortingChange, + + // Filtering + columnFilters: propColumnFilters, + onColumnFiltersChange, + globalFilter: propGlobalFilter, + onGlobalFilterChange, + + // Visibility + columnVisibility: propColumnVisibility, + onColumnVisibilityChange, + + // Pinning + columnPinning: propColumnPinning, + onColumnPinningChange, + + // Order + columnOrder: propColumnOrder, + onColumnOrderChange, + + // Selection + enableRowSelection, + enableMultiRowSelection, + rowSelection: propRowSelection, + onRowSelectionChange, + + // Grouping + enableGrouping = false, + grouping: propGrouping, + onGroupingChange, + expanded: propExpanded, + onExpandedChange, + // Style defaults getRowClassName, - + // Meta & RowID meta, getRowId, - // Selection defaults - enableRowSelection, - enableMultiRowSelection, - rowSelection: controlledRowSelection, - onRowSelectionChange, + // Event Handlers + onRowClick, + + // Custom Header Visual Feedback + renderHeaderVisualFeedback, }: ClientVirtualTableProps, ref: React.Ref> ) { - // State - const [sorting, setSorting] = React.useState([]) - const [columnFilters, setColumnFilters] = React.useState([]) - const [globalFilter, setGlobalFilter] = React.useState("") - const [columnVisibility, setColumnVisibility] = React.useState({}) - const [columnPinning, setColumnPinning] = React.useState({ left: [], right: [] }) - const [columnOrder, setColumnOrder] = React.useState( + // Internal States (used when props are undefined) + const [internalSorting, setInternalSorting] = React.useState([]) + const [internalColumnFilters, setInternalColumnFilters] = React.useState([]) + const [internalGlobalFilter, setInternalGlobalFilter] = React.useState("") + const [internalColumnVisibility, setInternalColumnVisibility] = React.useState({}) + const [internalColumnPinning, setInternalColumnPinning] = React.useState({ left: [], right: [] }) + const [internalColumnOrder, setInternalColumnOrder] = React.useState( () => columns.map((c) => c.id || (c as any).accessorKey) as string[] ) - - // Internal Pagination State const [internalPagination, setInternalPagination] = React.useState({ pageIndex: 0, - pageSize: 50, + pageSize: 10, }) - - // Internal Row Selection State const [internalRowSelection, setInternalRowSelection] = React.useState({}) + const [internalGrouping, setInternalGrouping] = React.useState([]) + const [internalExpanded, setInternalExpanded] = React.useState({}) - // Fuzzy Filter - const fuzzyFilter: FilterFn = (row, columnId, value, addMeta) => { - const itemRank = rankItem(row.getValue(columnId), value) - addMeta({ itemRank }) - return itemRank.passed - } + // Effective States + const sorting = propSorting ?? internalSorting + const setSorting = onSortingChange ?? setInternalSorting + + const columnFilters = propColumnFilters ?? internalColumnFilters + const setColumnFilters = onColumnFiltersChange ?? setInternalColumnFilters + + const globalFilter = propGlobalFilter ?? internalGlobalFilter + const setGlobalFilter = onGlobalFilterChange ?? setInternalGlobalFilter + + const columnVisibility = propColumnVisibility ?? internalColumnVisibility + const setColumnVisibility = onColumnVisibilityChange ?? setInternalColumnVisibility - // Combine controlled and uncontrolled states - const pagination = controlledPagination ?? internalPagination + const columnPinning = propColumnPinning ?? internalColumnPinning + const setColumnPinning = onColumnPinningChange ?? setInternalColumnPinning + + const columnOrder = propColumnOrder ?? internalColumnOrder + const setColumnOrder = onColumnOrderChange ?? setInternalColumnOrder + + const pagination = propPagination ?? internalPagination const setPagination = onPaginationChange ?? setInternalPagination - - const rowSelection = controlledRowSelection ?? internalRowSelection + + const rowSelection = propRowSelection ?? internalRowSelection const setRowSelection = onRowSelectionChange ?? setInternalRowSelection + const grouping = propGrouping ?? internalGrouping + const setGrouping = onGroupingChange ?? setInternalGrouping + + const expanded = propExpanded ?? internalExpanded + const setExpanded = onExpandedChange ?? setInternalExpanded + // Table Instance const table = useReactTable({ data, @@ -157,6 +279,8 @@ function ClientVirtualTableInner( columnPinning, columnOrder, rowSelection, + grouping, + expanded, }, manualPagination, pageCount: manualPagination ? pageCount : undefined, @@ -169,11 +293,28 @@ function ClientVirtualTableInner( onColumnPinningChange: setColumnPinning, onColumnOrderChange: setColumnOrder, onRowSelectionChange: setRowSelection, + onGroupingChange: setGrouping, + onExpandedChange: setExpanded, enableRowSelection, enableMultiRowSelection, + enableGrouping, getCoreRowModel: getCoreRowModel(), - getSortedRowModel: getSortedRowModel(), + + // Systematic Order of Operations: + // 1. Filtering (Rows are filtered first) getFilteredRowModel: getFilteredRowModel(), + getFacetedRowModel: getFacetedRowModel(), + getFacetedUniqueValues: getFacetedUniqueValues(), + getFacetedMinMaxValues: getFacetedMinMaxValues(), + + // 2. Sorting (Filtered rows are then sorted) + getSortedRowModel: getSortedRowModel(), + + // 3. Grouping (Sorted rows are grouped) + getGroupedRowModel: enableGrouping ? getGroupedRowModel() : undefined, + getExpandedRowModel: enableGrouping ? getExpandedRowModel() : undefined, + + // 4. Pagination (Final rows are paginated) getPaginationRowModel: enablePagination ? getPaginationRowModel() : undefined, columnResizeMode: "onChange", filterFns: { @@ -191,7 +332,7 @@ function ClientVirtualTableInner( const sensors = useSensors( useSensor(PointerSensor, { activationConstraint: { - distance: 8, // 8px movement required to start drag + distance: 8, }, }), useSensor(KeyboardSensor) @@ -201,11 +342,29 @@ function ClientVirtualTableInner( const handleDragEnd = (event: DragEndEvent) => { const { active, over } = event if (active && over && active.id !== over.id) { - setColumnOrder((items) => { - const oldIndex = items.indexOf(active.id as string) - const newIndex = items.indexOf(over.id as string) - return arrayMove(items, oldIndex, newIndex) - }) + const activeId = active.id as string + const overId = over.id as string + + const activeColumn = table.getColumn(activeId) + const overColumn = table.getColumn(overId) + + if (activeColumn && overColumn) { + const activePinState = activeColumn.getIsPinned() + const overPinState = overColumn.getIsPinned() + + // If dragging between different pin states, update the pin state of the active column + if (activePinState !== overPinState) { + activeColumn.pin(overPinState) + } + + // Reorder the columns + setColumnOrder((items) => { + const currentItems = Array.isArray(items) ? items : [] + const oldIndex = items.indexOf(activeId) + const newIndex = items.indexOf(overId) + return arrayMove(items, oldIndex, newIndex) + }) + } } } @@ -216,7 +375,7 @@ function ClientVirtualTableInner( const rowVirtualizer = useVirtualizer({ count: rows.length, getScrollElement: () => tableContainerRef.current, - estimateSize: () => 40, // Estimated row height + estimateSize: () => estimateRowHeight, overscan: 10, }) @@ -236,30 +395,42 @@ function ClientVirtualTableInner( return } const currentData = table.getFilteredRowModel().rows.map((row) => row.original) - await exportToExcel(currentData, columns, `export-${new Date().toISOString().slice(0,10)}.xlsx`) + await exportToExcel(currentData, columns, `export-${new Date().toISOString().slice(0, 10)}.xlsx`) } return ( -
+
- {actions} + {enableUserPreset && tableKey && ( + + )} } + customToolbar={customToolbar} + actions={actions} />
+ {isLoading && ( +
+ +
+ )} + ( className="table-fixed border-collapse w-full min-w-full" style={{ width: table.getTotalSize() }} > - + {table.getHeaderGroups().map((headerGroup) => ( h.id)} strategy={horizontalListSortingStrategy} > {headerGroup.headers.map((header) => ( @@ -281,6 +452,7 @@ function ClientVirtualTableInner( key={header.id} header={header} enableReordering={true} + renderHeaderVisualFeedback={renderHeaderVisualFeedback} /> ))} @@ -293,51 +465,126 @@ function ClientVirtualTableInner( )} - {virtualRows.map((virtualRow) => { - const row = rows[virtualRow.index] - return ( - - {row.getVisibleCells().map((cell) => { - // Handle pinned cells - const isPinned = cell.column.getIsPinned() - const style: React.CSSProperties = { - width: cell.column.getSize(), - } - if (isPinned === "left") { - style.position = "sticky" - style.left = `${cell.column.getStart("left")}px` - style.zIndex = 10 - style.backgroundColor = "var(--background)" // Ensure opacity - } else if (isPinned === "right") { - style.position = "sticky" - style.right = `${cell.column.getAfter("right")}px` - style.zIndex = 10 - style.backgroundColor = "var(--background)" - } - - return ( + {virtualRows.length === 0 && !isLoading ? ( + + + No results. + + + ) : ( + virtualRows.map((virtualRow) => { + const row = rows[virtualRow.index] + + // --- Group Header Rendering --- + if (row.getIsGrouped()) { + const groupingColumnId = row.groupingColumnId ?? ""; + const groupingValue = row.getGroupingValue(groupingColumnId); + + return ( + - {flexRender( - cell.column.columnDef.cell, - cell.getContext() - )} +
+ {row.getIsExpanded() ? ( + + ) : ( + + )} + + + {groupingColumnId}: + + + {String(groupingValue)} + + + ({row.subRows.length}) + + +
- ) - })} - - ) - })} + + ) + } + + // --- Normal Row Rendering --- + return ( + onRowClick?.(row, e)} + > + {row.getVisibleCells().map((cell) => { + // Handle pinned cells + const isPinned = cell.column.getIsPinned() + const isGrouped = cell.column.getIsGrouped() + + const style: React.CSSProperties = { + width: cell.column.getSize(), + } + if (isPinned === "left") { + style.position = "sticky" + style.left = `${cell.column.getStart("left")}px` + style.zIndex = 20 + } else if (isPinned === "right") { + style.position = "sticky" + style.right = `${cell.column.getAfter("right")}px` + style.zIndex = 20 + } + + return ( + + {cell.getIsGrouped() ? ( + // If this cell is grouped, usually we don't render it here if we have a group header row, + // but if we keep it, it acts as the expander for the next level (if multi-level grouping). + // Since we used a full-width row for the group header, this branch might not be hit for the group row itself, + // but for nested groups it might? + // Wait, row.getIsGrouped() is true for the group row. + // The cells inside the group row are not rendered because we return early above. + // The cells inside the "leaf" rows (normal rows) are rendered here. + // So cell.getIsGrouped() checks if the COLUMN is currently grouped. + // If the column is grouped, the cell value is usually redundant or hidden in normal rows. + // Standard practice: hide the cell content or dim it. + null + ) : cell.getIsAggregated() ? ( + // If this cell is an aggregation of the group + flexRender( + cell.column.columnDef.aggregatedCell ?? + cell.column.columnDef.cell, + cell.getContext() + ) + ) : ( + // Normal cell + cell.getIsPlaceholder() + ? null + : flexRender(cell.column.columnDef.cell, cell.getContext()) + )} + + ) + })} + + ) + }) + )} {paddingBottom > 0 && ( @@ -347,9 +594,9 @@ function ClientVirtualTableInner(
- + {enablePagination && ( - + )}
) diff --git a/components/client-table/preset-actions.ts b/components/client-table/preset-actions.ts new file mode 100644 index 00000000..0b8b3adb --- /dev/null +++ b/components/client-table/preset-actions.ts @@ -0,0 +1,87 @@ +"use server"; + +import db from "@/db/db"; +import { userCustomData } from "@/db/schema/user-custom-data/userCustomData"; +import { eq, and } from "drizzle-orm"; +import { Preset, PresetRepository } from "./preset-types"; + +// Drizzle Implementation of PresetRepository +// This file acts as the concrete repository implementation. +// To swap DBs, you would replace the logic here or create a new implementation file. + +export async function getPresets(tableKey: string, userId: number): Promise<{ success: boolean; data?: Preset[]; error?: string }> { + try { + const settings = await db + .select() + .from(userCustomData) + .where( + and( + eq(userCustomData.tableKey, tableKey), + eq(userCustomData.userId, userId) + ) + ) + .orderBy(userCustomData.createdDate); + + // Map DB entity to domain model + const data: Preset[] = settings.map(s => ({ + id: s.id, + name: s.customSettingName, + setting: s.customSetting, + createdAt: s.createdDate, + updatedAt: s.updatedDate, + })); + + return { success: true, data }; + } catch (error) { + console.error("Failed to fetch presets:", error); + return { success: false, error: "Failed to fetch presets" }; + } +} + +export async function savePreset( + userId: number, + tableKey: string, + name: string, + setting: any +): Promise<{ success: boolean; error?: string }> { + try { + const existing = await db.query.userCustomData.findFirst({ + where: and( + eq(userCustomData.userId, userId), + eq(userCustomData.tableKey, tableKey), + eq(userCustomData.customSettingName, name) + ) + }); + + if (existing) { + await db.update(userCustomData) + .set({ + customSetting: setting, + updatedDate: new Date() + }) + .where(eq(userCustomData.id, existing.id)); + } else { + await db.insert(userCustomData).values({ + userId, + tableKey, + customSettingName: name, + customSetting: setting, + }); + } + + return { success: true }; + } catch (error) { + console.error("Failed to save preset:", error); + return { success: false, error: "Failed to save preset" }; + } +} + +export async function deletePreset(id: string): Promise<{ success: boolean; error?: string }> { + try { + await db.delete(userCustomData).where(eq(userCustomData.id, id)); + return { success: true }; + } catch (error) { + console.error("Failed to delete preset:", error); + return { success: false, error: "Failed to delete preset" }; + } +} diff --git a/components/client-table/preset-types.ts b/components/client-table/preset-types.ts new file mode 100644 index 00000000..072d918b --- /dev/null +++ b/components/client-table/preset-types.ts @@ -0,0 +1,13 @@ +export interface Preset { + id: string; + name: string; + setting: any; // JSON object for table state + createdAt: Date; + updatedAt: Date; +} + +export interface PresetRepository { + getPresets(tableKey: string, userId: number): Promise<{ success: boolean; data?: Preset[]; error?: string }>; + savePreset(userId: number, tableKey: string, name: string, setting: any): Promise<{ success: boolean; error?: string }>; + deletePreset(id: string): Promise<{ success: boolean; error?: string }>; +} diff --git a/db/schema/index.ts b/db/schema/index.ts index cd54e032..fdc25afc 100644 --- a/db/schema/index.ts +++ b/db/schema/index.ts @@ -50,6 +50,8 @@ export * from './permissions'; export * from './fileSystem'; +export * from './user-custom-data/userCustomData'; + // 부서별 도메인 할당 관리 export * from './departmentDomainAssignments'; diff --git a/db/schema/user-custom-data/userCustomData.ts b/db/schema/user-custom-data/userCustomData.ts new file mode 100644 index 00000000..bf529679 --- /dev/null +++ b/db/schema/user-custom-data/userCustomData.ts @@ -0,0 +1,16 @@ +/** + * user custom data + * + * */ +import { integer, json, pgTable, timestamp, uuid, varchar } from "drizzle-orm/pg-core"; +import { users } from "../users"; + +export const userCustomData = pgTable("user_custom_data", { + id: uuid("id").primaryKey().defaultRandom(), + userId: integer("user_id").references(() => users.id), + tableKey: varchar("table_key", { length: 255 }).notNull(), + customSettingName: varchar("custom_setting_name", { length: 255 }).notNull(), + customSetting: json("custom_setting"), + createdDate: timestamp("created_date", { withTimezone: true }).defaultNow().notNull(), + updatedDate: timestamp("updated_date", { withTimezone: true }).defaultNow().notNull(), +}); -- cgit v1.2.3