@visns-studio/visns-components 1.2.9 → 1.3.1

package/components/crm/visns-data-grid.jsx

@@ -1,4 +1,10 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, {
+	forwardRef,
+	useCallback,
+	useEffect,
+	useImperativeHandle,
+	useState,
+} from "react";
 import { useNavigate } from "react-router-dom";
 import axios from "axios";
 import debounce from "lodash.debounce";
@@ -19,8 +25,13 @@ import {
 	CloudDownload,
 	Copy,
 	Edit,
+	Folder,
+	Inbox,
+	Network,
 	Ribbon,
 	Search,
+	ShippingBoxV1,
+	TriangleAlert,
 } from "akar-icons";
 
 import "@inovua/reactdatagrid-community/index.css";
@@ -50,11 +61,24 @@ const loadData = async (
 	if (filterValue) {
 		filterValue.forEach((fv) => {
 			const identifier = fv.key ? fv.key : fv.name;
+			const existingIndex = params.where.findIndex(
+				(w) => w.id === identifier
+			);
 
 			if (fv.value !== null && fv.value !== "") {
-				params.where.push({ id: identifier, value: fv.value });
+				if (existingIndex !== -1) {
+					params.where[existingIndex].value = fv.value;
+				} else {
+					params.where.push({
+						id: identifier,
+						value: fv.value,
+						operator: fv.operator,
+					});
+				}
 			} else {
-				params.where = params.where.filter((w) => w.id !== identifier);
+				if (existingIndex !== -1) {
+					params.where.splice(existingIndex, 1);
+				}
 			}
 		});
 	}
@@ -69,894 +93,1298 @@ const loadData = async (
 	}
 };
 
