@m5kdev/web-ui 0.8.6 → 0.8.8

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

@@ -0,0 +1,345 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../../../_virtual/_rolldown/runtime.js");
+const require_src_components_ui_button = require("../../../components/ui/button.js");
+const require_src_components_ui_table = require("../../../components/ui/table.js");
+const require_src_modules_table_components_ColumnOrderAndVisibility = require("./ColumnOrderAndVisibility.js");
+const require_src_modules_table_components_TableFiltering = require("./TableFiltering.js");
+const require_src_modules_table_components_TableGroupBy = require("./TableGroupBy.js");
+const require_src_modules_table_components_TablePagination = require("./TablePagination.js");
+let react = require("react");
+let _heroui_react = require("@heroui/react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
+let _tanstack_react_table = require("@tanstack/react-table");
+//#region src/modules/table/components/NuqsTable.tsx
+function getStorageKey(columnIds) {
+	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;
+		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 {}
+}
+function applyOrder(prev, nextOrder) {
+	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
+	}));
+}
+const NuqsTable = ({ data, total, columns, tableProps, showGlobalSearch = false, singleFilter = false, filterMethods }) => {
+	const columnIds = (0, react.useMemo)(() => columns.map((col) => String(col.id)), [columns]);
+	const initialLayout = (0, react.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] = (0, react.useState)(initialLayout);
+	(0, react.useEffect)(() => {
+		setLayout(initialLayout);
+	}, [initialLayout]);
+	(0, react.useEffect)(() => {
+		saveLayoutToStorage(columnIds, layout.map((col) => col.id), Object.fromEntries(layout.map((col) => [col.id, col.visibility])));
+	}, [layout, columnIds]);
+	const columnOrder = (0, react.useMemo)(() => layout.map((column) => column.id), [layout]);
+	const columnVisibility = (0, react.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, q, setQ } = tableProps;
+	const skipFirstGlobalSearchPageReset = (0, react.useRef)(true);
+	(0, react.useEffect)(() => {
+		if (!showGlobalSearch) return;
+		if (skipFirstGlobalSearchPageReset.current) {
+			skipFirstGlobalSearchPageReset.current = false;
+			return;
+		}
+		setPagination?.({
+			pageIndex: 0,
+			pageSize: limit
+		});
+	}, [
+		showGlobalSearch,
+		q,
+		limit,
+		setPagination
+	]);
+	const isGrouped = grouping.length > 0;
+	const [expanded, setExpanded] = (0, react.useState)({});
+	(0, react.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 = (0, _tanstack_react_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: (0, _tanstack_react_table.getCoreRowModel)(),
+		getGroupedRowModel: (0, _tanstack_react_table.getGroupedRowModel)(),
+		getExpandedRowModel: (0, _tanstack_react_table.getExpandedRowModel)(),
+		getPaginationRowModel: (0, _tanstack_react_table.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 = (0, react.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 = (0, react.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] = (0, react.useState)(false);
+	const [isColumnsOpen, setIsColumnsOpen] = (0, react.useState)(false);
+	const [isGroupByOpen, setIsGroupByOpen] = (0, react.useState)(false);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex w-full flex-wrap items-center justify-between gap-2",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex min-w-0 flex-1 items-center",
+				children: showGlobalSearch ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_react.Input, {
+					size: "sm",
+					className: "max-w-xs",
+					placeholder: "Search…",
+					value: q ?? "",
+					onValueChange: (v) => {
+						setQ?.(v === "" ? null : v);
+					},
+					startContent: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Search, {
+						className: "h-4 w-4 shrink-0 text-default-400",
+						"aria-hidden": true
+					}),
+					"aria-label": "Search table"
+				}) : null
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex shrink-0 items-center gap-2",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_heroui_react.Popover, {
+						placement: "bottom",
+						isOpen: isFiltersOpen,
+						onOpenChange: setIsFiltersOpen,
+						portalContainer: document.body,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_react.PopoverTrigger, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src_components_ui_button.Button, {
+							variant: "outline",
+							size: "sm",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "flex items-center gap-2",
+								children: ["Filters", /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, { className: "h-4 w-4" })]
+							})
+						}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_react.PopoverContent, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src_modules_table_components_TableFiltering.TableFiltering, {
+							columns: filterableColumns,
+							onFiltersChange,
+							filters: filters ?? [],
+							onClose: () => setIsFiltersOpen(false),
+							singleFilter,
+							filterMethods
+						}) })]
+					}),
+					groupableColumns.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_heroui_react.Popover, {
+						placement: "bottom",
+						isOpen: isGroupByOpen,
+						onOpenChange: setIsGroupByOpen,
+						portalContainer: document.body,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_react.PopoverTrigger, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src_components_ui_button.Button, {
+							variant: hasGrouping ? "secondary" : "outline",
+							size: "sm",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, { className: "h-4 w-4" })]
+							})
+						}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_react.PopoverContent, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src_modules_table_components_TableGroupBy.TableGroupBy, {
+							columns: groupableColumns,
+							activeGrouping: grouping,
+							onGroupingChange: (columnIds) => {
+								setGrouping(columnIds);
+								setExpanded({});
+								setPagination?.({
+									pageIndex: 0,
+									pageSize: limit
+								});
+							},
+							onClose: () => setIsGroupByOpen(false)
+						}) })]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_heroui_react.Popover, {
+						placement: "bottom",
+						isOpen: isColumnsOpen,
+						onOpenChange: setIsColumnsOpen,
+						portalContainer: document.body,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_react.PopoverTrigger, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src_components_ui_button.Button, {
+							variant: "outline",
+							size: "sm",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "flex items-center gap-2",
+								children: ["Columns", /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, { className: "h-4 w-4" })]
+							})
+						}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_react.PopoverContent, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src_modules_table_components_ColumnOrderAndVisibility.ColumnOrderAndVisibility, {
+							layout,
+							onChangeOrder,
+							onChangeVisibility,
+							onClose: () => setIsColumnsOpen(false)
+						}) })]
+					})
+				]
+			})]
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src_components_ui_table.Table, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src_components_ui_table.TableHeader, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src_components_ui_table.TableRow, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src_components_ui_table.TableHead, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_react.Checkbox, {
+			isSelected: table.getIsAllRowsSelected(),
+			onValueChange: (checked) => {
+				table.toggleAllRowsSelected(checked);
+			}
+		}) }), table.getHeaderGroups()[0].headers.map((header) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src_components_ui_table.TableHead, {
+			onClick: header.column.getCanSort() ? header.column.getToggleSortingHandler() : void 0,
+			children: [(0, _tanstack_react_table.flexRender)(header.column.columnDef.header, header.getContext()), header.column.getCanSort() && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [header.column.getIsSorted() === "asc" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronUp, { className: "h-4 w-4 inline ml-1" }), header.column.getIsSorted() === "desc" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, { className: "h-4 w-4 inline ml-1" })] })]
+		}, header.id))] }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src_components_ui_table.TableBody, { children: table.getRowModel().rows.map((row) => {
+			if (row.getIsGrouped()) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src_components_ui_table.TableRow, {
+				className: "bg-muted/40 font-medium cursor-pointer hover:bg-muted/60",
+				onClick: () => row.toggleExpanded(),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src_components_ui_table.TableCell, {}), row.getVisibleCells().map((cell) => {
+					if (cell.getIsGrouped()) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src_components_ui_table.TableCell, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "flex items-center gap-1.5",
+						children: [
+							row.getIsExpanded() ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronDown, { className: "h-4 w-4 shrink-0" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, { className: "h-4 w-4 shrink-0" }),
+							(0, _tanstack_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: "text-muted-foreground font-normal ml-1",
+								children: [
+									"(",
+									row.subRows.length,
+									")"
+								]
+							})
+						]
+					}) }, cell.id);
+					if (cell.getIsAggregated()) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src_components_ui_table.TableCell, { children: (0, _tanstack_react_table.flexRender)(cell.column.columnDef.aggregatedCell ?? cell.column.columnDef.cell, cell.getContext()) }, cell.id);
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src_components_ui_table.TableCell, {}, cell.id);
+				})]
+			}, row.id);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_src_components_ui_table.TableRow, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src_components_ui_table.TableCell, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_react.Checkbox, {
+				isSelected: row.getIsSelected(),
+				onValueChange: (checked) => {
+					row.toggleSelected(checked);
+				}
+			}) }), row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src_components_ui_table.TableCell, { children: (0, _tanstack_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()) }, cell.id))] }, row.id);
+		}) })] }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_src_modules_table_components_TablePagination.TablePagination, {
+			pageCount: isGrouped ? Math.ceil(table.getPrePaginationRowModel().rows.length / limit) || 1 : serverPageCount,
+			page: isGrouped ? table.getState().pagination.pageIndex + 1 : page,
+			limit,
+			setPagination
+		})
+	] });
+};
+//#endregion
+exports.NuqsTable = NuqsTable;
+
+//# sourceMappingURL=NuqsTable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NuqsTable.js","names":["Input","Search","Popover","PopoverTrigger","Button","ChevronDown","PopoverContent","TableFiltering","TableGroupBy","ColumnOrderAndVisibility","Table","TableHeader","TableRow","TableHead","Checkbox","ChevronUp","TableBody","TableCell","ChevronRight","TablePagination"],"sources":["../../../../../src/modules/table/components/NuqsTable.tsx"],"sourcesContent":["import { Checkbox, Input, 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, Search } from \"lucide-react\";\r\nimport { useEffect, useMemo, useRef, 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  /** When true, shows URL-synced global search; enable only if the list API applies `q` server-side. */\r\n  showGlobalSearch?: boolean;\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  showGlobalSearch = false,\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  // 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    q,\r\n    setQ,\r\n  } = tableProps;\r\n\r\n  const skipFirstGlobalSearchPageReset = useRef(true);\r\n  // biome-ignore lint/correctness/useExhaustiveDependencies: reset page when `q` changes (incl. back/forward)\r\n  useEffect(() => {\r\n    if (!showGlobalSearch) return;\r\n    if (skipFirstGlobalSearchPageReset.current) {\r\n      skipFirstGlobalSearchPageReset.current = false;\r\n      return;\r\n    }\r\n    setPagination?.({ pageIndex: 0, pageSize: limit });\r\n  }, [showGlobalSearch, q, limit, setPagination]);\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 flex-wrap items-center justify-between gap-2\">\r\n        <div className=\"flex min-w-0 flex-1 items-center\">\r\n          {showGlobalSearch ? (\r\n            <Input\r\n              size=\"sm\"\r\n              className=\"max-w-xs\"\r\n              placeholder=\"Search…\"\r\n              value={q ?? \"\"}\r\n              onValueChange={(v) => {\r\n                setQ?.(v === \"\" ? null : v);\r\n              }}\r\n              startContent={<Search className=\"h-4 w-4 shrink-0 text-default-400\" aria-hidden />}\r\n              aria-label=\"Search table\"\r\n            />\r\n          ) : null}\r\n        </div>\r\n        <div className=\"flex shrink-0 items-center gap-2\">\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      </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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"}

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

