@m5kdev/web-ui 0.7.0 → 0.8.0

package/dist/src/modules/table/components/NuqsTable.js

@@ -1,234 +1,308 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button as Button$1 } from "../../../components/ui/button.js";
+import { Table as Table$1, TableBody as TableBody$1, TableCell as TableCell$1, TableHead, TableHeader as TableHeader$1, TableRow as TableRow$1 } from "../../../components/ui/table.js";
+import { ColumnOrderAndVisibility } from "./ColumnOrderAndVisibility.js";
+import { TableFiltering } from "./TableFiltering.js";
+import { TableGroupBy } from "./TableGroupBy.js";
+import { TablePagination } from "./TablePagination.js";
+import { useEffect, useMemo, useState } from "react";
 import { Checkbox, Popover, PopoverContent, PopoverTrigger } from "@heroui/react";
-import { flexRender, getCoreRowModel, getExpandedRowModel, getGroupedRowModel, getPaginationRowModel, useReactTable, } from "@tanstack/react-table";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDown, ChevronRight, ChevronUp } from "lucide-react";
-import { useEffect, useMemo, useState } from "react";
-import { Button } from "../../../components/ui/button";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "../../../components/ui/table";
-import { ColumnOrderAndVisibility } from "./ColumnOrderAndVisibility";
-import { TableFiltering } from "./TableFiltering";
-import { TableGroupBy } from "./TableGroupBy";
-import { TablePagination } from "./TablePagination";
+import { flexRender, getCoreRowModel, getExpandedRowModel, getGroupedRowModel, getPaginationRowModel, useReactTable } from "@tanstack/react-table";
+//#region src/modules/table/components/NuqsTable.tsx
 function getStorageKey(columnIds) {
-    const sortedIds = [...columnIds].sort().join(",");
-    return `table-column-layout-${sortedIds}`;
+	return `table-column-layout-${[...columnIds].sort().join(",")}`;
 }
 function loadLayoutFromStorage(columnIds) {
-    if (typeof window === "undefined")
-        return null;
-    try {
-        const key = getStorageKey(columnIds);
-        const stored = localStorage.getItem(key);
-        if (!stored)
-            return null;
-        const parsed = JSON.parse(stored);
-        return parsed;
-    }
-    catch {
-        return null;
-    }
+	if (typeof window === "undefined") return null;
+	try {
+		const key = getStorageKey(columnIds);
+		const stored = localStorage.getItem(key);
+		if (!stored) return null;
+		return JSON.parse(stored);
+	} catch {
+		return null;
+	}
 }
 function saveLayoutToStorage(columnIds, order, visibility) {
-    if (typeof window === "undefined")
-        return;
-    try {
-        const key = getStorageKey(columnIds);
-        localStorage.setItem(key, JSON.stringify({ order, visibility }));
-    }
-    catch {
-        // Ignore storage errors
-    }
+	if (typeof window === "undefined") return;
+	try {
+		const key = getStorageKey(columnIds);
+		localStorage.setItem(key, JSON.stringify({
+			order,
+			visibility
+		}));
+	} catch {}
 }
 function applyOrder(prev, nextOrder) {
-    const byId = new Map(prev.map((i) => [i.id, i]));
-    const ordered = nextOrder.map((id) => byId.get(id)).filter(Boolean);
-    // append any newly added columns (if any appear later)
-    for (const item of prev)
-        if (!nextOrder.includes(item.id))
-            ordered.push(item);
-    return ordered;
+	const byId = new Map(prev.map((i) => [i.id, i]));
+	const ordered = nextOrder.map((id) => byId.get(id)).filter(Boolean);
+	for (const item of prev) if (!nextOrder.includes(item.id)) ordered.push(item);
+	return ordered;
 }
 function applyVisibility(prev, visibility) {
-    return prev.map((column) => ({
-        ...column,
-        visibility: visibility[String(column.id)] ?? column.visibility,
-    }));
+	return prev.map((column) => ({
+		...column,
+		visibility: visibility[String(column.id)] ?? column.visibility
+	}));
 }
