@antscorp/antsomi-ui 2.0.7 → 2.0.8-3.text-editor-beta.1

package/es/components/organism/DataTable/hooks/useDataTableListing/useDataTableListing.js

@@ -1,25 +1,6 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { flatMap, isEmpty, pick, xor, groupBy as lodashGroupBy } from 'lodash';
 import { useQueryClient } from '@tanstack/react-query';
@@ -69,7 +50,6 @@ const initialState = {
     },
 };
 export function useDataTableListing(props) {
-    var _a, _b, _c;
     // Props
     const { config, name = 'default', table: tableProps, search: searchProps, filter: filterProps, gridView: gridViewProps, groupBy: groupByProps, queryOptions, } = props || {};
     // Hooks
@@ -78,41 +58,53 @@ export function useDataTableListing(props) {
     // State
     const [state, setState] = useState(initialState);
     // Variables
-    const { env = appConfig === null || appConfig === void 0 ? void 0 : appConfig.env, auth = appConfig === null || appConfig === void 0 ? void 0 : appConfig.auth, api, object, disabledCache } = config;
+    const { env = appConfig?.env, auth = appConfig?.auth, api, object, disabledCache } = config;
     const { column: apiColumn, filter: apiFilter, listing: apiListing, search: apiSearch, matchesAny: apiMatchesAny, } = api || {};
-    const _d = apiColumn || {}, { url: columnUrl = `${COLUMN_DOMAIN[env || 'development']}/api/column`, enabled: enabledApiColumn = true } = _d, restOfApiColumnRequest = __rest(_d, ["url", "enabled"]);
-    const _e = apiFilter || {}, { url: filterUrl = `${COLUMN_DOMAIN[env || 'development']}/api/filter`, enabled: enabledApiFilter = true } = _e, restOfApiFilterRequest = __rest(_e, ["url", "enabled"]);
-    const _f = apiListing || {}, { url: listingUrl = '', enabled: enabledApiListing = true } = _f, restOfApiListingRequest = __rest(_f, ["url", "enabled"]);
-    const _g = apiSearch || {}, { url: searchUrl = '', enabled: enabledApiSearch = true } = _g, restOfApiSearchRequest = __rest(_g, ["url", "enabled"]);
+    const { url: columnUrl = `${COLUMN_DOMAIN[env || 'development']}/api/column`, enabled: enabledApiColumn = true, ...restOfApiColumnRequest } = apiColumn || {};
+    const { url: filterUrl = `${COLUMN_DOMAIN[env || 'development']}/api/filter`, enabled: enabledApiFilter = true, ...restOfApiFilterRequest } = apiFilter || {};
+    const { url: listingUrl = '', enabled: enabledApiListing = true, ...restOfApiListingRequest } = apiListing || {};
+    const { url: searchUrl = '', enabled: enabledApiSearch = true, ...restOfApiSearchRequest } = apiSearch || {};
     const { filters, selectedFilterId, pagination, selectedRowKeys, searchValue, table, sorter, selectedRow, selectedFilterItem, expandedRowKeys, groupBy, modeView, } = state;
     const { externalFilters, defaultFilters, includeDataType = false, matchesAny, formatFilterValue, } = filterProps || {};
     const { sortDirectionKey = 'az', mainColumnKey, expandColumnKey, expandable } = tableProps || {};
     const { itemProps: gridViewItemProps } = gridViewProps || {};
     const { columnKeys: groupByColumnKeys, defaultSelectedKey: groupByDefaultSelectedKey } = groupByProps || {};
-    const modifyColumnAuth = Object.assign(Object.assign({}, auth), { url: columnUrl });
-    const filterAuth = Object.assign(Object.assign({}, auth), { url: filterUrl });
-    const listingAuth = Object.assign(Object.assign({}, auth), { url: listingUrl });
-    const searchAuth = Object.assign(Object.assign({}, auth), { url: searchUrl });
+    const modifyColumnAuth = {
+        ...auth,
+        url: columnUrl,
+    };
+    const filterAuth = {
+        ...auth,
+        url: filterUrl,
+    };
+    const listingAuth = {
+        ...auth,
+        url: listingUrl,
+    };
+    const searchAuth = {
+        ...auth,
+        url: searchUrl,
+    };
     /**
      * If has api config for specific selectedFilterItem, use it
      * Otherwise use general api config
      */
-    const matchesAnyRequest = (apiMatchesAny === null || apiMatchesAny === void 0 ? void 0 : apiMatchesAny[`${selectedFilterItem === null || selectedFilterItem === void 0 ? void 0 : selectedFilterItem.column}`.toLowerCase()])
-        ? apiMatchesAny === null || apiMatchesAny === void 0 ? void 0 : apiMatchesAny[`${selectedFilterItem === null || selectedFilterItem === void 0 ? void 0 : selectedFilterItem.column}`.toLowerCase()]
-        : apiMatchesAny === null || apiMatchesAny === void 0 ? void 0 : apiMatchesAny.general;
+    const matchesAnyRequest = apiMatchesAny?.[`${selectedFilterItem?.column}`.toLowerCase()]
+        ? apiMatchesAny?.[`${selectedFilterItem?.column}`.toLowerCase()]
+        : apiMatchesAny?.general;
     /**
      * If `selectedFilterItem` has a column, the function will attempt to find a matching property in the `matchesAny`
      * object by converting the column name to lowercase. If such a property does not exist, it will default to using
      * the `general` property from the `matchesAny` object.
      */
-    const matchesAnyProps = (matchesAny === null || matchesAny === void 0 ? void 0 : matchesAny[`${selectedFilterItem === null || selectedFilterItem === void 0 ? void 0 : selectedFilterItem.column}`.toLowerCase()])
-        ? matchesAny === null || matchesAny === void 0 ? void 0 : matchesAny[`${selectedFilterItem === null || selectedFilterItem === void 0 ? void 0 : selectedFilterItem.column}`.toLowerCase()]
-        : matchesAny === null || matchesAny === void 0 ? void 0 : matchesAny.general;
+    const matchesAnyProps = matchesAny?.[`${selectedFilterItem?.column}`.toLowerCase()]
+        ? matchesAny?.[`${selectedFilterItem?.column}`.toLowerCase()]
+        : matchesAny?.general;
     // Memos
     const mapObject = useDeepCompareMemo(() => ({
-        objType: object === null || object === void 0 ? void 0 : object.type,
-        objId: object === null || object === void 0 ? void 0 : object.objectId,
-    }), [object === null || object === void 0 ? void 0 : object.objectId, object === null || object === void 0 ? void 0 : object.type]);
+        objType: object?.type,
+        objId: object?.objectId,
+    }), [object?.objectId, object?.type]);
     // Memoized function to determine if "fetch matches any" is enabled.
     const isEnabledFetchMatchesAny = useMemo(() => 
     // Check if a filter item is selected.
@@ -124,9 +116,9 @@ export function useDataTableListing(props) {
         // Check if matchesAnyRequest.enabled is a boolean and true, or if it is not set (defaulting to true).
         (typeof matchesAnyRequest.enabled === 'boolean' ? matchesAnyRequest.enabled : true) &&
         // Check if matchesAnyProps.options does not exist.
-        !(matchesAnyProps === null || matchesAnyProps === void 0 ? void 0 : matchesAnyProps.options), 
+        !matchesAnyProps?.options, 
     // Dependencies for the useMemo hook: recalculate if matchesAnyProps.options, matchesAnyRequest, or selectedFilterItem changes.
-    [matchesAnyProps === null || matchesAnyProps === void 0 ? void 0 : matchesAnyProps.options, matchesAnyRequest, selectedFilterItem]);
+    [matchesAnyProps?.options, matchesAnyRequest, selectedFilterItem]);
     const localStorageKey = useDeepCompareMemo(() => {
         const { userId, portalId } = auth || {};
         return `${TABLE_LISTING_PREFIX}${userId}-${portalId}-${name}`;
@@ -139,7 +131,11 @@ export function useDataTableListing(props) {
             params: mapObject,
             request: restOfApiColumnRequest,
         },
-        options: Object.assign({ enabled: enabledApiColumn, refetchOnMount: 'always' }, queryOptions === null || queryOptions === void 0 ? void 0 : queryOptions.getColumnMetricList),
+        options: {
+            enabled: enabledApiColumn,
+            refetchOnMount: 'always',
+            ...queryOptions?.getColumnMetricList,
+        },
     });
     const getModifyColumnList = useGetModifyColumnList({
         args: {
@@ -147,7 +143,10 @@ export function useDataTableListing(props) {
             params: mapObject,
             request: restOfApiColumnRequest,
         },
-        options: Object.assign({ enabled: enabledApiColumn }, queryOptions === null || queryOptions === void 0 ? void 0 : queryOptions.getModifyColumnList),
+        options: {
+            enabled: enabledApiColumn,
+            ...queryOptions?.getModifyColumnList,
+        },
     });
     const getSavedFilterList = useGetSavedFilterList({
         args: {
@@ -155,7 +154,10 @@ export function useDataTableListing(props) {
             params: mapObject,
             request: restOfApiFilterRequest,
         },
-        options: Object.assign({ enabled: enabledApiFilter }, queryOptions === null || queryOptions === void 0 ? void 0 : queryOptions.getSavedFilterList),
+        options: {
+            enabled: enabledApiFilter,
+            ...queryOptions?.getSavedFilterList,
+        },
     });
     const getFilterMetricList = useGetFilterMetricList({
         args: {
@@ -163,12 +165,16 @@ export function useDataTableListing(props) {
             params: mapObject,
             request: restOfApiFilterRequest,
         },
-        options: Object.assign({ enabled: enabledApiFilter, refetchOnMount: 'always' }, queryOptions === null || queryOptions === void 0 ? void 0 : queryOptions.getFilterMetricList),
+        options: {
+            enabled: enabledApiFilter,
+            refetchOnMount: 'always',
+            ...queryOptions?.getFilterMetricList,
+        },
     });
     const getInfiniteMatchesAnyList = useGetInfiniteMatchesAnyList({
         args: {
             auth,
-            params: (_a = matchesAnyRequest === null || matchesAnyRequest === void 0 ? void 0 : matchesAnyRequest.params) === null || _a === void 0 ? void 0 : _a.call(matchesAnyRequest, selectedFilterItem),
+            params: matchesAnyRequest?.params?.(selectedFilterItem),
             request: matchesAnyRequest,
         },
         options: {
@@ -177,17 +183,17 @@ export function useDataTableListing(props) {
             retry: false,
             getNextPageParam(lastPage, allPages) {
                 // Extract the total number of items from the last fetched page
-                const total = (typeof (matchesAnyProps === null || matchesAnyProps === void 0 ? void 0 : matchesAnyProps.total) === 'function'
-                    ? matchesAnyProps === null || matchesAnyProps === void 0 ? void 0 : matchesAnyProps.total(lastPage)
-                    : matchesAnyProps === null || matchesAnyProps === void 0 ? void 0 : matchesAnyProps.total) || lastPage.total;
+                const total = (typeof matchesAnyProps?.total === 'function'
+                    ? matchesAnyProps?.total(lastPage)
+                    : matchesAnyProps?.total) || lastPage.total;
                 // Check if the total number of items is defined
                 if (total) {
                     // Calculate the current total number of items retrieved so far
                     // Process all pages and their data using formatData function and flatten the results
-                    const currentTotalItems = flatMap(allPages === null || allPages === void 0 ? void 0 : allPages.map(page => { var _a; return ((_a = matchesAnyProps === null || matchesAnyProps === void 0 ? void 0 : matchesAnyProps.formatData) === null || _a === void 0 ? void 0 : _a.call(matchesAnyProps, page)) || []; }));
+                    const currentTotalItems = flatMap(allPages?.map(page => matchesAnyProps?.formatData?.(page) || []));
                     // If the total number of items fetched is less than the total available,
                     // return the next page number (allPages.length + 1). Otherwise, return undefined.
-                    return ((currentTotalItems === null || currentTotalItems === void 0 ? void 0 : currentTotalItems.length) || 0) < total ? (allPages === null || allPages === void 0 ? void 0 : allPages.length) + 1 : undefined;
+                    return (currentTotalItems?.length || 0) < total ? allPages?.length + 1 : undefined;
                 }
                 // If the total number of items is not defined, return undefined
                 return undefined;
@@ -196,18 +202,31 @@ export function useDataTableListing(props) {
     });
     // Variables
     const { data: modifyColumnsData, isLoading: isModifyColumnsLoading } = getModifyColumnList || {};
-    const modifyColumnSelected = useDeepCompareMemo(() => { var _a; return ((_a = modifyColumnsData === null || modifyColumnsData === void 0 ? void 0 : modifyColumnsData.find(({ isLasted }) => +isLasted === 1)) === null || _a === void 0 ? void 0 : _a.modifyColId) || ''; }, [modifyColumnsData]);
+    const modifyColumnSelected = useDeepCompareMemo(() => modifyColumnsData?.find(({ isLasted }) => +isLasted === 1)?.modifyColId || '', [modifyColumnsData]);
     const getTableListing = useGetTableListing({
         args: {
             auth: listingAuth,
-            params: Object.assign({ limit: pagination.pageSize, page: pagination.page, filter: JSON.stringify(mapFiltersToApiFilters([...(filters || []), ...(externalFilters || [])], includeDataType, formatFilterValue)), columns: JSON.stringify(((_c = (_b = modifyColumnsData === null || modifyColumnsData === void 0 ? void 0 : modifyColumnsData.find(modifyColumnItem => modifyColumnItem.modifyColId === modifyColumnSelected)) === null || _b === void 0 ? void 0 : _b.columns) === null || _c === void 0 ? void 0 : _c.map(col => { var _a; return (_a = col.metricCode) === null || _a === void 0 ? void 0 : _a.toUpperCase(); })) || []) }, ((sorter === null || sorter === void 0 ? void 0 : sorter.order) &&
-                (sorter === null || sorter === void 0 ? void 0 : sorter.columnKey) && {
-                sort: sorter.columnKey.toString(),
-                [sortDirectionKey]: SORT_MAP[sorter.order],
-            })),
+            params: {
+                limit: pagination.pageSize,
+                page: pagination.page,
+                filter: JSON.stringify(mapFiltersToApiFilters([...(filters || []), ...(externalFilters || [])], includeDataType, formatFilterValue)),
+                columns: JSON.stringify(modifyColumnsData
+                    ?.find(modifyColumnItem => modifyColumnItem.modifyColId === modifyColumnSelected)
+                    ?.columns?.map(col => col.metricCode?.toUpperCase()) || []),
+                ...(sorter?.order &&
+                    sorter?.columnKey && {
+                    sort: sorter.columnKey.toString(),
+                    [sortDirectionKey]: SORT_MAP[sorter.order],
+                }),
+            },
             request: restOfApiListingRequest,
         },
-        options: Object.assign({ queryKey: [name], keepPreviousData: true, enabled: !!(listingAuth === null || listingAuth === void 0 ? void 0 : listingAuth.url) && !!(listingAuth === null || listingAuth === void 0 ? void 0 : listingAuth.token) && enabledApiListing }, queryOptions === null || queryOptions === void 0 ? void 0 : queryOptions.getTableListing),
+        options: {
+            queryKey: [name],
+            keepPreviousData: true,
+            enabled: !!listingAuth?.url && !!listingAuth?.token && enabledApiListing,
+            ...queryOptions?.getTableListing,
+        },
     });
     const getSearchListing = useGetSearchListing({
         args: {
@@ -217,7 +236,11 @@ export function useDataTableListing(props) {
             },
             request: restOfApiSearchRequest,
         },
-        options: Object.assign({ keepPreviousData: true, enabled: !!(searchAuth === null || searchAuth === void 0 ? void 0 : searchAuth.url) && !!(searchAuth === null || searchAuth === void 0 ? void 0 : searchAuth.token) && enabledApiSearch }, queryOptions === null || queryOptions === void 0 ? void 0 : queryOptions.getSearchListing),
+        options: {
+            keepPreviousData: true,
+            enabled: !!searchAuth?.url && !!searchAuth?.token && enabledApiSearch,
+            ...queryOptions?.getSearchListing,
+        },
     });
     // Variables
     const { data: columnMetricsData } = getColumnMetrics || {};
@@ -230,7 +253,7 @@ export function useDataTableListing(props) {
     // Conditionally format search listing data based on the presence of a formatData function in searchProps.
     // If formatData is defined, use it to format searchListingData.
     // Otherwise, use the mapResponseSearchToGeneral function to format searchListingData.
-    const searchListingBody = (searchProps === null || searchProps === void 0 ? void 0 : searchProps.formatData)
+    const searchListingBody = searchProps?.formatData
         ? searchProps.formatData(searchListingData)
         : mapResponseSearchToGeneral(searchListingData).body || {};
     // Mutations
@@ -267,61 +290,61 @@ export function useDataTableListing(props) {
         };
         return serializeColumnMetrics(columnMetricsData || []);
     }, [columnMetricsData]);
-    const modifyColumnList = useDeepCompareMemo(() => (modifyColumnsData === null || modifyColumnsData === void 0 ? void 0 : modifyColumnsData.map(({ modifyName, modifyColId, columns }) => ({
+    const modifyColumnList = useDeepCompareMemo(() => modifyColumnsData
+        ?.map(({ modifyName, modifyColId, columns }) => ({
         id: modifyColId,
         name: modifyName,
         editable: !MODIFY_COLUMN_DISABLE_EDITABLE.includes(modifyName),
         removable: !MODIFY_COLUMN_DISABLE_REMOVE.includes(modifyName),
-        metrics: columns === null || columns === void 0 ? void 0 : columns.map(({ metricCode, metricId }) => metricCode || metricId || -1),
-    })).reverse()) || [], [modifyColumnsData]);
+        metrics: columns?.map(({ metricCode, metricId }) => metricCode || metricId || -1),
+    }))
+        .reverse() || [], [modifyColumnsData]);
     const filterMetrics = useDeepCompareMemo(() => {
         const serializeFilterMetrics = (metrics) => {
-            const result = metrics.map(metric => {
-                var _a;
-                return ({
-                    id: metric.metricCode,
-                    name: metric.metricName,
-                    dataType: METRIC_MAP_NUMBER_TYPE[+metric.dataType] || 'string',
-                    children: serializeFilterMetrics(metric.child || []),
-                    operators: Array.isArray(metric.operator)
-                        ? ((_a = metric.operator) === null || _a === void 0 ? void 0 : _a.map(({ name, value }) => ({ label: name, value }))) || []
-                        : [],
-                });
-            });
+            const result = metrics.map(metric => ({
+                id: metric.metricCode,
+                name: metric.metricName,
+                dataType: METRIC_MAP_NUMBER_TYPE[+metric.dataType] || 'string',
+                children: serializeFilterMetrics(metric.child || []),
+                operators: Array.isArray(metric.operator)
+                    ? metric.operator?.map(({ name, value }) => ({ label: name, value })) || []
+                    : [],
+            }));
             return result;
         };
         return serializeFilterMetrics(filterMetricsData || []);
     }, [filterMetricsData]);
-    const savedFilterList = useDeepCompareMemo(() => SAVED_FILTER_DEFAULT.concat((savedFiltersData === null || savedFiltersData === void 0 ? void 0 : savedFiltersData.map(({ filterId, filterName }) => ({
+    const savedFilterList = useDeepCompareMemo(() => SAVED_FILTER_DEFAULT.concat(savedFiltersData?.map(({ filterId, filterName }) => ({
         id: filterId,
         name: filterName,
         removable: true,
-    }))) || []), [savedFiltersData]);
+    })) || []), [savedFiltersData]);
     const renderColumnWithExpandIcon = useCallback((children, // The content of the column
     headerCol, // The header configuration for the column
     record) => {
         const { name } = headerCol || {}; // Destructure the name from the headerCol, with a fallback to an empty object
         if (expandColumnKey === name) {
             // Check if the current column is the expand column
-            const expanded = expandedRowKeys === null || expandedRowKeys === void 0 ? void 0 : expandedRowKeys.includes(
+            const expanded = expandedRowKeys?.includes(
             // Check if the current row is expanded
-            (record === null || record === void 0 ? void 0 : record[mainColumnKey]) || '');
-            return (React.createElement(Flex, { align: "center", gap: 4 },
-                React.createElement(ExpandLessIcon, { size: 20, style: {
-                        flexShrink: 0,
-                        color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8,
-                        transform: `rotate(${expanded ? 0 : 180}deg)`,
-                        cursor: 'pointer',
-                        transition: 'transform 0.3s ease',
-                    }, onClick: () => {
-                        if (expandable && expandable.onExpand) {
-                            expandable.onExpand(!expanded, record);
-                        }
-                        setState(prev => (Object.assign(Object.assign({}, prev), { expandedRowKeys: xor(expandedRowKeys, [
-                                record[mainColumnKey],
-                            ]) })));
-                    } }),
-                children));
+            record?.[mainColumnKey] || '');
+            return (_jsxs(Flex, { align: "center", gap: 4, children: [_jsx(ExpandLessIcon, { size: 20, style: {
+                            flexShrink: 0,
+                            color: globalToken?.bw8,
+                            transform: `rotate(${expanded ? 0 : 180}deg)`,
+                            cursor: 'pointer',
+                            transition: 'transform 0.3s ease',
+                        }, onClick: () => {
+                            if (expandable && expandable.onExpand) {
+                                expandable.onExpand(!expanded, record);
+                            }
+                            setState(prev => ({
+                                ...prev,
+                                expandedRowKeys: xor(expandedRowKeys, [
+                                    record[mainColumnKey],
+                                ]),
+                            }));
+                        } }), children] }));
         }
         return children;
     }, [expandColumnKey, expandable, expandedRowKeys, mainColumnKey]);
@@ -331,56 +354,86 @@ export function useDataTableListing(props) {
         }
         const localStorageValues = parseJSONFromLocalStorage(localStorageKey) || {};
         // Set Local Storage
-        localStorage.setItem(localStorageKey, JSON.stringify(Object.assign(Object.assign({}, localStorageValues), dataTableLocalStorage)));
+        localStorage.setItem(localStorageKey, JSON.stringify({
+            ...localStorageValues,
+            ...dataTableLocalStorage,
+        }));
     }, [disabledCache, localStorageKey]);
     const handleUpdateGroupBy = useCallback((groupBy) => {
         const localStorageValues = parseJSONFromLocalStorage(localStorageKey) || {};
-        setState(prev => (Object.assign(Object.assign({}, prev), { groupBy: Object.assign(Object.assign({}, prev.groupBy), groupBy) })));
+        setState(prev => ({
+            ...prev,
+            groupBy: {
+                ...prev.groupBy,
+                ...groupBy,
+            },
+        }));
         handleUpdateLocalStorage({
-            groupBy: Object.assign(Object.assign({}, localStorageValues.groupBy), groupBy),
+            groupBy: {
+                ...localStorageValues.groupBy,
+                ...groupBy,
+            },
         });
     }, [handleUpdateLocalStorage, localStorageKey]);
     const tableColumns = useDeepCompareMemo(() => {
         let data = [];
         const { columns } = tableProps || {};
         // Check if has column toggle then add toggle switch column
-        if (columns === null || columns === void 0 ? void 0 : columns.toggle) {
+        if (columns?.toggle) {
             const { key, dataIndex, valueKey, title, value, disabled, onChange } = columns.toggle || {};
-            data.push(Object.assign(Object.assign({ key: 'toggle' || key, fixed: 'left', align: 'center', dataIndex: 'toggle' || dataIndex, title: 'Toggle' || title, width: DEFAULT_TOGGLE_WIDTH }, columns.toggle), { render: (_, record) => {
+            data.push({
+                key: 'toggle' || key,
+                fixed: 'left',
+                align: 'center',
+                dataIndex: 'toggle' || dataIndex,
+                title: 'Toggle' || title,
+                width: DEFAULT_TOGGLE_WIDTH,
+                ...columns.toggle,
+                render: (_, record) => {
                     const checked = value
                         ? typeof value === 'function'
                             ? value(record)
                             : value
                         : !!record[valueKey];
                     const switchDisabled = typeof disabled === 'function' ? disabled(record) : disabled;
-                    return (React.createElement(Flex, { align: "center", justify: "center" },
-                        React.createElement(Switch, { checked: checked, disabled: switchDisabled, onChange: checked => {
+                    return (_jsx(Flex, { align: "center", justify: "center", children: _jsx(Switch, { checked: checked, disabled: switchDisabled, onChange: checked => {
                                 if (onChange) {
                                     onChange(checked, record);
                                 }
-                            } })));
-                } }));
+                            } }) }));
+                },
+            });
         }
-        data = data.concat((tableHeader === null || tableHeader === void 0 ? void 0 : tableHeader.map(headerCol => {
+        data = data.concat(tableHeader?.map(headerCol => {
             const { name, label, fixColumn, sortable } = headerCol;
-            return Object.assign(Object.assign({ key: name, dataIndex: name, title: label, fixed: fixColumn ? 'left' : undefined, sorter: !!sortable, sortOrder: (sorter === null || sorter === void 0 ? void 0 : sorter.columnKey) === name ? sorter === null || sorter === void 0 ? void 0 : sorter.order : undefined }, columns === null || columns === void 0 ? void 0 : columns[name]), { render(value, record, index) {
-                    var _a;
-                    const { link } = (columns === null || columns === void 0 ? void 0 : columns[name]) || {};
-                    const RenderComponent = (React.createElement(Text, { ellipsis: { tooltip: true }, style: Object.assign({}, (link
-                            ? {
-                                fontWeight: globalToken === null || globalToken === void 0 ? void 0 : globalToken.fontWeightStrong,
-                                color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorPrimary,
-                            }
-                            : {})) }, typeof value !== 'object' ? value || DEFAULT_CELL_EMPTY : DEFAULT_CELL_EMPTY));
-                    if ((_a = columns === null || columns === void 0 ? void 0 : columns[name]) === null || _a === void 0 ? void 0 : _a.render) {
+            return {
+                key: name,
+                dataIndex: name,
+                title: label,
+                fixed: fixColumn ? 'left' : undefined,
+                sorter: !!sortable,
+                sortOrder: sorter?.columnKey === name ? sorter?.order : undefined,
+                ...columns?.[name],
+                render(value, record, index) {
+                    const { link } = columns?.[name] || {};
+                    const RenderComponent = (_jsx(Text, { ellipsis: { tooltip: true }, style: {
+                            ...(link
+                                ? {
+                                    fontWeight: globalToken?.fontWeightStrong,
+                                    color: globalToken?.colorPrimary,
+                                }
+                                : {}),
+                        }, children: typeof value !== 'object' ? value || DEFAULT_CELL_EMPTY : DEFAULT_CELL_EMPTY }));
+                    if (columns?.[name]?.render) {
                         return renderColumnWithExpandIcon(columns[name].render(value, record, index, RenderComponent), headerCol, record);
                     }
                     if (link) {
-                        return renderColumnWithExpandIcon(React.createElement(Link, { to: typeof link === 'function' ? link(record) : link }, RenderComponent), headerCol, record);
+                        return renderColumnWithExpandIcon(_jsx(Link, { to: typeof link === 'function' ? link(record) : link, children: RenderComponent }), headerCol, record);
                     }
                     return renderColumnWithExpandIcon(RenderComponent, headerCol, record);
-                } });
-        })) || []);
+                },
+            };
+        }) || []);
         // Handle Group by
         if (groupBy.selectedKey) {
             data.unshift({
@@ -391,16 +444,18 @@ export function useDataTableListing(props) {
                 title: '',
                 width: 50,
                 render(value, record) {
-                    var _a, _b;
                     const { groupTotal = 0 } = record || {};
-                    const groupKey = record === null || record === void 0 ? void 0 : record[groupBy.selectedKey || ''];
-                    const isExpanded = typeof ((_a = groupBy.expandedKeys) === null || _a === void 0 ? void 0 : _a[groupKey]) === 'boolean'
-                        ? (_b = groupBy.expandedKeys) === null || _b === void 0 ? void 0 : _b[groupKey]
+                    const groupKey = record?.[groupBy.selectedKey || ''];
+                    const isExpanded = typeof groupBy.expandedKeys?.[groupKey] === 'boolean'
+                        ? groupBy.expandedKeys?.[groupKey]
                         : true;
                     return (groupKey &&
-                        groupTotal > 1 && (React.createElement(GroupByExpandButton, { onClick: () => handleUpdateGroupBy({
-                            expandedKeys: Object.assign(Object.assign({}, groupBy.expandedKeys), { [groupKey]: !isExpanded }),
-                        }) }, isExpanded ? (React.createElement(SubtractRadiusIcon, { color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorPrimary })) : (React.createElement(AddRadiusIcon, { color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorPrimary })))));
+                        groupTotal > 1 && (_jsx(GroupByExpandButton, { onClick: () => handleUpdateGroupBy({
+                            expandedKeys: {
+                                ...groupBy.expandedKeys,
+                                [groupKey]: !isExpanded,
+                            },
+                        }), children: isExpanded ? (_jsx(SubtractRadiusIcon, { color: globalToken?.colorPrimary })) : (_jsx(AddRadiusIcon, { color: globalToken?.colorPrimary })) })));
                 },
             });
             const groupByColumnIndex = data.findIndex(col => col.key === groupBy.selectedKey);
@@ -416,14 +471,17 @@ export function useDataTableListing(props) {
         tableHeader,
         groupBy.selectedKey,
         groupBy.expandedKeys,
-        sorter === null || sorter === void 0 ? void 0 : sorter.columnKey,
-        sorter === null || sorter === void 0 ? void 0 : sorter.order,
+        sorter?.columnKey,
+        sorter?.order,
         renderColumnWithExpandIcon,
         handleUpdateGroupBy,
     ]);
     const tableData = useDeepCompareMemo(() => {
-        let data = ((Array === null || Array === void 0 ? void 0 : Array.isArray(tableBody)) &&
-            (tableBody === null || tableBody === void 0 ? void 0 : tableBody.map((row) => (Object.assign(Object.assign({}, row), { key: row === null || row === void 0 ? void 0 : row[tableProps === null || tableProps === void 0 ? void 0 : tableProps.mainColumnKey] }))))) ||
+        let data = (Array?.isArray(tableBody) &&
+            tableBody?.map((row) => ({
+                ...row,
+                key: row?.[tableProps?.mainColumnKey],
+            }))) ||
             [];
         // Handle group by
         if (groupBy.selectedKey) {
@@ -433,45 +491,61 @@ export function useDataTableListing(props) {
                     .map(([groupByKey, rows]) => Array.isArray(rows) &&
                     rows
                         .filter((_, index) => {
-                        var _a, _b;
                         // First row always show
                         if (!index) {
                             return true;
                         }
-                        const isExpanded = typeof ((_a = groupBy.expandedKeys) === null || _a === void 0 ? void 0 : _a[groupByKey]) === 'boolean'
-                            ? (_b = groupBy.expandedKeys) === null || _b === void 0 ? void 0 : _b[groupByKey]
+                        const isExpanded = typeof groupBy.expandedKeys?.[groupByKey] === 'boolean'
+                            ? groupBy.expandedKeys?.[groupByKey]
                             : true;
                         return isExpanded;
                     })
-                        .map((row, index) => (Object.assign(Object.assign(Object.assign(Object.assign({}, row), { key: row === null || row === void 0 ? void 0 : row[tableProps === null || tableProps === void 0 ? void 0 : tableProps.mainColumnKey] }), (index !== 0 && { [groupBy.selectedKey || '']: '' })), { groupTotal: rows.length }))))
+                        .map((row, index) => ({
+                        ...row,
+                        key: row?.[tableProps?.mainColumnKey],
+                        ...(index !== 0 && { [groupBy.selectedKey || '']: '' }),
+                        groupTotal: rows.length,
+                    })))
                     .flat() || [];
         }
         return data;
-    }, [groupBy.expandedKeys, groupBy.selectedKey, tableBody, tableProps === null || tableProps === void 0 ? void 0 : tableProps.mainColumnKey]);
+    }, [groupBy.expandedKeys, groupBy.selectedKey, tableBody, tableProps?.mainColumnKey]);
     const searchList = useDeepCompareMemo(() => {
         const { itemMapKeys, icon, link } = searchProps || {};
-        return ((searchListingBody === null || searchListingBody === void 0 ? void 0 : searchListingBody.map(searchItem => (Object.assign(Object.assign({}, Object.entries(itemMapKeys || {}).reduce((acc, [key, value]) => (Object.assign(Object.assign({}, acc), { [key]: searchItem[value] })), {})), { icon: typeof icon === 'function' ? icon(searchItem) : icon, link: typeof link === 'function' ? link(searchItem) : link })))) || []);
+        return (searchListingBody?.map(searchItem => ({
+            ...Object.entries(itemMapKeys || {}).reduce((acc, [key, value]) => ({
+                ...acc,
+                [key]: searchItem[value],
+            }), {}),
+            icon: typeof icon === 'function' ? icon(searchItem) : icon,
+            link: typeof link === 'function' ? link(searchItem) : link,
+        })) || []);
     }, [searchListingData, searchProps]);
     const matchesAnyList = useDeepCompareMemo(() => {
-        var _a;
         const { formatData, options } = matchesAnyProps || {};
         if (options)
             return options;
         if (formatData) {
-            return flatMap((_a = infiniteMatchesAnyData === null || infiniteMatchesAnyData === void 0 ? void 0 : infiniteMatchesAnyData.pages) === null || _a === void 0 ? void 0 : _a.map(page => (formatData === null || formatData === void 0 ? void 0 : formatData(page)) || []));
+            return flatMap(infiniteMatchesAnyData?.pages?.map(page => formatData?.(page) || []));
         }
         return [];
-    }, [matchesAny, infiniteMatchesAnyData, selectedFilterItem === null || selectedFilterItem === void 0 ? void 0 : selectedFilterItem.column]);
+    }, [matchesAny, infiniteMatchesAnyData, selectedFilterItem?.column]);
     const gridViewList = useDeepCompareMemo(() => {
-        if (gridViewProps === null || gridViewProps === void 0 ? void 0 : gridViewProps.itemMapKeys) {
+        if (gridViewProps?.itemMapKeys) {
             const { name, thumbnail } = gridViewProps || {};
-            return ((tableData === null || tableData === void 0 ? void 0 : tableData.map(record => Object.entries((gridViewProps === null || gridViewProps === void 0 ? void 0 : gridViewProps.itemMapKeys) || {}).reduce((acc, [key, value]) => (Object.assign(Object.assign(Object.assign(Object.assign({}, acc), { [key]: record[value] }), (thumbnail && {
-                thumbnail: typeof thumbnail === 'function' ? thumbnail(record) : thumbnail,
-            })), (name && { name: typeof name === 'function' ? name(record) : name }))), {}))) || []);
+            return (tableData?.map(record => Object.entries(gridViewProps?.itemMapKeys || {}).reduce((acc, [key, value]) => ({
+                ...acc,
+                [key]: record[value],
+                ...(thumbnail && {
+                    thumbnail: typeof thumbnail === 'function' ? thumbnail(record) : thumbnail,
+                }),
+                ...(name && { name: typeof name === 'function' ? name(record) : name }),
+            }), {})) || []);
         }
         return [];
     }, [gridViewProps, tableData]);
-    const groupByOptions = useDeepCompareMemo(() => ((groupByColumnKeys === null || groupByColumnKeys === void 0 ? void 0 : groupByColumnKeys.map(key => {
+    const groupByOptions = useDeepCompareMemo(() => (groupByColumnKeys
+        ?.map(key => {
         const column = tableColumns.find(column => column.key === key);
         if (column) {
             return {
@@ -480,33 +554,40 @@ export function useDataTableListing(props) {
             };
         }
         return null;
-    }).filter(Boolean)) || []), [groupByColumnKeys, tableColumns]);
+    })
+        .filter(Boolean) || []), [groupByColumnKeys, tableColumns]);
     // Effects
     /**
      * Update values from local storage to state
      */
     useDeepCompareEffect(() => {
-        const { filter, pagination, table, sorter, groupBy } = localStorageValues || {};
+        const { filter, pagination, table, sorter, groupBy, modeView } = localStorageValues || {};
         // If disabled cache then do nothing
         if (disabledCache) {
             return;
         }
         if (!isEmpty(filter)) {
             const { filters, selectedFilterId } = filter || {};
-            setState(prev => (Object.assign(Object.assign({}, prev), { selectedFilterId,
-                filters })));
+            setState(prev => ({
+                ...prev,
+                selectedFilterId,
+                filters,
+            }));
         }
         if (!isEmpty(pagination)) {
-            setState(prev => (Object.assign(Object.assign({}, prev), { pagination })));
+            setState(prev => ({ ...prev, pagination }));
         }
         if (!isEmpty(table)) {
-            setState(prev => (Object.assign(Object.assign({}, prev), { table })));
+            setState(prev => ({ ...prev, table }));
         }
         if (!isEmpty(sorter)) {
-            setState(prev => (Object.assign(Object.assign({}, prev), { sorter })));
+            setState(prev => ({ ...prev, sorter }));
         }
         if (!isEmpty(groupBy)) {
-            setState(prev => (Object.assign(Object.assign({}, prev), { groupBy })));
+            setState(prev => ({ ...prev, groupBy }));
+        }
+        if (!!modeView) {
+            setState(prev => ({ ...prev, modeView }));
         }
     }, [localStorageValues]);
     /**
@@ -514,8 +595,11 @@ export function useDataTableListing(props) {
      */
     useEffect(() => {
         const { groupBy } = localStorageValues || {};
-        if (groupByDefaultSelectedKey && !(groupBy === null || groupBy === void 0 ? void 0 : groupBy.selectedKey)) {
-            setState(prev => (Object.assign(Object.assign({}, prev), { groupBy: Object.assign(Object.assign({}, prev.groupBy), { selectedKey: groupByDefaultSelectedKey }) })));
+        if (groupByDefaultSelectedKey && !groupBy?.selectedKey) {
+            setState(prev => ({
+                ...prev,
+                groupBy: { ...prev.groupBy, selectedKey: groupByDefaultSelectedKey },
+            }));
         }
     }, [localStorageValues, groupByDefaultSelectedKey]);
     // /** Update filters from external filters */
@@ -526,36 +610,47 @@ export function useDataTableListing(props) {
     // }, [externalFilters]);
     // Handlers
     /* Modify Column */
-    const onRemoveModifyColumn = useCallback((modifyColumnItem) => __awaiter(this, void 0, void 0, function* () {
-        const { status } = yield deleteModifyColumn({
-            params: Object.assign(Object.assign({}, mapObject), { modifyColumnId: modifyColumnItem.id }),
+    const onRemoveModifyColumn = useCallback(async (modifyColumnItem) => {
+        const { status } = await deleteModifyColumn({
+            params: {
+                ...mapObject,
+                modifyColumnId: modifyColumnItem.id,
+            },
         });
         // Check if selected modify column is deleted
         if (`${modifyColumnItem.id}` === `${modifyColumnSelected}`) {
             // Update custom modify column is selected
-            yield createModifyColumn({
-                data: Object.assign(Object.assign({}, mapObject), { name: 'Custom', isLasted: 1 }),
+            await createModifyColumn({
+                data: {
+                    ...mapObject,
+                    name: 'Custom',
+                    isLasted: 1,
+                },
             });
         }
         return { success: !!status };
-    }), [createModifyColumn, deleteModifyColumn, mapObject, modifyColumnSelected]);
+    }, [createModifyColumn, deleteModifyColumn, mapObject, modifyColumnSelected]);
     const onSelectModifyColumn = useCallback((modifyColumnItem) => {
         const { id } = modifyColumnItem || {};
         updateModifyColumn({
-            data: Object.assign(Object.assign({}, mapObject), { modifyColumnId: id, isLasted: 1 }),
+            data: {
+                ...mapObject,
+                modifyColumnId: id,
+                isLasted: 1,
+            },
         });
     }, [mapObject, updateModifyColumn]);
-    const onApplyModifyColumn = useCallback((args) => __awaiter(this, void 0, void 0, function* () {
+    const onApplyModifyColumn = useCallback(async (args) => {
         const { selectedMetrics, columnSetName, existColumnSet } = args || {};
         const flattenMetrics = flatTree(columnMetricsData, 'child');
         const selectedColumnMetrics = selectedMetrics
-            .map(metricId => flattenMetrics === null || flattenMetrics === void 0 ? void 0 : flattenMetrics.find(metric => metric.metricCode === metricId))
+            .map(metricId => flattenMetrics?.find(metric => metric.metricCode === metricId))
             .filter(Boolean);
         let exitModifyColumnId = '';
         // Update exits column set
         // columnSetName is empty that mean save for Custom column set
         if (existColumnSet /* || columnSetName === '' */) {
-            exitModifyColumnId = (existColumnSet === null || existColumnSet === void 0 ? void 0 : existColumnSet.id) || '';
+            exitModifyColumnId = existColumnSet?.id || '';
             // if (columnSetName === '') {
             //   exitModifyColumnId =
             //     modifyColumnsData?.find(
@@ -569,52 +664,89 @@ export function useDataTableListing(props) {
          * If empty, that mean create new column set
          */
         if (exitModifyColumnId) {
-            const { status } = yield updateModifyColumn({
-                data: Object.assign(Object.assign({}, mapObject), { modifyColumnId: exitModifyColumnId, columns: JSON.stringify(selectedColumnMetrics), isLasted: 1 }),
+            const { status } = await updateModifyColumn({
+                data: {
+                    ...mapObject,
+                    modifyColumnId: exitModifyColumnId,
+                    columns: JSON.stringify(selectedColumnMetrics),
+                    isLasted: 1,
+                },
             });
             return {
                 success: !!status,
             };
         }
         // Create new column set
-        const { status } = yield createModifyColumn({
-            data: Object.assign(Object.assign({}, mapObject), { name: columnSetName || 'Custom', columns: JSON.stringify(selectedColumnMetrics), isLasted: 1 }),
+        const { status } = await createModifyColumn({
+            data: {
+                ...mapObject,
+                name: columnSetName || 'Custom',
+                columns: JSON.stringify(selectedColumnMetrics),
+                isLasted: 1,
+            },
         });
         return {
             success: !!status,
         };
-    }), [columnMetricsData, createModifyColumn, mapObject, updateModifyColumn]);
+    }, [columnMetricsData, createModifyColumn, mapObject, updateModifyColumn]);
     const handleUpdatePagination = useCallback((pagination) => {
         const localStorageValues = parseJSONFromLocalStorage(localStorageKey) || {};
         // Set State
-        setState(prev => (Object.assign(Object.assign({}, prev), { pagination: Object.assign(Object.assign({}, prev.pagination), pagination) })));
+        setState(prev => ({ ...prev, pagination: { ...prev.pagination, ...pagination } }));
         handleUpdateLocalStorage({
-            pagination: Object.assign(Object.assign({}, localStorageValues === null || localStorageValues === void 0 ? void 0 : localStorageValues.pagination), pagination),
+            pagination: {
+                ...localStorageValues?.pagination,
+                ...pagination,
+            },
         });
     }, [handleUpdateLocalStorage, localStorageKey]);
     const handleUpdateFilter = useCallback((filter) => {
         const localStorageValues = parseJSONFromLocalStorage(localStorageKey) || {};
         // Set State
-        setState(prev => (Object.assign(Object.assign(Object.assign({}, prev), filter), { pagination: Object.assign(Object.assign({}, prev.pagination), { page: 1 }) })));
+        setState(prev => ({ ...prev, ...filter, pagination: { ...prev.pagination, page: 1 } }));
         handleUpdateLocalStorage({
-            filter: Object.assign(Object.assign({}, localStorageValues === null || localStorageValues === void 0 ? void 0 : localStorageValues.filter), filter),
+            filter: {
+                ...localStorageValues?.filter,
+                ...filter,
+            },
             // Reset page to 1
-            pagination: Object.assign(Object.assign({}, localStorageValues === null || localStorageValues === void 0 ? void 0 : localStorageValues.pagination), { page: 1 }),
+            pagination: {
+                ...localStorageValues?.pagination,
+                page: 1,
+            },
         });
     }, [handleUpdateLocalStorage, localStorageKey]);
     const handleUpdateTable = useCallback((table) => {
         const localStorageValues = parseJSONFromLocalStorage(localStorageKey) || {};
-        setState(prev => (Object.assign(Object.assign({}, prev), { table: Object.assign(Object.assign({}, prev.table), table) })));
+        setState(prev => ({
+            ...prev,
+            table: {
+                ...prev.table,
+                ...table,
+            },
+        }));
         handleUpdateLocalStorage({
-            table: Object.assign(Object.assign({}, localStorageValues === null || localStorageValues === void 0 ? void 0 : localStorageValues.table), table),
+            table: {
+                ...localStorageValues?.table,
+                ...table,
+            },
         });
     }, [handleUpdateLocalStorage, localStorageKey]);
     const handleUpdateSorter = useCallback((sorter) => {
-        setState(prev => (Object.assign(Object.assign({}, prev), { sorter })));
+        setState(prev => ({
+            ...prev,
+            sorter,
+        }));
         handleUpdateLocalStorage({
             sorter,
         });
     }, [handleUpdateLocalStorage]);
+    const handleUpdateModeView = useCallback((modeView) => {
+        setState(prev => ({ ...prev, modeView }));
+        handleUpdateLocalStorage({
+            modeView,
+        });
+    }, [handleUpdateLocalStorage]);
     /* Filter */
     const onChangeFilters = useCallback((filters) => {
         handleUpdateFilter({
@@ -623,14 +755,19 @@ export function useDataTableListing(props) {
         });
     }, [handleUpdateFilter]);
     const onChangeFilterCondition = useCallback((filterItem) => {
-        setState(prev => (Object.assign(Object.assign({}, prev), { selectedFilterItem: filterItem })));
+        setState(prev => ({ ...prev, selectedFilterItem: filterItem }));
     }, []);
-    const onSaveFilter = useCallback((args) => __awaiter(this, void 0, void 0, function* () {
+    const onSaveFilter = useCallback(async (args) => {
         const { filters, name, existSavedFilter } = args;
         // Update exits filter
         if (existSavedFilter) {
-            const { status } = yield updateFilter({
-                data: Object.assign(Object.assign({}, mapObject), { filterId: existSavedFilter.id, filterName: existSavedFilter.name, rules: JSON.stringify(mapFiltersToRules(filters)) }),
+            const { status } = await updateFilter({
+                data: {
+                    ...mapObject,
+                    filterId: existSavedFilter.id,
+                    filterName: existSavedFilter.name,
+                    rules: JSON.stringify(mapFiltersToRules(filters)),
+                },
             });
             handleUpdateFilter({
                 filters,
@@ -641,8 +778,12 @@ export function useDataTableListing(props) {
             };
         }
         // Create new filter
-        const { status: filterId } = yield saveFilter({
-            data: Object.assign(Object.assign({}, mapObject), { filterName: name, rules: JSON.stringify(mapFiltersToRules(filters)) }),
+        const { status: filterId } = await saveFilter({
+            data: {
+                ...mapObject,
+                filterName: name,
+                rules: JSON.stringify(mapFiltersToRules(filters)),
+            },
         });
         if (filterId) {
             handleUpdateFilter({
@@ -653,26 +794,29 @@ export function useDataTableListing(props) {
         return {
             success: !!filterId,
         };
-    }), [mapObject, saveFilter, updateFilter, handleUpdateFilter]);
+    }, [mapObject, saveFilter, updateFilter, handleUpdateFilter]);
     const onSelectSavedFilter = useCallback((savedFilter) => {
-        const savedFilterInfo = savedFiltersData === null || savedFiltersData === void 0 ? void 0 : savedFiltersData.find(filter => filter.filterId.toString() === (savedFilter === null || savedFilter === void 0 ? void 0 : savedFilter.id.toString()));
-        const filters = mapRulesToFilters((savedFilterInfo === null || savedFilterInfo === void 0 ? void 0 : savedFilterInfo.rules) || []);
+        const savedFilterInfo = savedFiltersData?.find(filter => filter.filterId.toString() === savedFilter?.id.toString());
+        const filters = mapRulesToFilters(savedFilterInfo?.rules || []);
         handleUpdateFilter({
             filters,
-            selectedFilterId: savedFilter === null || savedFilter === void 0 ? void 0 : savedFilter.id,
+            selectedFilterId: savedFilter?.id,
         });
     }, [savedFiltersData, handleUpdateFilter]);
-    const onRemoveSavedFilter = useCallback((savedFilter) => __awaiter(this, void 0, void 0, function* () {
-        const { status } = yield deleteSavedFilter({
-            params: Object.assign({ filterId: savedFilter === null || savedFilter === void 0 ? void 0 : savedFilter.id }, mapObject),
+    const onRemoveSavedFilter = useCallback(async (savedFilter) => {
+        const { status } = await deleteSavedFilter({
+            params: {
+                filterId: savedFilter?.id,
+                ...mapObject,
+            },
         });
-        if (status && selectedFilterId === (savedFilter === null || savedFilter === void 0 ? void 0 : savedFilter.id)) {
+        if (status && selectedFilterId === savedFilter?.id) {
             handleUpdateFilter({
                 selectedFilterId: SAVED_FILTER_DEFAULT[0].id,
             });
         }
         return { success: !!status };
-    }), [deleteSavedFilter, handleUpdateFilter, mapObject, selectedFilterId]);
+    }, [deleteSavedFilter, handleUpdateFilter, mapObject, selectedFilterId]);
     /* Table */
     const onChangeTable = useCallback((_pagination, _filters, sorter, _extra) => {
         if (sorter) {
@@ -687,12 +831,18 @@ export function useDataTableListing(props) {
         });
     }, [handleUpdatePagination]);
     const onChangeSelectedRow = useCallback((selectedRowKeys, selectedRows) => {
-        setState(prev => (Object.assign(Object.assign({}, prev), { selectedRowKeys, selectedRow: {
+        setState(prev => ({
+            ...prev,
+            selectedRowKeys,
+            selectedRow: {
                 keys: selectedRowKeys,
                 rows: selectedRows ||
-                    (selectedRowKeys === null || selectedRowKeys === void 0 ? void 0 : selectedRowKeys.map(key => tableData === null || tableData === void 0 ? void 0 : tableData.find(row => { var _a; return ((_a = row[mainColumnKey]) === null || _a === void 0 ? void 0 : _a.toString()) === key.toString(); })).filter(Boolean)) ||
+                    selectedRowKeys
+                        ?.map(key => tableData?.find(row => row[mainColumnKey]?.toString() === key.toString()))
+                        .filter(Boolean) ||
                     [],
-            } })));
+            },
+        }));
     }, [mainColumnKey, tableData]);
     /** Refetch */
     const refetchTableListing = useCallback(() => {
@@ -749,47 +899,71 @@ export function useDataTableListing(props) {
             onMatchesAnyLoadMore,
         },
         /* Pagination */
-        pagination: Object.assign(Object.assign({}, pagination), { total, onChange: onChangePagination }),
+        pagination: {
+            ...pagination,
+            total,
+            onChange: onChangePagination,
+        },
         /* Table */
-        table: Object.assign(Object.assign({}, tableProps), { loading: isTableListingLoading || isTableListingRefetching, columns: tableColumns, dataSource: tableData, columnWidths: table.columnWidths || {}, expandable: Object.assign({ showExpandColumn: false, expandedRowKeys: expandedRowKeys || [] }, tableProps === null || tableProps === void 0 ? void 0 : tableProps.expandable), rowSelection: {
+        table: {
+            ...tableProps,
+            loading: isTableListingLoading || isTableListingRefetching,
+            columns: tableColumns,
+            dataSource: tableData,
+            columnWidths: table.columnWidths || {},
+            expandable: {
+                showExpandColumn: false,
+                expandedRowKeys: expandedRowKeys || [],
+                ...tableProps?.expandable,
+            },
+            rowSelection: {
                 selectedRowKeys: selectedRow.keys || [],
                 onChange: onChangeSelectedRow,
-            }, onChange: onChangeTable, onColumnResize(data) {
+            },
+            onChange: onChangeTable,
+            onColumnResize(data) {
                 const { index, width } = data;
                 handleUpdateTable({
-                    columnWidths: Object.assign(Object.assign({}, table.columnWidths), { [index]: width }),
+                    columnWidths: {
+                        ...table.columnWidths,
+                        [index]: width,
+                    },
                 });
-            } }),
+            },
+        },
         /* Grid view */
         gridView: {
             mode: modeView,
-            onChangeMode(mode) {
-                setState(prev => (Object.assign(Object.assign({}, prev), { modeView: mode })));
-            },
+            onChangeMode: handleUpdateModeView,
             templateListingProps: {
                 templatesProps: {
                     items: gridViewList,
                     loading: isTableListingLoading || isTableListingRefetching,
                 },
                 templateItemProps: {
-                    removable: gridViewItemProps === null || gridViewItemProps === void 0 ? void 0 : gridViewItemProps.removable,
-                    removeModalProps: Object.assign(Object.assign({}, gridViewItemProps === null || gridViewItemProps === void 0 ? void 0 : gridViewItemProps.removeModalProps), { onOk: (id) => __awaiter(this, void 0, void 0, function* () {
-                            const record = tableData === null || tableData === void 0 ? void 0 : tableData.find(item => (item === null || item === void 0 ? void 0 : item[gridViewProps === null || gridViewProps === void 0 ? void 0 : gridViewProps.itemMapKeys.id]) === id);
-                            if ((gridViewItemProps === null || gridViewItemProps === void 0 ? void 0 : gridViewItemProps.onRemove) && record) {
-                                gridViewItemProps === null || gridViewItemProps === void 0 ? void 0 : gridViewItemProps.onRemove(record);
+                    removable: gridViewItemProps?.removable,
+                    removeModalProps: {
+                        ...gridViewItemProps?.removeModalProps,
+                        onOk: async (id) => {
+                            const record = tableData?.find(item => item?.[gridViewProps?.itemMapKeys.id] === id);
+                            if (gridViewItemProps?.onRemove && record) {
+                                gridViewItemProps?.onRemove(record);
                             }
-                        }) }),
+                        },
+                    },
                     previewBtnProps: {
                         show: false,
                     },
-                    actionAvailable: gridViewItemProps === null || gridViewItemProps === void 0 ? void 0 : gridViewItemProps.showButton,
-                    editBtnProps: Object.assign(Object.assign({}, gridViewItemProps === null || gridViewItemProps === void 0 ? void 0 : gridViewItemProps.buttonProps), { onClick(id) {
-                            var _a, _b;
-                            const record = tableData === null || tableData === void 0 ? void 0 : tableData.find(item => (item === null || item === void 0 ? void 0 : item[gridViewProps === null || gridViewProps === void 0 ? void 0 : gridViewProps.itemMapKeys.id]) === id);
-                            if (record && ((_a = gridViewItemProps === null || gridViewItemProps === void 0 ? void 0 : gridViewItemProps.buttonProps) === null || _a === void 0 ? void 0 : _a.onClick)) {
-                                (_b = gridViewItemProps === null || gridViewItemProps === void 0 ? void 0 : gridViewItemProps.buttonProps) === null || _b === void 0 ? void 0 : _b.onClick(record);
+                    actionAvailable: gridViewItemProps?.showButton,
+                    editBtnProps: {
+                        ...gridViewItemProps?.buttonProps,
+                        onClick(id) {
+                            const record = tableData?.find(item => item?.[gridViewProps?.itemMapKeys.id] === id);
+                            if (record && gridViewItemProps?.buttonProps?.onClick) {
+                                gridViewItemProps?.buttonProps?.onClick(record);
                             }
-                        } }),
+                        },
+                    },
                 },
             },
         },
@@ -807,27 +981,32 @@ export function useDataTableListing(props) {
         selectedRowKeys,
         selectedRow,
         /* Search */
-        search: Object.assign(Object.assign(Object.assign(Object.assign({ loading: isSearchListingLoading || isSearchListingFetching, searchList }, (!!(searchProps === null || searchProps === void 0 ? void 0 : searchProps.render) && {
-            itemSearchRender(_item, index, node) {
-                var _a;
-                return (((_a = searchProps === null || searchProps === void 0 ? void 0 : searchProps.render) === null || _a === void 0 ? void 0 : _a.call(searchProps, ((searchListingBody === null || searchListingBody === void 0 ? void 0 : searchListingBody[index]) || {}), index, node)) ||
-                    null);
-            },
-        })), { onSearch(valueSearch) {
-                if (!(searchProps === null || searchProps === void 0 ? void 0 : searchProps.isClientSearch)) {
-                    setState(prev => (Object.assign(Object.assign({}, prev), { searchValue: valueSearch })));
+        search: {
+            loading: isSearchListingLoading || isSearchListingFetching,
+            searchList,
+            ...(!!searchProps?.render && {
+                itemSearchRender(_item, index, node) {
+                    return (searchProps?.render?.((searchListingBody?.[index] || {}), index, node) ||
+                        null);
+                },
+            }),
+            onSearch(valueSearch) {
+                if (!searchProps?.isClientSearch) {
+                    setState(prev => ({ ...prev, searchValue: valueSearch }));
                 }
-            } }), ((searchProps === null || searchProps === void 0 ? void 0 : searchProps.onClickSearchItem) && {
-            onClickSearchItem(item, index) {
-                var _a;
-                (_a = searchProps === null || searchProps === void 0 ? void 0 : searchProps.onClickSearchItem) === null || _a === void 0 ? void 0 : _a.call(searchProps, searchListingBody === null || searchListingBody === void 0 ? void 0 : searchListingBody[index]);
             },
-        })), pick(searchProps, [
-            'isClientSearch',
-            'addFilterInfo',
-            'isAddFilterFromSearchItem',
-            'searchItemProps',
-        ])),
+            ...(searchProps?.onClickSearchItem && {
+                onClickSearchItem(item, index) {
+                    searchProps?.onClickSearchItem?.(searchListingBody?.[index]);
+                },
+            }),
+            ...pick(searchProps, [
+                'isClientSearch',
+                'addFilterInfo',
+                'isAddFilterFromSearchItem',
+                'searchItemProps',
+            ]),
+        },
         /* Queries */
         queries: {
             getTableListing,