@cerberus-design/data-grid 1.1.3 → 1.2.0

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

@@ -3,8 +3,9 @@
 const require_const = require("../const.cjs");
 const require_context_client = require("../context.client.cjs");
 const require_store = require("../store.cjs");
-const require_grid_client = require("./grid.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");
 let react = require("react");
@@ -19,6 +20,8 @@ function DataGridEl(props) {
 		initialState: props.initialState,
 		rowSize: props.rowSize,
 		onPageChange: props.onPageChange,
+		overlays: props.overlays,
+		pending: props.pending,
 		theme: props.theme
 	}), []);
 	const [ready, setReady] = (0, _cerberus_design_signals.useSignal)(false);
@@ -26,6 +29,9 @@ function DataGridEl(props) {
 	(0, react.useEffect)(() => {
 		store.updateData(data);
 	}, [data, store]);
+	(0, react.useEffect)(() => {
+		store.updatePending(Boolean(props.pending));
+	}, [props.pending, store]);
 	(0, react.useEffect)(() => {
 		const el = rootRef.current;
 		if (!el) return;
@@ -56,7 +62,7 @@ function DataGridEl(props) {
 					children: props.toolbar
 				})
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(styled_system_jsx.Stack, {
+			/* @__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, {
 				"data-scope": require_const.SCOPE,
 				"data-part": require_const.PARTS.ROOT,
 				dir: "columns",
@@ -73,9 +79,12 @@ function DataGridEl(props) {
 				ref: rootRef,
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Show, {
 					when: ready,
-					children: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_grid_client.GridViewport, {})
+					children: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_viewport_client.GridViewport, {
+						overlays: props.overlays,
+						rootRef
+					})
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pagination_client.GridPagination, {})]
-			}),
+			}) }) }),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Show, {
 				when: props.footer,
 				children: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(styled_system_jsx.HStack, {

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

@@ -3,8 +3,9 @@
 import { PARTS, SCOPE } from "../const.js";
 import { DataGridProvider } from "../context.client.js";
 import { createGridStore } from "../store.js";
-import { GridViewport } from "./grid.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 } from "@cerberus-design/signals";
 import { memo, useEffect, useMemo, useRef } from "react";
@@ -19,6 +20,8 @@ function DataGridEl(props) {
 		initialState: props.initialState,
 		rowSize: props.rowSize,
 		onPageChange: props.onPageChange,
+		overlays: props.overlays,
+		pending: props.pending,
 		theme: props.theme
 	}), []);
 	const [ready, setReady] = useSignal(false);
@@ -26,6 +29,9 @@ function DataGridEl(props) {
 	useEffect(() => {
 		store.updateData(data);
 	}, [data, store]);
+	useEffect(() => {
+		store.updatePending(Boolean(props.pending));
+	}, [props.pending, store]);
 	useEffect(() => {
 		const el = rootRef.current;
 		if (!el) return;
@@ -56,7 +62,7 @@ function DataGridEl(props) {
 					children: props.toolbar
 				})
 			}),
-			/* @__PURE__ */ jsxs(Stack, {
+			/* @__PURE__ */ jsx(DGPopover, { children: /* @__PURE__ */ jsx(DGPopoverAnchor, { children: /* @__PURE__ */ jsxs(Stack, {
 				"data-scope": SCOPE,
 				"data-part": PARTS.ROOT,
 				dir: "columns",
@@ -73,9 +79,12 @@ function DataGridEl(props) {
 				ref: rootRef,
 				children: [/* @__PURE__ */ jsx(Show, {
 					when: ready,
-					children: () => /* @__PURE__ */ jsx(GridViewport, {})
+					children: () => /* @__PURE__ */ jsx(GridViewport, {
+						overlays: props.overlays,
+						rootRef
+					})
 				}), /* @__PURE__ */ jsx(GridPagination, {})]
-			}),
+			}) }) }),
 			/* @__PURE__ */ jsx(Show, {
 				when: props.footer,
 				children: () => /* @__PURE__ */ jsx(HStack, {

package/dist/components/features.client.cjs

@@ -1,6 +1,8 @@
 "use client";
 "use client";
+const require_const = require("../const.cjs");
 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");
 let _cerberus_design_react = require("@cerberus-design/react");
@@ -23,18 +25,42 @@ function HeaderCellOptions(props) {
 		const specialVal = val.split("_");
 		const category = specialVal[0];
 		const action = specialVal[1];
-		if (val === "filter") return console.log("Show Filter popover...");
-		if (val === "unsort") return store.setSort(props.id, null);
+		switch (val) {
+			case require_const.FEATURE_VALUES.filter: return handleInitFilter();
+			case require_const.FEATURE_VALUES.filterClear: return store.setColFilter((prev) => ({
+				...prev,
+				active: prev.active.filter((id) => id !== props.id),
+				editing: null
+			}));
+			case require_const.FEATURE_VALUES.unsort: return store.setSort(props.id, null);
+			default: break;
+		}
 		switch (category) {
-			case "pin": return store.togglePinned(props.id, action);
-			case "unpin": return store.togglePinned(props.id, false);
-			case "sort": return store.setSort(props.id, action ?? null);
+			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);
 			default: console.error("Unhandled action:", {
 				details,
 				action
 			});
 		}
 	}
+	function handleInitFilter() {
+		store.setColFilter((prev) => ({
+			...prev,
+			editing: props.id,
+			active: [...prev.active, props.id],
+			filters: {
+				...prev.filters,
+				[props.id]: {
+					id: props.id,
+					operator: require_const.OPERATORS.contains,
+					value: ""
+				}
+			}
+		}));
+		return store.setShowColFilter(true);
+	}
 	if (!props.sortable && !props.pinnable && !props.filterable) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_cerberus_design_react.Menu, {
 		onSelect: handleSelect,
@@ -63,10 +89,7 @@ function HeaderCellOptions(props) {
 			}),
 			/* @__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)(_cerberus_design_react.MenuItem, {
-					value: "filter",
-					children: "Filter"
-				})]
+				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 })]
 			})
 		] })]
 	});

package/dist/components/features.client.js

@@ -1,9 +1,11 @@
 "use client";
 "use client";
+import { FEATURE_VALUES, OPERATORS } from "../const.js";
 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, MenuItem, MenuSeparator, MenuTrigger, Show, useCerberusContext } from "@cerberus-design/react";
+import { IconButton, Menu, MenuContent, MenuSeparator, MenuTrigger, Show, useCerberusContext } from "@cerberus-design/react";
 import { useRead } from "@cerberus-design/signals";
 import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -23,18 +25,42 @@ function HeaderCellOptions(props) {
 		const specialVal = val.split("_");
 		const category = specialVal[0];
 		const action = specialVal[1];
-		if (val === "filter") return console.log("Show Filter popover...");
-		if (val === "unsort") return store.setSort(props.id, null);
+		switch (val) {
+			case FEATURE_VALUES.filter: return handleInitFilter();
+			case FEATURE_VALUES.filterClear: return store.setColFilter((prev) => ({
+				...prev,
+				active: prev.active.filter((id) => id !== props.id),
+				editing: null
+			}));
+			case FEATURE_VALUES.unsort: return store.setSort(props.id, null);
+			default: break;
+		}
 		switch (category) {
-			case "pin": return store.togglePinned(props.id, action);
-			case "unpin": return store.togglePinned(props.id, false);
-			case "sort": return store.setSort(props.id, action ?? null);
+			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);
 			default: console.error("Unhandled action:", {
 				details,
 				action
 			});
 		}
 	}
+	function handleInitFilter() {
+		store.setColFilter((prev) => ({
+			...prev,
+			editing: props.id,
+			active: [...prev.active, props.id],
+			filters: {
+				...prev.filters,
+				[props.id]: {
+					id: props.id,
+					operator: OPERATORS.contains,
+					value: ""
+				}
+			}
+		}));
+		return store.setShowColFilter(true);
+	}
 	if (!props.sortable && !props.pinnable && !props.filterable) return null;
 	return /* @__PURE__ */ jsxs(Menu, {
 		onSelect: handleSelect,
@@ -63,10 +89,7 @@ function HeaderCellOptions(props) {
 			}),
 			/* @__PURE__ */ jsxs(Show, {
 				when: props.filterable,
-				children: [/* @__PURE__ */ jsx(MenuSeparator, {}), /* @__PURE__ */ jsx(MenuItem, {
-					value: "filter",
-					children: "Filter"
-				})]
+				children: [/* @__PURE__ */ jsx(MenuSeparator, {}), /* @__PURE__ */ jsx(FilterMenuItem, { colId: props.id })]
 			})
 		] })]
 	});

package/dist/components/filter-item.client.cjs

@@ -0,0 +1,38 @@
+"use client";
+"use client";
+const require_context_client = require("../context.client.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/filter-item.client.tsx
+function FilterMenuItem(props) {
+	const colDefs = (0, _cerberus_design_signals.useRead)(require_context_client.useDataGridContext().colFilters);
+	const hasFilter = (0, _cerberus_design_signals.createComputed)(() => {
+		return colDefs.active.some((filterId) => filterId === props.colId);
+	});
+	const { icons } = (0, _cerberus_design_react.useCerberusContext)();
+	const FilterIcon = icons.filter;
+	const ClearIcon = icons.filterClear;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Show, {
+		when: hasFilter(),
+		fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.MenuItem, {
+			value: "filter",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(styled_system_jsx.HStack, {
+				gap: "sm",
+				w: "full",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterIcon, {}), "Filter"]
+			})
+		}),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.MenuItem, {
+			value: "clear-filter",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(styled_system_jsx.HStack, {
+				gap: "sm",
+				w: "full",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ClearIcon, {}), "Clear Filter"]
+			})
+		})
+	});
+}
+//#endregion
+exports.FilterMenuItem = FilterMenuItem;

