@cerberus-design/data-grid 1.1.2 → 1.2.0-rc.1

package/dist/store.js

@@ -1,6 +1,6 @@
 "use client";
-import { DEFAULT_THEME } from "./const.js";
-import { determineInitialCount, determinePageIndex, determinePageRange, determinePageSize, determineRowHeight } from "./utils.js";
+import { DEFAULT_THEME, OPERATORS } from "./const.js";
+import { applyFilterOperator, determineInitialCount, determinePageIndex, determinePageRange, determinePageSize, determineRowHeight } from "./utils.js";
 import { batch, createComputed, createSignal } from "@cerberus-design/signals";
 //#region src/store.ts
 /**
@@ -11,7 +11,18 @@ function createGridStore(options) {
 	const [containerWidth, setContainerWidth] = createSignal(0);
 	const [rows, setRows] = createSignal(options.data);
 	const [rowSize] = createSignal(determineRowHeight(options.rowSize));
-	const [globalFilter, setGlobalFilter] = createSignal("");
+	const [pending, setPending] = createSignal(options.pending ?? false);
+	const [hasSkeleton] = createSignal(options.overlays?.pending === "skeleton");
+	const [showColFilter, setShowColFilter] = createSignal(false);
+	const [globalFilter, setGlobalFilter] = createSignal({
+		operator: OPERATORS.contains,
+		value: null
+	});
+	const [colFilters, setColFilters] = createSignal({
+		active: [],
+		filters: {},
+		editing: null
+	});
 	const [sorting, setSorting] = createSignal([]);
 	const [pageIndex, setPageIndex] = createSignal(determinePageIndex(options.initialState?.pagination));
 	const [pageSize, setPageSize] = createSignal(determinePageSize(options.initialState?.pagination));
@@ -52,17 +63,33 @@ function createGridStore(options) {
 			end: pageIndex() * pageSize()
 		};
 	});
-	const processedRows = createComputed(() => {
+	const filteredRows = createComputed(() => {
 		let result = [...rows()];
-		const filter = globalFilter().toLowerCase();
-		const sortState = sorting();
-		if (filter) result = result.filter((row) => {
+		const gFilter = globalFilter();
+		const cFilters = colFilters();
+		if (cFilters.active.length > 0) result = result.filter((row) => {
+			return cFilters.active.every((filterId) => {
+				const col = columns().find((c) => c.id === filterId);
+				const filter = cFilters.filters[filterId];
+				if (!col || !col.filterable) return true;
+				const customFn = typeof col.original.features?.filter === "function" ? col.original.features.filter : void 0;
+				if (customFn) return customFn(row, col.id, filter.value);
+				return applyFilterOperator(col.getValue(row), filter.value, filter.operator);
+			});
+		});
+		if (gFilter.value) result = result.filter((row) => {
 			return columns().some((col) => {
 				if (!col.filterable) return false;
-				return String(col.getValue(row)).toLowerCase().includes(filter);
+				return applyFilterOperator(col.getValue(row), gFilter.value, gFilter.operator);
 			});
 		});
-		if (sortState.length > 0) result.sort((a, b) => {
+		return result;
+	});
+	const sortedRows = createComputed(() => {
+		const currentRows = [...filteredRows()];
+		const sortState = sorting();
+		if (sortState.length === 0) return currentRows;
+		return currentRows.sort((a, b) => {
 			for (const sort of sortState) {
 				const col = columns().find((c) => c.id === sort.id);
 				if (!col) continue;
@@ -77,9 +104,10 @@ function createGridStore(options) {
 			}
 			return 0;
 		});
-		return result;
 	});
-	const rowCount = createComputed(() => determineInitialCount(options?.initialState?.pagination) ?? processedRows().length);
+	const rowCount = createComputed(() => {
+		return determineInitialCount(options?.initialState?.pagination) ?? sortedRows().length;
+	});
 	const pageCount = createComputed(() => Math.ceil(rowCount() / pageSize()));
 	const orderedColumns = createComputed(() => {
 		const left = [];
@@ -97,18 +125,24 @@ function createGridStore(options) {
 			...right
 		];
 	});
-	const visibleRows = createComputed(() => {
-		if (pageSize() && pageCount() > 1) {
-			const currentRange = currentPageRange();
-			return processedRows().slice(currentRange.start, currentRange.end);
-		}
-		return processedRows();
-	});
 	return {
 		columns,
 		rows,
+		rowCount,
+		rowSize,
+		visibleRows: createComputed(() => {
+			if (pageSize() && pageCount() > 1) {
+				const currentRange = currentPageRange();
+				return sortedRows().slice(currentRange.start, currentRange.end);
+			}
+			return sortedRows();
+		}),
+		showColFilter,
 		globalFilter,
+		colFilters,
 		sorting,
+		pending,
+		hasSkeleton,
 		pageCount,
 		pageIndex,
 		pageSize,
@@ -174,13 +208,13 @@ function createGridStore(options) {
 			vars["--grid-cell-pinned-border-color"] = theme.gridCellPinnedBorderColor;
 			return vars;
 		}),
-		rowCount,
-		rowSize,
 		totalWidth: createComputed(() => columns().reduce((acc, c) => acc + c.width(), 0)),
-		visibleRows,
 		updateData: (newData) => {
 			setRows(newData);
 		},
+		updatePending: (newState) => {
+			setPending(newState);
+		},
 		setSort: (colId, direction, multi = false) => {
 			if (direction === null) {
 				setSorting(sorting().filter((s) => s.id !== colId));
@@ -233,10 +267,19 @@ function createGridStore(options) {
 		},
 		setGlobalFilter: (val) => {
 			batch(() => {
-				setGlobalFilter(val);
+				setGlobalFilter((prev) => ({
+					...prev,
+					...val
+				}));
 				setPageIndex(1);
 			});
 		},
+		setColFilter: (val) => {
+			setColFilters(val);
+		},
+		setShowColFilter: (val) => {
+			setShowColFilter(val);
+		},
 		setContainerWidth: (w) => {
 			setContainerWidth(w);
 		},

package/dist/types.d.cts

@@ -21,10 +21,18 @@ export interface GridOptions<TData> {
      * Called when a user clicks on a pagination page trigger.
      */
     onPageChange?: (details: PageDetails) => void;
