@cerberus-design/data-grid 1.5.0-next-67466c4 → 1.5.0-next-727d6b2

package/dist/components/data-grid.client.cjs

@@ -3,8 +3,8 @@
 const require_const = require("../const.cjs");
 const require_context_client = require("../context.client.cjs");
 const require_store = require("../store.cjs");
+const require_popover_client = require("../ui/popover.client.cjs");
 const require_pagination_client = require("./pagination.client.cjs");
-const require_popover_client = require("./popover.client.cjs");
 const require_viewport_client = require("./viewport.client.cjs");
 let _cerberus_design_react = require("@cerberus-design/react");
 let _cerberus_design_signals = require("@cerberus-design/signals");
@@ -62,7 +62,7 @@ function DataGridEl(props) {
 					children: props.toolbar
 				})
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_popover_client.DGPopover, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_popover_client.DGPopoverAnchor, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(styled_system_jsx.Stack, {
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_popover_client.Popover, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_popover_client.PopoverAnchor, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(styled_system_jsx.Stack, {
 				"data-scope": require_const.SCOPE,
 				"data-part": require_const.PARTS.ROOT,
 				dir: "columns",

package/dist/components/data-grid.client.js

@@ -3,8 +3,8 @@
 import { PARTS, SCOPE } from "../const.js";
 import { DataGridProvider } from "../context.client.js";
 import { createGridStore } from "../store.js";
+import { Popover, PopoverAnchor } from "../ui/popover.client.js";
 import { GridPagination } from "./pagination.client.js";
-import { DGPopover, DGPopoverAnchor } from "./popover.client.js";
 import { GridViewport } from "./viewport.client.js";
 import { Show } from "@cerberus-design/react";
 import { createEffect, useSignal, useStore } from "@cerberus-design/signals";
@@ -62,7 +62,7 @@ function DataGridEl(props) {
 					children: props.toolbar
 				})
 			}),
-			/* @__PURE__ */ jsx(DGPopover, { children: /* @__PURE__ */ jsx(DGPopoverAnchor, { children: /* @__PURE__ */ jsxs(Stack, {
+			/* @__PURE__ */ jsx(Popover, { children: /* @__PURE__ */ jsx(PopoverAnchor, { children: /* @__PURE__ */ jsxs(Stack, {
 				"data-scope": SCOPE,
 				"data-part": PARTS.ROOT,
 				dir: "columns",

package/dist/components/features.client.cjs

@@ -5,6 +5,7 @@ const require_context_client = require("../context.client.cjs");
 const require_filter_item_client = require("./filter-item.client.cjs");
 const require_pinned_items_client = require("./pinned-items.client.cjs");
 const require_sort_items_client = require("./sort-items.client.cjs");
+const require_visibile_items_client = require("./visibile-items.client.cjs");
 let _cerberus_design_react = require("@cerberus-design/react");
 let _cerberus_design_signals = require("@cerberus-design/signals");
 let react = require("react");
@@ -13,6 +14,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 function HeaderCellOptions(props) {
 	const store = require_context_client.useDataGridContext();
 	const sorting = (0, _cerberus_design_signals.useRead)(store.sorting);
+	const hiddenColsMaxReached = (0, _cerberus_design_signals.useRead)(store.hiddenColsMaxReached);
 	const { icons } = (0, _cerberus_design_react.useCerberusContext)();
 	const MoreOptionsIcon = icons.moreVertical;
 	const sortedVal = (0, react.useMemo)(() => {
@@ -20,6 +22,22 @@ function HeaderCellOptions(props) {
 		if (idx === -1) return void 0;
 		return sorting[idx];
 	}, [sorting, props.id]);
+	const featureList = (0, react.useMemo)(() => {
+		return [
+			Number(props.sortable),
+			Number(props.pinnable),
+			Number(props.filterable),
+			Number(props.visibility)
+		];
+	}, [
+		props.sortable,
+		props.pinnable,
+		props.filterable,
+		props.visibility
+	]);
+	function hasParentFeatureOn(idx) {
+		return featureList.slice(0, idx).some((val) => val === 1);
+	}
 	function handleSelect(details) {
 		const val = details.value;
 		const specialVal = val.split("_");
@@ -33,18 +51,24 @@ function HeaderCellOptions(props) {
 				editing: null
 			}));
 			case require_const.FEATURE_VALUES.unsort: return store.setSort(props.id, null);
+			case require_const.FEATURE_VALUES.manageVisibility: return store.setShowManage(true);
 			default: break;
 		}
 		switch (category) {
 			case require_const.FEATURE_VALUES.pin: return store.togglePinned(props.id, action);
 			case require_const.FEATURE_VALUES.unpin: return store.togglePinned(props.id, false);
 			case require_const.FEATURE_VALUES.sort: return store.setSort(props.id, action ?? null);
+			case require_const.FEATURE_VALUES.hide: return handleHide();
 			default: console.error("Unhandled action:", {
 				details,
 				action
 			});
 		}
 	}
+	function handleHide() {
+		if (hiddenColsMaxReached) return;
+		props.setVisible(false);
+	}
 	function handleInitFilter() {
 		store.setColFilter((prev) => ({
 			...prev,
@@ -59,9 +83,8 @@ function HeaderCellOptions(props) {
 				}
 			}
 		}));
-		return store.setShowColFilter(true);
 	}
-	if (!props.sortable && !props.pinnable && !props.filterable) return null;
+	if (featureList.every((val) => val === 0)) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_cerberus_design_react.Menu, {
 		onSelect: handleSelect,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.MenuTrigger, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.IconButton, {
@@ -75,23 +98,40 @@ function HeaderCellOptions(props) {
 			transitionDuration: "fast",
 			_groupHover: { opacity: 1 },
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MoreOptionsIcon, {})
-		}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_cerberus_design_react.MenuContent, { children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Show, {
-				when: props.sortable,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_sort_items_client.MatchSortItems, { sorting: sortedVal })
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_cerberus_design_react.Show, {
-				when: props.pinnable,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Show, {
+		}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_cerberus_design_react.MenuContent, {
+			maxH: "initial",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Show, {
 					when: props.sortable,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.MenuSeparator, {})
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pinned_items_client.MatchPinnedItems, { pinned: props.pinned })]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_cerberus_design_react.Show, {
-				when: props.filterable,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.MenuSeparator, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_filter_item_client.FilterMenuItem, { colId: props.id })]
-			})
-		] })]
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_sort_items_client.MatchSortItems, { sorting: sortedVal })
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_cerberus_design_react.Show, {
+					when: props.pinnable,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Show, {
+						when: hasParentFeatureOn(1),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.MenuSeparator, {})
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pinned_items_client.MatchPinnedItems, { pinned: props.pinned })]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_cerberus_design_react.Show, {
+					when: props.filterable,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Show, {
+						when: hasParentFeatureOn(2),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.MenuSeparator, {})
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_filter_item_client.FilterMenuItem, { colId: props.id })]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_cerberus_design_react.Show, {
+					when: props.visibility,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Show, {
+						when: hasParentFeatureOn(3),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.MenuSeparator, {})
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_visibile_items_client.MatchVisibleItems, {
+						colId: props.id,
+						isVisible: props.isVisible,
+						isLastVisibleCol: hiddenColsMaxReached
+					})]
+				})
+			]
+		}) })]
 	});
 }
 //#endregion