-export const NuqsTable = ({ data, total, columns, tableProps, singleFilter = false, filterMethods, }) => {
-    const columnIds = useMemo(() => columns.map((col) => String(col.id)), [columns]);
-    console.log("data", data);
-    // const columnsWithId = useMemo(() => {
-    //   const idColumn: NuqsTableColumn<T> = {
-    //     id: "__row_id",
-    //     accessorKey: "id",
-    //     header: "",
-    //     enableSorting: false,
-    //     enableHiding: false,
-    //     visible: false,
-    //   };
-    //   return [idColumn, ...columns];
-    // }, [columns]);
-    const initialLayout = useMemo(() => {
-        const defaultLayout = columns.map((column) => ({
-            id: String(column.id),
-            label: column.header,
-            visibility: column.visible !== undefined ? column.visible : true,
-            options: column.options ?? [],
-            type: column.type ?? undefined,
-        }));
-        const saved = loadLayoutFromStorage(columnIds);
-        if (!saved)
-            return defaultLayout;
-        // Merge saved layout with default layout
-        const savedById = new Map();
-        saved.order.forEach((id, index) => {
-            savedById.set(id, { order: index, visibility: saved.visibility[id] ?? true });
-        });
-        const merged = [];
-        const processedIds = new Set();
-        // Add columns in saved order
-        saved.order.forEach((id) => {
-            const defaultCol = defaultLayout.find((col) => col.id === id);
-            if (defaultCol) {
-                merged.push({
-                    ...defaultCol,
-                    visibility: saved.visibility[id] ?? defaultCol.visibility,
-                });
-                processedIds.add(id);
-            }
-        });
-        // Add any new columns that weren't in saved layout
-        defaultLayout.forEach((col) => {
-            if (!processedIds.has(col.id)) {
-                merged.push(col);
-            }
-        });
-        return merged;
-    }, [columns, columnIds]);
-    const [layout, setLayout] = useState(initialLayout);
-    // Sync layout when columns change
-    useEffect(() => {
-        setLayout(initialLayout);
-    }, [initialLayout]);
-    // Save to localStorage whenever layout changes
-    useEffect(() => {
-        const order = layout.map((col) => col.id);
-        const visibility = Object.fromEntries(layout.map((col) => [col.id, col.visibility]));
-        saveLayoutToStorage(columnIds, order, visibility);
-    }, [layout, columnIds]);
-    const columnOrder = useMemo(() => layout.map((column) => column.id), [layout]);
-    const columnVisibility = useMemo(() => Object.fromEntries(layout.map((column) => [column.id, column.visibility])), [layout]);
-    const { limit = 10, page = 1, sorting, setSorting, setPagination, pagination, rowSelection, setRowSelection, setFilters, filters, grouping, setGrouping, } = tableProps;
-    const isGrouped = grouping.length > 0;
-    const [expanded, setExpanded] = useState({});
-    // Redirect back if we're on an empty page (past the last page)
-    useEffect(() => {
-        if (!isGrouped && data.length === 0 && page > 1 && total !== undefined) {
-            setPagination?.({ pageIndex: page - 2, pageSize: limit });
-        }
-    }, [data.length, page, limit, total, setPagination, isGrouped]);
-    // When grouped, TanStack handles pagination client-side; otherwise use server total
-    const serverPageCount = total !== undefined
-        ? Math.ceil(total / limit) || 1
-        : data.length === limit
-            ? page + 1
-            : Math.max(page, Math.ceil(data.length / limit));
-    const table = useReactTable({
-        data,
-        columns,
-        getRowId: (row) => String(row.id),
-        manualSorting: true,
-        manualPagination: !isGrouped,
-        state: { pagination, sorting, rowSelection, columnOrder, columnVisibility, grouping, expanded },
-        ...(isGrouped ? {} : { pageCount: serverPageCount }),
-        manualFiltering: true,
-        enableGrouping: true,
-        groupedColumnMode: false,
-        autoResetExpanded: false,
-        onSortingChange: setSorting,
-        onPaginationChange: setPagination,
-        onRowSelectionChange: setRowSelection,
-        onGroupingChange: setGrouping,
-        onExpandedChange: setExpanded,
-        getCoreRowModel: getCoreRowModel(),
-        getGroupedRowModel: getGroupedRowModel(),
-        getExpandedRowModel: getExpandedRowModel(),
-        getPaginationRowModel: getPaginationRowModel(),
-        onColumnOrderChange: (updater) => {
-            setLayout((prev) => applyOrder(prev, typeof updater === "function" ? updater(prev.map((i) => i.id)) : updater));
-        },
-        onColumnVisibilityChange: (updater) => {
-            setLayout((prev) => applyVisibility(prev, typeof updater === "function"
-                ? updater(Object.fromEntries(prev.map((i) => [i.id, i.visibility])))
-                : updater));
-        },
-    });
-    const onChangeOrder = (order) => {
-        setLayout((prev) => applyOrder(prev, order));
-    };
-    const onChangeVisibility = (visibility) => {
-        setLayout((prev) => applyVisibility(prev, visibility));
-    };
-    const onFiltersChange = (filters) => {
-        setFilters?.(filters);
-    };
-    const filterableColumns = useMemo(() => {
-        const baseColumns = columns
-            .filter((column) => Boolean(column.type))
-            .map((column) => ({
-            id: String(column.id),
-            label: String(column.header),
-            type: column.type,
-            options: column.options ?? [],
-            endColumnId: column.endColumnId,
-            periodStartColumnId: null,
-            periodEndColumnId: null,
-        }));
-        // Add Period pseudo-columns for date columns with endColumnId
-        const periodColumns = columns
-            .filter((column) => column.type === "date" && column.endColumnId)
-            .map((column) => ({
-            id: `${String(column.id)}__period`,
-            label: "Period",
-            type: "date",
-            options: [],
-            endColumnId: null,
-            periodStartColumnId: String(column.id),
-            periodEndColumnId: column.endColumnId,
-        }));
-        return [...baseColumns, ...periodColumns];
-    }, [columns]);
-    const groupableColumns = useMemo(() => columns
-        .filter((col) => col.groupable)
-        .map((col) => ({ id: String(col.id), label: String(col.header) })), [columns]);
-    const hasGrouping = grouping.length > 0;
-    const [isFiltersOpen, setIsFiltersOpen] = useState(false);
-    const [isColumnsOpen, setIsColumnsOpen] = useState(false);
-    const [isGroupByOpen, setIsGroupByOpen] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex w-full items-center gap-2 justify-end", children: [_jsxs(Popover, { placement: "bottom", isOpen: isFiltersOpen, onOpenChange: setIsFiltersOpen, portalContainer: document.body, children: [_jsx(PopoverTrigger, { children: _jsx(Button, { variant: "outline", size: "sm", children: _jsxs("div", { className: "flex items-center gap-2", children: ["Filters", _jsx(ChevronDown, { className: "h-4 w-4" })] }) }) }), _jsx(PopoverContent, { children: _jsx(TableFiltering, { columns: filterableColumns, onFiltersChange: onFiltersChange, filters: filters ?? [], onClose: () => setIsFiltersOpen(false), singleFilter: singleFilter, filterMethods: filterMethods }) })] }), groupableColumns.length > 0 && (_jsxs(Popover, { placement: "bottom", isOpen: isGroupByOpen, onOpenChange: setIsGroupByOpen, portalContainer: document.body, children: [_jsx(PopoverTrigger, { children: _jsx(Button, { variant: hasGrouping ? "secondary" : "outline", size: "sm", children: _jsxs("div", { className: "flex items-center gap-2", children: [hasGrouping
-                                                ? `Grouped by: ${grouping.map((id) => groupableColumns.find((c) => c.id === id)?.label ?? id).join(" → ")}`
-                                                : "Group by", _jsx(ChevronDown, { className: "h-4 w-4" })] }) }) }), _jsx(PopoverContent, { children: _jsx(TableGroupBy, { columns: groupableColumns, activeGrouping: grouping, onGroupingChange: (columnIds) => {
-                                        setGrouping(columnIds);
-                                        setExpanded({});
-                                        setPagination?.({ pageIndex: 0, pageSize: limit });
-                                    }, onClose: () => setIsGroupByOpen(false) }) })] })), _jsxs(Popover, { placement: "bottom", isOpen: isColumnsOpen, onOpenChange: setIsColumnsOpen, portalContainer: document.body, children: [_jsx(PopoverTrigger, { children: _jsx(Button, { variant: "outline", size: "sm", children: _jsxs("div", { className: "flex items-center gap-2", children: ["Columns", _jsx(ChevronDown, { className: "h-4 w-4" })] }) }) }), _jsx(PopoverContent, { children: _jsx(ColumnOrderAndVisibility, { layout: layout, onChangeOrder: onChangeOrder, onChangeVisibility: onChangeVisibility, onClose: () => setIsColumnsOpen(false) }) })] })] }), _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: _jsx(Checkbox, { isSelected: table.getIsAllRowsSelected(), onValueChange: (checked) => {
-                                            table.toggleAllRowsSelected(checked);
-                                        } }) }), table.getHeaderGroups()[0].headers.map((header) => (_jsxs(TableHead, { onClick: header.column.getCanSort() ? header.column.getToggleSortingHandler() : undefined, children: [flexRender(header.column.columnDef.header, header.getContext()), header.column.getCanSort() && (_jsxs(_Fragment, { children: [header.column.getIsSorted() === "asc" && (_jsx(ChevronUp, { className: "h-4 w-4 inline ml-1" })), header.column.getIsSorted() === "desc" && (_jsx(ChevronDown, { className: "h-4 w-4 inline ml-1" }))] }))] }, header.id)))] }) }), _jsx(TableBody, { children: table.getRowModel().rows.map((row) => {
-                            if (row.getIsGrouped()) {
-                                return (_jsxs(TableRow, { className: "bg-muted/40 font-medium cursor-pointer hover:bg-muted/60", onClick: () => row.toggleExpanded(), children: [_jsx(TableCell, {}), row.getVisibleCells().map((cell) => {
-                                            if (cell.getIsGrouped()) {
-                                                return (_jsx(TableCell, { children: _jsxs("span", { className: "flex items-center gap-1.5", children: [row.getIsExpanded() ? (_jsx(ChevronDown, { className: "h-4 w-4 shrink-0" })) : (_jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })), flexRender(cell.column.columnDef.cell, cell.getContext()), _jsxs("span", { className: "text-muted-foreground font-normal ml-1", children: ["(", row.subRows.length, ")"] })] }) }, cell.id));
-                                            }
-                                            if (cell.getIsAggregated()) {
-                                                return (_jsx(TableCell, { children: flexRender(cell.column.columnDef.aggregatedCell ?? cell.column.columnDef.cell, cell.getContext()) }, cell.id));
-                                            }
-                                            return _jsx(TableCell, {}, cell.id);
-                                        })] }, row.id));
-                            }
-                            return (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Checkbox, { isSelected: row.getIsSelected(), onValueChange: (checked) => {
-                                                row.toggleSelected(checked);
-                                            } }) }), row.getVisibleCells().map((cell) => (_jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)))] }, row.id));
-                        }) })] }), _jsx(TablePagination, { pageCount: isGrouped
-                    ? Math.ceil(table.getPrePaginationRowModel().rows.length / limit) || 1
-                    : serverPageCount, page: isGrouped ? table.getState().pagination.pageIndex + 1 : page, limit: limit, setPagination: setPagination })] }));
+const NuqsTable = ({ data, total, columns, tableProps, singleFilter = false, filterMethods }) => {
+	const columnIds = useMemo(() => columns.map((col) => String(col.id)), [columns]);
+	console.log("data", data);
+	const initialLayout = useMemo(() => {
+		const defaultLayout = columns.map((column) => ({
+			id: String(column.id),
+			label: column.header,
+			visibility: column.visible !== void 0 ? column.visible : true,
+			options: column.options ?? [],
+			type: column.type ?? void 0
+		}));
+		const saved = loadLayoutFromStorage(columnIds);
+		if (!saved) return defaultLayout;
+		const savedById = /* @__PURE__ */ new Map();
+		saved.order.forEach((id, index) => {
+			savedById.set(id, {
+				order: index,
+				visibility: saved.visibility[id] ?? true
+			});
+		});
+		const merged = [];
+		const processedIds = /* @__PURE__ */ new Set();
+		saved.order.forEach((id) => {
+			const defaultCol = defaultLayout.find((col) => col.id === id);
+			if (defaultCol) {
+				merged.push({
+					...defaultCol,
+					visibility: saved.visibility[id] ?? defaultCol.visibility
+				});
+				processedIds.add(id);
+			}
+		});
+		defaultLayout.forEach((col) => {
+			if (!processedIds.has(col.id)) merged.push(col);
+		});
+		return merged;
+	}, [columns, columnIds]);
+	const [layout, setLayout] = useState(initialLayout);
+	useEffect(() => {
+		setLayout(initialLayout);
+	}, [initialLayout]);
+	useEffect(() => {
+		saveLayoutToStorage(columnIds, layout.map((col) => col.id), Object.fromEntries(layout.map((col) => [col.id, col.visibility])));
+	}, [layout, columnIds]);
+	const columnOrder = useMemo(() => layout.map((column) => column.id), [layout]);
+	const columnVisibility = useMemo(() => Object.fromEntries(layout.map((column) => [column.id, column.visibility])), [layout]);
+	const { limit = 10, page = 1, sorting, setSorting, setPagination, pagination, rowSelection, setRowSelection, setFilters, filters, grouping, setGrouping } = tableProps;
+	const isGrouped = grouping.length > 0;
+	const [expanded, setExpanded] = useState({});
+	useEffect(() => {
+		if (!isGrouped && data.length === 0 && page > 1 && total !== void 0) setPagination?.({
+			pageIndex: page - 2,
+			pageSize: limit
+		});
+	}, [
+		data.length,
+		page,
+		limit,
+		total,
+		setPagination,
+		isGrouped
+	]);
+	const serverPageCount = total !== void 0 ? Math.ceil(total / limit) || 1 : data.length === limit ? page + 1 : Math.max(page, Math.ceil(data.length / limit));
+	const table = useReactTable({
+		data,
+		columns,
+		getRowId: (row) => String(row.id),
+		manualSorting: true,
+		manualPagination: !isGrouped,
+		state: {
+			pagination,
+			sorting,
+			rowSelection,
+			columnOrder,
+			columnVisibility,
+			grouping,
+			expanded
+		},
+		...isGrouped ? {} : { pageCount: serverPageCount },
+		manualFiltering: true,
+		enableGrouping: true,
+		groupedColumnMode: false,
+		autoResetExpanded: false,
+		onSortingChange: setSorting,
+		onPaginationChange: setPagination,
+		onRowSelectionChange: setRowSelection,
+		onGroupingChange: setGrouping,
+		onExpandedChange: setExpanded,
+		getCoreRowModel: getCoreRowModel(),
+		getGroupedRowModel: getGroupedRowModel(),
+		getExpandedRowModel: getExpandedRowModel(),
+		getPaginationRowModel: getPaginationRowModel(),
+		onColumnOrderChange: (updater) => {
+			setLayout((prev) => applyOrder(prev, typeof updater === "function" ? updater(prev.map((i) => i.id)) : updater));
+		},
+		onColumnVisibilityChange: (updater) => {
+			setLayout((prev) => applyVisibility(prev, typeof updater === "function" ? updater(Object.fromEntries(prev.map((i) => [i.id, i.visibility]))) : updater));
+		}
+	});
+	const onChangeOrder = (order) => {
+		setLayout((prev) => applyOrder(prev, order));
+	};
+	const onChangeVisibility = (visibility) => {
+		setLayout((prev) => applyVisibility(prev, visibility));
+	};
+	const onFiltersChange = (filters) => {
+		setFilters?.(filters);
+	};
+	const filterableColumns = useMemo(() => {
+		const baseColumns = columns.filter((column) => Boolean(column.type)).map((column) => ({
+			id: String(column.id),
+			label: String(column.header),
+			type: column.type,
+			options: column.options ?? [],
+			endColumnId: column.endColumnId,
+			periodStartColumnId: null,
+			periodEndColumnId: null
+		}));
+		const periodColumns = columns.filter((column) => column.type === "date" && column.endColumnId).map((column) => ({
+			id: `${String(column.id)}__period`,
+			label: "Period",
+			type: "date",
+			options: [],
+			endColumnId: null,
+			periodStartColumnId: String(column.id),
+			periodEndColumnId: column.endColumnId
+		}));
+		return [...baseColumns, ...periodColumns];
+	}, [columns]);
+	const groupableColumns = useMemo(() => columns.filter((col) => col.groupable).map((col) => ({
+		id: String(col.id),
+		label: String(col.header)
+	})), [columns]);
+	const hasGrouping = grouping.length > 0;
+	const [isFiltersOpen, setIsFiltersOpen] = useState(false);
+	const [isColumnsOpen, setIsColumnsOpen] = useState(false);
+	const [isGroupByOpen, setIsGroupByOpen] = useState(false);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsxs("div", {
+			className: "flex w-full items-center gap-2 justify-end",
+			children: [
+				/* @__PURE__ */ jsxs(Popover, {
+					placement: "bottom",
+					isOpen: isFiltersOpen,
+					onOpenChange: setIsFiltersOpen,
+					portalContainer: document.body,
+					children: [/* @__PURE__ */ jsx(PopoverTrigger, { children: /* @__PURE__ */ jsx(Button$1, {
+						variant: "outline",
+						size: "sm",
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2",
+							children: ["Filters", /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" })]
+						})
+					}) }), /* @__PURE__ */ jsx(PopoverContent, { children: /* @__PURE__ */ jsx(TableFiltering, {
+						columns: filterableColumns,
+						onFiltersChange,
+						filters: filters ?? [],
+						onClose: () => setIsFiltersOpen(false),
+						singleFilter,
+						filterMethods
+					}) })]
+				}),
+				groupableColumns.length > 0 && /* @__PURE__ */ jsxs(Popover, {
+					placement: "bottom",
+					isOpen: isGroupByOpen,
+					onOpenChange: setIsGroupByOpen,
+					portalContainer: document.body,
+					children: [/* @__PURE__ */ jsx(PopoverTrigger, { children: /* @__PURE__ */ jsx(Button$1, {
+						variant: hasGrouping ? "secondary" : "outline",
+						size: "sm",
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2",
+							children: [hasGrouping ? `Grouped by: ${grouping.map((id) => groupableColumns.find((c) => c.id === id)?.label ?? id).join(" → ")}` : "Group by", /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" })]
+						})
+					}) }), /* @__PURE__ */ jsx(PopoverContent, { children: /* @__PURE__ */ jsx(TableGroupBy, {
+						columns: groupableColumns,
+						activeGrouping: grouping,
+						onGroupingChange: (columnIds) => {
+							setGrouping(columnIds);
+							setExpanded({});
+							setPagination?.({
+								pageIndex: 0,
+								pageSize: limit
+							});
+						},
+						onClose: () => setIsGroupByOpen(false)
+					}) })]
+				}),
+				/* @__PURE__ */ jsxs(Popover, {
+					placement: "bottom",
+					isOpen: isColumnsOpen,
+					onOpenChange: setIsColumnsOpen,
+					portalContainer: document.body,
+					children: [/* @__PURE__ */ jsx(PopoverTrigger, { children: /* @__PURE__ */ jsx(Button$1, {
+						variant: "outline",
+						size: "sm",
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2",
+							children: ["Columns", /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" })]
+						})
+					}) }), /* @__PURE__ */ jsx(PopoverContent, { children: /* @__PURE__ */ jsx(ColumnOrderAndVisibility, {
+						layout,
+						onChangeOrder,
+						onChangeVisibility,
+						onClose: () => setIsColumnsOpen(false)
+					}) })]
+				})
+			]
+		}),
+		/* @__PURE__ */ jsxs(Table$1, { children: [/* @__PURE__ */ jsx(TableHeader$1, { children: /* @__PURE__ */ jsxs(TableRow$1, { children: [/* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsx(Checkbox, {
+			isSelected: table.getIsAllRowsSelected(),
+			onValueChange: (checked) => {
+				table.toggleAllRowsSelected(checked);
+			}
+		}) }), table.getHeaderGroups()[0].headers.map((header) => /* @__PURE__ */ jsxs(TableHead, {
+			onClick: header.column.getCanSort() ? header.column.getToggleSortingHandler() : void 0,
+			children: [flexRender(header.column.columnDef.header, header.getContext()), header.column.getCanSort() && /* @__PURE__ */ jsxs(Fragment$1, { children: [header.column.getIsSorted() === "asc" && /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4 inline ml-1" }), header.column.getIsSorted() === "desc" && /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 inline ml-1" })] })]
+		}, header.id))] }) }), /* @__PURE__ */ jsx(TableBody$1, { children: table.getRowModel().rows.map((row) => {
+			if (row.getIsGrouped()) return /* @__PURE__ */ jsxs(TableRow$1, {
+				className: "bg-muted/40 font-medium cursor-pointer hover:bg-muted/60",
+				onClick: () => row.toggleExpanded(),
+				children: [/* @__PURE__ */ jsx(TableCell$1, {}), row.getVisibleCells().map((cell) => {
+					if (cell.getIsGrouped()) return /* @__PURE__ */ jsx(TableCell$1, { children: /* @__PURE__ */ jsxs("span", {
+						className: "flex items-center gap-1.5",
+						children: [
+							row.getIsExpanded() ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 shrink-0" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 shrink-0" }),
+							flexRender(cell.column.columnDef.cell, cell.getContext()),
+							/* @__PURE__ */ jsxs("span", {
+								className: "text-muted-foreground font-normal ml-1",
+								children: [
+									"(",
+									row.subRows.length,
+									")"
+								]
+							})
+						]
+					}) }, cell.id);
+					if (cell.getIsAggregated()) return /* @__PURE__ */ jsx(TableCell$1, { children: flexRender(cell.column.columnDef.aggregatedCell ?? cell.column.columnDef.cell, cell.getContext()) }, cell.id);
+					return /* @__PURE__ */ jsx(TableCell$1, {}, cell.id);
+				})]
+			}, row.id);
+			return /* @__PURE__ */ jsxs(TableRow$1, { children: [/* @__PURE__ */ jsx(TableCell$1, { children: /* @__PURE__ */ jsx(Checkbox, {
+				isSelected: row.getIsSelected(),
+				onValueChange: (checked) => {
+					row.toggleSelected(checked);
+				}
+			}) }), row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell$1, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))] }, row.id);
+		}) })] }),
+		/* @__PURE__ */ jsx(TablePagination, {
+			pageCount: isGrouped ? Math.ceil(table.getPrePaginationRowModel().rows.length / limit) || 1 : serverPageCount,
+			page: isGrouped ? table.getState().pagination.pageIndex + 1 : page,
+			limit,
+			setPagination
+		})
+	] });
 };