+    /**
+     * When set to true, renders the `overlays.loading` component.
+     */
+    pending?: boolean;
     /**
      * Content to display above the Data Grid and within the Grid context.
      */
     toolbar?: ReactNode;
+    /**
+     * Content to within the Data Grid and within the Grid context.
+     */
+    overlays?: OverlaySlots;
     /**
      * Content to display below the Data Grid and within the Grid context.
      */
@@ -140,8 +148,12 @@ export type SortState = {
 export interface GridStore<TData> {
     columns: Accessor<InternalColumn<TData>[]>;
     rows: Accessor<TData[]>;
-    globalFilter: Accessor<string>;
+    pending: Accessor<boolean>;
+    showColFilter: Accessor<boolean>;
+    globalFilter: Accessor<BaseFilterState>;
+    colFilters: Accessor<ColumnFilterState>;
     sorting: Accessor<SortState[]>;
+    visibleRows: Accessor<TData[]>;
     pageIndex: Accessor<number>;
     pageSize: Accessor<number>;
     pageRange: Accessor<number[]>;
@@ -151,20 +163,23 @@ export interface GridStore<TData> {
         end: number;
     }>;
     isServerPaginated: Accessor<boolean>;
+    hasSkeleton: Accessor<boolean>;
     rootCssVars: Accessor<Record<string, string>>;
     rowCount: Accessor<number>;
     rowSize: Accessor<number>;
     totalWidth: Accessor<number>;
-    visibleRows: Accessor<TData[]>;
     resizeColumn: (colId: string, delta: number) => void;
     setContainerWidth: (val: number) => void;
     setPage: (details: PageDetails) => void;
     setPageSize: (size: number) => void;
-    setGlobalFilter: (val: string) => void;
+    setGlobalFilter: (val: BaseFilterState) => void;
+    setColFilter: Setter<ColumnFilterState>;
+    setShowColFilter: (val: boolean) => void;
     setSort: (colId: string, direction: SortDirection, multi?: boolean) => void;
     togglePinned: (colId: string, state: PinnedState) => void;
     toggleSort: (colId: string, multi?: boolean) => void;
     updateData: (newData: TData[]) => void;
+    updatePending: (newState: boolean) => void;
 }
 export type RowSizeOptions = RowSize | number;
 export type ColumnFeatures<TData, TKey extends keyof TData> = {
@@ -175,9 +190,7 @@ export type ColumnFeatures<TData, TKey extends keyof TData> = {
     /**
      * Allow the column to be filtered and the rules to use.
      */
-    filter?: boolean | {
-        operator?: 'contains' | 'equals' | 'startsWith';
-    };
+    filter?: boolean | FilterFn<TData>;
     /**
      * Show pinning options in the column menu
      */
@@ -200,6 +213,39 @@ export type AccessorFn<TData> = (row: TData) => ReactNode;
 export type Comparator<TValue> = (a: TValue, b: TValue) => number;
 export type SortDirection = 'asc' | 'desc' | null;
 export type PinnedState = 'left' | 'right' | undefined | boolean;
+export type LoadingVariant = 'skeleton' | 'linear' | 'circular' | ReactNode;
+export type FilterFn<TData> = (row: TData, columnId: string, filterValue: unknown) => boolean;
+export type FilterOperator = 'contains' | 'equals' | 'starts_with' | 'ends_with' | 'greater_than' | 'less_than' | 'between' | 'includes_some';
+export type BaseFilterState = {
+    /**
+     * The preferred operator to use for filtering the data.
+     */
+    operator: FilterOperator;
+    value: unknown;
+};
+export type ColumnFilter = BaseFilterState & {
+    /**
+     * The column.id the filter is meant to be applied to.
+     */
+    id: string;
+};
+export type ColumnFilterState = {
+    active: string[];
+    filters: Record<string, ColumnFilter>;
+    editing: string | null;
+};
+export type OverlaySlots = {
+    /**
+     * A custom component to display within the Grid Viewport when no rows are
+     * present in the data or filtered out. Defaults to a basic fallback.
+     */
+    noContent?: ReactNode;
+    /**
+     * A custom component to display within the Grid Viewport when the `pending`
+     * prop is set to true.
+     */
+    pending?: LoadingVariant;
+};
 export type ThemeOptions = {
     /**
      * The external border of the Data Grid container.

package/dist/types.d.ts

@@ -21,10 +21,18 @@ export interface GridOptions<TData> {
      * Called when a user clicks on a pagination page trigger.
      */
     onPageChange?: (details: PageDetails) => void;
+    /**
+     * When set to true, renders the `overlays.loading` component.
+     */
+    pending?: boolean;
     /**
      * Content to display above the Data Grid and within the Grid context.
      */
     toolbar?: ReactNode;
+    /**
+     * Content to within the Data Grid and within the Grid context.
+     */
+    overlays?: OverlaySlots;
     /**
      * Content to display below the Data Grid and within the Grid context.
      */
@@ -140,8 +148,12 @@ export type SortState = {
 export interface GridStore<TData> {
     columns: Accessor<InternalColumn<TData>[]>;
     rows: Accessor<TData[]>;
-    globalFilter: Accessor<string>;
+    pending: Accessor<boolean>;
+    showColFilter: Accessor<boolean>;
+    globalFilter: Accessor<BaseFilterState>;
+    colFilters: Accessor<ColumnFilterState>;
     sorting: Accessor<SortState[]>;
+    visibleRows: Accessor<TData[]>;
     pageIndex: Accessor<number>;
     pageSize: Accessor<number>;
     pageRange: Accessor<number[]>;
@@ -151,20 +163,23 @@ export interface GridStore<TData> {
         end: number;
     }>;
     isServerPaginated: Accessor<boolean>;
+    hasSkeleton: Accessor<boolean>;
     rootCssVars: Accessor<Record<string, string>>;
     rowCount: Accessor<number>;
     rowSize: Accessor<number>;
     totalWidth: Accessor<number>;
-    visibleRows: Accessor<TData[]>;
     resizeColumn: (colId: string, delta: number) => void;
     setContainerWidth: (val: number) => void;
     setPage: (details: PageDetails) => void;
     setPageSize: (size: number) => void;
-    setGlobalFilter: (val: string) => void;
+    setGlobalFilter: (val: BaseFilterState) => void;
+    setColFilter: Setter<ColumnFilterState>;
+    setShowColFilter: (val: boolean) => void;
     setSort: (colId: string, direction: SortDirection, multi?: boolean) => void;
     togglePinned: (colId: string, state: PinnedState) => void;
     toggleSort: (colId: string, multi?: boolean) => void;
     updateData: (newData: TData[]) => void;
+    updatePending: (newState: boolean) => void;
 }
 export type RowSizeOptions = RowSize | number;
 export type ColumnFeatures<TData, TKey extends keyof TData> = {
@@ -175,9 +190,7 @@ export type ColumnFeatures<TData, TKey extends keyof TData> = {
     /**
      * Allow the column to be filtered and the rules to use.
      */
-    filter?: boolean | {
-        operator?: 'contains' | 'equals' | 'startsWith';
-    };
+    filter?: boolean | FilterFn<TData>;
     /**
      * Show pinning options in the column menu
      */
@@ -200,6 +213,39 @@ export type AccessorFn<TData> = (row: TData) => ReactNode;
 export type Comparator<TValue> = (a: TValue, b: TValue) => number;
 export type SortDirection = 'asc' | 'desc' | null;
 export type PinnedState = 'left' | 'right' | undefined | boolean;
+export type LoadingVariant = 'skeleton' | 'linear' | 'circular' | ReactNode;
+export type FilterFn<TData> = (row: TData, columnId: string, filterValue: unknown) => boolean;
+export type FilterOperator = 'contains' | 'equals' | 'starts_with' | 'ends_with' | 'greater_than' | 'less_than' | 'between' | 'includes_some';
+export type BaseFilterState = {
+    /**
+     * The preferred operator to use for filtering the data.
+     */
+    operator: FilterOperator;
+    value: unknown;
+};
+export type ColumnFilter = BaseFilterState & {
+    /**
+     * The column.id the filter is meant to be applied to.
+     */
+    id: string;
+};
+export type ColumnFilterState = {
+    active: string[];
+    filters: Record<string, ColumnFilter>;
+    editing: string | null;
+};
+export type OverlaySlots = {
+    /**
+     * A custom component to display within the Grid Viewport when no rows are
+     * present in the data or filtered out. Defaults to a basic fallback.
+     */
+    noContent?: ReactNode;
+    /**
+     * A custom component to display within the Grid Viewport when the `pending`
+     * prop is set to true.
+     */
+    pending?: LoadingVariant;
+};
 export type ThemeOptions = {
     /**
      * The external border of the Data Grid container.

package/dist/utils.cjs

@@ -29,7 +29,30 @@ function determineInitialCount(options) {
 	if (typeof options === "boolean" && options === true) return;
 	return options?.count ?? void 0;
 }
+function applyFilterOperator(cellValue, filterValue, operator = require_const.OPERATORS.contains) {
+	if (filterValue === void 0 || filterValue === null || filterValue === "") return true;
+	if (cellValue === void 0 || cellValue === null) return false;
+	const cellStr = String(cellValue).toLowerCase();
+	const filterStr = String(filterValue).toLowerCase();
+	switch (operator) {
+		case require_const.OPERATORS.contains: return cellStr.includes(filterStr);
+		case require_const.OPERATORS.equals: return cellValue == filterValue || cellStr === filterStr;
+		case require_const.OPERATORS.starts_with: return cellStr.startsWith(filterStr);
+		case require_const.OPERATORS.ends_with: return cellStr.endsWith(filterStr);
+		case require_const.OPERATORS.greater_than: return Number(cellValue) > Number(filterValue);
+		case require_const.OPERATORS.less_than: return Number(cellValue) < Number(filterValue);
+		case require_const.OPERATORS.between:
+			if (!Array.isArray(filterValue)) return false;
+			const val = Number(cellValue);
+			return val >= Number(filterValue[0]) && val <= Number(filterValue[1]);
+		case require_const.OPERATORS.includes_some:
+			if (!Array.isArray(filterValue)) return false;
+			return filterValue.includes(cellValue);
+		default: return true;
+	}
+}
 //#endregion
+exports.applyFilterOperator = applyFilterOperator;
 exports.determineInitialCount = determineInitialCount;
 exports.determinePageIndex = determinePageIndex;
 exports.determinePageRange = determinePageRange;

package/dist/utils.d.cts

@@ -1,6 +1,7 @@
-import { PaginationOptions, RowSizeOptions } from './types';
+import { FilterOperator, PaginationOptions, RowSizeOptions } from './types';
 export declare function determineRowHeight(rowSize?: RowSizeOptions): number;
 export declare function determinePageSize(options?: boolean | PaginationOptions): number;
 export declare function determinePageIndex(options?: boolean | PaginationOptions): number;
 export declare function determinePageRange(options?: boolean | PaginationOptions): number[];
 export declare function determineInitialCount(options?: boolean | PaginationOptions): number | undefined;
+export declare function applyFilterOperator(cellValue: unknown, filterValue: unknown, operator?: FilterOperator): boolean;

package/dist/utils.d.ts

@@ -1,6 +1,7 @@
-import { PaginationOptions, RowSizeOptions } from './types';
+import { FilterOperator, PaginationOptions, RowSizeOptions } from './types';
 export declare function determineRowHeight(rowSize?: RowSizeOptions): number;
 export declare function determinePageSize(options?: boolean | PaginationOptions): number;
 export declare function determinePageIndex(options?: boolean | PaginationOptions): number;
 export declare function determinePageRange(options?: boolean | PaginationOptions): number[];
 export declare function determineInitialCount(options?: boolean | PaginationOptions): number | undefined;
+export declare function applyFilterOperator(cellValue: unknown, filterValue: unknown, operator?: FilterOperator): boolean;

package/dist/utils.js

@@ -1,5 +1,5 @@
 "use client";
-import { DEFAULT_PAGE_SIZES, ROW_SIZES } from "./const.js";
+import { DEFAULT_PAGE_SIZES, OPERATORS, ROW_SIZES } from "./const.js";
 //#region src/utils.ts
 function determineRowHeight(rowSize = "sm") {
 	const prebuiltSizes = ROW_SIZES.items;
@@ -29,5 +29,27 @@ function determineInitialCount(options) {
 	if (typeof options === "boolean" && options === true) return;
 	return options?.count ?? void 0;
 }
+function applyFilterOperator(cellValue, filterValue, operator = OPERATORS.contains) {
+	if (filterValue === void 0 || filterValue === null || filterValue === "") return true;
+	if (cellValue === void 0 || cellValue === null) return false;
+	const cellStr = String(cellValue).toLowerCase();
+	const filterStr = String(filterValue).toLowerCase();
+	switch (operator) {
+		case OPERATORS.contains: return cellStr.includes(filterStr);
+		case OPERATORS.equals: return cellValue == filterValue || cellStr === filterStr;
+		case OPERATORS.starts_with: return cellStr.startsWith(filterStr);
+		case OPERATORS.ends_with: return cellStr.endsWith(filterStr);
+		case OPERATORS.greater_than: return Number(cellValue) > Number(filterValue);
+		case OPERATORS.less_than: return Number(cellValue) < Number(filterValue);
+		case OPERATORS.between:
+			if (!Array.isArray(filterValue)) return false;
+			const val = Number(cellValue);
+			return val >= Number(filterValue[0]) && val <= Number(filterValue[1]);
+		case OPERATORS.includes_some:
+			if (!Array.isArray(filterValue)) return false;
+			return filterValue.includes(cellValue);
+		default: return true;
+	}
+}
 //#endregion
-export { determineInitialCount, determinePageIndex, determinePageRange, determinePageSize, determineRowHeight };
+export { applyFilterOperator, determineInitialCount, determinePageIndex, determinePageRange, determinePageSize, determineRowHeight };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/data-grid",
-  "version": "1.1.2",
+  "version": "1.2.0-rc.1",
   "description": "The Cerberus Design React DataGrid component.",
   "keywords": [
     "data grid",
@@ -27,20 +27,20 @@
     "access": "public"
   },
   "dependencies": {
-    "@cerberus-design/react": "1.1.2",
-    "@cerberus-design/signals": "1.1.2"
+    "@cerberus-design/react": "1.2.0-rc.1",
+    "@cerberus-design/signals": "1.2.0-rc.1"
   },
   "devDependencies": {
     "@pandacss/dev": "^1.9.1",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.1",
-    "globby": "^16.1.1",
+    "globby": "^16.2.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "vite": "^8.0.2",
+    "vite": "^8.0.8",
     "vite-plugin-dts": "^4.5.4",
-    "@cerberus/panda-preset": "1.1.2",
+    "@cerberus/panda-preset": "1.2.0-rc.1",
     "styled-system": "0.0.0"
   },
   "peerDependencies": {