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",
+ "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() &&
}
+
+ {/* Visual Feedback Indicators */}
+ {renderHeaderVisualFeedback ? (
+ renderHeaderVisualFeedback({
+ column,
+ isPinned,
+ isSorted,
+ isFiltered,
+ isGrouped,
+ })
+ ) : (
+ (isPinned || isFiltered || isGrouped) && (
+
+ {isPinned &&
}
+ {isFiltered &&
}
+ {isGrouped &&
}
+
+ )
+ )}
+
+ )
+
+ if (header.isPlaceholder) {
+ return (
+
+ {null}
+ |
+ )
+ }
+
+ return (
+
+
+
+ {content}
+ |
+
+
+
+
+ Hide Column
+
+
+ {column.getCanGroup() && (
+ <>
+
+
+ {isGrouped ? (
+ <>
+
+ Ungroup
+
+ ) : (
+ <>
+
+ Group by {column.id}
+
+ )}
+
+
+ )}
+
+
+
+
+ Pin Left
+
+
+
+ Pin Right
+
+ {isPinned && (
+
+
+ Unpin
+
+ )}
+
+
+ )
+}
+
+
diff --git a/components/client-table-v3/client-table-filter.tsx b/components/client-table-v3/client-table-filter.tsx
new file mode 100644
index 00000000..eaf6b31e
--- /dev/null
+++ b/components/client-table-v3/client-table-filter.tsx
@@ -0,0 +1,103 @@
+"use client"
+
+import * as React from "react"
+import { Column } from "@tanstack/react-table"
+import { Input } from "@/components/ui/input"
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select"
+import { ClientTableColumnMeta } from "./types"
+
+interface ClientTableFilterProps
{
+ column: Column
+}
+
+export function ClientTableFilter({
+ column,
+}: ClientTableFilterProps) {
+ const columnFilterValue = column.getFilterValue()
+ // Cast meta to our local type
+ const meta = column.columnDef.meta as ClientTableColumnMeta | undefined
+
+ // Handle Boolean Filter
+ if (meta?.filterType === "boolean") {
+ return (
+ e.stopPropagation()} className="mt-2">
+
+
+ )
+ }
+
+ // Handle Select Filter (for specific options)
+ if (meta?.filterType === "select" && meta.filterOptions) {
+ return (
+ e.stopPropagation()} className="mt-2">
+
+
+ )
+ }
+
+ // Default Text Filter
+ const [value, setValue] = React.useState(columnFilterValue)
+
+ React.useEffect(() => {
+ setValue(columnFilterValue)
+ }, [columnFilterValue])
+
+ React.useEffect(() => {
+ const timeout = setTimeout(() => {
+ column.setFilterValue(value)
+ }, 500)
+
+ return () => clearTimeout(timeout)
+ }, [value, column])
+
+ return (
+ e.stopPropagation()} className="mt-2">
+ setValue(e.target.value)}
+ placeholder="Search..."
+ className="h-8 w-full font-normal bg-background"
+ />
+
+ )
+}
+
+
diff --git a/components/client-table-v3/client-table-preset.tsx b/components/client-table-v3/client-table-preset.tsx
new file mode 100644
index 00000000..557e8493
--- /dev/null
+++ b/components/client-table-v3/client-table-preset.tsx
@@ -0,0 +1,189 @@
+"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);
+ // Reset page index to avoid loading an out-of-range page after applying a preset
+ table.setPageIndex(0);
+
+ 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
+
+
+
+
+
+
+ );
+}
+
+
diff --git a/components/client-table-v3/client-virtual-table.tsx b/components/client-table-v3/client-virtual-table.tsx
new file mode 100644
index 00000000..7a092326
--- /dev/null
+++ b/components/client-table-v3/client-virtual-table.tsx
@@ -0,0 +1,309 @@
+"use client";
+
+import * as React from "react";
+import { Table, flexRender } from "@tanstack/react-table";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import {
+ DndContext,
+ closestCenter,
+ KeyboardSensor,
+ PointerSensor,
+ useSensor,
+ useSensors,
+ DragEndEvent,
+} from "@dnd-kit/core";
+import {
+ arrayMove,
+ SortableContext,
+ horizontalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { cn } from "@/lib/utils";
+import { Loader2, ChevronRight, ChevronDown } from "lucide-react";
+
+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 { ClientTableViewOptions } from "../client-table/client-table-view-options";
+
+import { ClientTableColumnHeader } from "./client-table-column-header";
+import { ClientTablePreset } from "./client-table-preset";
+import { ClientVirtualTableProps } from "./types";
+
+export function ClientVirtualTable({
+ table,
+ isLoading = false,
+ height = "100%",
+ estimateRowHeight = 40,
+ className,
+ actions,
+ customToolbar,
+ enableExport = true,
+ onExport,
+ enableUserPreset = false,
+ tableKey,
+ getRowClassName,
+ onRowClick,
+ renderHeaderVisualFeedback,
+}: ClientVirtualTableProps) {
+ // --- DnD Sensors ---
+ const sensors = useSensors(
+ useSensor(PointerSensor, {
+ activationConstraint: {
+ distance: 8,
+ },
+ }),
+ useSensor(KeyboardSensor)
+ );
+
+ // --- Drag Handler ---
+ const handleDragEnd = (event: DragEndEvent) => {
+ const { active, over } = event;
+ if (active && over && active.id !== over.id) {
+ 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
+ if (activePinState !== overPinState) {
+ activeColumn.pin(overPinState);
+ }
+
+ // Reorder
+ const currentOrder = table.getState().columnOrder;
+ const oldIndex = currentOrder.indexOf(activeId);
+ const newIndex = currentOrder.indexOf(overId);
+
+ if (oldIndex !== -1 && newIndex !== -1) {
+ table.setColumnOrder(arrayMove(currentOrder, oldIndex, newIndex));
+ }
+ }
+ }
+ };
+
+ // --- Virtualization ---
+ const tableContainerRef = React.useRef(null);
+ const { rows } = table.getRowModel();
+
+ const rowVirtualizer = useVirtualizer({
+ count: rows.length,
+ getScrollElement: () => tableContainerRef.current,
+ estimateSize: () => estimateRowHeight,
+ overscan: 10,
+ });
+
+ const virtualRows = rowVirtualizer.getVirtualItems();
+ const totalSize = rowVirtualizer.getTotalSize();
+
+ const paddingTop = virtualRows.length > 0 ? virtualRows?.[0]?.start || 0 : 0;
+ const paddingBottom =
+ virtualRows.length > 0
+ ? totalSize - (virtualRows?.[virtualRows.length - 1]?.end || 0)
+ : 0;
+
+ // --- Export ---
+ const handleExport = async () => {
+ if (onExport) {
+ onExport(table.getFilteredRowModel().rows.map((r) => r.original));
+ return;
+ }
+ const currentData = table.getFilteredRowModel().rows.map((row) => row.original);
+ // Note: exportToExcel needs columns definition. table.getAllColumns() or visible columns?
+ // Using table.getAllLeafColumns() usually.
+ await exportToExcel(currentData, table.getAllLeafColumns(), `export-${new Date().toISOString().slice(0, 10)}.xlsx`);
+ };
+
+ const columns = table.getVisibleLeafColumns();
+ const data = table.getFilteredRowModel().rows; // or just rows which is from getRowModel
+
+ return (
+
+
+
+ {enableUserPreset && tableKey && (
+
+ )}
+
+ }
+ customToolbar={customToolbar}
+ actions={actions}
+ />
+
+
+ {isLoading && (
+
+
+
+ )}
+
+
+
+
+ {table.getHeaderGroups().map((headerGroup) => (
+
+ h.id)}
+ strategy={horizontalListSortingStrategy}
+ >
+ {headerGroup.headers.map((header) => (
+
+ ))}
+
+
+ ))}
+
+
+ {paddingTop > 0 && (
+
+ |
+
+ )}
+ {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 (
+
+ |
+
+ {row.getIsExpanded() ? (
+
+ ) : (
+
+ )}
+
+
+ {groupingColumnId}:
+
+
+ {String(groupingValue)}
+
+
+ ({row.subRows.length})
+
+
+
+ |
+
+ );
+ }
+
+ // --- Normal Row Rendering ---
+ return (
+ onRowClick?.(row, e)}
+ >
+ {row.getVisibleCells().map((cell) => {
+ 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() ? null : cell.getIsAggregated() ? (
+ flexRender(
+ cell.column.columnDef.aggregatedCell ??
+ cell.column.columnDef.cell,
+ cell.getContext()
+ )
+ ) : cell.getIsPlaceholder() ? null : (
+ flexRender(cell.column.columnDef.cell, cell.getContext())
+ )}
+ |
+ );
+ })}
+
+ );
+ })
+ )}
+ {paddingBottom > 0 && (
+
+ |
+
+ )}
+
+
+
+