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

package/dist/components/viewport.client.js

@@ -0,0 +1,115 @@
+"use client";
+"use client";
+import { PARTS, SCOPE } from "../const.js";
+import { useDataGridContext } from "../context.client.js";
+import { DGPopoverContent } from "./popover.client.js";
+import { useVirtualizer } from "../virtualizer.client.js";
+import { GridHeaderCell, GridRow } from "./grid.client.js";
+import { NoContentOverlay, PendingOverlay } from "./overlays.js";
+import { For, Show } from "@cerberus-design/react";
+import { createComputed, useRead } from "@cerberus-design/signals";
+import { memo, useMemo, useRef } from "react";
+import { Box, HStack, Scrollable, Stack } from "styled-system/jsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/viewport.client.tsx
+var GridViewport = memo(function GridViewport(props) {
+	const viewportRef = useRef(null);
+	const store = useDataGridContext();
+	const columns = useRead(store.columns);
+	const rowCount = useRead(store.rowCount);
+	const staticRows = useRead(store.rows);
+	const pending = useRead(store.pending);
+	const shouldLock = createComputed(() => rowCount <= 0);
+	const hasNonSkeleton = useMemo(() => {
+		const overlays = props.overlays;
+		if (!overlays) return false;
+		return overlays?.pending !== "skeleton";
+	}, [props.overlays]);
+	return /* @__PURE__ */ jsxs(Scrollable, {
+		"data-scope": SCOPE,
+		"data-part": PARTS.VIEWPORT,
+		"data-lock": pending && hasNonSkeleton || shouldLock(),
+		hideScrollbar: true,
+		h: "full",
+		minH: "0",
+		minW: "full",
+		pos: "relative",
+		w: "full",
+		css: { "&:is([data-lock=true])": { overflow: "hidden!" } },
+		ref: viewportRef,
+		children: [
+			/* @__PURE__ */ 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__ */ jsx(HStack, {
+					"aria-rowindex": 1,
+					role: "rowgroup",
+					gap: "0",
+					h: "full",
+					pos: "relative",
+					w: "full",
+					children: /* @__PURE__ */ jsx(For, {
+						each: columns,
+						children: (col) => /* @__PURE__ */ jsx(Show, {
+							when: col.isVisible(),
+							children: () => /* @__PURE__ */ jsx(GridHeaderCell, { column: col })
+						}, col.id)
+					})
+				})
+			}),
+			/* @__PURE__ */ jsx(Show, {
+				when: rowCount > 0,
+				fallback: /* @__PURE__ */ jsx(NoContentOverlay, { custom: props.overlays?.noContent }),
+				children: () => /* @__PURE__ */ jsx(TableRows, { viewportRef })
+			}),
+			/* @__PURE__ */ jsx(Show, {
+				when: pending,
+				children: () => /* @__PURE__ */ jsx(PendingOverlay, { variant: props.overlays?.pending })
+			}),
+			/* @__PURE__ */ jsx(DGPopoverContent, { ref: props.rootRef })
+		]
+	});
+});
+var TableRows = memo((props) => {
+	const store = useDataGridContext();
+	const { virtualRows, totalHeight } = useVirtualizer(store, props.viewportRef);
+	const isServerPaginated = useRead(store.isServerPaginated);
+	const staticRows = useRead(store.rows);
+	const currentPageRange = useRead(store.currentPageRange);
+	return /* @__PURE__ */ jsx(Show, {
+		when: isServerPaginated,
+		fallback: /* @__PURE__ */ jsx(Box, {
+			pos: "relative",
+			w: "var(--total-grid-width)",
+			style: { height: `${totalHeight}px` },
+			children: /* @__PURE__ */ jsx(For, {
+				each: virtualRows,
+				children: (vRow) => /* @__PURE__ */ jsx(GridRow, {
+					row: vRow.data,
+					index: vRow.index,
+					offsetY: vRow.offsetY
+				}, vRow.index)
+			})
+		}),
+		children: () => /* @__PURE__ */ jsx(Stack, {
+			direction: "column",
+			gap: "0",
+			w: "var(--total-grid-width)",
+			children: /* @__PURE__ */ jsx(For, {
+				each: staticRows.slice(currentPageRange.start, currentPageRange.end),
+				children: (row, index) => /* @__PURE__ */ jsx(GridRow, {
+					row,
+					index
+				}, index)
+			})
+		})
+	});
+});
+//#endregion
+export { GridViewport };

package/dist/const.cjs

@@ -10,11 +10,35 @@ var PARTS = {
 	CELL: "row-cell",
 	FOOTER: "footer"
 };