+//#endregion
+export { NuqsTable };
+
+//# sourceMappingURL=NuqsTable.js.map

package/dist/src/modules/table/components/NuqsTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NuqsTable.js","names":["Button","Table","TableHeader","TableRow","TableBody","TableCell"],"sources":["../../../../../src/modules/table/components/NuqsTable.tsx"],"sourcesContent":["import { Checkbox, Popover, PopoverContent, PopoverTrigger } from \"@heroui/react\";\r\nimport type { QueryFilters } from \"@m5kdev/commons/modules/schemas/query.schema\";\r\nimport type { FilterMethods } from \"@m5kdev/commons/modules/table/filter.types\";\r\nimport type { TableParams } from \"@m5kdev/frontend/modules/table/hooks/useNuqsTable\";\r\nimport type { ColumnDef } from \"@tanstack/react-table\";\r\nimport {\r\n  type ColumnOrderState,\r\n  type ExpandedState,\r\n  flexRender,\r\n  getCoreRowModel,\r\n  getExpandedRowModel,\r\n  getGroupedRowModel,\r\n  getPaginationRowModel,\r\n  type Table as ReactTable,\r\n  useReactTable,\r\n  type VisibilityState,\r\n} from \"@tanstack/react-table\";\r\nimport { ChevronDown, ChevronRight, ChevronUp } from \"lucide-react\";\r\nimport { useEffect, useMemo, useState } from \"react\";\r\nimport { Button } from \"../../../components/ui/button\";\r\nimport {\r\n  Table,\r\n  TableBody,\r\n  TableCell,\r\n  TableHead,\r\n  TableHeader,\r\n  TableRow,\r\n} from \"../../../components/ui/table\";\r\nimport { ColumnOrderAndVisibility } from \"./ColumnOrderAndVisibility\";\r\nimport { TableFiltering } from \"./TableFiltering\";\r\nimport { TableGroupBy } from \"./TableGroupBy\";\r\nimport { TablePagination } from \"./TablePagination\";\r\nimport type { ColumnDataType, ColumnItem } from \"./table.types\";\r\n\r\nfunction getStorageKey(columnIds: string[]): string {\r\n  const sortedIds = [...columnIds].sort().join(\",\");\r\n  return `table-column-layout-${sortedIds}`;\r\n}\r\n\r\nfunction loadLayoutFromStorage(\r\n  columnIds: string[]\r\n): { order: string[]; visibility: Record<string, boolean> } | null {\r\n  if (typeof window === \"undefined\") return null;\r\n  try {\r\n    const key = getStorageKey(columnIds);\r\n    const stored = localStorage.getItem(key);\r\n    if (!stored) return null;\r\n    const parsed = JSON.parse(stored) as { order: string[]; visibility: Record<string, boolean> };\r\n    return parsed;\r\n  } catch {\r\n    return null;\r\n  }\r\n}\r\n\r\nfunction saveLayoutToStorage(\r\n  columnIds: string[],\r\n  order: string[],\r\n  visibility: Record<string, boolean>\r\n): void {\r\n  if (typeof window === \"undefined\") return;\r\n  try {\r\n    const key = getStorageKey(columnIds);\r\n    localStorage.setItem(key, JSON.stringify({ order, visibility }));\r\n  } catch {\r\n    // Ignore storage errors\r\n  }\r\n}\r\n\r\nexport type NuqsTableColumn<T> = ColumnDef<T> & {\r\n  visible?: boolean;\r\n  type?: ColumnDataType;\r\n  options?: { label: string; value: string }[];\r\n  endColumnId?: string;\r\n  groupable?: boolean;\r\n};\r\n\r\ntype NuqsTableParams<T> = {\r\n  data: T[];\r\n  total?: number;\r\n  columns: NuqsTableColumn<T>[];\r\n  tableProps: TableParams;\r\n  singleFilter?: boolean;\r\n  filterMethods?: Partial<FilterMethods>;\r\n};\r\n\r\nfunction applyOrder(prev: ColumnItem[], nextOrder: string[]): ColumnItem[] {\r\n  const byId = new Map(prev.map((i) => [i.id, i]));\r\n  const ordered = nextOrder.map((id) => byId.get(id)).filter(Boolean) as ColumnItem[];\r\n  // append any newly added columns (if any appear later)\r\n  for (const item of prev) if (!nextOrder.includes(item.id)) ordered.push(item);\r\n  return ordered;\r\n}\r\n\r\nfunction applyVisibility(prev: ColumnItem[], visibility: VisibilityState): ColumnItem[] {\r\n  return prev.map((column) => ({\r\n    ...column,\r\n    visibility: visibility[String(column.id)] ?? column.visibility,\r\n  }));\r\n}\r\n\r\nexport const NuqsTable = <T,>({\r\n  data,\r\n  total,\r\n  columns,\r\n  tableProps,\r\n  singleFilter = false,\r\n  filterMethods,\r\n}: NuqsTableParams<T>) => {\r\n  const columnIds = useMemo(() => columns.map((col) => String(col.id)), [columns]);\r\n  console.log(\"data\", data);\r\n  // const columnsWithId = useMemo(() => {\r\n  //   const idColumn: NuqsTableColumn<T> = {\r\n  //     id: \"__row_id\",\r\n  //     accessorKey: \"id\",\r\n  //     header: \"\",\r\n  //     enableSorting: false,\r\n  //     enableHiding: false,\r\n  //     visible: false,\r\n  //   };\r\n  //   return [idColumn, ...columns];\r\n  // }, [columns]);\r\n\r\n  const initialLayout = useMemo(() => {\r\n    const defaultLayout = columns.map((column) => ({\r\n      id: String(column.id),\r\n      label: column.header as string,\r\n      visibility: column.visible !== undefined ? column.visible : true,\r\n      options: column.options ?? [],\r\n      type: column.type ?? undefined,\r\n    }));\r\n\r\n    const saved = loadLayoutFromStorage(columnIds);\r\n    if (!saved) return defaultLayout;\r\n\r\n    // Merge saved layout with default layout\r\n    const savedById = new Map<string, { order: number; visibility: boolean }>();\r\n    saved.order.forEach((id, index) => {\r\n      savedById.set(id, { order: index, visibility: saved.visibility[id] ?? true });\r\n    });\r\n\r\n    const merged: ColumnItem[] = [];\r\n    const processedIds = new Set<string>();\r\n\r\n    // Add columns in saved order\r\n    saved.order.forEach((id) => {\r\n      const defaultCol = defaultLayout.find((col) => col.id === id);\r\n      if (defaultCol) {\r\n        merged.push({\r\n          ...defaultCol,\r\n          visibility: saved.visibility[id] ?? defaultCol.visibility,\r\n        });\r\n        processedIds.add(id);\r\n      }\r\n    });\r\n\r\n    // Add any new columns that weren't in saved layout\r\n    defaultLayout.forEach((col) => {\r\n      if (!processedIds.has(col.id)) {\r\n        merged.push(col);\r\n      }\r\n    });\r\n\r\n    return merged;\r\n  }, [columns, columnIds]);\r\n\r\n  const [layout, setLayout] = useState<ColumnItem[]>(initialLayout);\r\n\r\n  // Sync layout when columns change\r\n  useEffect(() => {\r\n    setLayout(initialLayout);\r\n  }, [initialLayout]);\r\n\r\n  // Save to localStorage whenever layout changes\r\n  useEffect(() => {\r\n    const order = layout.map((col) => col.id);\r\n    const visibility = Object.fromEntries(layout.map((col) => [col.id, col.visibility]));\r\n    saveLayoutToStorage(columnIds, order, visibility);\r\n  }, [layout, columnIds]);\r\n\r\n  const columnOrder = useMemo(() => layout.map((column) => column.id), [layout]);\r\n  const columnVisibility = useMemo(\r\n    () => Object.fromEntries(layout.map((column) => [column.id, column.visibility])),\r\n    [layout]\r\n  );\r\n\r\n  const {\r\n    limit = 10,\r\n    page = 1,\r\n    sorting,\r\n    setSorting,\r\n    setPagination,\r\n    pagination,\r\n    rowSelection,\r\n    setRowSelection,\r\n    setFilters,\r\n    filters,\r\n    grouping,\r\n    setGrouping,\r\n  } = tableProps;\r\n\r\n  const isGrouped = grouping.length > 0;\r\n  const [expanded, setExpanded] = useState<ExpandedState>({});\r\n\r\n  // Redirect back if we're on an empty page (past the last page)\r\n  useEffect(() => {\r\n    if (!isGrouped && data.length === 0 && page > 1 && total !== undefined) {\r\n      setPagination?.({ pageIndex: page - 2, pageSize: limit });\r\n    }\r\n  }, [data.length, page, limit, total, setPagination, isGrouped]);\r\n\r\n  // When grouped, TanStack handles pagination client-side; otherwise use server total\r\n  const serverPageCount =\r\n    total !== undefined\r\n      ? Math.ceil(total / limit) || 1\r\n      : data.length === limit\r\n        ? page + 1\r\n        : Math.max(page, Math.ceil(data.length / limit));\r\n\r\n  const table = useReactTable({\r\n    data,\r\n    columns,\r\n    getRowId: (row) => String((row as { id: string | number }).id),\r\n    manualSorting: true,\r\n    manualPagination: !isGrouped,\r\n    state: { pagination, sorting, rowSelection, columnOrder, columnVisibility, grouping, expanded },\r\n    ...(isGrouped ? {} : { pageCount: serverPageCount }),\r\n    manualFiltering: true,\r\n    enableGrouping: true,\r\n    groupedColumnMode: false,\r\n    autoResetExpanded: false,\r\n    onSortingChange: setSorting,\r\n    onPaginationChange: setPagination,\r\n    onRowSelectionChange: setRowSelection,\r\n    onGroupingChange: setGrouping,\r\n    onExpandedChange: setExpanded,\r\n    getCoreRowModel: getCoreRowModel(),\r\n    getGroupedRowModel: getGroupedRowModel(),\r\n    getExpandedRowModel: getExpandedRowModel(),\r\n    getPaginationRowModel: getPaginationRowModel(),\r\n    onColumnOrderChange: (updater) => {\r\n      setLayout((prev) =>\r\n        applyOrder(prev, typeof updater === \"function\" ? updater(prev.map((i) => i.id)) : updater)\r\n      );\r\n    },\r\n    onColumnVisibilityChange: (updater) => {\r\n      setLayout((prev) =>\r\n        applyVisibility(\r\n          prev,\r\n          typeof updater === \"function\"\r\n            ? updater(Object.fromEntries(prev.map((i) => [i.id, i.visibility])))\r\n            : updater\r\n        )\r\n      );\r\n    },\r\n  }) as ReactTable<T>;\r\n\r\n  const onChangeOrder = (order: ColumnOrderState) => {\r\n    setLayout((prev) => applyOrder(prev, order));\r\n  };\r\n  const onChangeVisibility = (visibility: VisibilityState) => {\r\n    setLayout((prev) => applyVisibility(prev, visibility));\r\n  };\r\n\r\n  const onFiltersChange = (filters: QueryFilters) => {\r\n    setFilters?.(filters);\r\n  };\r\n\r\n  const filterableColumns = useMemo(() => {\r\n    const baseColumns = columns\r\n      .filter((column) => Boolean(column.type))\r\n      .map((column) => ({\r\n        id: String(column.id),\r\n        label: String(column.header),\r\n        type: column.type,\r\n        options: column.options ?? [],\r\n        endColumnId: column.endColumnId,\r\n        periodStartColumnId: null,\r\n        periodEndColumnId: null,\r\n      }));\r\n\r\n    // Add Period pseudo-columns for date columns with endColumnId\r\n    const periodColumns = columns\r\n      .filter((column) => column.type === \"date\" && column.endColumnId)\r\n      .map((column) => ({\r\n        id: `${String(column.id)}__period`,\r\n        label: \"Period\",\r\n        type: \"date\" as ColumnDataType,\r\n        options: [],\r\n        endColumnId: null,\r\n        periodStartColumnId: String(column.id),\r\n        periodEndColumnId: column.endColumnId,\r\n      }));\r\n\r\n    return [...baseColumns, ...periodColumns];\r\n  }, [columns]);\r\n\r\n  const groupableColumns = useMemo(\r\n    () =>\r\n      columns\r\n        .filter((col) => col.groupable)\r\n        .map((col) => ({ id: String(col.id), label: String(col.header) })),\r\n    [columns]\r\n  );\r\n\r\n  const hasGrouping = grouping.length > 0;\r\n\r\n  const [isFiltersOpen, setIsFiltersOpen] = useState(false);\r\n  const [isColumnsOpen, setIsColumnsOpen] = useState(false);\r\n  const [isGroupByOpen, setIsGroupByOpen] = useState(false);\r\n\r\n  return (\r\n    <>\r\n      <div className=\"flex w-full items-center gap-2 justify-end\">\r\n        <Popover\r\n          placement=\"bottom\"\r\n          isOpen={isFiltersOpen}\r\n          onOpenChange={setIsFiltersOpen}\r\n          portalContainer={document.body}\r\n        >\r\n          <PopoverTrigger>\r\n            <Button variant=\"outline\" size=\"sm\">\r\n              <div className=\"flex items-center gap-2\">\r\n                Filters\r\n                <ChevronDown className=\"h-4 w-4\" />\r\n              </div>\r\n            </Button>\r\n          </PopoverTrigger>\r\n          <PopoverContent>\r\n            <TableFiltering\r\n              columns={filterableColumns}\r\n              onFiltersChange={onFiltersChange}\r\n              filters={filters ?? []}\r\n              onClose={() => setIsFiltersOpen(false)}\r\n              singleFilter={singleFilter}\r\n              filterMethods={filterMethods}\r\n            />\r\n          </PopoverContent>\r\n        </Popover>\r\n        {groupableColumns.length > 0 && (\r\n          <Popover\r\n            placement=\"bottom\"\r\n            isOpen={isGroupByOpen}\r\n            onOpenChange={setIsGroupByOpen}\r\n            portalContainer={document.body}\r\n          >\r\n            <PopoverTrigger>\r\n              <Button variant={hasGrouping ? \"secondary\" : \"outline\"} size=\"sm\">\r\n                <div className=\"flex items-center gap-2\">\r\n                  {hasGrouping\r\n                    ? `Grouped by: ${grouping.map((id) => groupableColumns.find((c) => c.id === id)?.label ?? id).join(\" → \")}`\r\n                    : \"Group by\"}\r\n                  <ChevronDown className=\"h-4 w-4\" />\r\n                </div>\r\n              </Button>\r\n            </PopoverTrigger>\r\n            <PopoverContent>\r\n              <TableGroupBy\r\n                columns={groupableColumns}\r\n                activeGrouping={grouping}\r\n                onGroupingChange={(columnIds) => {\r\n                  setGrouping(columnIds);\r\n                  setExpanded({});\r\n                  setPagination?.({ pageIndex: 0, pageSize: limit });\r\n                }}\r\n                onClose={() => setIsGroupByOpen(false)}\r\n              />\r\n            </PopoverContent>\r\n          </Popover>\r\n        )}\r\n        <Popover\r\n          placement=\"bottom\"\r\n          isOpen={isColumnsOpen}\r\n          onOpenChange={setIsColumnsOpen}\r\n          portalContainer={document.body}\r\n        >\r\n          <PopoverTrigger>\r\n            <Button variant=\"outline\" size=\"sm\">\r\n              <div className=\"flex items-center gap-2\">\r\n                Columns\r\n                <ChevronDown className=\"h-4 w-4\" />\r\n              </div>\r\n            </Button>\r\n          </PopoverTrigger>\r\n          <PopoverContent>\r\n            <ColumnOrderAndVisibility\r\n              layout={layout}\r\n              onChangeOrder={onChangeOrder}\r\n              onChangeVisibility={onChangeVisibility}\r\n              onClose={() => setIsColumnsOpen(false)}\r\n            />\r\n          </PopoverContent>\r\n        </Popover>\r\n      </div>\r\n      <Table>\r\n        <TableHeader>\r\n          <TableRow>\r\n            <TableHead>\r\n              <Checkbox\r\n                isSelected={table.getIsAllRowsSelected()}\r\n                onValueChange={(checked) => {\r\n                  table.toggleAllRowsSelected(checked);\r\n                }}\r\n              />\r\n            </TableHead>\r\n            {table.getHeaderGroups()[0].headers.map((header) => (\r\n              <TableHead\r\n                onClick={\r\n                  header.column.getCanSort() ? header.column.getToggleSortingHandler() : undefined\r\n                }\r\n                key={header.id}\r\n              >\r\n                {flexRender(header.column.columnDef.header, header.getContext())}\r\n                {header.column.getCanSort() && (\r\n                  <>\r\n                    {header.column.getIsSorted() === \"asc\" && (\r\n                      <ChevronUp className=\"h-4 w-4 inline ml-1\" />\r\n                    )}\r\n                    {header.column.getIsSorted() === \"desc\" && (\r\n                      <ChevronDown className=\"h-4 w-4 inline ml-1\" />\r\n                    )}\r\n                  </>\r\n                )}\r\n              </TableHead>\r\n            ))}\r\n          </TableRow>\r\n        </TableHeader>\r\n        <TableBody>\r\n          {table.getRowModel().rows.map((row) => {\r\n            if (row.getIsGrouped()) {\r\n              return (\r\n                <TableRow\r\n                  key={row.id}\r\n                  className=\"bg-muted/40 font-medium cursor-pointer hover:bg-muted/60\"\r\n                  onClick={() => row.toggleExpanded()}\r\n                >\r\n                  <TableCell />\r\n                  {row.getVisibleCells().map((cell) => {\r\n                    if (cell.getIsGrouped()) {\r\n                      return (\r\n                        <TableCell key={cell.id}>\r\n                          <span className=\"flex items-center gap-1.5\">\r\n                            {row.getIsExpanded() ? (\r\n                              <ChevronDown className=\"h-4 w-4 shrink-0\" />\r\n                            ) : (\r\n                              <ChevronRight className=\"h-4 w-4 shrink-0\" />\r\n                            )}\r\n                            {flexRender(cell.column.columnDef.cell, cell.getContext())}\r\n                            <span className=\"text-muted-foreground font-normal ml-1\">\r\n                              ({row.subRows.length})\r\n                            </span>\r\n                          </span>\r\n                        </TableCell>\r\n                      );\r\n                    }\r\n                    if (cell.getIsAggregated()) {\r\n                      return (\r\n                        <TableCell key={cell.id}>\r\n                          {flexRender(\r\n                            cell.column.columnDef.aggregatedCell ?? cell.column.columnDef.cell,\r\n                            cell.getContext()\r\n                          )}\r\n                        </TableCell>\r\n                      );\r\n                    }\r\n                    return <TableCell key={cell.id} />;\r\n                  })}\r\n                </TableRow>\r\n              );\r\n            }\r\n\r\n            return (\r\n              <TableRow key={row.id}>\r\n                <TableCell>\r\n                  <Checkbox\r\n                    isSelected={row.getIsSelected()}\r\n                    onValueChange={(checked) => {\r\n                      row.toggleSelected(checked);\r\n                    }}\r\n                  />\r\n                </TableCell>\r\n                {row.getVisibleCells().map((cell) => (\r\n                  <TableCell key={cell.id}>\r\n                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\r\n                  </TableCell>\r\n                ))}\r\n              </TableRow>\r\n            );\r\n          })}\r\n        </TableBody>\r\n      </Table>\r\n      <TablePagination\r\n        pageCount={\r\n          isGrouped\r\n            ? Math.ceil(table.getPrePaginationRowModel().rows.length / limit) || 1\r\n            : serverPageCount\r\n        }\r\n        page={isGrouped ? table.getState().pagination.pageIndex + 1 : page}\r\n        limit={limit}\r\n        setPagination={setPagination}\r\n      />\r\n    </>\r\n  );\r\n};\r\n"],"mappings":"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"}