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

package/dist/components/cerby-data-grid.client.d.cts

@@ -3,4 +3,4 @@ import { GridOptions } from '../types';
  * A Data Grid wrapped in the CerberusProvider in order to provide the necessary
  * context for the grid to function properly.
  */
-export declare function CerberusDataGrid<TData>(props: GridOptions<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function CerberusDataGrid<TData>(props: GridOptions<TData>): import("react").JSX.Element;

package/dist/components/cerby-data-grid.client.d.ts

@@ -3,4 +3,4 @@ import { GridOptions } from '../types';
  * A Data Grid wrapped in the CerberusProvider in order to provide the necessary
  * context for the grid to function properly.
  */
-export declare function CerberusDataGrid<TData>(props: GridOptions<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function CerberusDataGrid<TData>(props: GridOptions<TData>): import("react").JSX.Element;

package/dist/components/count-menu.client.d.cts

@@ -2,5 +2,5 @@ import { SelectRootProps } from '@cerberus-design/react';
 interface CountMenuProps {
     onValueChange?: SelectRootProps['onValueChange'];
 }
-export declare function CountMenu(props: CountMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function CountMenu(props: CountMenuProps): import("react").JSX.Element;
 export {};

package/dist/components/count-menu.client.d.ts

@@ -2,5 +2,5 @@ import { SelectRootProps } from '@cerberus-design/react';
 interface CountMenuProps {
     onValueChange?: SelectRootProps['onValueChange'];
 }
-export declare function CountMenu(props: CountMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function CountMenu(props: CountMenuProps): import("react").JSX.Element;
 export {};

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

@@ -1,4 +1,4 @@
 import { GridOptions } from '../types';
-declare function DataGridEl<TData>(props: GridOptions<TData>): import("react/jsx-runtime").JSX.Element;
+declare function DataGridEl<TData>(props: GridOptions<TData>): import("react").JSX.Element;
 export declare const DataGrid: typeof DataGridEl;
 export {};

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

@@ -1,4 +1,4 @@
 import { GridOptions } from '../types';
-declare function DataGridEl<TData>(props: GridOptions<TData>): import("react/jsx-runtime").JSX.Element;
+declare function DataGridEl<TData>(props: GridOptions<TData>): import("react").JSX.Element;
 export declare const DataGrid: typeof DataGridEl;
 export {};

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

@@ -1,2 +1,2 @@
 import { InternalColumn } from '../types';
-export declare function HeaderCellOptions<TData>(props: InternalColumn<TData>): import("react/jsx-runtime").JSX.Element | null;
+export declare function HeaderCellOptions<TData>(props: InternalColumn<TData>): import("react").JSX.Element | null;

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

@@ -1,2 +1,2 @@
 import { InternalColumn } from '../types';
-export declare function HeaderCellOptions<TData>(props: InternalColumn<TData>): import("react/jsx-runtime").JSX.Element | null;
+export declare function HeaderCellOptions<TData>(props: InternalColumn<TData>): import("react").JSX.Element | null;

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

@@ -2,5 +2,5 @@ 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 declare function FilterMenuItem<TData>(props: FilterMenuItemProps<TData>): import("react").JSX.Element;
 export {};

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

@@ -2,5 +2,5 @@ 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 declare function FilterMenuItem<TData>(props: FilterMenuItemProps<TData>): import("react").JSX.Element;
 export {};

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

@@ -3,22 +3,22 @@ import { InternalColumn } from '../types';
 interface GridHeaderCellProps<TData> {
     column: InternalColumn<TData>;
 }
-export declare const GridHeaderCell: MemoExoticComponent<(<TData>(props: GridHeaderCellProps<TData>) => import("react/jsx-runtime").JSX.Element)>;
+export declare const GridHeaderCell: MemoExoticComponent<(<TData>(props: GridHeaderCellProps<TData>) => import("react").JSX.Element)>;
 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)>;
+export declare const GridCell: MemoExoticComponent<(<TData>(props: GridCellProps<TData>) => import("react").JSX.Element)>;
 interface GridRowProps {
     row: unknown;
     index: number;
     offsetY?: number;
 }
-export declare const GridRow: MemoExoticComponent<(props: GridRowProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const GridRow: MemoExoticComponent<(props: GridRowProps) => import("react").JSX.Element>;
 interface GridRowContainerProps {
     offsetY?: number;
 }
-export declare function GridRowContainer(props: PropsWithChildren<GridRowContainerProps>): import("react/jsx-runtime").JSX.Element;
+export declare function GridRowContainer(props: PropsWithChildren<GridRowContainerProps>): import("react").JSX.Element;
 export {};

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

@@ -3,22 +3,22 @@ import { InternalColumn } from '../types';
 interface GridHeaderCellProps<TData> {
     column: InternalColumn<TData>;
 }
-export declare const GridHeaderCell: MemoExoticComponent<(<TData>(props: GridHeaderCellProps<TData>) => import("react/jsx-runtime").JSX.Element)>;
+export declare const GridHeaderCell: MemoExoticComponent<(<TData>(props: GridHeaderCellProps<TData>) => import("react").JSX.Element)>;
 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)>;
+export declare const GridCell: MemoExoticComponent<(<TData>(props: GridCellProps<TData>) => import("react").JSX.Element)>;
 interface GridRowProps {
     row: unknown;
     index: number;
     offsetY?: number;
 }
-export declare const GridRow: MemoExoticComponent<(props: GridRowProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const GridRow: MemoExoticComponent<(props: GridRowProps) => import("react").JSX.Element>;
 interface GridRowContainerProps {
     offsetY?: number;
 }
-export declare function GridRowContainer(props: PropsWithChildren<GridRowContainerProps>): import("react/jsx-runtime").JSX.Element;
+export declare function GridRowContainer(props: PropsWithChildren<GridRowContainerProps>): import("react").JSX.Element;
 export {};

package/dist/components/no-content.client.d.cts

@@ -1 +1 @@
-export declare function NoContent(): import("react/jsx-runtime").JSX.Element;
+export declare function NoContent(): import("react").JSX.Element;

package/dist/components/no-content.client.d.ts

@@ -1 +1 @@
-export declare function NoContent(): import("react/jsx-runtime").JSX.Element;
+export declare function NoContent(): import("react").JSX.Element;

package/dist/components/overlays.d.cts

@@ -6,9 +6,9 @@ export declare const overlayStyle: {
 interface NoContentOverlayProps {
     custom?: OverlaySlots['noContent'];
 }
-export declare function NoContentOverlay(props: NoContentOverlayProps): import("react/jsx-runtime").JSX.Element;
+export declare function NoContentOverlay(props: NoContentOverlayProps): import("react").JSX.Element;
 interface PendingOverlayProps {
     variant?: OverlaySlots['pending'];
 }
-export declare function PendingOverlay(props: PendingOverlayProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function PendingOverlay(props: PendingOverlayProps): import("react").JSX.Element | null;
 export {};

package/dist/components/overlays.d.ts

@@ -6,9 +6,9 @@ export declare const overlayStyle: {
 interface NoContentOverlayProps {
     custom?: OverlaySlots['noContent'];
 }
-export declare function NoContentOverlay(props: NoContentOverlayProps): import("react/jsx-runtime").JSX.Element;
+export declare function NoContentOverlay(props: NoContentOverlayProps): import("react").JSX.Element;
 interface PendingOverlayProps {
     variant?: OverlaySlots['pending'];
 }
-export declare function PendingOverlay(props: PendingOverlayProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function PendingOverlay(props: PendingOverlayProps): import("react").JSX.Element | null;
 export {};

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

@@ -1 +1 @@
-export declare function GridPagination(): import("react/jsx-runtime").JSX.Element;
+export declare function GridPagination(): import("react").JSX.Element;

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

@@ -1 +1 @@
-export declare function GridPagination(): import("react/jsx-runtime").JSX.Element;
+export declare function GridPagination(): import("react").JSX.Element;

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

@@ -2,4 +2,4 @@ import { ReactNode } from 'react';
 import { InternalColumn } from '../types';
 export declare function MatchPinnedItems(props: {
     pinned: InternalColumn<ReactNode>['pinned'];
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

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

@@ -2,4 +2,4 @@ import { ReactNode } from 'react';
 import { InternalColumn } from '../types';
 export declare function MatchPinnedItems(props: {
     pinned: InternalColumn<ReactNode>['pinned'];
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

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

@@ -1,9 +1,9 @@
 import { PopoverRootProps } from '@cerberus-design/react';
 import { HTMLAttributes, PropsWithChildren, RefObject } from 'react';
-export declare function DGPopover(props: PropsWithChildren<PopoverRootProps>): import("react/jsx-runtime").JSX.Element;
-export declare function DGPopoverAnchor(props: PropsWithChildren<HTMLAttributes<HTMLDivElement>>): import("react/jsx-runtime").JSX.Element;
+export declare function DGPopover(props: PropsWithChildren<PopoverRootProps>): import("react").JSX.Element;
+export declare function DGPopoverAnchor(props: PropsWithChildren<HTMLAttributes<HTMLDivElement>>): import("react").JSX.Element;
 interface DGPopoverContentProps {
     ref: RefObject<HTMLDivElement | null>;
 }
-export declare function DGPopoverContent(props: DGPopoverContentProps): import("react/jsx-runtime").JSX.Element;
+export declare function DGPopoverContent(props: DGPopoverContentProps): import("react").JSX.Element;
 export {};

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

@@ -1,9 +1,9 @@
 import { PopoverRootProps } from '@cerberus-design/react';
 import { HTMLAttributes, PropsWithChildren, RefObject } from 'react';
-export declare function DGPopover(props: PropsWithChildren<PopoverRootProps>): import("react/jsx-runtime").JSX.Element;
-export declare function DGPopoverAnchor(props: PropsWithChildren<HTMLAttributes<HTMLDivElement>>): import("react/jsx-runtime").JSX.Element;
+export declare function DGPopover(props: PropsWithChildren<PopoverRootProps>): import("react").JSX.Element;
+export declare function DGPopoverAnchor(props: PropsWithChildren<HTMLAttributes<HTMLDivElement>>): import("react").JSX.Element;
 interface DGPopoverContentProps {
     ref: RefObject<HTMLDivElement | null>;
 }
-export declare function DGPopoverContent(props: DGPopoverContentProps): import("react/jsx-runtime").JSX.Element;
+export declare function DGPopoverContent(props: DGPopoverContentProps): import("react").JSX.Element;
 export {};

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

@@ -1,4 +1,4 @@
 import { SortState } from '../types';
 export declare function MatchSortItems(props: {
     sorting: SortState | undefined;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

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

@@ -1,4 +1,4 @@
 import { SortState } from '../types';
 export declare function MatchSortItems(props: {
     sorting: SortState | undefined;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/dist/components/viewport.client.cjs

@@ -19,6 +19,7 @@ var GridViewport = (0, react.memo)(function GridViewport(props) {
 	const rowCount = (0, _cerberus_design_signals.useRead)(store.rowCount);
 	const staticRows = (0, _cerberus_design_signals.useRead)(store.rows);
 	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);
 	const hasNonSkeleton = (0, react.useMemo)(() => {
 		const overlays = props.overlays;
@@ -70,7 +71,7 @@ var GridViewport = (0, react.memo)(function GridViewport(props) {
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_cerberus_design_react.Show, {
 				when: pending,
-				children: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_overlays.PendingOverlay, { variant: props.overlays?.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 })
 		]

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

@@ -4,5 +4,5 @@ interface GridViewportProps {
     rootRef: RefObject<HTMLDivElement | null>;
     overlays?: OverlaySlots;
 }
-export declare const GridViewport: MemoExoticComponent<(props: GridViewportProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const GridViewport: MemoExoticComponent<(props: GridViewportProps) => import("react").JSX.Element>;
 export {};

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

@@ -4,5 +4,5 @@ interface GridViewportProps {
     rootRef: RefObject<HTMLDivElement | null>;
     overlays?: OverlaySlots;
 }
-export declare const GridViewport: MemoExoticComponent<(props: GridViewportProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const GridViewport: MemoExoticComponent<(props: GridViewportProps) => import("react").JSX.Element>;
 export {};

package/dist/components/viewport.client.js

@@ -19,6 +19,7 @@ var GridViewport = memo(function GridViewport(props) {
 	const rowCount = useRead(store.rowCount);
 	const staticRows = useRead(store.rows);
 	const pending = useRead(store.pending);
+	const pendingVariant = useRead(store.pendingVariant);
 	const shouldLock = createComputed(() => rowCount <= 0);
 	const hasNonSkeleton = useMemo(() => {
 		const overlays = props.overlays;
@@ -70,7 +71,7 @@ var GridViewport = memo(function GridViewport(props) {
 			}),
 			/* @__PURE__ */ jsx(Show, {
 				when: pending,
-				children: () => /* @__PURE__ */ jsx(PendingOverlay, { variant: props.overlays?.pending })
+				children: () => /* @__PURE__ */ jsx(PendingOverlay, { variant: pendingVariant })
 			}),
 			/* @__PURE__ */ jsx(DGPopoverContent, { ref: props.rootRef })
 		]

package/dist/context.client.d.cts

@@ -2,5 +2,5 @@ import { PropsWithChildren } from 'react';
 import { GridStore } from './types';
 export declare function DataGridProvider<TData>(props: PropsWithChildren<{
     createStore: () => GridStore<TData>;
-}>): import("react/jsx-runtime").JSX.Element;
+}>): import("react").JSX.Element;
 export declare function useDataGridContext<TData>(): GridStore<TData>;

package/dist/context.client.d.ts

@@ -2,5 +2,5 @@ import { PropsWithChildren } from 'react';
 import { GridStore } from './types';
 export declare function DataGridProvider<TData>(props: PropsWithChildren<{
     createStore: () => GridStore<TData>;
-}>): import("react/jsx-runtime").JSX.Element;
+}>): import("react").JSX.Element;
 export declare function useDataGridContext<TData>(): GridStore<TData>;

package/dist/stores/layout.cjs

@@ -4,71 +4,82 @@ let _cerberus_design_signals = require("@cerberus-design/signals");
 //#region src/stores/layout.ts
 function createLayoutStore(options) {
 	const [containerWidth, setContainerWidth] = (0, _cerberus_design_signals.createSignal)(0);
+	const [phase, setPhase] = (0, _cerberus_design_signals.createSignal)("initialPending");
 	const [pending, setPending] = (0, _cerberus_design_signals.createSignal)(options.pending ?? false);
 	const [hasSkeleton] = (0, _cerberus_design_signals.createSignal)(options.overlays?.pending === "skeleton");
-	return {
-		pending,
-		hasSkeleton,
-		rootCssVars: (0, _cerberus_design_signals.createComputed)(() => {
-			const vars = {};
-			const visibleCols = [];
-			const cols = options.columns();
-			const cWidth = containerWidth();
-			let fixedSpace = 0;
-			let flexCount = 0;
-			for (let i = 0; i < cols.length; i++) {
-				const col = cols[i];
-				if (!col.isVisible()) continue;
-				visibleCols.push(col);
-				if (col.isFlex()) flexCount++;
-				else fixedSpace += col.width();
-				const order = options.orderedColumns().findIndex((orderedCol) => orderedCol.id === col.id);
-				vars[`--col-${col.id}-order`] = `${order}`;
-			}
-			const remainingSpace = Math.max(0, cWidth - fixedSpace);
-			const flexWidth = flexCount > 0 ? remainingSpace / flexCount : 0;
-			let leftOffset = 0;
-			let totalW = 0;
-			const computedWidths = new Float64Array(visibleCols.length);
-			for (let i = 0; i < visibleCols.length; i++) {
-				const col = visibleCols[i];
-				let finalWidth = col.width();
-				if (col.isFlex()) finalWidth = Math.max(col.original.minWidth ?? 150, flexWidth);
-				computedWidths[i] = finalWidth;
-				totalW += finalWidth;
-				vars[`--col-${col.id}-width`] = `${finalWidth}px`;
-				if (col.pinned() === "left") {
-					vars[`--col-${col.id}-left`] = `${leftOffset}px`;
-					leftOffset += finalWidth;
-				}
+	const rootCssVars = (0, _cerberus_design_signals.createComputed)(() => {
+		const vars = {};
+		const visibleCols = [];
+		const cols = options.columns();
+		const cWidth = containerWidth();
+		let fixedSpace = 0;
+		let flexCount = 0;
+		for (let i = 0; i < cols.length; i++) {
+			const col = cols[i];
+			if (!col.isVisible()) continue;
+			visibleCols.push(col);
+			if (col.isFlex()) flexCount++;
+			else fixedSpace += col.width();
+			const order = options.orderedColumns().findIndex((orderedCol) => orderedCol.id === col.id);
+			vars[`--col-${col.id}-order`] = `${order}`;
+		}
+		const remainingSpace = Math.max(0, cWidth - fixedSpace);
+		const flexWidth = flexCount > 0 ? remainingSpace / flexCount : 0;
+		let leftOffset = 0;
+		let totalW = 0;
+		const computedWidths = new Float64Array(visibleCols.length);
+		for (let i = 0; i < visibleCols.length; i++) {
+			const col = visibleCols[i];
+			let finalWidth = col.width();
+			if (col.isFlex()) finalWidth = Math.max(col.original.minWidth ?? 150, flexWidth);
+			computedWidths[i] = finalWidth;
+			totalW += finalWidth;
+			vars[`--col-${col.id}-width`] = `${finalWidth}px`;
+			if (col.pinned() === "left") {
+				vars[`--col-${col.id}-left`] = `${leftOffset}px`;
+				leftOffset += finalWidth;
 			}
-			let rightOffset = 0;
-			for (let i = visibleCols.length - 1; i >= 0; i--) {
-				const col = visibleCols[i];
-				if (col.pinned() === "right") {
-					vars[`--col-${col.id}-right`] = `${rightOffset}px`;
-					rightOffset += computedWidths[i];
-				}
+		}
+		let rightOffset = 0;
+		for (let i = visibleCols.length - 1; i >= 0; i--) {
+			const col = visibleCols[i];
+			if (col.pinned() === "right") {
+				vars[`--col-${col.id}-right`] = `${rightOffset}px`;
+				rightOffset += computedWidths[i];
 			}
-			vars["--total-grid-width"] = `${totalW}px`;
-			vars["--row-height"] = `${options.rowSize()}px`;
-			const theme = {
-				...require_const.DEFAULT_THEME,
-				...options.theme
-			};
-			vars["--border"] = theme.border;
-			vars["--border-color"] = theme.borderColor;
-			vars["--rounded"] = theme.rounded;
-			vars["--row-bg-color"] = theme.rowBgColor;
-			vars["--row-even-bg-color"] = theme.rowEvenBgColor;
-			vars["--row-hover-bg-color"] = theme.rowHoverBgColor;
-			vars["--head-cell-bg-color"] = theme.headCellBgColor;
-			vars["--head-cell-border-bottom-color"] = theme.headCellBorderBottomColor;
-			vars["--grid-cell-border-color"] = theme.gridCellBorderColor;
-			vars["--grid-cell-pinned-border-color"] = theme.gridCellPinnedBorderColor;
-			return vars;
+		}
+		vars["--total-grid-width"] = `${totalW}px`;
+		vars["--row-height"] = `${options.rowSize()}px`;
+		const theme = {
+			...require_const.DEFAULT_THEME,
+			...options.theme
+		};
+		vars["--border"] = theme.border;
+		vars["--border-color"] = theme.borderColor;
+		vars["--rounded"] = theme.rounded;
+		vars["--row-bg-color"] = theme.rowBgColor;
+		vars["--row-even-bg-color"] = theme.rowEvenBgColor;
+		vars["--row-hover-bg-color"] = theme.rowHoverBgColor;
+		vars["--head-cell-bg-color"] = theme.headCellBgColor;
+		vars["--head-cell-border-bottom-color"] = theme.headCellBorderBottomColor;
+		vars["--grid-cell-border-color"] = theme.gridCellBorderColor;
+		vars["--grid-cell-pinned-border-color"] = theme.gridCellPinnedBorderColor;
+		return vars;
+	});
+	const totalWidth = (0, _cerberus_design_signals.createComputed)(() => options.columns().reduce((acc, c) => acc + c.width(), 0));
+	return {
+		phase,
+		pending,
+		pendingVariant: (0, _cerberus_design_signals.createComputed)(() => {
+			const isPending = pending();
+			const currentPhase = phase();
+			if (!isPending) return void 0;
+			if (currentPhase === "initialPending" && options.overlays?.initial) return options.overlays.initial;
+			return options.overlays?.pending;
 		}),
-		totalWidth: (0, _cerberus_design_signals.createComputed)(() => options.columns().reduce((acc, c) => acc + c.width(), 0)),
+		hasSkeleton,
+		rootCssVars,
+		totalWidth,
 		resizeColumn: (colId, delta) => {
 			const columns = options.columns();
 			const col = columns.find((c) => c.id === colId);
@@ -90,6 +101,9 @@ function createLayoutStore(options) {
 		},
 		updatePending: (newState) => {
 			setPending(newState);
+			const currentPhase = phase();
+			if (newState && currentPhase === "initial") setPhase("initialPending");
+			else if (!newState && (currentPhase === "initialPending" || currentPhase === "initial")) setPhase("mounted");
 		}
 	};
 }

package/dist/stores/layout.d.cts

@@ -1,8 +1,10 @@
 import { Accessor, Setter } from '@cerberus-design/signals';
-import { GridOptions, PinnedState } from '../types';
+import { GridOptions, LoadingVariant, PinnedState } from '../types';
 import { DataStore } from './data';
-type LayoutStore = {
+export type LayoutStore = {
+    phase: Accessor<Phase>;
     pending: Accessor<boolean>;
+    pendingVariant: Accessor<LoadingVariant>;
     hasSkeleton: Accessor<boolean>;
     rootCssVars: Accessor<Record<string, string>>;
     totalWidth: Accessor<number>;
@@ -11,6 +13,7 @@ type LayoutStore = {
     togglePinned: (colId: string, state: PinnedState) => void;
     updatePending: (newState: boolean) => void;
 };
+type Phase = 'initial' | 'initialPending' | 'mounted';
 type LayoutGridOptions<T> = Omit<GridOptions<T>, 'columns' | 'rowSize'>;
 type Options<T> = {
     columns: DataStore<T>['columns'];

package/dist/stores/layout.d.ts

@@ -1,8 +1,10 @@
 import { Accessor, Setter } from '@cerberus-design/signals';
-import { GridOptions, PinnedState } from '../types';
+import { GridOptions, LoadingVariant, PinnedState } from '../types';
 import { DataStore } from './data';
-type LayoutStore = {
+export type LayoutStore = {
+    phase: Accessor<Phase>;
     pending: Accessor<boolean>;
+    pendingVariant: Accessor<LoadingVariant>;
     hasSkeleton: Accessor<boolean>;
     rootCssVars: Accessor<Record<string, string>>;
     totalWidth: Accessor<number>;
@@ -11,6 +13,7 @@ type LayoutStore = {
     togglePinned: (colId: string, state: PinnedState) => void;
     updatePending: (newState: boolean) => void;
 };
+type Phase = 'initial' | 'initialPending' | 'mounted';
 type LayoutGridOptions<T> = Omit<GridOptions<T>, 'columns' | 'rowSize'>;
 type Options<T> = {
     columns: DataStore<T>['columns'];

package/dist/stores/layout.js

@@ -4,71 +4,82 @@ import { createComputed, createSignal } from "@cerberus-design/signals";
 //#region src/stores/layout.ts
 function createLayoutStore(options) {
 	const [containerWidth, setContainerWidth] = createSignal(0);
+	const [phase, setPhase] = createSignal("initialPending");
 	const [pending, setPending] = createSignal(options.pending ?? false);
 	const [hasSkeleton] = createSignal(options.overlays?.pending === "skeleton");
-	return {
-		pending,
-		hasSkeleton,
-		rootCssVars: createComputed(() => {
-			const vars = {};
-			const visibleCols = [];
-			const cols = options.columns();
-			const cWidth = containerWidth();
-			let fixedSpace = 0;
-			let flexCount = 0;
-			for (let i = 0; i < cols.length; i++) {
-				const col = cols[i];
-				if (!col.isVisible()) continue;
-				visibleCols.push(col);
-				if (col.isFlex()) flexCount++;
-				else fixedSpace += col.width();
-				const order = options.orderedColumns().findIndex((orderedCol) => orderedCol.id === col.id);
-				vars[`--col-${col.id}-order`] = `${order}`;
-			}
-			const remainingSpace = Math.max(0, cWidth - fixedSpace);
-			const flexWidth = flexCount > 0 ? remainingSpace / flexCount : 0;
-			let leftOffset = 0;
-			let totalW = 0;
-			const computedWidths = new Float64Array(visibleCols.length);
-			for (let i = 0; i < visibleCols.length; i++) {
-				const col = visibleCols[i];
-				let finalWidth = col.width();
-				if (col.isFlex()) finalWidth = Math.max(col.original.minWidth ?? 150, flexWidth);
-				computedWidths[i] = finalWidth;
-				totalW += finalWidth;
-				vars[`--col-${col.id}-width`] = `${finalWidth}px`;
-				if (col.pinned() === "left") {
-					vars[`--col-${col.id}-left`] = `${leftOffset}px`;
-					leftOffset += finalWidth;
-				}
+	const rootCssVars = createComputed(() => {
+		const vars = {};
+		const visibleCols = [];
+		const cols = options.columns();
+		const cWidth = containerWidth();
+		let fixedSpace = 0;
+		let flexCount = 0;
+		for (let i = 0; i < cols.length; i++) {
+			const col = cols[i];
+			if (!col.isVisible()) continue;
+			visibleCols.push(col);
+			if (col.isFlex()) flexCount++;
+			else fixedSpace += col.width();
+			const order = options.orderedColumns().findIndex((orderedCol) => orderedCol.id === col.id);
+			vars[`--col-${col.id}-order`] = `${order}`;
+		}
+		const remainingSpace = Math.max(0, cWidth - fixedSpace);
+		const flexWidth = flexCount > 0 ? remainingSpace / flexCount : 0;
+		let leftOffset = 0;
+		let totalW = 0;
+		const computedWidths = new Float64Array(visibleCols.length);
+		for (let i = 0; i < visibleCols.length; i++) {
+			const col = visibleCols[i];
+			let finalWidth = col.width();
+			if (col.isFlex()) finalWidth = Math.max(col.original.minWidth ?? 150, flexWidth);
+			computedWidths[i] = finalWidth;
+			totalW += finalWidth;
+			vars[`--col-${col.id}-width`] = `${finalWidth}px`;
+			if (col.pinned() === "left") {
+				vars[`--col-${col.id}-left`] = `${leftOffset}px`;
+				leftOffset += finalWidth;
 			}
-			let rightOffset = 0;
-			for (let i = visibleCols.length - 1; i >= 0; i--) {
-				const col = visibleCols[i];
-				if (col.pinned() === "right") {
-					vars[`--col-${col.id}-right`] = `${rightOffset}px`;
-					rightOffset += computedWidths[i];
-				}
+		}
+		let rightOffset = 0;
+		for (let i = visibleCols.length - 1; i >= 0; i--) {
+			const col = visibleCols[i];
+			if (col.pinned() === "right") {
+				vars[`--col-${col.id}-right`] = `${rightOffset}px`;
+				rightOffset += computedWidths[i];
 			}
-			vars["--total-grid-width"] = `${totalW}px`;
-			vars["--row-height"] = `${options.rowSize()}px`;
-			const theme = {
-				...DEFAULT_THEME,
-				...options.theme
-			};
-			vars["--border"] = theme.border;
-			vars["--border-color"] = theme.borderColor;
-			vars["--rounded"] = theme.rounded;
-			vars["--row-bg-color"] = theme.rowBgColor;
-			vars["--row-even-bg-color"] = theme.rowEvenBgColor;
-			vars["--row-hover-bg-color"] = theme.rowHoverBgColor;
-			vars["--head-cell-bg-color"] = theme.headCellBgColor;
-			vars["--head-cell-border-bottom-color"] = theme.headCellBorderBottomColor;
-			vars["--grid-cell-border-color"] = theme.gridCellBorderColor;
-			vars["--grid-cell-pinned-border-color"] = theme.gridCellPinnedBorderColor;
-			return vars;
+		}
+		vars["--total-grid-width"] = `${totalW}px`;
+		vars["--row-height"] = `${options.rowSize()}px`;
+		const theme = {
+			...DEFAULT_THEME,
+			...options.theme
+		};
+		vars["--border"] = theme.border;
+		vars["--border-color"] = theme.borderColor;
+		vars["--rounded"] = theme.rounded;
+		vars["--row-bg-color"] = theme.rowBgColor;
+		vars["--row-even-bg-color"] = theme.rowEvenBgColor;
+		vars["--row-hover-bg-color"] = theme.rowHoverBgColor;
+		vars["--head-cell-bg-color"] = theme.headCellBgColor;
+		vars["--head-cell-border-bottom-color"] = theme.headCellBorderBottomColor;
+		vars["--grid-cell-border-color"] = theme.gridCellBorderColor;
+		vars["--grid-cell-pinned-border-color"] = theme.gridCellPinnedBorderColor;
+		return vars;
+	});
+	const totalWidth = createComputed(() => options.columns().reduce((acc, c) => acc + c.width(), 0));
+	return {
+		phase,
+		pending,
+		pendingVariant: createComputed(() => {
+			const isPending = pending();
+			const currentPhase = phase();
+			if (!isPending) return void 0;
+			if (currentPhase === "initialPending" && options.overlays?.initial) return options.overlays.initial;
+			return options.overlays?.pending;
 		}),
-		totalWidth: createComputed(() => options.columns().reduce((acc, c) => acc + c.width(), 0)),
+		hasSkeleton,
+		rootCssVars,
+		totalWidth,
 		resizeColumn: (colId, delta) => {
 			const columns = options.columns();
 			const col = columns.find((c) => c.id === colId);
@@ -90,6 +101,9 @@ function createLayoutStore(options) {
 		},
 		updatePending: (newState) => {
 			setPending(newState);
+			const currentPhase = phase();
+			if (newState && currentPhase === "initial") setPhase("initialPending");
+			else if (!newState && (currentPhase === "initialPending" || currentPhase === "initial")) setPhase("mounted");
 		}
 	};
 }

package/dist/types.d.cts

@@ -2,6 +2,7 @@ import { PageDetails, EnforceNoProperties, PaginationRootProps } from '@cerberus
 import { Setter, Accessor } from '@cerberus-design/signals';
 import { ReactNode } from 'react';
 import { RowSize } from './const';
+import { LayoutStore } from './stores';
 export interface GridOptions<TData> {
     /**
      * The full Array of data you want the grid to render.
@@ -145,7 +146,7 @@ export type SortState = {
     id: string;
     desc: boolean;
 };
-export interface GridStore<TData> {
+export interface GridStore<TData> extends LayoutStore {
     columns: Accessor<InternalColumn<TData>[]>;
     rows: Accessor<TData[]>;
     pending: Accessor<boolean>;
@@ -169,7 +170,6 @@ export interface GridStore<TData> {
     rowSize: Accessor<number>;
     totalWidth: Accessor<number>;
     resizeColumn: (colId: string, delta: number) => void;
-    setContainerWidth: (val: number) => void;
     setPage: (details: PageDetails) => void;
     setPageSize: (size: number) => void;
     setGlobalFilter: (val: BaseFilterState) => void;
@@ -241,10 +241,19 @@ export type OverlaySlots = {
      */
     noContent?: ReactNode;
     /**
-     * A custom component to display within the Grid Viewport when the `pending`
-     * prop is set to true.
+     * When provided (and the DataGrid has finished the initial pending phase), the
+     * `pending` overlay will be displayed within the Grid Viewport any time
+     * the `DataGrid.pending` prop is set to `true`.
      */
     pending?: LoadingVariant;
+    /**
+     * When provided, the `initial` overlay will be displayed within the Grid Viewport
+     * when the DataGrid has not yet finished the initial pending phase. This is triggered
+     * by the `DataGrid.pending` prop being set to `true` for the first time on the initial load.
+     *
+     * Once the `DataGrid.pending` prop is set to `false`, the `overlays.pending` slot will be used.
+     */
+    initial?: LoadingVariant;
 };
 export type ThemeOptions = {
     /**

package/dist/types.d.ts

@@ -2,6 +2,7 @@ import { PageDetails, EnforceNoProperties, PaginationRootProps } from '@cerberus
 import { Setter, Accessor } from '@cerberus-design/signals';
 import { ReactNode } from 'react';
 import { RowSize } from './const';
+import { LayoutStore } from './stores';
 export interface GridOptions<TData> {
     /**
      * The full Array of data you want the grid to render.
@@ -145,7 +146,7 @@ export type SortState = {
     id: string;
     desc: boolean;
 };
-export interface GridStore<TData> {
+export interface GridStore<TData> extends LayoutStore {
     columns: Accessor<InternalColumn<TData>[]>;
     rows: Accessor<TData[]>;
     pending: Accessor<boolean>;
@@ -169,7 +170,6 @@ export interface GridStore<TData> {
     rowSize: Accessor<number>;
     totalWidth: Accessor<number>;
     resizeColumn: (colId: string, delta: number) => void;
-    setContainerWidth: (val: number) => void;
     setPage: (details: PageDetails) => void;
     setPageSize: (size: number) => void;
     setGlobalFilter: (val: BaseFilterState) => void;
@@ -241,10 +241,19 @@ export type OverlaySlots = {
      */
     noContent?: ReactNode;
     /**
-     * A custom component to display within the Grid Viewport when the `pending`
-     * prop is set to true.
+     * When provided (and the DataGrid has finished the initial pending phase), the
+     * `pending` overlay will be displayed within the Grid Viewport any time
+     * the `DataGrid.pending` prop is set to `true`.
      */
     pending?: LoadingVariant;
+    /**
+     * When provided, the `initial` overlay will be displayed within the Grid Viewport
+     * when the DataGrid has not yet finished the initial pending phase. This is triggered
+     * by the `DataGrid.pending` prop being set to `true` for the first time on the initial load.
+     *
+     * Once the `DataGrid.pending` prop is set to `false`, the `overlays.pending` slot will be used.
+     */
+    initial?: LoadingVariant;
 };
 export type ThemeOptions = {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/data-grid",
-  "version": "1.4.0",
+  "version": "1.5.0-next-67466c4",
   "description": "The Cerberus Design React DataGrid component.",
   "keywords": [
     "data grid",
@@ -27,20 +27,20 @@
     "access": "public"
   },
   "dependencies": {
-    "@cerberus-design/react": "1.4.0",
-    "@cerberus-design/signals": "1.4.0"
+    "@cerberus-design/react": "1.5.0-next-67466c4",
+    "@cerberus-design/signals": "1.5.0-next-67466c4"
   },
   "devDependencies": {
     "@pandacss/dev": "^1.11.1",
-    "@types/react": "^19.2.15",
+    "@types/react": "^19.2.16",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.1",
+    "@vitejs/plugin-react": "^6.0.2",
     "globby": "^16.2.0",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
     "vite": "^8.0.14",
     "vite-plugin-dts": "^5.0.1",
-    "@cerberus/panda-preset": "1.4.0",
+    "@cerberus/panda-preset": "1.5.0-next-67466c4",
     "styled-system": "0.0.0"
   },
   "peerDependencies": {