+var FEATURE_VALUES = {
+	filter: "filter",
+	filterClear: "clear-filter",
+	pin: "pin",
+	pinRight: "pin_right",
+	pinLeft: "pin_left",
+	unpin: "unpin",
+	unpinRight: "unpin_right",
+	unpinLeft: "unpin_left",
+	unsort: "unsort",
+	sort: "sort",
+	sortAsc: "sort_asc",
+	sortDesc: "sort_desc"
+};
 var DEFAULT_PAGE_SIZES = [
 	25,
 	50,
 	100
 ];
+var OPERATORS = {
+	contains: "contains",
+	equals: "equals",
+	starts_with: "starts_with",
+	ends_with: "ends_with",
+	greater_than: "greater_than",
+	less_than: "less_than",
+	between: "between",
+	includes_some: "includes_some"
+};
 var ROW_SIZES = {
 	items: [
 		"xs",
@@ -46,6 +70,8 @@ var DEFAULT_THEME = {
 //#endregion
 exports.DEFAULT_PAGE_SIZES = DEFAULT_PAGE_SIZES;
 exports.DEFAULT_THEME = DEFAULT_THEME;
+exports.FEATURE_VALUES = FEATURE_VALUES;
+exports.OPERATORS = OPERATORS;
 exports.PARTS = PARTS;
 exports.ROW_SIZES = ROW_SIZES;
 exports.SCOPE = SCOPE;

package/dist/const.d.cts

@@ -1,4 +1,4 @@
-import { ThemeOptions } from './types';
+import { FilterOperator, ThemeOptions } from './types';
 export declare const SCOPE = "data-grid";
 export declare const DEFAULT_COL_H = 40;
 export declare const PARTS: {
@@ -10,11 +10,26 @@ export declare const PARTS: {
     CELL: string;
     FOOTER: string;
 };
+export declare const FEATURE_VALUES: {
+    filter: string;
+    filterClear: string;
+    pin: string;
+    pinRight: string;
+    pinLeft: string;
+    unpin: string;
+    unpinRight: string;
+    unpinLeft: string;
+    unsort: string;
+    sort: string;
+    sortAsc: string;
+    sortDesc: string;
+};
 export declare const DEFAULT_PAGE_IDX = 1;
 export declare const SM_PAGE_SIZE = 25;
 export declare const MD_PAGE_SIZE = 50;
 export declare const LG_PAGE_SIZE = 100;
 export declare const DEFAULT_PAGE_SIZES: number[];
+export declare const OPERATORS: Record<FilterOperator, FilterOperator>;
 export declare const XS = "xs";
 export declare const SM = "sm";
 export declare const MD = "md";

package/dist/const.d.ts

@@ -1,4 +1,4 @@
-import { ThemeOptions } from './types';
+import { FilterOperator, ThemeOptions } from './types';
 export declare const SCOPE = "data-grid";
 export declare const DEFAULT_COL_H = 40;
 export declare const PARTS: {
@@ -10,11 +10,26 @@ export declare const PARTS: {
     CELL: string;
     FOOTER: string;
 };
+export declare const FEATURE_VALUES: {
+    filter: string;
+    filterClear: string;
+    pin: string;
+    pinRight: string;
+    pinLeft: string;
+    unpin: string;
+    unpinRight: string;
+    unpinLeft: string;
+    unsort: string;
+    sort: string;
+    sortAsc: string;
+    sortDesc: string;
+};
 export declare const DEFAULT_PAGE_IDX = 1;
 export declare const SM_PAGE_SIZE = 25;
 export declare const MD_PAGE_SIZE = 50;
 export declare const LG_PAGE_SIZE = 100;
 export declare const DEFAULT_PAGE_SIZES: number[];
+export declare const OPERATORS: Record<FilterOperator, FilterOperator>;
 export declare const XS = "xs";
 export declare const SM = "sm";
 export declare const MD = "md";

package/dist/const.js

@@ -10,11 +10,35 @@ var PARTS = {
 	CELL: "row-cell",
 	FOOTER: "footer"
 };
+var FEATURE_VALUES = {
+	filter: "filter",
+	filterClear: "clear-filter",
+	pin: "pin",
+	pinRight: "pin_right",
+	pinLeft: "pin_left",
+	unpin: "unpin",
+	unpinRight: "unpin_right",
+	unpinLeft: "unpin_left",
+	unsort: "unsort",
+	sort: "sort",
+	sortAsc: "sort_asc",
+	sortDesc: "sort_desc"
+};
 var DEFAULT_PAGE_SIZES = [
 	25,
 	50,
 	100
 ];
+var OPERATORS = {
+	contains: "contains",
+	equals: "equals",
+	starts_with: "starts_with",
+	ends_with: "ends_with",
+	greater_than: "greater_than",
+	less_than: "less_than",
+	between: "between",
+	includes_some: "includes_some"
+};
 var ROW_SIZES = {
 	items: [
 		"xs",
@@ -44,4 +68,4 @@ var DEFAULT_THEME = {
 	gridCellPinnedBorderColor: "var(--cerberus-colors-page-border-200)"
 };
 //#endregion
-export { DEFAULT_PAGE_SIZES, DEFAULT_THEME, PARTS, ROW_SIZES, SCOPE };
+export { DEFAULT_PAGE_SIZES, DEFAULT_THEME, FEATURE_VALUES, OPERATORS, PARTS, ROW_SIZES, SCOPE };

package/dist/index.cjs

@@ -1,9 +1,11 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_const = require("./const.cjs");
 const require_context_client = require("./context.client.cjs");
 const require_data_grid_client = require("./components/data-grid.client.cjs");
 const require_cerby_data_grid_client = require("./components/cerby-data-grid.client.cjs");
 const require_column_helpers = require("./column-helpers.cjs");
 exports.CerberusDataGrid = require_cerby_data_grid_client.CerberusDataGrid;
 exports.DataGrid = require_data_grid_client.DataGrid;
+exports.OPERATORS = require_const.OPERATORS;
 exports.createColumnHelper = require_column_helpers.createColumnHelper;
 exports.useDataGridContext = require_context_client.useDataGridContext;

package/dist/index.d.cts

@@ -6,4 +6,5 @@ export * from './components/data-grid.client';
 export * from './components/cerby-data-grid.client';
 export { useDataGridContext } from './context.client';
 export * from './column-helpers';
+export { OPERATORS } from './const';
 export * from './types';

package/dist/index.d.ts

@@ -6,4 +6,5 @@ export * from './components/data-grid.client';
 export * from './components/cerby-data-grid.client';
 export { useDataGridContext } from './context.client';
 export * from './column-helpers';
+export { OPERATORS } from './const';
 export * from './types';

package/dist/index.js

@@ -1,5 +1,6 @@
+import { OPERATORS } from "./const.js";
 import { useDataGridContext } from "./context.client.js";
 import { DataGrid } from "./components/data-grid.client.js";
 import { CerberusDataGrid } from "./components/cerby-data-grid.client.js";
 import { createColumnHelper } from "./column-helpers.js";
-export { CerberusDataGrid, DataGrid, createColumnHelper, useDataGridContext };
+export { CerberusDataGrid, DataGrid, OPERATORS, createColumnHelper, useDataGridContext };

package/dist/panda.buildinfo.json

@@ -102,34 +102,7 @@
       "transitionProperty]___[value:opacity",
       "transitionDuration]___[value:fast",
       "opacity]___[value:1]___[cond:_groupHover",
-      "overflow]___[value:auto",
-      "scrollBehavior]___[value:smooth",
-      "scrollbarGutter]___[value:stable",
-      "display]___[value:none]___[cond:&::-webkit-scrollbar",
-      "width]___[value:0.5em]___[cond:&::-webkit-scrollbar",
-      "background]___[value:transparent]___[cond:&::-webkit-scrollbar-track",
-      "outline]___[value:none]___[cond:&::-webkit-scrollbar-track",
-      "backgroundColor]___[value:page.border.100]___[cond:&::-webkit-scrollbar-thumb",
-      "borderRadius]___[value:5px]___[cond:&::-webkit-scrollbar-thumb",
-      "outline]___[value:none]___[cond:&::-webkit-scrollbar-thumb",
-      "backgroundColor]___[value:page.border.100]___[cond:&:hover::-webkit-scrollbar-thumb",
-      "minHeight]___[value:0",
-      "minWidth]___[value:full",
-      "height]___[value:var(--row-height)",
-      "position]___[value:sticky",
-      "top]___[value:0",
-      "width]___[value:var(--total-grid-width)",
-      "zIndex]___[value:sticky",
-      "bottom]___[value:0",
-      "position]___[value:absolute",
-      "width]___[value:0.75rem",
-      "zIndex]___[value:inherit",
-      "backgroundGradient]___[value:to-r]___[cond:_leftPinned",
-      "gradientFrom]___[value:black/10]___[cond:_leftPinned",
-      "gradientTo]___[value:transparent]___[cond:_leftPinned",
-      "backgroundGradient]___[value:to-l]___[cond:_rightPinned",
-      "gradientFrom]___[value:black/10]___[cond:_rightPinned",
-      "gradientTo]___[value:transparent]___[cond:_rightPinned",
+      "gap]___[value:sm",
       "backgroundColor]___[value:var(--head-cell-bg-color)",
       "borderBottom]___[value:1px solid",
       "borderBottomColor]___[value:var(--head-cell-border-bottom-color)",
@@ -145,7 +118,6 @@
       "borderRight]___[value:1px solid]___[cond:_leftPinned",
       "borderLeftColor]___[value:page.border.200]___[cond:_rightPinned",
       "borderLeft]___[value:1px solid]___[cond:_rightPinned",
-      "gap]___[value:sm",
       "opacity]___[value:1]___[cond:_groupHover<___>& :is(button)",
       "backgroundColor]___[value:inherit",
       "borderColor]___[value:var(--grid-cell-border-color)",
@@ -155,10 +127,35 @@
       "position]___[value:absolute]___[cond:&:is([data-render=virtualized])",
       "left]___[value:0]___[cond:&:is([data-render=virtualized])",
       "backgroundColor]___[value:var(--row-bg-color)",
+      "height]___[value:var(--row-height)",
       "backgroundColor]___[value:var(--row-even-bg-color)]___[cond:_even",
       "backgroundColor]___[value:var(--row-hover-bg-color)]___[cond:_hover",
+      "content]___[value:Edit filters",
       "content]___[value:Sort Ascending",
       "content]___[value:Sort Decending",
+      "bottom]___[value:0",
+      "position]___[value:absolute",
+      "paddingInline]___[value:sm",
+      "right]___[value:0",
+      "top]___[value:0",
+      "width]___[value:fit-content",
+      "zIndex]___[value:11",
+      "marginBlock]___[value:xs",
+      "borderRadius]___[value:md",
+      "width]___[value:0.75rem",
+      "zIndex]___[value:inherit",
+      "backgroundGradient]___[value:to-r]___[cond:_leftPinned",
+      "gradientFrom]___[value:black/10]___[cond:_leftPinned",
+      "gradientTo]___[value:transparent]___[cond:_leftPinned",
+      "backgroundGradient]___[value:to-l]___[cond:_rightPinned",
+      "gradientFrom]___[value:black/10]___[cond:_rightPinned",
+      "gradientTo]___[value:transparent]___[cond:_rightPinned",
+      "left]___[value:0",
+      "top]___[value:var(--row-height)",
+      "zIndex]___[value:decorator",
+      "flex]___[value:0 0 auto",
+      "width]___[value:12",
+      "height]___[value:12",
       "backgroundColor]___[value:page.surface.100",
       "borderTop]___[value:1px solid",
       "borderTopColor]___[value:page.border.initial",
@@ -168,8 +165,29 @@
       "height]___[value:1rem",
       "borderInlineEndWidth]___[value:var(--thickness)",
       "borderColor]___[value:page.border.200",
-      "flex]___[value:0 0 auto",
+      "--popover-size]___[value:37.5rem!",
+      "alignSelf]___[value:flex-end",
+      "marginBottom]___[value:0.25rem",
+      "height]___[value:2rem!",
+      "width]___[value:2rem!",
       "height]___[value:4",
+      "overflow]___[value:hidden!]___[cond:&:is([data-lock=true])",
+      "overflow]___[value:auto",
+      "scrollBehavior]___[value:smooth",
+      "scrollbarGutter]___[value:stable",
+      "display]___[value:none]___[cond:&::-webkit-scrollbar",
+      "width]___[value:0.5em]___[cond:&::-webkit-scrollbar",
+      "background]___[value:transparent]___[cond:&::-webkit-scrollbar-track",
+      "outline]___[value:none]___[cond:&::-webkit-scrollbar-track",
+      "backgroundColor]___[value:page.border.100]___[cond:&::-webkit-scrollbar-thumb",
+      "borderRadius]___[value:5px]___[cond:&::-webkit-scrollbar-thumb",
+      "outline]___[value:none]___[cond:&::-webkit-scrollbar-thumb",
+      "backgroundColor]___[value:page.border.100]___[cond:&:hover::-webkit-scrollbar-thumb",
+      "minHeight]___[value:0",
+      "minWidth]___[value:full",
+      "position]___[value:sticky",
+      "width]___[value:var(--total-grid-width)",
+      "zIndex]___[value:sticky",
       "colorPalette]___[value:page",
       "colorPalette]___[value:action",
       "colorPalette]___[value:secondary-action",
@@ -313,6 +331,7 @@
         "size]___[value:sm]___[recipe:progressBar",
         "usage]___[value:rounded]___[recipe:progressBar",
         "size]___[value:md]___[recipe:progressBar",
+        "size]___[value:xs]___[recipe:progressBar",
         "usage]___[value:block]___[recipe:progressBar"
       ],
       "toast": [],
@@ -324,6 +343,12 @@
         "layout]___[value:grow]___[recipe:group",
         "layout]___[value:stack]___[recipe:group"
       ],
+      "popover": [
+        "size]___[value:md]___[recipe:popover",
+        "size]___[value:xs]___[recipe:popover",
+        "size]___[value:sm]___[recipe:popover",
+        "size]___[value:lg]___[recipe:popover"
+      ],
       "radioGroup": [
         "orientation]___[value:horizontal]___[recipe:radioGroup",
         "size]___[value:sm]___[recipe:radioGroup",

package/dist/store.cjs

@@ -11,7 +11,18 @@ function createGridStore(options) {
 	const [containerWidth, setContainerWidth] = (0, _cerberus_design_signals.createSignal)(0);
 	const [rows, setRows] = (0, _cerberus_design_signals.createSignal)(options.data);
 	const [rowSize] = (0, _cerberus_design_signals.createSignal)(require_utils.determineRowHeight(options.rowSize));
-	const [globalFilter, setGlobalFilter] = (0, _cerberus_design_signals.createSignal)("");
+	const [pending, setPending] = (0, _cerberus_design_signals.createSignal)(options.pending ?? false);
+	const [hasSkeleton] = (0, _cerberus_design_signals.createSignal)(options.overlays?.pending === "skeleton");
+	const [showColFilter, setShowColFilter] = (0, _cerberus_design_signals.createSignal)(false);
+	const [globalFilter, setGlobalFilter] = (0, _cerberus_design_signals.createSignal)({
+		operator: require_const.OPERATORS.contains,
+		value: null
+	});
+	const [colFilters, setColFilters] = (0, _cerberus_design_signals.createSignal)({
+		active: [],
+		filters: {},
+		editing: null
+	});
 	const [sorting, setSorting] = (0, _cerberus_design_signals.createSignal)([]);
 	const [pageIndex, setPageIndex] = (0, _cerberus_design_signals.createSignal)(require_utils.determinePageIndex(options.initialState?.pagination));
 	const [pageSize, setPageSize] = (0, _cerberus_design_signals.createSignal)(require_utils.determinePageSize(options.initialState?.pagination));
@@ -52,17 +63,33 @@ function createGridStore(options) {
 			end: pageIndex() * pageSize()
 		};
 	});
-	const processedRows = (0, _cerberus_design_signals.createComputed)(() => {
+	const filteredRows = (0, _cerberus_design_signals.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 require_utils.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 require_utils.applyFilterOperator(col.getValue(row), gFilter.value, gFilter.operator);
 			});
 		});
-		if (sortState.length > 0) result.sort((a, b) => {
+		return result;
+	});
+	const sortedRows = (0, _cerberus_design_signals.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 = (0, _cerberus_design_signals.createComputed)(() => require_utils.determineInitialCount(options?.initialState?.pagination) ?? processedRows().length);
+	const rowCount = (0, _cerberus_design_signals.createComputed)(() => {
+		return require_utils.determineInitialCount(options?.initialState?.pagination) ?? sortedRows().length;
+	});
 	const pageCount = (0, _cerberus_design_signals.createComputed)(() => Math.ceil(rowCount() / pageSize()));
 	const orderedColumns = (0, _cerberus_design_signals.createComputed)(() => {
 		const left = [];
@@ -97,18 +125,24 @@ function createGridStore(options) {
 			...right
 		];
 	});
-	const visibleRows = (0, _cerberus_design_signals.createComputed)(() => {
-		if (pageSize() && pageCount() > 1) {
-			const currentRange = currentPageRange();
-			return processedRows().slice(currentRange.start, currentRange.end);
-		}
-		return processedRows();
-	});
 	return {
 		columns,
 		rows,
+		rowCount,
+		rowSize,
+		visibleRows: (0, _cerberus_design_signals.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: (0, _cerberus_design_signals.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) => {
 			(0, _cerberus_design_signals.batch)(() => {
-				setGlobalFilter(val);
+				setGlobalFilter((prev) => ({
+					...prev,
+					...val
+				}));
 				setPageIndex(1);
 			});
 		},
+		setColFilter: (val) => {
+			setColFilters(val);
+		},
+		setShowColFilter: (val) => {
+			setShowColFilter(val);
+		},
 		setContainerWidth: (w) => {
 			setContainerWidth(w);
 		},