package/dist/components/features.client.js

@@ -5,7 +5,8 @@ import { useDataGridContext } from "../context.client.js";
 import { FilterMenuItem } from "./filter-item.client.js";
 import { MatchPinnedItems } from "./pinned-items.client.js";
 import { MatchSortItems } from "./sort-items.client.js";
-import { IconButton, Menu, MenuContent, MenuSeparator, MenuTrigger, Show, useCerberusContext } from "@cerberus-design/react";
+import { MatchVisibleItems } from "./visibile-items.client.js";
+import { IconButton, Menu, MenuContent, MenuSeparator, MenuTrigger, Portal, Show, useCerberusContext } from "@cerberus-design/react";
 import { useRead } from "@cerberus-design/signals";
 import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -13,6 +14,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 function HeaderCellOptions(props) {
 	const store = useDataGridContext();
 	const sorting = useRead(store.sorting);
+	const hiddenColsMaxReached = useRead(store.hiddenColsMaxReached);
 	const { icons } = useCerberusContext();
 	const MoreOptionsIcon = icons.moreVertical;
 	const sortedVal = useMemo(() => {
@@ -20,6 +22,22 @@ function HeaderCellOptions(props) {
 		if (idx === -1) return void 0;
 		return sorting[idx];
 	}, [sorting, props.id]);
+	const featureList = useMemo(() => {
+		return [
+			Number(props.sortable),
+			Number(props.pinnable),
+			Number(props.filterable),
+			Number(props.visibility)
+		];
+	}, [
+		props.sortable,
+		props.pinnable,
+		props.filterable,
+		props.visibility
+	]);
+	function hasParentFeatureOn(idx) {
+		return featureList.slice(0, idx).some((val) => val === 1);
+	}
 	function handleSelect(details) {
 		const val = details.value;
 		const specialVal = val.split("_");
@@ -33,18 +51,24 @@ function HeaderCellOptions(props) {
 				editing: null
 			}));
 			case FEATURE_VALUES.unsort: return store.setSort(props.id, null);
+			case FEATURE_VALUES.manageVisibility: return store.setShowManage(true);
 			default: break;
 		}
 		switch (category) {
 			case FEATURE_VALUES.pin: return store.togglePinned(props.id, action);
 			case FEATURE_VALUES.unpin: return store.togglePinned(props.id, false);
 			case FEATURE_VALUES.sort: return store.setSort(props.id, action ?? null);
+			case FEATURE_VALUES.hide: return handleHide();
 			default: console.error("Unhandled action:", {
 				details,
 				action
 			});
 		}
 	}
