@antscorp/antsomi-ui 1.3.5-beta.62 → 1.3.5-beta.621

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

@@ -0,0 +1,821 @@
+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;
+};
+// Libraries
+import React, { 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';
+// Types
+import { useAppConfigContext } from '@antscorp/antsomi-ui/es/providers';
+// Components
+import { Typography, Switch, Flex } from '@antscorp/antsomi-ui/es/components/atoms';
+// Constants
+import { COLUMN_DOMAIN, OPERATORS_CODE, QUERY_KEYS, globalToken, } from '@antscorp/antsomi-ui/es/constants';
+import { MODIFY_COLUMN_DISABLE_EDITABLE, MODIFY_COLUMN_DISABLE_REMOVE, SAVED_FILTER_DEFAULT, TABLE_LISTING_PREFIX, } from './constants';
+import { DEFAULT_CELL_EMPTY, DEFAULT_PAGE_SIZE, DEFAULT_TOGGLE_WIDTH, SORT_MAP, } from '../../constants';
+// Hooks
+import { useDeepCompareEffect, useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
+import { useCreateModifyColumn, useDeleteModifyColumn, useDeleteSavedFilter, useGetColumnMetrics, useGetFilterMetricList, useGetInfiniteMatchesAnyList, useGetModifyColumnList, useGetSavedFilterList, useGetSearchListing, useGetTableListing, useSaveFilter, useUpdateFilter, useUpdateModifyColumn, } from '@antscorp/antsomi-ui/es/queries';
+// Utils
+import { flatTree, mapResponseSearchToGeneral, parseJSONFromLocalStorage, reorder, } from '@antscorp/antsomi-ui/es/utils';
+import { METRIC_MAP_NUMBER_TYPE } from '../../constants/filter';
+import { mapFiltersToApiFilters, mapFiltersToRules, mapRulesToFilters } from '../../utils';
+import { AddRadiusIcon, ExpandLessIcon, SubtractRadiusIcon, } from '@antscorp/antsomi-ui/es/components/icons';
+import { GroupByExpandButton } from '../../styled';
+const { Text } = Typography;
+const { MATCHES, MATCHES_ANY, NOT_MATCHES } = OPERATORS_CODE;
+const initialState = {
+    filters: [],
+    selectedFilterId: SAVED_FILTER_DEFAULT[0].id,
+    pagination: {
+        page: 1,
+        pageSize: DEFAULT_PAGE_SIZE,
+        total: 0,
+    },
+    table: {
+        loading: false,
+        columnWidths: {},
+    },
+    selectedRowKeys: [],
+    selectedRow: {
+        keys: [],
+        rows: [],
+    },
+    searchValue: '',
+    sorter: {},
+    selectedFilterItem: undefined,
+    expandedRowKeys: [],
+    modeView: 'TABLE',
+    groupBy: {
+        selectedKey: undefined,
+    },
+};
+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
+    const queryClient = useQueryClient();
+    const { appConfig } = useAppConfigContext();
+    // 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 } = 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 { filters, selectedFilterId, pagination, selectedRowKeys, searchValue, table, sorter, selectedRow, selectedFilterItem, expandedRowKeys, groupBy, modeView, } = state;
+    const { externalFilters, 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 });
+    /**
+     * 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;
+    /**
+     * 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;
+    // 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]);
+    // Memoized function to determine if "fetch matches any" is enabled.
+    const isEnabledFetchMatchesAny = useMemo(() => 
+    // Check if a filter item is selected.
+    !!selectedFilterItem &&
+        // Check if the selected filter item's operator is one of: MATCHES_ANY, NOT_MATCHES, or MATCHES.
+        [MATCHES_ANY, NOT_MATCHES, MATCHES].includes(selectedFilterItem.operator) &&
+        // Check if the matchesAnyRequest object exists.
+        !!matchesAnyRequest &&
+        // 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), 
+    // Dependencies for the useMemo hook: recalculate if matchesAnyProps.options, matchesAnyRequest, or selectedFilterItem changes.
+    [matchesAnyProps === null || matchesAnyProps === void 0 ? void 0 : matchesAnyProps.options, matchesAnyRequest, selectedFilterItem]);
+    const localStorageKey = useDeepCompareMemo(() => {
+        const { userId, portalId } = auth || {};
+        return `${TABLE_LISTING_PREFIX}${userId}-${portalId}-${name}`;
+    }, [name, auth]);
+    const localStorageValues = useDeepCompareMemo(() => parseJSONFromLocalStorage(localStorageKey) || {}, [localStorageKey]);
+    // Queries
+    const getColumnMetrics = useGetColumnMetrics({
+        args: {
+            auth: modifyColumnAuth,
+            params: mapObject,
+            request: restOfApiColumnRequest,
+        },
+        options: Object.assign({ enabled: enabledApiColumn, refetchOnMount: 'always' }, queryOptions === null || queryOptions === void 0 ? void 0 : queryOptions.getColumnMetricList),
+    });
+    const getModifyColumnList = useGetModifyColumnList({
+        args: {
+            auth: modifyColumnAuth,
+            params: mapObject,
+            request: restOfApiColumnRequest,
+        },
+        options: Object.assign({ enabled: enabledApiColumn }, queryOptions === null || queryOptions === void 0 ? void 0 : queryOptions.getModifyColumnList),
+    });
+    const getSavedFilterList = useGetSavedFilterList({
+        args: {
+            auth: filterAuth,
+            params: mapObject,
+            request: restOfApiFilterRequest,
+        },
+        options: Object.assign({ enabled: enabledApiFilter }, queryOptions === null || queryOptions === void 0 ? void 0 : queryOptions.getSavedFilterList),
+    });
+    const getFilterMetricList = useGetFilterMetricList({
+        args: {
+            auth: filterAuth,
+            params: mapObject,
+            request: restOfApiFilterRequest,
+        },
+        options: Object.assign({ enabled: enabledApiFilter, refetchOnMount: 'always' }, queryOptions === null || queryOptions === void 0 ? void 0 : 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),
+            request: matchesAnyRequest,
+        },
+        options: {
+            enabled: isEnabledFetchMatchesAny,
+            keepPreviousData: true,
+            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;
+                // 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)) || []; }));
+                    // 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;
+                }
+                // If the total number of items is not defined, return undefined
+                return undefined;
+            },
+        },
+    });
+    // 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 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],
+            })),
+            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),
+    });
+    const getSearchListing = useGetSearchListing({
+        args: {
+            auth: searchAuth,
+            params: {
+                search: searchValue,
+            },
+            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),
+    });
+    // Variables
+    const { data: columnMetricsData } = getColumnMetrics || {};
+    const { data: savedFiltersData } = getSavedFilterList || {};
+    const { data: filterMetricsData } = getFilterMetricList || {};
+    const { data: tableListing, isLoading: isTableListingLoading, isRefetching: isTableListingRefetching, } = getTableListing || {};
+    const { body: tableBody, header: tableHeader, total } = tableListing || {};
+    const { data: searchListingData, isLoading: isSearchListingLoading, isFetching: isSearchListingFetching, } = getSearchListing || {};
+    const { data: infiniteMatchesAnyData, isFetchingNextPage, isLoading: isMatchesAnyListLoading = false, isFetching: isMatchesAnyListFetching = false, fetchNextPage, } = getInfiniteMatchesAnyList || {};
+    // 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)
+        ? searchProps.formatData(searchListingData)
+        : mapResponseSearchToGeneral(searchListingData).body || {};
+    // Mutations
+    const { mutateAsync: updateModifyColumn } = useUpdateModifyColumn({
+        auth: modifyColumnAuth,
+    });
+    const { mutateAsync: deleteModifyColumn } = useDeleteModifyColumn({
+        auth: modifyColumnAuth,
+    });
+    const { mutateAsync: createModifyColumn } = useCreateModifyColumn({
+        auth: modifyColumnAuth,
+    });
+    const { mutateAsync: saveFilter } = useSaveFilter({
+        auth: filterAuth,
+    });
+    const { mutateAsync: updateFilter } = useUpdateFilter({
+        auth: filterAuth,
+    });
+    const { mutateAsync: deleteSavedFilter } = useDeleteSavedFilter({
+        auth: filterAuth,
+    });
+    // Memo
+    const columnMetrics = useDeepCompareMemo(() => {
+        const serializeColumnMetrics = (metrics) => {
+            const result = metrics.map(metric => ({
+                id: metric.metricCode || metric.metricId || metric.metricName || -1,
+                name: metric.metricName,
+                disabled: +metric.fixColumn === 1, // 1 is fixed column
+                selectedName: metric.columnLabel,
+                // disabled: metric.propertyCode === 390248029392039,
+                children: serializeColumnMetrics(metric.child || []),
+            }));
+            return result;
+        };
+        return serializeColumnMetrics(columnMetricsData || []);
+    }, [columnMetricsData]);
+    const modifyColumnList = useDeepCompareMemo(() => (modifyColumnsData === null || modifyColumnsData === void 0 ? void 0 : 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]);
+    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 }))) || []
+                        : [],
+                });
+            });
+            return result;
+        };
+        return serializeFilterMetrics(filterMetricsData || []);
+    }, [filterMetricsData]);
+    const savedFilterList = useDeepCompareMemo(() => SAVED_FILTER_DEFAULT.concat((savedFiltersData === null || savedFiltersData === void 0 ? void 0 : savedFiltersData.map(({ filterId, filterName }) => ({
+        id: filterId,
+        name: filterName,
+        removable: true,
+    }))) || []), [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(
+            // 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));
+        }
+        return children;
+    }, [expandColumnKey, expandable, expandedRowKeys, mainColumnKey]);
+    const handleUpdateGroupBy = useCallback((groupBy) => {
+        const localStorageValues = parseJSONFromLocalStorage(localStorageKey) || {};
+        setState(prev => (Object.assign(Object.assign({}, prev), { groupBy: Object.assign(Object.assign({}, prev.groupBy), groupBy) })));
+        // Set Local Storage
+        localStorage.setItem(localStorageKey, JSON.stringify(Object.assign(Object.assign({}, localStorageValues), { groupBy: Object.assign(Object.assign({}, localStorageValues.groupBy), groupBy) })));
+    }, [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) {
+            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) => {
+                    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 => {
+                                if (onChange) {
+                                    onChange(checked, record);
+                                }
+                            } })));
+                } }));
+        }
+        data = data.concat((tableHeader === null || tableHeader === void 0 ? void 0 : 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 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(RenderComponent, headerCol, record);
+                } });
+        })) || []);
+        // Handle Group by
+        if (groupBy.selectedKey) {
+            data.unshift({
+                key: 'groupBy',
+                fixed: 'left',
+                align: 'center',
+                dataIndex: 'groupBy',
+                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]
+                        : 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 })))));
+                },
+            });
+            const groupByColumnIndex = data.findIndex(col => col.key === groupBy.selectedKey);
+            // Reorder group by column next to expand icon
+            if (groupByColumnIndex !== -1) {
+                data[groupByColumnIndex].fixed = 'left';
+                data = reorder(data, groupByColumnIndex, 1);
+            }
+        }
+        return data;
+    }, [
+        tableProps,
+        tableHeader,
+        groupBy.selectedKey,
+        groupBy.expandedKeys,
+        sorter === null || sorter === void 0 ? void 0 : sorter.columnKey,
+        sorter === null || sorter === void 0 ? void 0 : 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] }))))) ||
+            [];
+        // Handle group by
+        if (groupBy.selectedKey) {
+            const groupByData = lodashGroupBy(data, groupBy.selectedKey) || [];
+            data =
+                Object.entries(groupByData)
+                    .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]
+                            : 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 }))))
+                    .flat() || [];
+        }
+        return data;
+    }, [groupBy.expandedKeys, groupBy.selectedKey, tableBody, tableProps === null || tableProps === void 0 ? void 0 : 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 })))) || []);
+    }, [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 [];
+    }, [matchesAny, infiniteMatchesAnyData, selectedFilterItem === null || selectedFilterItem === void 0 ? void 0 : selectedFilterItem.column]);
+    const gridViewList = useDeepCompareMemo(() => {
+        if (gridViewProps === null || gridViewProps === void 0 ? void 0 : 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 [];
+    }, [gridViewProps, tableData]);
+    const groupByOptions = useDeepCompareMemo(() => ((groupByColumnKeys === null || groupByColumnKeys === void 0 ? void 0 : groupByColumnKeys.map(key => {
+        const column = tableColumns.find(column => column.key === key);
+        if (column) {
+            return {
+                key,
+                label: column.title,
+            };
+        }
+        return null;
+    }).filter(Boolean)) || []), [groupByColumnKeys, tableColumns]);
+    // Effects
+    /**
+     * Update values from local storage to state
+     */
+    useDeepCompareEffect(() => {
+        const { filter, pagination, table, sorter, groupBy } = localStorageValues || {};
+        if (!isEmpty(filter)) {
+            const { filters, selectedFilterId } = filter || {};
+            setState(prev => (Object.assign(Object.assign({}, prev), { selectedFilterId,
+                filters })));
+        }
+        if (!isEmpty(pagination)) {
+            setState(prev => (Object.assign(Object.assign({}, prev), { pagination })));
+        }
+        if (!isEmpty(table)) {
+            setState(prev => (Object.assign(Object.assign({}, prev), { table })));
+        }
+        if (!isEmpty(sorter)) {
+            setState(prev => (Object.assign(Object.assign({}, prev), { sorter })));
+        }
+        if (!isEmpty(groupBy)) {
+            setState(prev => (Object.assign(Object.assign({}, prev), { groupBy })));
+        }
+    }, [localStorageValues]);
+    /**
+     * Set default groupBy column
+     */
+    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 }) })));
+        }
+    }, [localStorageValues, groupByDefaultSelectedKey]);
+    // /** Update filters from external filters */
+    // useDeepCompareEffect(() => {
+    //   if (externalFilters) {
+    //     setState(prev => ({ ...prev, filters: [...(filters || []), ...externalFilters] }));
+    //   }
+    // }, [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 }),
+        });
+        // 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 }),
+            });
+        }
+        return { success: !!status };
+    }), [createModifyColumn, deleteModifyColumn, mapObject, modifyColumnSelected]);
+    const onSelectModifyColumn = useCallback((modifyColumnItem) => {
+        const { id } = modifyColumnItem || {};
+        updateModifyColumn({
+            data: Object.assign(Object.assign({}, mapObject), { modifyColumnId: id, isLasted: 1 }),
+        });
+    }, [mapObject, updateModifyColumn]);
+    const onApplyModifyColumn = useCallback((args) => __awaiter(this, void 0, void 0, function* () {
+        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))
+            .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) || '';
+            // if (columnSetName === '') {
+            //   exitModifyColumnId =
+            //     modifyColumnsData?.find(
+            //       modifyColumn => modifyColumn.modifyName === 'Custom', // NOTES: Hard Custom name, will move constants
+            //     )?.modifyColId || '';
+            // }
+        }
+        /**
+         * Check if exitModifyColumnId is not empty
+         * If not empty, that mean update exits column set
+         * 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 }),
+            });
+            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 }),
+        });
+        return {
+            success: !!status,
+        };
+    }), [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) })));
+        // Set Local Storage
+        localStorage.setItem(localStorageKey, JSON.stringify(Object.assign(Object.assign({}, localStorageValues), { pagination: Object.assign(Object.assign({}, localStorageValues === null || localStorageValues === void 0 ? void 0 : localStorageValues.pagination), pagination) })));
+    }, [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 }) })));
+        // Set Local Storage
+        localStorage.setItem(localStorageKey, JSON.stringify(Object.assign(Object.assign({}, localStorageValues), { filter: Object.assign(Object.assign({}, localStorageValues === null || localStorageValues === void 0 ? void 0 : localStorageValues.filter), filter), 
+            // Reset page to 1
+            pagination: Object.assign(Object.assign({}, localStorageValues === null || localStorageValues === void 0 ? void 0 : localStorageValues.pagination), { page: 1 }) })));
+    }, [localStorageKey]);
+    const handleUpdateTable = useCallback((table) => {
+        const localStorageValues = parseJSONFromLocalStorage(localStorageKey) || {};
+        setState(prev => (Object.assign(Object.assign({}, prev), { table: Object.assign(Object.assign({}, prev.table), table) })));
+        // Set Local Storage
+        localStorage.setItem(localStorageKey, JSON.stringify(Object.assign(Object.assign({}, localStorageValues), { table: Object.assign(Object.assign({}, localStorageValues === null || localStorageValues === void 0 ? void 0 : localStorageValues.table), table) })));
+    }, [localStorageKey]);
+    const handleUpdateSorter = useCallback((sorter) => {
+        const localStorageValues = parseJSONFromLocalStorage(localStorageKey) || {};
+        setState(prev => (Object.assign(Object.assign({}, prev), { sorter })));
+        // Set Local Storage
+        localStorage.setItem(localStorageKey, JSON.stringify(Object.assign(Object.assign({}, localStorageValues), { sorter })));
+    }, [localStorageKey]);
+    /* Filter */
+    const onChangeFilters = useCallback((filters) => {
+        handleUpdateFilter({
+            filters,
+            selectedFilterId: SAVED_FILTER_DEFAULT[0].id,
+        });
+    }, [handleUpdateFilter]);
+    const onChangeFilterCondition = useCallback((filterItem) => {
+        setState(prev => (Object.assign(Object.assign({}, prev), { selectedFilterItem: filterItem })));
+    }, []);
+    const onSaveFilter = useCallback((args) => __awaiter(this, void 0, void 0, function* () {
+        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)) }),
+            });
+            handleUpdateFilter({
+                filters,
+                selectedFilterId: existSavedFilter.id,
+            });
+            return {
+                success: !!status,
+            };
+        }
+        // Create new filter
+        const { status: filterId } = yield saveFilter({
+            data: Object.assign(Object.assign({}, mapObject), { filterName: name, rules: JSON.stringify(mapFiltersToRules(filters)) }),
+        });
+        if (filterId) {
+            handleUpdateFilter({
+                filters,
+                selectedFilterId: filterId,
+            });
+        }
+        return {
+            success: !!filterId,
+        };
+    }), [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) || []);
+        handleUpdateFilter({
+            filters,
+            selectedFilterId: savedFilter === null || savedFilter === void 0 ? void 0 : 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),
+        });
+        if (status && selectedFilterId === (savedFilter === null || savedFilter === void 0 ? void 0 : savedFilter.id)) {
+            handleUpdateFilter({
+                selectedFilterId: SAVED_FILTER_DEFAULT[0].id,
+            });
+        }
+        return { success: !!status };
+    }), [deleteSavedFilter, handleUpdateFilter, mapObject, selectedFilterId]);
+    /* Table */
+    const onChangeTable = useCallback((_pagination, _filters, sorter, _extra) => {
+        if (sorter) {
+            handleUpdateSorter(sorter);
+        }
+    }, [handleUpdateSorter]);
+    /* Pagination */
+    const onChangePagination = useCallback(({ page, pageSize }) => {
+        handleUpdatePagination({
+            page,
+            pageSize,
+        });
+    }, [handleUpdatePagination]);
+    const onChangeSelectedRow = useCallback((selectedRowKeys, selectedRows) => {
+        setState(prev => (Object.assign(Object.assign({}, 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)) ||
+                    [],
+            } })));
+    }, [mainColumnKey, tableData]);
+    /** Refetch */
+    const refetchTableListing = useCallback(() => {
+        queryClient.invalidateQueries([QUERY_KEYS.GET_DATA_TABLE_LISTING, name], {
+            exact: false,
+        });
+    }, [name, queryClient]);
+    const onMatchesAnyLoadMore = useCallback(() => {
+        if (!isFetchingNextPage) {
+            fetchNextPage();
+        }
+    }, [fetchNextPage, isFetchingNextPage]);
+    return {
+        /* Modify Column */
+        modifyColumn: {
+            metrics: columnMetrics,
+            savedModifyColumn: {
+                list: modifyColumnList,
+                selected: modifyColumnSelected,
+                loading: isModifyColumnsLoading,
+                onRemove: onRemoveModifyColumn,
+                onSelect: onSelectModifyColumn,
+            },
+            onApply: onApplyModifyColumn,
+        },
+        /* Filter */
+        filter: {
+            savedFilter: {
+                list: savedFilterList,
+                selected: selectedFilterId,
+                onSelect: onSelectSavedFilter,
+                onRemove: onRemoveSavedFilter,
+            },
+            filters,
+            filterMetrics,
+            matchesAny: {
+                list: matchesAnyList,
+                isLoading: (isMatchesAnyListLoading || isMatchesAnyListFetching) &&
+                    !!matchesAnyRequest &&
+                    isEnabledFetchMatchesAny,
+            },
+            onSaveFilter,
+            onChangeFilters,
+            onChangeFilterCondition,
+            onMatchesAnyLoadMore,
+        },
+        /* Pagination */
+        pagination: Object.assign(Object.assign({}, 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: {
+                selectedRowKeys: selectedRow.keys || [],
+                onChange: onChangeSelectedRow,
+            }, onChange: onChangeTable, onColumnResize(data) {
+                const { index, width } = data;
+                handleUpdateTable({
+                    columnWidths: Object.assign(Object.assign({}, table.columnWidths), { [index]: width }),
+                });
+            } }),
+        /* Grid view */
+        gridView: {
+            mode: modeView,
+            onChangeMode(mode) {
+                setState(prev => (Object.assign(Object.assign({}, prev), { modeView: mode })));
+            },
+            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);
+                            }
+                        }) }),
+                    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);
+                            }
+                        } }),
+                },
+            },
+        },
+        /** Group by */
+        groupBy: {
+            options: groupByOptions || [],
+            selectedKey: groupBy.selectedKey,
+            onChange(selectedKey) {
+                handleUpdateGroupBy({
+                    selectedKey,
+                });
+            },
+        },
+        /* Selected row */
+        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 })));
+                }
+            } }), ((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',
+        ])),
+        /* Queries */
+        queries: {
+            getTableListing,
+            getModifyColumnList,
+            getSavedFilterList,
+            getColumnMetrics,
+            getFilterMetricList,
+            getSearchListing,
+        },
+        // Handles
+        onChangeSelectedRow,
+        setDatTableListingState: setState,
+        // Refetch
+        refetchTableListing,
+    };
+}