package/dist/components/filter-item.client.d.cts

@@ -0,0 +1,6 @@
+import { InternalColumn } from '../types';
+interface FilterMenuItemProps<TData> {
+    colId: InternalColumn<TData>['id'];
+}
+export declare function FilterMenuItem<TData>(props: FilterMenuItemProps<TData>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/filter-item.client.d.ts

@@ -0,0 +1,6 @@
+import { InternalColumn } from '../types';
+interface FilterMenuItemProps<TData> {
+    colId: InternalColumn<TData>['id'];
+}
+export declare function FilterMenuItem<TData>(props: FilterMenuItemProps<TData>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/filter-item.client.js

@@ -0,0 +1,38 @@
+"use client";
+"use client";
+import { useDataGridContext } from "../context.client.js";
+import { MenuItem, Show, useCerberusContext } from "@cerberus-design/react";
+import { createComputed, useRead } from "@cerberus-design/signals";
+import { HStack } from "styled-system/jsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/filter-item.client.tsx
+function FilterMenuItem(props) {
+	const colDefs = useRead(useDataGridContext().colFilters);
+	const hasFilter = createComputed(() => {
+		return colDefs.active.some((filterId) => filterId === props.colId);
+	});
+	const { icons } = useCerberusContext();
+	const FilterIcon = icons.filter;
+	const ClearIcon = icons.filterClear;
+	return /* @__PURE__ */ jsx(Show, {
+		when: hasFilter(),
+		fallback: /* @__PURE__ */ jsx(MenuItem, {
+			value: "filter",
+			children: /* @__PURE__ */ jsxs(HStack, {
+				gap: "sm",
+				w: "full",
+				children: [/* @__PURE__ */ jsx(FilterIcon, {}), "Filter"]
+			})
+		}),
+		children: /* @__PURE__ */ jsx(MenuItem, {
+			value: "clear-filter",
+			children: /* @__PURE__ */ jsxs(HStack, {
+				gap: "sm",
+				w: "full",
+				children: [/* @__PURE__ */ jsx(ClearIcon, {}), "Clear Filter"]
+			})
+		})
+	});
+}
+//#endregion
+export { FilterMenuItem };

package/dist/components/grid.client.cjs

@@ -3,7 +3,6 @@
 const require_const = require("../const.cjs");
 const require_context_client = require("../context.client.cjs");
 const require_hooks_client = require("../hooks.client.cjs");
-const require_virtualizer_client = require("../virtualizer.client.cjs");
 const require_features_client = require("./features.client.cjs");
 let _cerberus_design_react = require("@cerberus-design/react");
 let _cerberus_design_signals = require("@cerberus-design/signals");
@@ -11,97 +10,52 @@ let react = require("react");
 let styled_system_jsx = require("styled-system/jsx");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/grid.client.tsx
-function GridViewport() {
-	const viewportRef = (0, react.useRef)(null);
-	const store = require_context_client.useDataGridContext();
-	const { virtualRows, totalHeight } = require_virtualizer_client.useVirtualizer(store, viewportRef);
-	const columns = (0, _cerberus_design_signals.useRead)(store.columns);
-	const isServerPaginated = (0, _cerberus_design_signals.useRead)(store.isServerPaginated);
-	const staticRows = (0, _cerberus_design_signals.useRead)(store.rows);
-	const currentPageRange = (0, _cerberus_design_signals.useRead)(store.currentPageRange);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(styled_system_jsx.Scrollable, {
-		hideScrollbar: true,
-		"data-scope": require_const.SCOPE,
-		"data-part": require_const.PARTS.VIEWPORT,
-		h: "full",
-		minH: "0",
-		minW: "full",
-		pos: "relative",
-		w: "full",
-		ref: viewportRef,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(styled_system_jsx.Box, {
-			role: "grid",
-			"aria-rowcount": staticRows.length + 1,
-			"aria-colcount": columns.length,
-			h: "var(--row-height)",
-			pos: "sticky",
-			top: "0",
-			w: "var(--total-grid-width)",
-			zIndex: "sticky",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(styled_system_jsx.HStack, {
-				"aria-rowindex": 1,
-				role: "rowgroup",
-				gap: "0",
-				h: "full",
-				pos: "relative",
-				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)(GridHeaderCell, { column: col })
-					}, col.id)
-				})
-			})
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Show, {
-			when: isServerPaginated,
-			fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(styled_system_jsx.Box, {
-				pos: "relative",
-				w: "var(--total-grid-width)",
-				style: { height: `${totalHeight}px` },
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.For, {
-					each: virtualRows,
-					children: (vRow) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GridRow, {
-						row: vRow.data,
-						index: vRow.index,
-						offsetY: vRow.offsetY
-					}, vRow.index)
-				})
-			}),
-			children: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(styled_system_jsx.Stack, {
-				direction: "column",
-				gap: "0",
-				w: "var(--total-grid-width)",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.For, {
-					each: staticRows.slice(currentPageRange.start, currentPageRange.end),
-					children: (row, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GridRow, {
-						row,
-						index
-					}, index)
-				})
-			})
-		})]
-	});
-}
 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 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);
 	const pinnedState = require_hooks_client.usePinnedState(pinnedVal);
 	const pinnedAttr = require_hooks_client.usePinnedAttribute(pinnedVal);
 	const style = require_hooks_client.useColumnStyles(column, pinnedVal);