+	function handleHide() {
+		if (hiddenColsMaxReached) return;
+		props.setVisible(false);
+	}
 	function handleInitFilter() {
 		store.setColFilter((prev) => ({
 			...prev,
@@ -59,9 +83,8 @@ function HeaderCellOptions(props) {
 				}
 			}
 		}));
-		return store.setShowColFilter(true);
 	}
-	if (!props.sortable && !props.pinnable && !props.filterable) return null;
+	if (featureList.every((val) => val === 0)) return null;
 	return /* @__PURE__ */ jsxs(Menu, {
 		onSelect: handleSelect,
 		children: [/* @__PURE__ */ jsx(MenuTrigger, { children: /* @__PURE__ */ jsx(IconButton, {
@@ -75,23 +98,40 @@ function HeaderCellOptions(props) {
 			transitionDuration: "fast",
 			_groupHover: { opacity: 1 },
 			children: /* @__PURE__ */ jsx(MoreOptionsIcon, {})
-		}) }), /* @__PURE__ */ jsxs(MenuContent, { children: [
-			/* @__PURE__ */ jsx(Show, {
-				when: props.sortable,
-				children: /* @__PURE__ */ jsx(MatchSortItems, { sorting: sortedVal })
-			}),
-			/* @__PURE__ */ jsxs(Show, {
-				when: props.pinnable,
-				children: [/* @__PURE__ */ jsx(Show, {
+		}) }), /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs(MenuContent, {
+			maxH: "initial",
+			children: [
+				/* @__PURE__ */ jsx(Show, {
 					when: props.sortable,
-					children: /* @__PURE__ */ jsx(MenuSeparator, {})
-				}), /* @__PURE__ */ jsx(MatchPinnedItems, { pinned: props.pinned })]
-			}),
-			/* @__PURE__ */ jsxs(Show, {
-				when: props.filterable,
-				children: [/* @__PURE__ */ jsx(MenuSeparator, {}), /* @__PURE__ */ jsx(FilterMenuItem, { colId: props.id })]
-			})
-		] })]
+					children: /* @__PURE__ */ jsx(MatchSortItems, { sorting: sortedVal })
+				}),
+				/* @__PURE__ */ jsxs(Show, {
+					when: props.pinnable,
+					children: [/* @__PURE__ */ jsx(Show, {
+						when: hasParentFeatureOn(1),
+						children: /* @__PURE__ */ jsx(MenuSeparator, {})
+					}), /* @__PURE__ */ jsx(MatchPinnedItems, { pinned: props.pinned })]
+				}),
+				/* @__PURE__ */ jsxs(Show, {
+					when: props.filterable,
+					children: [/* @__PURE__ */ jsx(Show, {
+						when: hasParentFeatureOn(2),
+						children: /* @__PURE__ */ jsx(MenuSeparator, {})
+					}), /* @__PURE__ */ jsx(FilterMenuItem, { colId: props.id })]
+				}),
+				/* @__PURE__ */ jsxs(Show, {
+					when: props.visibility,
+					children: [/* @__PURE__ */ jsx(Show, {
+						when: hasParentFeatureOn(3),
+						children: /* @__PURE__ */ jsx(MenuSeparator, {})
+					}), /* @__PURE__ */ jsx(MatchVisibleItems, {
+						colId: props.id,
+						isVisible: props.isVisible,
+						isLastVisibleCol: hiddenColsMaxReached
+					})]
+				})
+			]
+		}) })]
 	});
 }
 //#endregion