@@ -4,10 +4,10 @@ import { ColumnOrderAndVisibility } from "./ColumnOrderAndVisibility.mjs";
 import { TableFiltering } from "./TableFiltering.mjs";
 import { TableGroupBy } from "./TableGroupBy.mjs";
 import { TablePagination } from "./TablePagination.mjs";
-import { useEffect, useMemo, useState } from "react";
-import { Checkbox, Popover, PopoverContent, PopoverTrigger } from "@heroui/react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Checkbox, Input, Popover, PopoverContent, PopoverTrigger } from "@heroui/react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { ChevronDown, ChevronRight, ChevronUp } from "lucide-react";
+import { ChevronDown, ChevronRight, ChevronUp, Search } from "lucide-react";
 import { flexRender, getCoreRowModel, getExpandedRowModel, getGroupedRowModel, getPaginationRowModel, useReactTable } from "@tanstack/react-table";
 //#region src/modules/table/components/NuqsTable.tsx
 function getStorageKey(columnIds) {
@@ -46,9 +46,8 @@ function applyVisibility(prev, visibility) {
 		visibility: visibility[String(column.id)] ?? column.visibility
 	}));
 }
-const NuqsTable = ({ data, total, columns, tableProps, singleFilter = false, filterMethods }) => {
+const NuqsTable = ({ data, total, columns, tableProps, showGlobalSearch = false, 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),
@@ -92,7 +91,24 @@ const NuqsTable = ({ data, total, columns, tableProps, singleFilter = false, fil
 	}, [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 { limit = 10, page = 1, sorting, setSorting, setPagination, pagination, rowSelection, setRowSelection, setFilters, filters, grouping, setGrouping, q, setQ } = tableProps;
+	const skipFirstGlobalSearchPageReset = useRef(true);
+	useEffect(() => {
+		if (!showGlobalSearch) return;
+		if (skipFirstGlobalSearchPageReset.current) {
+			skipFirstGlobalSearchPageReset.current = false;
+			return;
+		}
+		setPagination?.({
+			pageIndex: 0,
+			pageSize: limit
+		});
+	}, [
+		showGlobalSearch,
+		q,
+		limit,
+		setPagination
+	]);
 	const isGrouped = grouping.length > 0;
 	const [expanded, setExpanded] = useState({});
 	useEffect(() => {
@@ -185,75 +201,94 @@ const NuqsTable = ({ data, total, columns, tableProps, singleFilter = false, fil
 	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)
-					}) })]
-				})
-			]
+			className: "flex w-full flex-wrap items-center justify-between gap-2",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "flex min-w-0 flex-1 items-center",
+				children: showGlobalSearch ? /* @__PURE__ */ jsx(Input, {
+					size: "sm",
+					className: "max-w-xs",
+					placeholder: "Search…",
+					value: q ?? "",
+					onValueChange: (v) => {
+						setQ?.(v === "" ? null : v);
+					},
+					startContent: /* @__PURE__ */ jsx(Search, {
+						className: "h-4 w-4 shrink-0 text-default-400",
+						"aria-hidden": true
+					}),
+					"aria-label": "Search table"
+				}) : null
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex shrink-0 items-center gap-2",
+				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(),