-const DataGrid = (props) => {
-	const {
-		ajaxSetting,
-		form,
-		columns,
-		settings,
-		style,
-		tableFilters,
-		historySearch,
-		historyUrl,
-	} = props;
-	const navigate = useNavigate();
-
-	/** Modal States */
-	const [formData, setFormData] = useState(form);
-	const [formType, setFormType] = useState("");
-	const [formId, setFormId] = useState(0);
-	const [modalShow, setModalShow] = useState(false);
-
-	/** Modal Functions */
-	const childDropdownCallback = (data) => {
-		let _form = { ...formData };
-
-		if (formData.fields.length > 0) {
-			formData.fields.forEach((a, b) => {
-				if (a.id === data.id) {
-					_form.fields[b].options = data.data;
-				}
-			});
-		}
-
-		setFormData(_form);
-	};
-
-	const modalOpen = (formType, formId) => {
-		setModalShow(true);
-		setFormType(formType);
-		setFormId(formId);
-	};
-
-	const modalClose = () => {
-		setModalShow(false);
-	};
-
-	/** Table States */
-	const [dataReload, setDataReload] = useState(0);
-	const [dSearch, setDSearch] = useState("");
-	const data = useCallback(
-		(params) => loadData(params, dSearch, ajaxSetting),
-		[ajaxSetting, dataReload, dSearch]
-	);
-	const [filterDataSource, setFilterDataSource] = useState([]);
-	const [filterValue, setFilterValue] = useState([]);
-	const [gridColumns, setGridColumns] = useState([]);
-	const limit = ajaxSetting.take || 10;
-	const [search, setSearch] = useState("");
-	const sortInfo =
-		ajaxSetting.sortBy && ajaxSetting.sort
-			? {
-					name: ajaxSetting.sortBy,
-					dir: ajaxSetting.sort === "asc" ? 1 : -1,
-			  }
-			: null;
-
-	/** Table Functions */
-	const handleChangeSearch = (e) => {
-		const { value } = e.target;
-		setSearch(value);
-	};
-
-	const handleSettingClick = (s, d) => {
-		switch (s.id) {
-			case "update":
-				modalOpen("update", d.id);
-				break;
-			case "delete":
-				confirmAlert({
-					title: "Delete Item",
-					message: `Are you sure you want to delete ${
-						d.name ? d.name : d.label ? d.label : "this item"
-					}?`,
-					buttons: [
-						{
-							label: "Yes",
-							onClick: () =>
-								CustomFetch(
-									form.url + "/" + d[form.primaryKey],
-									"DELETE",
-									{},
-									(result) => {
-										if (result.error === "") {
-											const min = 0;
-											const max = 999999999;
-											const randomNumber = Math.floor(
-												Math.random() *
-													(max - min + 1) +
-													min
-											);
-
-											setDataReload(randomNumber);
-
-											toast.success(
-												`The selected item has been deleted.`
-											);
-										} else {
-											toast.error(
-												<div>{parse(result.error)}</div>
-											);
-										}
-									}
-								),
-						},
-						{
-							label: "No",
-							onClick: () => close(),
-						},
-					],
-				});
-				break;
-			default:
-				confirmAlert({
-					title: s.title,
-					message: "",
-					buttons: [
-						{
-							label: "Yes",
-							onClick: () =>
-								CustomFetch(
-									s.url + "/" + d[form.primaryKey],
-									s.method,
-									{},
-									function (result) {
-										if (result.error === "") {
-											const min = 0;
-											const max = 999999999;
-											const randomNumber = Math.floor(
-												Math.random() *
-													(max - min + 1) +
-													min
-											);
-
-											setDataReload(randomNumber);
-
-											toast.success(String(s.title));
-										} else {
-											toast.error(
-												<div>{parse(result.error)}</div>
-											);
-										}
-									}
-								),
-						},
-						{
-							label: "No",
-							onClick: () => close(),
-						},
-					],
+const DataGrid = forwardRef(
+	(
+		{
+			ajaxSetting,
+			form,
+			columns,
+			settings,
+			setFilterData,
+			style,
+			tableFilters,
+			historySearch,
+			historyUrl,
+		},
+		ref
+	) => {
+		const navigate = useNavigate();
+
+		/** Modal States */
+		const [formData, setFormData] = useState(form);
+		const [formType, setFormType] = useState("");
+		const [formId, setFormId] = useState(0);
+		const [modalShow, setModalShow] = useState(false);
+
+		/** Modal Functions */
+		const childDropdownCallback = (data) => {
+			let _form = { ...formData };
+
+			if (formData.fields.length > 0) {
+				formData.fields.forEach((a, b) => {
+					if (a.id === data.id) {
+						_form.fields[b].options = data.data;
+					}
 				});
-				break;
-		}
-	};
-
-	const handleReload = () => {
-		setDataReload(dataReload + 1);
-	};
-
-	const onRowClick = useCallback((rowProps, event) => {
-		const cellElement = event.target.closest(".InovuaReactDataGrid__cell");
-		const columnIndex = Array.from(cellElement.parentNode.children).indexOf(
-			cellElement
-		);
-
-		if (columnIndex === rowProps.columns.length - 1) {
-		} else {
-			if (
-				rowProps.columns[columnIndex].link &&
-				rowProps.columns[columnIndex].link.url
-			) {
-				if (rowProps.columns[columnIndex].link.folder) {
-					window.location.href =
-						rowProps.columns[columnIndex].link.url +
-						rowProps.data[rowProps.columns[columnIndex].link.key] +
-						"/" +
-						rowProps.columns[columnIndex].link.folder;
-				} else {
-					navigate(
-						`${rowProps.columns[columnIndex].link.url}${
-							rowProps.data[
-								rowProps.columns[columnIndex].link.key
-							]
-						}`
-					);
-				}
-			} else {
-				modalOpen("update", rowProps.data[form.primaryKey]);
 			}
-		}
-	}, []);
 
-	const onRenderRow = useCallback((rowProps) => {
-		// save the original handlers to be called later
-		const { onClick } = rowProps;
+			setFormData(_form);
+		};
 
-		rowProps.onClick = (event) => {
-			onRowClick(rowProps, event);
-			if (onClick) {
-				onClick(event);
-			}
+		const modalOpen = (formType, formId) => {
+			setModalShow(true);
+			setFormType(formType);
+			setFormId(formId);
 		};
-	}, []);
 
-	const renderCreateButton = () => {
-		if (form.createDisable && form.createDisable === true) {
-			return null;
-		}
+		const modalClose = () => {
+			setModalShow(false);
+		};
 
-		return (
-			<div className="filterAction--alt">
-				<button
-					className="btn"
-					onClick={() => {
-						modalOpen("create", 0);
-					}}
-				>
-					<div className="icon-plus"></div> Create
-				</button>
-			</div>
+		/** Table States */
+		const [dataReload, setDataReload] = useState(0);
+		const [dSearch, setDSearch] = useState("");
+		const data = useCallback(
+			(params) => loadData(params, dSearch, ajaxSetting),
+			[ajaxSetting, dataReload, dSearch]
 		);
-	};
+		const [filterDataSource, setFilterDataSource] = useState([]);
+		const [filterValue, setFilterValue] = useState([]);
+		const [gridColumns, setGridColumns] = useState([]);
+		const limit = ajaxSetting.take || 10;
+		const [search, setSearch] = useState("");
+		const sortInfo =
+			ajaxSetting.sortBy && ajaxSetting.sort
+				? {
+						name: ajaxSetting.sortBy,
+						dir: ajaxSetting.sort === "asc" ? 1 : -1,
+				  }
+				: null;
+
+		/** Table Functions */
+		useImperativeHandle(ref, () => ({
+			reload: () => {
+				handleReload();
+			},
+		}));
+
+		const handleChangeSearch = (e) => {
+			const { value } = e.target;
+			setSearch(value);
+		};
 
-	const renderSearch = () => {
-		const searchEnable = !(
-			form.searchDisable && form.searchDisable === true
-		);
+		const handleSettingClick = (s, d) => {
+			switch (s.id) {
+				case "update":
+					modalOpen("update", d.id);
+					break;
+				case "delete":
+					confirmAlert({
+						title: "Delete Item",
+						message: `Are you sure you want to delete ${
+							d.name ? d.name : d.label ? d.label : "this item"
+						}?`,
+						buttons: [
+							{
+								label: "Yes",
+								onClick: () =>
+									CustomFetch(
+										form.url + "/" + d[form.primaryKey],
+										"DELETE",
+										{},
+										(result) => {
+											if (result.error === "") {
+												const min = 0;
+												const max = 999999999;
+												const randomNumber = Math.floor(
+													Math.random() *
+														(max - min + 1) +
+														min
+												);
+
+												setDataReload(randomNumber);
+
+												toast.success(
+													`The selected item has been deleted.`
+												);
+											} else {
+												toast.error(
+													<div>
+														{parse(result.error)}
+													</div>
+												);
+											}
+										}
+									),
+							},
+							{
+								label: "No",
+								onClick: () => close(),
+							},
+						],
+					});
+					break;
+				default:
+					confirmAlert({
+						title: s.title,
+						message: "",
+						buttons: [
+							{
+								label: "Yes",
+								onClick: () =>
+									CustomFetch(
+										s.url + "/" + d[form.primaryKey],
+										s.method,
+										{},
+										function (result) {
+											if (result.error === "") {
+												const min = 0;
+												const max = 999999999;
+												const randomNumber = Math.floor(
+													Math.random() *
+														(max - min + 1) +
+														min
+												);
+
+												setDataReload(randomNumber);
+
+												toast.success(String(s.title));
+											} else {
+												toast.error(
+													<div>
+														{parse(result.error)}
+													</div>
+												);
+											}
+										}
+									),
+							},
+							{
+								label: "No",
+								onClick: () => close(),
+							},
+						],
+					});
+					break;
+			}
+		};
 
-		return searchEnable ? (
-			<div className="filterInput--alt">
-				<div className="icon-search">
-					<Search strokeWidth={2} size={18} />
-				</div>
-				<input
-					type="text"
-					placeholder="Search"
-					value={search}
-					onChange={handleChangeSearch}
-				/>
-			</div>
-		) : null;
-	};
-
-	/** Table Hooks */
-	useEffect(() => {
-		const delayedSetDSearch = debounce(() => {
-			setDSearch(search);
-		}, 300); // Adjust the delay (in milliseconds) according to your needs
-
-		delayedSetDSearch();
-
-		return delayedSetDSearch.cancel; // Cleanup the debounce timer on unmount
-	}, [search, setDSearch]);
-
-	const renderSetting = (s, d) => {
-		let iconStyle = {};
-
-		if (s.active) {
-			if (
-				d.hasOwnProperty(s.active.id) &&
-				!s.active.hasOwnProperty("type") &&
-				d[s.active.id] === s.active.value
-			) {
-				iconStyle = {
-					color: s.active.colour,
-				};
-			} else if (s.active.hasOwnProperty("type")) {
-				switch (s.active.type) {
-					case "greater":
-						if (d[s.active.id] > s.active.value) {
-							iconStyle = {
-								color: s.active.colour,
-							};
-						}
-						break;
-					case "not null":
-						if (d[s.active.id] !== null) {
-							iconStyle = {
-								color: s.active.colour,
-							};
-						}
-						break;
-					default:
-						break;
+		const handleReload = () => {
+			setDataReload(dataReload + 1);
+		};
+
+		const onRowClick = useCallback((rowProps, event) => {
+			const cellElement = event.target.closest(
+				".InovuaReactDataGrid__cell"
+			);
+			const columnIndex = Array.from(
+				cellElement.parentNode.children
+			).indexOf(cellElement);
+
+			if (columnIndex === rowProps.columns.length - 1) {
+			} else {
+				if (
+					rowProps.columns[columnIndex].link &&
+					rowProps.columns[columnIndex].link.url
+				) {
+					if (rowProps.columns[columnIndex].link.folder) {
+						window.location.href =
+							rowProps.columns[columnIndex].link.url +
+							rowProps.data[
+								rowProps.columns[columnIndex].link.key
+							] +
+							"/" +
+							rowProps.columns[columnIndex].link.folder;
+					} else {
+						navigate(
+							`${rowProps.columns[columnIndex].link.url}${
+								rowProps.data[
+									rowProps.columns[columnIndex].link.key
+								]
+							}`
+						);
+					}
+				} else if (rowProps.columns[columnIndex].link.popup) {
+					window.open(
+						`${rowProps.columns[columnIndex].link.popup}/${
+							rowProps.data[
+								rowProps.columns[columnIndex].link.key
+							]
+						}`,
+						"",
+						"width=1440,height=1024,menubar=1,resizable=1,status=1,titlebar=1,toolbar=1"
+					);
+				} else {
+					modalOpen("update", rowProps.data[form.primaryKey]);
 				}
 			}
-		}
+		}, []);
 
-		const getIconComponent = (IconComponent) => (
-			<IconComponent
-				data-tooltip-id="system-tooltip"
-				data-tooltip-content={
-					iconStyle && iconStyle.color ? s.active.title : s.title
-				}
-				strokeWidth={2}
-				size={18}
-				className="tdaction"
-				style={iconStyle}
-			/>
-		);
+		const onRenderRow = useCallback((rowProps) => {
+			// save the original handlers to be called later
+			const { onClick } = rowProps;
 
-		switch (s.id) {
-			case "complete":
-				return getIconComponent(Check);
-			case "copy":
-				return getIconComponent(Copy);
-			case "delete":
-				return getIconComponent(Backspace);
-			case "primary":
-				return getIconComponent(Ribbon);
-			case "ssa":
-				return getIconComponent(Clock);
-			case "update":
-				return getIconComponent(Edit);
-			default:
-				return null;
-		}
-	};
-
-	const renderColumnContextMenu = useCallback((menuProps, { cellProps }) => {
-		const filteredItems = menuProps.items
-			.map((item, key) => {
-				if (key >= 6 && key <= 9) {
-					return null; // Skip items with keys 6-9 [lock columns setting]
+			rowProps.onClick = (event) => {
+				onRowClick(rowProps, event);
+				if (onClick) {
+					onClick(event);
 				}
-				return item;
-			})
-			.filter(Boolean); // Filter out any null items
-
-		menuProps.items = filteredItems;
-	}, []);
-
-	useEffect(() => {
-		const renderColumn = (column) => {
-			let filterEditor = null;
-			let filterEditorProps = null;
-			let selectedDataSource = null;
-			let icons = [];
-			let relationName;
-			let stage;
-			let value;
-
-			const commonProps = {
-				header: column.label,
-				defaultFlex: 1,
-				link: column.link ? column.link : {},
-				minWidth:
-					column.minWidth && column.minWidth > 0
-						? column.minWidth
-						: undefined,
-				maxWidth:
-					column.maxWidth && column.maxWidth > 0
-						? column.maxWidth
-						: undefined,
 			};
+		}, []);
 
-			switch (column.type) {
-				case "created_by":
-					return {
-						...commonProps,
-						name: "audits.name",
-						sortable: false,
-						render: ({ data }) => {
-							if (
-								data.audits[0] &&
-								data.audits[0].user &&
-								data.audits[0].user.name
-							) {
-								value = data.audits[0].user.name;
-
-								return <span>{value}</span>;
-							} else {
-								return null;
-							}
-						},
-					};
-				case "currency":
-					return {
-						...commonProps,
-						name: column.id,
-						render: ({ data }) => {
-							if (data) {
-								data = numeral(data[column.id]).format(
-									"$0,0.00"
-								);
+		const renderCreateButton = () => {
+			if (form.createDisable && form.createDisable === true) {
+				return null;
+			}
 
-								return <span>{data}</span>;
+			return (
+				<div className="filterAction--alt">
+					<button
+						className="btn"
+						onClick={() => {
+							if (form.url) {
+								window.open(
+									form.url,
+									"",
+									"width=1440,height=1024,menubar=1,resizable=1,status=1,titlebar=1,toolbar=1"
+								);
 							} else {
-								return null;
+								modalOpen("create", 0);
 							}
-						},
-					};
-				case "date":
-					if (column.filter && column.filter.type) {
-						filterEditor = DateFilter;
-						filterEditorProps = (props, { index }) => {
-							return {
-								dateFormat: "DD-MM-YYYY",
-								placeholder: "All Dates",
-							};
-						};
-					} else {
-						filterEditor = null;
-						filterEditorProps = null;
+						}}
+					>
+						<div className="icon-plus"></div> Create
+					</button>
+				</div>
+			);
+		};
+
+		const renderSearch = () => {
+			const searchEnable = !(
+				form.searchDisable && form.searchDisable === true
+			);
+
+			return searchEnable ? (
+				<div className="filterInput--alt">
+					<div className="icon-search">
+						<Search strokeWidth={2} size={18} />
+					</div>
+					<input
+						type="text"
+						placeholder="Search"
+						value={search}
+						onChange={handleChangeSearch}
+					/>
+				</div>
+			) : null;
+		};
+
+		const handleCoding = (c, data) => {
+			const icons = [];
+			const assetPath =
+				import.meta.env.REACT_APP_ASSET_PATH !== undefined
+					? import.meta.env.REACT_APP_ASSET_PATH
+					: "";
+
+			const addIcon = (src, icon, alt, tooltipContent, key) => {
+				if (src && src !== "") {
+					icons.push(
+						<img
+							src={`${assetPath}${src}`}
+							alt={alt}
+							data-tooltip-id="system-tooltip"
+							data-tooltip-content={tooltipContent}
+							key={key}
+						/>
+					);
+				} else {
+					let IconComponent = null;
+
+					if (icon === "archive") {
+						IconComponent = ShippingBoxV1;
+					} else if (icon === "folder") {
+						IconComponent = Folder;
+					} else if (icon === "inbox") {
+						IconComponent = Inbox;
+					} else if (icon === "network") {
+						IconComponent = Network;
+					} else if (icon === "urgent") {
+						IconComponent = TriangleAlert;
 					}
 
-					return {
-						...commonProps,
-						name: column.id,
-						filterEditor: filterEditor,
-						filterEditorProps: filterEditorProps,
-						render: ({ data }) => {
-							if (data && data[column.id]) {
-								data = moment(data[column.id]).format(
-									column.format ? column.format : "DD-MM-YYYY"
-								);
+					if (IconComponent) {
+						icons.push(
+							<IconComponent
+								data-tooltip-id="system-tooltip"
+								data-tooltip-content={tooltipContent}
+								strokeWidth={2}
+								size={18}
+								className="tdaction"
+								key={key}
+							/>
+						);
+					}
+				}
+			};
 
-								return <span>{data}</span>;
-							} else {
-								return null;
-							}
-						},
-					};
-				case "datetime":
-					if (column.filter && column.filter.type) {
-						filterEditor = DateFilter;
-						filterEditorProps = (props, { index }) => {
-							return {
-								dateFormat: "DD-MM-YYYY",
-								placeholder: "All Dates",
-							};
-						};
+			c.config.forEach((config) => {
+				const fieldValue = config.id.reduce((acc, id) => {
+					if (acc === "") {
+						return data[id];
 					} else {
-						filterEditor = null;
-						filterEditorProps = null;
+						return acc[id];
 					}
+				}, "");
+
+				const iconData = config.icons.find(
+					(icon) => icon.value === fieldValue
+				);
+
+				if (
+					iconData &&
+					(iconData.src || iconData.icon) &&
+					iconData.alt &&
+					iconData.tooltipContent
+				) {
+					addIcon(
+						iconData.src ? iconData.src : null,
+						iconData.icon ? iconData.icon : null,
+						iconData.alt,
+						iconData.tooltipContent,
+						`coding-${config.id[0]}`
+					);
+				}
+			});
 
-					return {
-						...commonProps,
-						name: column.id,
-						filterEditor: filterEditor,
-						filterEditorProps: filterEditorProps,
-						render: ({ data }) => {
-							if (data && data[column.id]) {
-								data = moment(data[column.id]).format(
-									column.format
-										? column.format
-										: "DD-MM-YYYY hh:mm A"
-								);
+			return icons;
+		};
 
-								return <span>{data}</span>;
-							} else {
-								return null;
-							}
-						},
-					};
-				case "file":
-					return {
-						...commonProps,
-						name: column.id,
-						sortable: false,
-						render: ({ data }) => {
-							if (data) {
-								return (
-									<span>
-										<CloudDownload
-											data-tooltip-id="system-tooltip"
-											data-tooltip-content="Download File"
-											strokeWidth={2}
-											size={18}
-											className="tdaction"
-										/>
-									</span>
-								);
-							} else {
-								return null;
-							}
-						},
-					};
-				case "icons":
-					return {
-						...commonProps,
-						name: column.id,
-						sortable: false,
-						render: ({ data }) => {
-							icons = [];
-
-							if (column.icons && column.icons.length > 0) {
-								column.icons.forEach((icon) => {
-									icons.push(
-										<img
-											src={icon.url}
-											alt={icon.name}
-											data-tooltip-id="system-tooltip"
-											data-tooltip-content={icon.name}
-										/>
-									);
-								});
-							}
+		/** Table Hooks */
+		useEffect(() => {
+			const delayedSetDSearch = debounce(() => {
+				setDSearch(search);
+			}, 300); // Adjust the delay (in milliseconds) according to your needs
 
-							if (data) {
-								return <span>{icons}</span>;
-							} else {
-								return null;
-							}
-						},
-					};
-				case "json":
-					return {
-						...commonProps,
-						name: column.id,
-						render: ({ data }) => {
-							if (
-								data &&
-								data[column.id] &&
-								data[column.id][column.jsonData]
-							) {
-								data = data[column.id][column.jsonData];
-
-								return <span>{data}</span>;
-							} else {
-								return null;
-							}
-						},
-					};
-				case "number":
-					return {
-						...commonProps,
-						name: column.id,
-						type: "number",
+			delayedSetDSearch();
+
+			return delayedSetDSearch.cancel; // Cleanup the debounce timer on unmount
+		}, [search, setDSearch]);
+
+		const renderSetting = (s, d) => {
+			let iconStyle = {};
+
+			if (s.active) {
+				if (
+					d.hasOwnProperty(s.active.id) &&
+					!s.active.hasOwnProperty("type") &&
+					d[s.active.id] === s.active.value
+				) {
+					iconStyle = {
+						color: s.active.colour,
 					};
-				case "option":
-					return {
-						...commonProps,
-						name: column.id,
-						render: ({ data }) => {
-							if (
-								data &&
-								column.options &&
-								column.options[data[column.id]]
-							) {
-								data = column.options[data[column.id]];
-
-								return <span>{data}</span>;
-							} else {
-								return null;
+				} else if (s.active.hasOwnProperty("type")) {
+					switch (s.active.type) {
+						case "greater":
+							if (d[s.active.id] > s.active.value) {
+								iconStyle = {
+									color: s.active.colour,
+								};
 							}
-						},
-					};
-				case "placeholder":
-					return {
-						...commonProps,
-						name: column.id,
-						sortable: false,
-						render: ({ data }) => {
-							if (data) {
-								return <span>{column.placeholder}</span>;
-							} else {
-								return null;
+							break;
+						case "not null":
+							if (d[s.active.id] !== null) {
+								iconStyle = {
+									color: s.active.colour,
+								};
 							}
-						},
-					};
-				case "relation":
-					relationName = column.id.reduce(
-						(acc, id) => acc + `${id}.`,
-						""
-					);
-					relationName += column.nameFrom;
+							break;
+						default:
+							break;
+					}
+				}
+			}
+
+			const getIconComponent = (IconComponent) => (
+				<IconComponent
+					data-tooltip-id="system-tooltip"
+					data-tooltip-content={
+						iconStyle && iconStyle.color ? s.active.title : s.title
+					}
+					strokeWidth={2}
+					size={18}
+					className="tdaction"
+					style={iconStyle}
+				/>
+			);
+
+			switch (s.id) {
+				case "archive":
+					return getIconComponent(ShippingBoxV1);
+				case "complete":
+					return getIconComponent(Check);
+				case "copy":
+					return getIconComponent(Copy);
+				case "delete":
+					return getIconComponent(Backspace);
+				case "family":
+					return getIconComponent(Network);
+				case "primary":
+					return getIconComponent(Ribbon);
+				case "ssa":
+					return getIconComponent(Clock);
+				case "update":
+					return getIconComponent(Edit);
+				default:
+					return null;
+			}
+		};
 
-					selectedDataSource = filterDataSource.reduce((acc, fds) => {
-						if (fds.id === relationName) {
-							return fds.dataset;
+		const renderColumnContextMenu = useCallback(
+			(menuProps, { cellProps }) => {
+				const filteredItems = menuProps.items
+					.map((item, key) => {
+						if (key >= 6 && key <= 9) {
+							return null; // Skip items with keys 6-9 [lock columns setting]
 						}
-						return acc;
-					}, null);
-
-					if (column.filter && column.filter.type) {
-						filterEditor = SelectFilter;
-						filterEditorProps = {
-							placeholder: "All Options",
-							dataSource: selectedDataSource,
+						return item;
+					})
+					.filter(Boolean); // Filter out any null items
+
+				menuProps.items = filteredItems;
+			},
+			[]
+		);
+
+		useEffect(() => {
+			const renderColumn = (column) => {
+				let childValue;
+				let date;
+				let filterEditor = null;
+				let filterEditorProps = null;
+				let selectedDataSource = null;
+				let icons = [];
+				let relationName;
+				let stage;
+				let style;
+				let value;
+
+				const commonProps = {
+					header: column.label,
+					defaultFlex: 1,
+					link: column.link ? column.link : {},
+					minWidth:
+						column.minWidth && column.minWidth > 0
+							? column.minWidth
+							: undefined,
+					maxWidth:
+						column.maxWidth && column.maxWidth > 0
+							? column.maxWidth
+							: undefined,
+				};
+
+				switch (column.type) {
+					case "age":
+						return {
+							...commonProps,
+							name: `${column.type}.${column.id}`,
+							render: ({ data }) => {
+								value = column.id.reduce((acc, id) => {
+									if (acc === "") {
+										return data[id];
+									} else {
+										return acc[id];
+									}
+								}, "");
+
+								if (value !== "" && value !== null) {
+									date = moment(value);
+
+									return (
+										<span>
+											{moment().diff(date, "years")}
+										</span>
+									);
+								} else {
+									return null;
+								}
+							},
 						};
-					} else {
-						filterEditor = null;
-						filterEditorProps = null;
-					}
+					case "arrayCount":
+						return {
+							...commonProps,
+							name: `${column.type}.${column.id}`,
+							sortable: false,
+							render: ({ data }) => {
+								if (data && data[column.id]) {
+									return data[column.id].length;
+								} else {
+									return null;
+								}
+							},
+						};
+					case "coding":
+						return {
+							...commonProps,
+							name: "audits.name",
+							sortable: false,
+							render: ({ data }) => {
+								if (data) {
+									return handleCoding(column, data);
+								} else {
+									return null;
+								}
+							},
+						};
+					case "created_by":
+						return {
+							...commonProps,
+							name: "audits.name",
+							sortable: false,
+							render: ({ data }) => {
+								if (
+									data.audits[0] &&
+									data.audits[0].user &&
+									data.audits[0].user.name
+								) {
+									value = data.audits[0].user.name;
 
-					return {
-						...commonProps,
-						name: relationName,
-						sortable: false,
-						filterEditor: filterEditor,
-						filterEditorProps: filterEditorProps,
-						render: ({ data }) => {
-							value = column.id.reduce((acc, id) => {
-								if (acc === "") {
-									return data[id];
+									return <span>{value}</span>;
 								} else {
-									return acc[id];
+									return null;
 								}
-							}, "");
+							},
+						};
+					case "currency":
+						return {
+							...commonProps,
+							name: column.id,
+							render: ({ data }) => {
+								if (data) {
+									data = numeral(data[column.id]).format(
+										"$0,0.00"
+									);
 
-							if (value) {
-								if (Array.isArray(column.nameFrom)) {
-									value = column.nameFrom
-										.map((nf) => value[nf])
-										.join(" ");
+									return <span>{data}</span>;
 								} else {
-									value = value[column.nameFrom];
+									return null;
 								}
+							},
+						};
+					case "date":
+						if (column.filter && column.filter.type) {
+							filterEditor = DateFilter;
+							filterEditorProps = (props, { index }) => {
+								return {
+									dateFormat: "DD-MM-YYYY",
+									placeholder: "All Dates",
+								};
+							};
+						} else {
+							filterEditor = null;
+							filterEditorProps = null;
+						}
+
+						return {
+							...commonProps,
+							name: column.id,
+							filterEditor: filterEditor,
+							filterEditorProps: filterEditorProps,
+							render: ({ data }) => {
+								if (data && data[column.id]) {
+									const value = moment(
+										data[column.id]
+									).format(column.format || "DD-MM-YYYY");
+									style = {};
+
+									if (
+										column.active &&
+										column.active.id &&
+										column.active.value === "expired"
+									) {
+										if (
+											data[column.active.id] &&
+											moment(
+												data[column.active.id]
+											).isBefore(moment())
+										) {
+											style = {
+												color: column.active.colour,
+											};
+										}
+									}
+
+									return <span style={style}>{value}</span>;
+								} else {
+									return null;
+								}
+							},
+						};
+					case "datetime":
+						if (column.filter && column.filter.type) {
+							filterEditor = DateFilter;
+							filterEditorProps = (props, { index }) => {
+								return {
+									dateFormat: "DD-MM-YYYY",
+									placeholder: "All Dates",
+								};
+							};
+						} else {
+							filterEditor = null;
+							filterEditorProps = null;
+						}
+
+						return {
+							...commonProps,
+							name: column.id,
+							filterEditor: filterEditor,
+							filterEditorProps: filterEditorProps,
+							render: ({ data }) => {
+								if (data && data[column.id]) {
+									data = moment(data[column.id]).format(
+										column.format
+											? column.format
+											: "DD-MM-YYYY hh:mm A"
+									);
 
+									return <span>{data}</span>;
+								} else {
+									return null;
+								}
+							},
+						};
+					case "file":
+						return {
+							...commonProps,
+							name: column.id,
+							sortable: false,
+							render: ({ data }) => {
+								if (data) {
+									return (
+										<span>
+											<CloudDownload
+												data-tooltip-id="system-tooltip"
+												data-tooltip-content="Download File"
+												strokeWidth={2}
+												size={18}
+												className="tdaction"
+											/>
+										</span>
+									);
+								} else {
+									return null;
+								}
+							},
+						};
+					case "icons":
+						return {
+							...commonProps,
+							name: column.id,
+							sortable: false,
+							render: ({ data }) => {
+								icons = [];
+
+								if (column.icons && column.icons.length > 0) {
+									column.icons.forEach((icon) => {
+										icons.push(
+											<img
+												src={icon.url}
+												alt={icon.name}
+												data-tooltip-id="system-tooltip"
+												data-tooltip-content={icon.name}
+											/>
+										);
+									});
+								}
+
+								if (data) {
+									return <span>{icons}</span>;
+								} else {
+									return null;
+								}
+							},
+						};
+					case "json":
+						return {
+							...commonProps,
+							name: column.id,
+							render: ({ data }) => {
 								if (
-									column.placeholder &&
-									column.placeholder !== ""
+									data &&
+									data[column.id] &&
+									data[column.id][column.jsonData]
 								) {
-									return <span>{column.placeholder}</span>;
+									data = data[column.id][column.jsonData];
+
+									return <span>{data}</span>;
 								} else {
-									return <span>{value}</span>;
+									return null;
 								}
-							} else {
-								return null;
-							}
-						},
-					};
-				case "relationArray":
-					relationName =
-						column.id.reduce((acc, id) => acc + `${id}.`, "") +
-						column.nameFrom;
-
-					selectedDataSource = filterDataSource.reduce((acc, fds) => {
-						if (fds.id === relationName) {
-							return fds.dataset;
-						}
-						return acc;
-					}, null);
-
-					if (column.filter && column.filter.type) {
-						filterEditor = SelectFilter;
-						filterEditorProps = {
-							placeholder: "All Options",
-							dataSource: selectedDataSource,
+							},
 						};
-					} else {
-						filterEditor = null;
-						filterEditorProps = null;
-					}
+					case "number":
+						return {
+							...commonProps,
+							name: column.id,
+							type: "number",
+						};
+					case "option":
+						return {
+							...commonProps,
+							name: column.id,
+							render: ({ data }) => {
+								if (
+									data &&
+									column.options &&
+									column.options[data[column.id]]
+								) {
+									data = column.options[data[column.id]];
 
-					return {
-						...commonProps,
-						name: relationName,
-						sortable: false,
-						filterEditor: filterEditor,
-						filterEditorProps: filterEditorProps,
-						render: ({ data }) => {
-							const relationValue = column.id.reduce(
-								(acc, id) => (acc === "" ? data[id] : acc[id]),
-								""
-							);
+									return <span>{data}</span>;
+								} else {
+									return null;
+								}
+							},
+						};
+					case "placeholder":
+						return {
+							...commonProps,
+							name: column.id,
+							sortable: false,
+							render: ({ data }) => {
+								if (data) {
+									return <span>{column.placeholder}</span>;
+								} else {
+									return null;
+								}
+							},
+						};
+					case "relation":
+						relationName = column.id.reduce(
+							(acc, id) => acc + `${id}.`,
+							""
+						);
+						relationName += column.nameFrom;
+
+						selectedDataSource = filterDataSource.reduce(
+							(acc, fds) => {
+								if (fds.id === relationName) {
+									return fds.dataset;
+								}
+								return acc;
+							},
+							null
+						);
+
+						if (
+							column.filter &&
+							column.filter.type &&
+							column.filter.type === "select"
+						) {
+							filterEditor = SelectFilter;
+							filterEditorProps = {
+								placeholder: column.filter.placeholder
+									? column.filter.placeholder
+									: "All Options",
+								dataSource: selectedDataSource,
+							};
+						} else {
+							filterEditor = null;
+							filterEditorProps = null;
+						}
 
-							if (relationValue && Array.isArray(relationValue)) {
-								const value = relationValue
-									.map((rv) => rv[column.nameFrom])
-									.join(", ");
-								return <span>{value}</span>;
-							} else {
-								return null;
-							}
-						},
-					};
+						return {
+							...commonProps,
+							name: relationName,
+							sortable: false,
+							filterEditor: filterEditor,
+							filterEditorProps: filterEditorProps,
+							render: ({ data }) => {
+								value = column.id.reduce((acc, id) => {
+									if (acc === "") {
+										return data[id];
+									} else {
+										return acc[id];
+									}
+								}, "");
+
+								if (value) {
+									if (Array.isArray(column.nameFrom)) {
+										value = column.nameFrom
+											.map((nf) => value[nf])
+											.join(" ");
+									} else {
+										value = value[column.nameFrom];
+									}
 
-				case "stage":
-					return {
-						...commonProps,
-						name: column.id,
-						sortable: false,
-						render: ({ data }) => {
-							stage = "";
-
-							column.keyIds.forEach((a, b) => {
-								if (data[a] === 1) {
-									stage = column.valueIds[b];
+									if (
+										column.placeholder &&
+										column.placeholder !== ""
+									) {
+										return (
+											<span>{column.placeholder}</span>
+										);
+									} else {
+										return <span>{value}</span>;
+									}
+								} else {
+									return null;
+								}
+							},
+						};
+					case "relationArray":
+						relationName =
+							column.id.reduce((acc, id) => acc + `${id}.`, "") +
+							column.nameFrom;
+
+						selectedDataSource = filterDataSource.reduce(
+							(acc, fds) => {
+								if (fds.id === relationName) {
+									return fds.dataset;
 								}
-							});
+								return acc;
+							},
+							null
+						);
+
+						if (
+							column.filter &&
+							column.filter.type &&
+							column.filter.type === "select"
+						) {
+							filterEditor = SelectFilter;
+							filterEditorProps = {
+								placeholder: column.filter.placeholder
+									? column.filter.placeholder
+									: "All Options",
+								dataSource: selectedDataSource,
+							};
+						} else {
+							filterEditor = null;
+							filterEditorProps = null;
+						}
 
-							return <span>{stage}</span>;
-						},
-					};
-				case "time":
-					return {
-						...commonProps,
-						name: column.id,
-						render: ({ data }) => {
-							if (data && data[column.id]) {
-								data = moment(data[column.id]).format(
-									column.format ? column.format : "hh:mm A"
+						return {
+							...commonProps,
+							name: relationName,
+							sortable: false,
+							filterEditor: filterEditor,
+							filterEditorProps: filterEditorProps,
+							render: ({ data }) => {
+								const relationValue = column.id.reduce(
+									(acc, id) =>
+										acc === ""
+											? data[id]
+											: acc && acc[id]
+											? acc[id]
+											: "",
+									""
 								);
 
-								return <span>{data}</span>;
-							} else {
+								if (
+									relationValue &&
+									Array.isArray(relationValue)
+								) {
+									const nameProperties = Array.isArray(
+										column.nameFrom
+									)
+										? column.nameFrom
+										: [column.nameFrom];
+
+									const values = relationValue
+										.map((rv) => {
+											if (
+												column.childId &&
+												Array.isArray(column.childId)
+											) {
+												childValue = rv;
+
+												column.childId.forEach((a) => {
+													if (childValue[a]) {
+														childValue =
+															childValue[a];
+													}
+												});
+
+												if (childValue) {
+													const propertyValues =
+														nameProperties
+															.map(
+																(prop) =>
+																	childValue[
+																		prop
+																	]
+															)
+															.filter(
+																(value) =>
+																	value !==
+																		undefined &&
+																	value !==
+																		null
+															);
+													return propertyValues.join(
+														" "
+													);
+												}
+											} else {
+												const propertyValues =
+													nameProperties
+														.map((prop) => rv[prop])
+														.filter(
+															(value) =>
+																value !==
+																	undefined &&
+																value !== null
+														);
+												return propertyValues.join(" ");
+											}
+										})
+										.filter((value) => value !== "");
+
+									if (values.length > 0) {
+										let result = "";
+
+										if (
+											column.relation?.id &&
+											column.relation?.key
+										) {
+											const relationValue =
+												column.relation.key.reduce(
+													(acc, id) =>
+														acc === ""
+															? data[id]
+															: acc && acc[id]
+															? acc[id]
+															: "",
+													""
+												);
+
+											result = `${
+												relationValue[
+													column.relation.id
+												]
+											}<br />`;
+										}
+
+										if (
+											column.where &&
+											column.where.id &&
+											column.where.value
+										) {
+											if (
+												data[column.where.id] ===
+												column.where.value
+											) {
+												result += values.join("<br />");
+											}
+										} else {
+											result += values.join("<br />");
+										}
+
+										return <span>{parse(result)}</span>;
+									}
+								}
+
 								return null;
+							},
+						};
+					case "richtext":
+						return {
+							...commonProps,
+							name: column.id,
+							render: ({ data }) => {
+								if (data && data[column.id]) {
+									return (
+										<span>{parse(data[column.id])}</span>
+									);
+								} else {
+									return null;
+								}
+							},
+						};
+					case "stage":
+						return {
+							...commonProps,
+							name: column.id,
+							sortable: false,
+							render: ({ data }) => {
+								stage = "";
+
+								column.keyIds.forEach((a, b) => {
+									if (data[a] === 1) {
+										stage = column.valueIds[b];
+									}
+								});
+
+								return <span>{stage}</span>;
+							},
+						};
+					case "time":
+						return {
+							...commonProps,
+							name: column.id,
+							render: ({ data }) => {
+								if (data && data[column.id]) {
+									data = moment(data[column.id]).format(
+										column.format
+											? column.format
+											: "hh:mm A"
+									);
+
+									return <span>{data}</span>;
+								} else {
+									return null;
+								}
+							},
+						};
+					case "url":
+						return {
+							...commonProps,
+							name: column.id,
+							render: ({ data }) => {
+								if (data && data[column.id]) {
+									return (
+										<span>
+											<a
+												href={data[column.id]}
+												target="_blank"
+											>
+												Link
+											</a>
+										</span>
+									);
+								} else {
+									return null;
+								}
+							},
+						};
+					default:
+						selectedDataSource = filterDataSource.reduce(
+							(acc, fds) => {
+								if (fds.id === column.id) {
+									return fds.dataset;
+								}
+								return acc;
+							},
+							null
+						);
+
+						if (column.filter && column.filter.type) {
+							switch (column.filter.type) {
+								case "select":
+									filterEditor = SelectFilter;
+									filterEditorProps = {
+										placeholder: column.filter.placeholder
+											? column.filter.placeholder
+											: "All Options",
+										dataSource: selectedDataSource,
+									};
+									break;
+								default:
+									filterEditor = null;
+									filterEditorProps = null;
+									break;
 							}
-						},
-					};
-				case "url":
-					return {
-						...commonProps,
-						name: column.id,
-						render: ({ data }) => {
-							if (data) {
-								return (
-									<span>
-										<a href={data} target="_blank">
-											Link
-										</a>
+						} else {
+							filterEditor = null;
+							filterEditorProps = null;
+						}
+
+						return {
+							...commonProps,
+							name: column.id,
+							filterEditor: filterEditor,
+							filterEditorProps: filterEditorProps,
+						};
+				}
+			};
+
+			const newColumns = columns.map(renderColumn);
+
+			if (settings.length > 0) {
+				newColumns.push({
+					name: "setting",
+					header: "Action",
+					defaultWidth: 100,
+					textAlign: "center",
+					render: ({ data }) => {
+						return (
+							<div className="tdactions">
+								{settings.map((setting) => (
+									<span
+										key={`setting-${setting.id}`}
+										onClick={(e) => {
+											e.preventDefault();
+											e.stopPropagation();
+											handleSettingClick(setting, data);
+										}}
+									>
+										{renderSetting(setting, data)}
 									</span>
-								);
-							} else {
-								return null;
-							}
-						},
-					};
-				default:
+								))}
+							</div>
+						);
+					},
+				});
+			}
+
+			setGridColumns(newColumns);
+
+			const newFilterValue = columns
+				.filter((column) => column.filter && column.filter.type) // Only consider columns with a filter type
+				.map((column) => {
+					// Map these filtered columns to a new object array
+					const filterName = Array.isArray(column.id)
+						? column.id.reduce((acc, id) => acc + `${id}.`, "") +
+						  column.nameFrom
+						: column.id;
+
 					return {
-						...commonProps,
-						name: column.id,
+						key: column.filter.key ? column.filter.key : null,
+						name: filterName,
+						operator: column.filter.operator,
+						type: column.filter.type,
+						value: column.filter.value ? column.filter.value : "",
 					};
-			}
-		};
+				});
 
-		const newColumns = columns.map(renderColumn);
-
-		if (settings.length > 0) {
-			newColumns.push({
-				name: "setting",
-				header: "Action",
-				defaultWidth: 100,
-				textAlign: "center",
-				render: ({ data }) => {
-					return (
-						<div className="tdactions">
-							{settings.map((setting) => (
-								<span
-									key={`setting-${setting.id}`}
-									onClick={(e) => {
-										e.preventDefault();
-										e.stopPropagation();
-										handleSettingClick(setting, data);
-									}}
-								>
-									{renderSetting(setting, data)}
-								</span>
-							))}
-						</div>
-					);
-				},
-			});
-		}
-
-		setGridColumns(newColumns);
-
-		const newFilterValue = columns
-			.filter((column) => column.filter && column.filter.type) // Only consider columns with a filter type
-			.map((column) => {
-				// Map these filtered columns to a new object array
-				const filterName = Array.isArray(column.id)
-					? column.id.reduce((acc, id) => acc + `${id}.`, "") +
-					  column.nameFrom
-					: column.id;
-
-				return {
-					key: column.filter.key ? column.filter.key : null,
-					name: filterName,
-					operator: column.filter.operator,
-					type: column.filter.type,
-					value: "",
-				};
-			});
+			setFilterValue(newFilterValue);
+		}, [columns, filterDataSource]);
 
-		setFilterValue(newFilterValue);
-	}, [columns, filterDataSource]);
+		useEffect(() => {
+			if (setFilterData) {
+				setFilterData(filterValue);
+			}
+		}, [filterValue]);
+
+		useEffect(() => {
+			columns.forEach((column) => {
+				if (column.filter && column.filter.url) {
+					CustomFetch(
+						column.filter.url,
+						"POST",
+						column.filter.where
+							? { where: column.filter.where }
+							: {},
+						(res) => {
+							const filterName = Array.isArray(column.id)
+								? column.id.reduce(
+										(acc, id) => acc + `${id}.`,
+										""
+								  ) + column.nameFrom
+								: column.id;
+
+							const filterIndex = filterDataSource.findIndex(
+								(filter) => filter.id === filterName
+							);
 
-	useEffect(() => {
-		columns.forEach((column) => {
-			if (column.filter && column.filter.url) {
-				CustomFetch(column.filter.url, "POST", {}, (res) => {
+							if (filterIndex >= 0) {
+								const updatedFilter = {
+									...filterDataSource[filterIndex],
+									dataset: res.data,
+								};
+								const updatedDataSource = [
+									...filterDataSource.slice(0, filterIndex),
+									updatedFilter,
+									...filterDataSource.slice(filterIndex + 1),
+								];
+								setFilterDataSource(updatedDataSource);
+							} else {
+								const newFilter = {
+									id: filterName,
+									dataset: res.data,
+								};
+								setFilterDataSource((prevState) => [
+									...prevState,
+									newFilter,
+								]);
+							}
+						}
+					);
+				} else if (column.filter && column.filter.options) {
 					const filterName = Array.isArray(column.id)
 						? column.id.reduce((acc, id) => acc + `${id}.`, "") +
 						  column.nameFrom
 						: column.id;
 
-					const filterIndex = filterDataSource.findIndex(
-						(filter) => filter.id === filterName
-					);
+					const newFilter = {
+						id: filterName,
+						dataset: column.filter.options,
+					};
 
-					if (filterIndex >= 0) {
-						const updatedFilter = {
-							...filterDataSource[filterIndex],
-							dataset: res.data,
-						};
-						const updatedDataSource = [
-							...filterDataSource.slice(0, filterIndex),
-							updatedFilter,
-							...filterDataSource.slice(filterIndex + 1),
-						];
-						setFilterDataSource(updatedDataSource);
-					} else {
-						const newFilter = { id: filterName, dataset: res.data };
-						setFilterDataSource((prevState) => [
-							...prevState,
-							newFilter,
-						]);
-					}
-				});
-			}
-		});
-	}, []);
-
-	// Data Grid Styling
-	const [windowHeight, setWindowHeight] = useState(window.innerHeight);
-	const gridStyle = {
-		minHeight: windowHeight * 0.7 > 550 ? windowHeight * 0.7 : 550,
-		boxShadow: "none",
-	};
-	const headerProps = {
-		style: style ? style : {},
-	};
-
-	useEffect(() => {
-		const handleResize = () => {
-			setWindowHeight(window.innerHeight);
+					setFilterDataSource((prevState) => [
+						...prevState,
+						newFilter,
+					]);
+				}
+			});
+		}, []);
+
+		// Data Grid Styling
+		const [windowHeight, setWindowHeight] = useState(window.innerHeight);
+		const gridStyle = {
+			minHeight: windowHeight * 0.7 > 550 ? windowHeight * 0.7 : 550,
+			boxShadow: "none",
+		};
+		const headerProps = {
+			style: style ? style : {},
 		};
 
-		window.addEventListener("resize", handleResize);
+		useEffect(() => {
+			const handleResize = () => {
+				setWindowHeight(window.innerHeight);
+			};
 
-		// Clean up the event listener
-		return () => {
-			window.removeEventListener("resize", handleResize);
-		};
-	}, []);
-
-	return (
-		<>
-			{renderSearch()}
-			{renderCreateButton()}
-			<ReactDataGrid
-				columns={gridColumns}
-				dataSource={data}
-				filterValue={filterValue}
-				defaultLimit={limit}
-				defaultSortInfo={sortInfo}
-				enableColumnAutosize={false}
-				enableColumnFilterContextMenu={false}
-				headerProps={headerProps}
-				idProperty={`visns-datagrid-${ajaxSetting.url.replace(
-					/\//g,
-					"-"
-				)}`}
-				style={gridStyle}
-				onFilterValueChange={setFilterValue}
-				onRenderRow={onRenderRow}
-				pagination
-				renderColumnContextMenu={renderColumnContextMenu}
-				showZebraRows={true}
-			/>
-			<Popup
-				open={modalShow}
-				onClose={modalClose}
-				closeOnDocumentClick={false}
-			>
-				<Form
-					closeModal={modalClose}
-					fetchTable={handleReload}
-					formSettings={formData}
-					formType={formType}
-					updateForm={setFormData}
-					columnId={formId}
-					childDropdownCallback={childDropdownCallback}
+			window.addEventListener("resize", handleResize);
+
+			// Clean up the event listener
+			return () => {
+				window.removeEventListener("resize", handleResize);
+			};
+		}, []);
+
+		return (
+			<>
+				{renderSearch()}
+				{renderCreateButton()}
+				<ReactDataGrid
+					columns={gridColumns}
+					dataSource={data}
+					filterValue={filterValue}
+					defaultLimit={limit}
+					defaultSortInfo={sortInfo}
+					enableColumnAutosize={false}
+					enableColumnFilterContextMenu={false}
+					enableSelection={false}
+					headerProps={headerProps}
+					idProperty={`visns-datagrid-${ajaxSetting.url.replace(
+						/\//g,
+						"-"
+					)}`}
+					style={gridStyle}
+					onFilterValueChange={setFilterValue}
+					onRenderRow={onRenderRow}
+					pagination
+					renderColumnContextMenu={renderColumnContextMenu}
+					showZebraRows={true}
 				/>
-			</Popup>
-		</>
-	);
-};
+				<Popup
+					open={modalShow}
+					onClose={modalClose}
+					closeOnDocumentClick={false}
+				>
+					<Form
+						closeModal={modalClose}
+						fetchTable={handleReload}
+						formSettings={formData}
+						formType={formType}
+						updateForm={setFormData}
+						columnId={formId}
+						childDropdownCallback={childDropdownCallback}
+					/>
+				</Popup>
+			</>
+		);
+	}
+);
 
 export default DataGrid;