package/dist/components/grid.client.cjs

@@ -14,6 +14,7 @@ var GridHeaderCell = (0, react.memo)(function GridHeaderCell(props) {
 	const { column } = props;
 	const store = require_context_client.useDataGridContext();
 	const { icons } = (0, _cerberus_design_react.useCerberusContext)();
+	const isVisible = (0, _cerberus_design_signals.useRead)(column.isVisible);
 	const pinnedVal = (0, _cerberus_design_signals.useRead)(column.pinned);
 	const sortingVal = (0, _cerberus_design_signals.useRead)(store.sorting);
 	const colFilters = (0, _cerberus_design_signals.useRead)(store.colFilters);
@@ -56,6 +57,7 @@ var GridHeaderCell = (0, react.memo)(function GridHeaderCell(props) {
 			store.setShowColFilter(true);
 		});
 	}
+	if (!isVisible) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(styled_system_jsx.HStack, {
 		role: "columnheader",
 		"data-scope": require_const.SCOPE,
@@ -160,10 +162,12 @@ var GridHeaderCell = (0, react.memo)(function GridHeaderCell(props) {
 var GridCell = (0, react.memo)(function GridCell(props) {
 	const { column, row } = props;
 	const value = column.getValue(row);
+	const isVisible = (0, _cerberus_design_signals.useRead)(column.isVisible);
 	const pinnedVal = (0, _cerberus_design_signals.useRead)(column.pinned);
 	const pinnedState = require_hooks_client.usePinnedState(pinnedVal);
 	const pinnedAttr = require_hooks_client.usePinnedAttribute(pinnedVal);
 	const style = require_hooks_client.useColumnStyles(column, pinnedVal);
+	if (!isVisible) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(styled_system_jsx.HStack, {
 		role: "cell",
 		"data-scope": require_const.SCOPE,
@@ -222,14 +226,11 @@ var GridRow = (0, react.memo)(function GridRow(props) {
 		offsetY: props.offsetY,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.For, {
 			each: columns,
-			children: (col) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Show, {
-				when: col.isVisible(),
-				children: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GridCell, {
-					row: props.row,
-					column: col,
-					hasSkeleton,
-					pending
-				})
+			children: (col) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GridCell, {
+				row: props.row,
+				column: col,
+				hasSkeleton,
+				pending
 			}, col.id)
 		})
 	});

package/dist/components/grid.client.d.cts

@@ -3,14 +3,14 @@ import { InternalColumn } from '../types';
 interface GridHeaderCellProps<TData> {
     column: InternalColumn<TData>;
 }
-export declare const GridHeaderCell: MemoExoticComponent<(<TData>(props: GridHeaderCellProps<TData>) => import("react").JSX.Element)>;
+export declare const GridHeaderCell: MemoExoticComponent<(<TData>(props: GridHeaderCellProps<TData>) => import("react").JSX.Element | null)>;
 interface GridCellProps<TData> {
     row: any;
     column: InternalColumn<TData>;
     pending: boolean;
     hasSkeleton: boolean;
 }
-export declare const GridCell: MemoExoticComponent<(<TData>(props: GridCellProps<TData>) => import("react").JSX.Element)>;
+export declare const GridCell: MemoExoticComponent<(<TData>(props: GridCellProps<TData>) => import("react").JSX.Element | null)>;
 interface GridRowProps {
     row: unknown;
     index: number;

package/dist/components/grid.client.d.ts

@@ -3,14 +3,14 @@ import { InternalColumn } from '../types';
 interface GridHeaderCellProps<TData> {
     column: InternalColumn<TData>;
 }
-export declare const GridHeaderCell: MemoExoticComponent<(<TData>(props: GridHeaderCellProps<TData>) => import("react").JSX.Element)>;
+export declare const GridHeaderCell: MemoExoticComponent<(<TData>(props: GridHeaderCellProps<TData>) => import("react").JSX.Element | null)>;
 interface GridCellProps<TData> {
     row: any;
     column: InternalColumn<TData>;
     pending: boolean;
     hasSkeleton: boolean;
 }
-export declare const GridCell: MemoExoticComponent<(<TData>(props: GridCellProps<TData>) => import("react").JSX.Element)>;
+export declare const GridCell: MemoExoticComponent<(<TData>(props: GridCellProps<TData>) => import("react").JSX.Element | null)>;
 interface GridRowProps {
     row: unknown;
     index: number;

package/dist/components/grid.client.js

@@ -14,6 +14,7 @@ var GridHeaderCell = memo(function GridHeaderCell(props) {
 	const { column } = props;
 	const store = useDataGridContext();
 	const { icons } = useCerberusContext();
+	const isVisible = useRead(column.isVisible);
 	const pinnedVal = useRead(column.pinned);
 	const sortingVal = useRead(store.sorting);
 	const colFilters = useRead(store.colFilters);
@@ -56,6 +57,7 @@ var GridHeaderCell = memo(function GridHeaderCell(props) {
 			store.setShowColFilter(true);
 		});
 	}
+	if (!isVisible) return null;
 	return /* @__PURE__ */ jsxs(HStack, {
 		role: "columnheader",
 		"data-scope": SCOPE,
@@ -160,10 +162,12 @@ var GridHeaderCell = memo(function GridHeaderCell(props) {
 var GridCell = memo(function GridCell(props) {
 	const { column, row } = props;
 	const value = column.getValue(row);
+	const isVisible = useRead(column.isVisible);
 	const pinnedVal = useRead(column.pinned);
 	const pinnedState = usePinnedState(pinnedVal);
 	const pinnedAttr = usePinnedAttribute(pinnedVal);
 	const style = useColumnStyles(column, pinnedVal);
+	if (!isVisible) return null;
 	return /* @__PURE__ */ jsxs(HStack, {
 		role: "cell",
 		"data-scope": SCOPE,
@@ -222,14 +226,11 @@ var GridRow = memo(function GridRow(props) {
 		offsetY: props.offsetY,
 		children: /* @__PURE__ */ jsx(For, {
 			each: columns,
-			children: (col) => /* @__PURE__ */ jsx(Show, {
-				when: col.isVisible(),
-				children: () => /* @__PURE__ */ jsx(GridCell, {
-					row: props.row,
-					column: col,
-					hasSkeleton,
-					pending
-				})
+			children: (col) => /* @__PURE__ */ jsx(GridCell, {
+				row: props.row,
+				column: col,
+				hasSkeleton,
+				pending
 			}, col.id)
 		})
 	});

package/dist/components/viewport.client.cjs

@@ -2,7 +2,8 @@
 "use client";
 const require_const = require("../const.cjs");
 const require_context_client = require("../context.client.cjs");
-const require_popover_client = require("./popover.client.cjs");
+const require_popover_client = require("../ui/popover.client.cjs");
+const require_no_columns_client = require("../layouts/no-columns.client.cjs");
 const require_virtualizer_client = require("../virtualizer.client.cjs");
 const require_grid_client = require("./grid.client.cjs");
 const require_overlays = require("./overlays.cjs");
@@ -18,6 +19,7 @@ var GridViewport = (0, react.memo)(function GridViewport(props) {
 	const columns = (0, _cerberus_design_signals.useRead)(store.columns);
 	const rowCount = (0, _cerberus_design_signals.useRead)(store.rowCount);
 	const staticRows = (0, _cerberus_design_signals.useRead)(store.rows);
+	const allColsHidden = (0, _cerberus_design_signals.useRead)(store.allColsHidden);
 	const pending = (0, _cerberus_design_signals.useRead)(store.pending);
 	const pendingVariant = (0, _cerberus_design_signals.useRead)(store.pendingVariant);
 	const shouldLock = (0, _cerberus_design_signals.createComputed)(() => rowCount <= 0);
@@ -26,6 +28,7 @@ var GridViewport = (0, react.memo)(function GridViewport(props) {
 		if (!overlays) return false;
 		return overlays?.pending !== "skeleton";
 	}, [props.overlays]);
+	if (allColsHidden) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_no_columns_client.NoColumnsLayout, {});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(styled_system_jsx.Scrollable, {
 		"data-scope": require_const.SCOPE,
 		"data-part": require_const.PARTS.VIEWPORT,
@@ -57,10 +60,7 @@ var GridViewport = (0, react.memo)(function GridViewport(props) {
 					w: "full",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.For, {
 						each: columns,
-						children: (col) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Show, {
-							when: col.isVisible(),
-							children: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_grid_client.GridHeaderCell, { column: col })
-						}, col.id)
+						children: (col) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VisibleHeaderCell, { column: col }, col.id)
 					})
 				})
 			}),
@@ -73,10 +73,16 @@ var GridViewport = (0, react.memo)(function GridViewport(props) {
 				when: pending,
 				children: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_overlays.PendingOverlay, { variant: pendingVariant })
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_popover_client.DGPopoverContent, { ref: props.rootRef })
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_popover_client.PopoverContent, { ref: props.rootRef })
 		]
 	});
 });
+function VisibleHeaderCell(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Show, {
+		when: (0, _cerberus_design_signals.useRead)(props.column.isVisible),
+		children: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_grid_client.GridHeaderCell, { column: props.column })
+	});
+}
 var TableRows = (0, react.memo)((props) => {
 	const store = require_context_client.useDataGridContext();
 	const { virtualRows, totalHeight } = require_virtualizer_client.useVirtualizer(store, props.viewportRef);

package/dist/components/viewport.client.js

@@ -2,7 +2,8 @@
 "use client";
 import { PARTS, SCOPE } from "../const.js";
 import { useDataGridContext } from "../context.client.js";
-import { DGPopoverContent } from "./popover.client.js";
+import { PopoverContent } from "../ui/popover.client.js";
+import { NoColumnsLayout } from "../layouts/no-columns.client.js";
 import { useVirtualizer } from "../virtualizer.client.js";
 import { GridHeaderCell, GridRow } from "./grid.client.js";
 import { NoContentOverlay, PendingOverlay } from "./overlays.js";
@@ -18,6 +19,7 @@ var GridViewport = memo(function GridViewport(props) {
 	const columns = useRead(store.columns);
 	const rowCount = useRead(store.rowCount);
 	const staticRows = useRead(store.rows);
+	const allColsHidden = useRead(store.allColsHidden);
 	const pending = useRead(store.pending);
 	const pendingVariant = useRead(store.pendingVariant);
 	const shouldLock = createComputed(() => rowCount <= 0);
@@ -26,6 +28,7 @@ var GridViewport = memo(function GridViewport(props) {
 		if (!overlays) return false;
 		return overlays?.pending !== "skeleton";
 	}, [props.overlays]);
+	if (allColsHidden) return /* @__PURE__ */ jsx(NoColumnsLayout, {});
 	return /* @__PURE__ */ jsxs(Scrollable, {
 		"data-scope": SCOPE,
 		"data-part": PARTS.VIEWPORT,
@@ -57,10 +60,7 @@ var GridViewport = memo(function GridViewport(props) {
 					w: "full",
 					children: /* @__PURE__ */ jsx(For, {
 						each: columns,
-						children: (col) => /* @__PURE__ */ jsx(Show, {
-							when: col.isVisible(),
-							children: () => /* @__PURE__ */ jsx(GridHeaderCell, { column: col })
-						}, col.id)
+						children: (col) => /* @__PURE__ */ jsx(VisibleHeaderCell, { column: col }, col.id)
 					})
 				})
 			}),
@@ -73,10 +73,16 @@ var GridViewport = memo(function GridViewport(props) {
 				when: pending,
 				children: () => /* @__PURE__ */ jsx(PendingOverlay, { variant: pendingVariant })
 			}),
-			/* @__PURE__ */ jsx(DGPopoverContent, { ref: props.rootRef })
+			/* @__PURE__ */ jsx(PopoverContent, { ref: props.rootRef })
 		]
 	});
 });
+function VisibleHeaderCell(props) {
+	return /* @__PURE__ */ jsx(Show, {
+		when: useRead(props.column.isVisible),
+		children: () => /* @__PURE__ */ jsx(GridHeaderCell, { column: props.column })
+	});
+}
 var TableRows = memo((props) => {
 	const store = useDataGridContext();
 	const { virtualRows, totalHeight } = useVirtualizer(store, props.viewportRef);

package/dist/components/visibile-items.client.cjs

@@ -0,0 +1,40 @@
+"use client";
+"use client";
+const require_const = require("../const.cjs");
+let _cerberus_design_react = require("@cerberus-design/react");
+let _cerberus_design_signals = require("@cerberus-design/signals");
+let styled_system_jsx = require("styled-system/jsx");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/visibile-items.client.tsx
+function MatchVisibleItems(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Show, {
+		when: (0, _cerberus_design_signals.useRead)(props.isVisible) && !props.isLastVisibleCol,
+		children: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HideItem, {})
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ManageCols, {})] });
+}
+function HideItem() {
+	const { icons } = (0, _cerberus_design_react.useCerberusContext)();
+	const Icon = icons.viewOff;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.MenuItem, {
+		value: require_const.FEATURE_VALUES.hide,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(styled_system_jsx.HStack, {
+			gap: "sm",
+			w: "full",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {}), "Hide Column"]
+		})
+	});
+}
+function ManageCols() {
+	const { icons } = (0, _cerberus_design_react.useCerberusContext)();
+	const Icon = icons.column;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.MenuItem, {
+		value: require_const.FEATURE_VALUES.manageVisibility,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(styled_system_jsx.HStack, {
+			gap: "sm",
+			w: "full",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {}), "Manage Columns"]
+		})
+	});
+}
+//#endregion
+exports.MatchVisibleItems = MatchVisibleItems;