-	const isSortedDesc = (0, react.useMemo)(() => {
+	const isSortedDesc = (0, _cerberus_design_signals.createComputed)(() => {
 		const result = sortingVal.find((item) => item.id === column.id);
 		if (result) return result.desc;
 		return false;
-	}, [sortingVal, column.id]);
+	});
+	const hasFilters = (0, _cerberus_design_signals.createComputed)(() => {
+		return colFilters.active.some((filterId) => filterId === column.id);
+	});
 	const SortAscIcon = icons.sortAsc;
 	const SortDescIcon = icons.sortDesc;
+	const EditFilterIcon = icons.filterEdit;
 	function handleToggleSorting(e) {
 		store.toggleSort(column.id, e.shiftKey);
 	}
+	function handleEditFilters() {
+		const fallbackFilter = {
+			id: column.id,
+			operator: require_const.OPERATORS.contains,
+			value: ""
+		};
+		(0, _cerberus_design_signals.batch)(() => {
+			store.setColFilter((prev) => ({
+				...prev,
+				active: [...prev.active, column.id],
+				filters: {
+					...prev.filters,
+					[column.id]: {
+						...fallbackFilter,
+						...prev.filters[column.id]
+					}
+				},
+				editing: column.id
+			}));
+			store.setShowColFilter(true);
+		});
+	}
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(styled_system_jsx.HStack, {
 		role: "columnheader",
 		"data-scope": require_const.SCOPE,
@@ -142,32 +96,59 @@ var GridHeaderCell = (0, react.memo)(function GridHeaderCell(props) {
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(styled_system_jsx.HStack, {
 				gap: "sm",
 				_groupHover: { "& :is(button)": { opacity: "1" } },
-				children: [typeof column.original.header === "function" ? column.original.header({ colId: column.id }) : column.original.header, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Show, {
-					when: column.sortable,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Tooltip, {
-						content: isSortedDesc ? "Sort Ascending" : "Sort Decending",
-						openDelay: 800,
-						asChild: true,
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.IconButton, {
-							ariaLabel: "Toggle sorting",
-							size: "sm",
-							opacity: {
-								base: 1,
-								md: 0
-							},
-							transitionProperty: "opacity",
-							transitionDuration: "fast",
-							onClick: handleToggleSorting,
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Show, {
-								when: isSortedDesc,
-								fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SortAscIcon, {}),
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SortDescIcon, {})
+				children: [
+					typeof column.original.header === "function" ? column.original.header({ colId: column.id }) : column.original.header,
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Show, {
+						when: hasFilters(),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Tooltip, {
+							content: "Edit filters",
+							openDelay: 800,
+							asChild: true,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.IconButton, {
+								ariaLabel: "Edit filters",
+								size: "sm",
+								onClick: handleEditFilters,
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EditFilterIcon, {})
+							})
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Show, {
+						when: column.sortable,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Tooltip, {
+							content: isSortedDesc() ? "Sort Ascending" : "Sort Decending",
+							openDelay: 800,
+							asChild: true,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.IconButton, {
+								ariaLabel: "Toggle sorting",
+								size: "sm",
+								opacity: {
+									base: 1,
+									md: 0
+								},
+								transitionProperty: "opacity",
+								transitionDuration: "fast",
+								onClick: handleToggleSorting,
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Show, {
+									when: isSortedDesc(),
+									fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SortAscIcon, {}),
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SortDescIcon, {})
+								})
 							})
 						})
 					})
-				})]
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(styled_system_jsx.Center, {
+				bgColor: "var(--head-cell-bg-color)",
+				bottom: "0",
+				pos: "absolute",
+				px: "sm",
+				right: "0",
+				top: "0",
+				w: "fit-content",
+				zIndex: "11",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_features_client.HeaderCellOptions, { ...column })
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_features_client.HeaderCellOptions, { ...column }),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Show, {
 				when: pinnedState === "pinned",
 				children: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShadowFiller, {
@@ -212,10 +193,20 @@ var GridCell = (0, react.memo)(function GridCell(props) {
 			borderLeft: "1px solid"
 		},
 		style,
-		children: [column.original.cell ? column.original.cell({
-			row,
-			value
-		}) : value, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Show, {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Show, {
+			when: props.pending && props.hasSkeleton,
+			fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: column.original.cell ? column.original.cell({
+				row,
+				value
+			}) : value }),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(styled_system_jsx.Box, {
+				"aria-busy": "true",
+				my: "xs",
+				rounded: "md",
+				w: "full",
+				style: { height: "calc(var(--row-height) / 3)" }
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Show, {
 			when: pinnedState === "pinned",
 			children: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShadowFiller, {
 				style,
@@ -225,7 +216,10 @@ var GridCell = (0, react.memo)(function GridCell(props) {
 	});
 });
 var GridRow = (0, react.memo)(function GridRow(props) {
-	const columns = (0, _cerberus_design_signals.useRead)(require_context_client.useDataGridContext().columns);
+	const store = require_context_client.useDataGridContext();
+	const columns = (0, _cerberus_design_signals.useRead)(store.columns);
+	const pending = (0, _cerberus_design_signals.useRead)(store.pending);
+	const hasSkeleton = (0, _cerberus_design_signals.useRead)(store.hasSkeleton);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GridRowContainer, {
 		offsetY: props.offsetY,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.For, {
@@ -234,7 +228,9 @@ var GridRow = (0, react.memo)(function GridRow(props) {
 				when: col.isVisible(),
 				children: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(GridCell, {
 					row: props.row,
-					column: col
+					column: col,
+					hasSkeleton,
+					pending
 				})
 			}, col.id)
 		})
@@ -287,4 +283,5 @@ function ShadowFiller(props) {
 	});
 }
 //#endregion
-exports.GridViewport = GridViewport;
+exports.GridHeaderCell = GridHeaderCell;
+exports.GridRow = GridRow;

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

@@ -1,6 +1,5 @@
+import { PropsWithChildren, MemoExoticComponent, NamedExoticComponent } from 'react';
 import { InternalColumn } from '../types';
-import { MemoExoticComponent, NamedExoticComponent } from 'react';
-export declare function GridViewport(): import("react/jsx-runtime").JSX.Element;
 interface GridHeaderCellProps<TData> {
     column: InternalColumn<TData>;
 }
@@ -8,6 +7,8 @@ export declare const GridHeaderCell: MemoExoticComponent<(<TData>(props: GridHea
 interface GridCellProps<TData> {
     row: any;
     column: InternalColumn<TData>;
+    pending: boolean;
+    hasSkeleton: boolean;
 }
 export declare const GridCell: MemoExoticComponent<(<TData>(props: GridCellProps<TData>) => import("react/jsx-runtime").JSX.Element)>;
 interface GridRowProps {
@@ -16,4 +17,8 @@ interface GridRowProps {
     offsetY?: number;
 }
 export declare const GridRow: NamedExoticComponent<GridRowProps>;
+interface GridRowContainerProps {
+    offsetY?: number;
+}
+export declare function GridRowContainer(props: PropsWithChildren<GridRowContainerProps>): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,6 +1,5 @@
+import { PropsWithChildren, MemoExoticComponent, NamedExoticComponent } from 'react';
 import { InternalColumn } from '../types';
-import { MemoExoticComponent, NamedExoticComponent } from 'react';
-export declare function GridViewport(): import("react/jsx-runtime").JSX.Element;
 interface GridHeaderCellProps<TData> {
     column: InternalColumn<TData>;
 }
@@ -8,6 +7,8 @@ export declare const GridHeaderCell: MemoExoticComponent<(<TData>(props: GridHea
 interface GridCellProps<TData> {
     row: any;
     column: InternalColumn<TData>;
+    pending: boolean;
+    hasSkeleton: boolean;
 }
 export declare const GridCell: MemoExoticComponent<(<TData>(props: GridCellProps<TData>) => import("react/jsx-runtime").JSX.Element)>;
 interface GridRowProps {
@@ -16,4 +17,8 @@ interface GridRowProps {
     offsetY?: number;
 }
 export declare const GridRow: NamedExoticComponent<GridRowProps>;
+interface GridRowContainerProps {
+    offsetY?: number;
+}
+export declare function GridRowContainer(props: PropsWithChildren<GridRowContainerProps>): import("react/jsx-runtime").JSX.Element;
 export {};