package/dist/components/visibile-items.client.d.cts

@@ -0,0 +1,8 @@
+import { Accessor } from '@cerberus-design/signals';
+type Props = {
+    colId: string;
+    isVisible: Accessor<boolean>;
+    isLastVisibleCol: boolean;
+};
+export declare function MatchVisibleItems(props: Props): import("react").JSX.Element;
+export {};

package/dist/components/visibile-items.client.d.ts

@@ -0,0 +1,8 @@
+import { Accessor } from '@cerberus-design/signals';
+type Props = {
+    colId: string;
+    isVisible: Accessor<boolean>;
+    isLastVisibleCol: boolean;
+};
+export declare function MatchVisibleItems(props: Props): import("react").JSX.Element;
+export {};

package/dist/components/visibile-items.client.js

@@ -0,0 +1,40 @@
+"use client";
+"use client";
+import { FEATURE_VALUES } from "../const.js";
+import { MenuItem, Show, useCerberusContext } from "@cerberus-design/react";
+import { useRead } from "@cerberus-design/signals";
+import { HStack } from "styled-system/jsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/visibile-items.client.tsx
+function MatchVisibleItems(props) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Show, {
+		when: useRead(props.isVisible) && !props.isLastVisibleCol,
+		children: () => /* @__PURE__ */ jsx(HideItem, {})
+	}), /* @__PURE__ */ jsx(ManageCols, {})] });
+}
+function HideItem() {
+	const { icons } = useCerberusContext();
+	const Icon = icons.viewOff;
+	return /* @__PURE__ */ jsx(MenuItem, {
+		value: FEATURE_VALUES.hide,
+		children: /* @__PURE__ */ jsxs(HStack, {
+			gap: "sm",
+			w: "full",
+			children: [/* @__PURE__ */ jsx(Icon, {}), "Hide Column"]
+		})
+	});
+}
+function ManageCols() {
+	const { icons } = useCerberusContext();
+	const Icon = icons.column;
+	return /* @__PURE__ */ jsx(MenuItem, {
+		value: FEATURE_VALUES.manageVisibility,
+		children: /* @__PURE__ */ jsxs(HStack, {
+			gap: "sm",
+			w: "full",
+			children: [/* @__PURE__ */ jsx(Icon, {}), "Manage Columns"]
+		})
+	});
+}
+//#endregion
+export { MatchVisibleItems };

package/dist/const.cjs

@@ -22,7 +22,9 @@ var FEATURE_VALUES = {
 	unsort: "unsort",
 	sort: "sort",
 	sortAsc: "sort_asc",
-	sortDesc: "sort_desc"
+	sortDesc: "sort_desc",
+	hide: "hide",
+	manageVisibility: "manage_visibility"
 };
 var DEFAULT_PAGE_SIZES = [
 	25,