@antscorp/antsomi-ui 1.3.5-beta.410 → 1.3.5-beta.412

package/es/components/organism/DataTable/components/AddButton/index.js

@@ -25,7 +25,7 @@ const StyledAddButton = styled(Flex) `
   cursor: pointer;
 `;
 export const AddButton = memo(props => {
-    const { show } = props, restProps = __rest(props, ["show"]);
+    const { show = true } = props, restProps = __rest(props, ["show"]);
     if (!show)
         return null;
     return (React.createElement(StyledAddButton, Object.assign({ align: "center", justify: "center" }, restProps),

package/es/components/organism/DataTable/components/Table/styled.js

@@ -55,7 +55,6 @@ export const StyledTable = styled(Table) `
       align-items: center;
       justify-content: center;
       opacity: 0;
-      transition: opacity 0.2s ease-in-out;
 
       &::after {
         content: '';

package/es/components/organism/DataTable/components/Toolbar/SearchPopover.d.ts

@@ -1,8 +1,10 @@
 import { PopoverProps } from 'antd';
 import React from 'react';
-import { TSearchActionButton } from '../../types';
+import { TSearchActionButton, TSearchItem } from '../../types';
 interface SearchPopoverProps extends PopoverProps, TSearchActionButton {
     onAddFilter?: (value: string) => void;
+    onSearch?: (value: string) => void;
+    onClick?: (searchItem: TSearchItem) => void;
 }
 export declare const SearchPopover: React.FC<SearchPopoverProps>;
 export {};

package/es/components/organism/DataTable/components/Toolbar/SearchPopover.js

@@ -13,7 +13,7 @@ import { Link } from 'react-router-dom';
 import React, { useState } from 'react';
 import styled from 'styled-components';
 // Components
-import { Input, Popover, Divider, Typography, Scrollbars, Icon, } from '@antscorp/antsomi-ui/es/components/atoms';
+import { Input, Popover, Divider, Typography, Scrollbars, Icon, Spin, Flex, } from '@antscorp/antsomi-ui/es/components/atoms';
 import { Menu } from '@antscorp/antsomi-ui/es/components/organism';
 import { EmptyData } from '@antscorp/antsomi-ui/es/components/molecules';
 // Constants
@@ -24,7 +24,7 @@ import { useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
 import { searchStringQuery } from '@antscorp/antsomi-ui/es/utils';
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 // Styles
-import { FilterSection } from './styled';
+import { FilterSection, IconWrapper } from './styled';
 import { FilterButton } from '../../styled';
 // Translations
 import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
@@ -50,7 +50,7 @@ const StyledContent = styled.div `
   }
 `;
 export const SearchPopover = props => {
-    const { children, objectName, searchList, isClientSearch, onAddFilter = () => { }, itemSearchRender } = props, restProps = __rest(props, ["children", "objectName", "searchList", "isClientSearch", "onAddFilter", "itemSearchRender"]);
+    const { children, objectName, searchList, isClientSearch, loading, isAddFilterFromSearchItem, onAddFilter = () => { }, onSearch = () => { }, onClick = () => { }, onClickSearchItem, itemSearchRender } = props, restProps = __rest(props, ["children", "objectName", "searchList", "isClientSearch", "loading", "isAddFilterFromSearchItem", "onAddFilter", "onSearch", "onClick", "onClickSearchItem", "itemSearchRender"]);
     // State
     const [state, setState] = useState({
         searchValue: '',
@@ -70,11 +70,17 @@ export const SearchPopover = props => {
             draftSearchList = (searchList || []).filter(({ label }) => searchStringQuery(label, searchValue));
         }
         return draftSearchList.map((searchItem, index) => {
-            const { id, label, path } = searchItem;
-            const renderLabel = () => (React.createElement(Typography.Text, { className: `${path ? 'text-link' : ''}`, ellipsis: { tooltip: true } }, path ? React.createElement(Link, { to: path }, label) : label));
+            const { id, label, link, icon } = searchItem;
+            const Label = (React.createElement(Flex, { align: "center", gap: 6, style: { height: '100%' } },
+                icon && React.createElement(IconWrapper, null, icon),
+                React.createElement(Typography.Text, { className: `${link ? 'text-link' : ''}`, ellipsis: { tooltip: true } }, link && !itemSearchRender && !onClickSearchItem && !isAddFilterFromSearchItem ? (React.createElement(Link, { to: link }, label)) : (label))));
             return {
                 key: id,
-                label: itemSearchRender ? itemSearchRender(searchItem, index) : renderLabel(),
+                label: itemSearchRender ? itemSearchRender(searchItem, index, Label) : Label,
+                onClick: () => {
+                    onClick(searchItem);
+                    setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: false })));
+                },
             };
         });
     }, [isClientSearch, itemSearchRender, searchList, searchValue]);
@@ -109,12 +115,15 @@ export const SearchPopover = props => {
                 React.createElement(Menu, { mode: "vertical", items: filteredSearchList }))));
     };
     const content = (React.createElement(StyledContent, null,
-        React.createElement(Input.CustomSearch, { value: searchValue, onAfterChange: searchValue => setState(prev => (Object.assign(Object.assign({}, prev), { searchValue }))), onPressEnter: () => {
+        React.createElement(Input.CustomSearch, { value: searchValue, placeholder: t(translations.global.search).toString(), onAfterChange: searchValue => {
+                setState(prev => (Object.assign(Object.assign({}, prev), { searchValue })));
+                onSearch(searchValue);
+            }, onPressEnter: () => {
                 handleAddFilter();
             } }),
         React.createElement(Divider, { style: { margin: '8px 0px' } }),
         renderFilterSection(),
-        renderSearchList()));
+        React.createElement(Spin, { spinning: loading }, renderSearchList())));
     return (React.createElement(Popover, Object.assign({ open: isOpenPopover, content: content, overlayInnerStyle: { width: 300, padding: 0 }, trigger: ['click'], arrow: false, placement: "bottomRight" }, restProps, { onOpenChange: open => {
             // Reset search value to empty when close popover
             setState(prev => (Object.assign(Object.assign(Object.assign({}, prev), { isOpenPopover: open }), (!open && { searchValue: '' }))));

package/es/components/organism/DataTable/components/Toolbar/ToolbarActionButtons.js

@@ -1,3 +1,14 @@
+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, { memo, useMemo } from 'react';
 import { useShallow } from 'zustand/react/shallow';
@@ -26,13 +37,12 @@ export const ToolbarActionButtons = memo(() => {
         return null;
     // Handlers
     const onAddFilterFromSearch = (value, addFilterInfo) => {
-        const metric = flattenFilterMetrics.find(metric => metric.id === (addFilterInfo === null || addFilterInfo === void 0 ? void 0 : addFilterInfo.metricId));
+        const metric = flattenFilterMetrics.find(metric => { var _a; return metric.id.toString().toUpperCase() === ((_a = addFilterInfo === null || addFilterInfo === void 0 ? void 0 : addFilterInfo.metricId) === null || _a === void 0 ? void 0 : _a.toString().toUpperCase()); });
         // If metric is exist then call function setFilter to push new filter from metric and value
         if (metric && addFilterInfo) {
             const { id, dataType } = metric;
             const { operator } = addFilterInfo || {};
             onChangeFilters([
-                ...(filters || []),
                 {
                     column: id,
                     operator,
@@ -53,8 +63,13 @@ export const ToolbarActionButtons = memo(() => {
             return customRender(actionButton);
         switch (key) {
             case 'SEARCH': {
-                const { searchList, itemSearchRender, isClientSearch, addFilterInfo } = action;
-                return (React.createElement(SearchPopover, { key: key, searchList: searchList, isClientSearch: isClientSearch, itemSearchRender: itemSearchRender, onAddFilter: value => onAddFilterFromSearch(value, addFilterInfo) }, actionButton));
+                const _a = action, { addFilterInfo, onClickSearchItem, isAddFilterFromSearchItem } = _a, restOfAction = __rest(_a, ["addFilterInfo", "onClickSearchItem", "isAddFilterFromSearchItem"]);
+                return (React.createElement(SearchPopover, Object.assign({ key: key }, restOfAction, { isAddFilterFromSearchItem: isAddFilterFromSearchItem, onClickSearchItem: onClickSearchItem, onClick: searchItem => {
+                        if (isAddFilterFromSearchItem) {
+                            onAddFilterFromSearch(searchItem.label, addFilterInfo);
+                        }
+                        onClickSearchItem === null || onClickSearchItem === void 0 ? void 0 : onClickSearchItem(searchItem);
+                    }, onAddFilter: value => onAddFilterFromSearch(value, addFilterInfo) }), actionButton));
             }
             case 'COLUMN': {
                 return React.createElement(ModifyColumn, { key: key }, actionButton);

package/es/components/organism/DataTable/components/Toolbar/styled.d.ts

@@ -8,3 +8,4 @@ export declare const CollapseButton: import("styled-components").StyledComponent
 export declare const ToolbarActionButtonWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
 export declare const FilterSection: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
 export declare const RowSelectedControlWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
+export declare const IconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/organism/DataTable/components/Toolbar/styled.js

@@ -62,3 +62,6 @@ export const RowSelectedControlWrapper = styled(Flex) `
     }
   }
 `;
+export const IconWrapper = styled.div `
+  flex-shrink: 0;
+`;

package/es/components/organism/DataTable/constants/common.d.ts

@@ -5,4 +5,5 @@ declare const MIN_COLUMN_WIDTH = 55;
 declare const DEFAULT_ROW_SELECTION_WIDTH = 47;
 declare const DEFAULT_TOGGLE_WIDTH = 55;
 declare const DEFAULT_COLUMN_WIDTHS: number[];
-export { DATA_TABLE_DEFAULT_NAME, DATA_TABLE_PREFIX, DEFAULT_COLUMN_WIDTH, DEFAULT_ROW_SELECTION_WIDTH, MIN_COLUMN_WIDTH, DEFAULT_COLUMN_WIDTHS, DEFAULT_TOGGLE_WIDTH, };
+declare const DEFAULT_CELL_EMPTY = "--";
+export { DATA_TABLE_DEFAULT_NAME, DATA_TABLE_PREFIX, DEFAULT_COLUMN_WIDTH, DEFAULT_ROW_SELECTION_WIDTH, MIN_COLUMN_WIDTH, DEFAULT_COLUMN_WIDTHS, DEFAULT_TOGGLE_WIDTH, DEFAULT_CELL_EMPTY, };

package/es/components/organism/DataTable/constants/common.js

@@ -6,4 +6,5 @@ const DEFAULT_FIRST_COLUMN_WIDTH = 200;
 const DEFAULT_ROW_SELECTION_WIDTH = 47;
 const DEFAULT_TOGGLE_WIDTH = 55;
 const DEFAULT_COLUMN_WIDTHS = [DEFAULT_FIRST_COLUMN_WIDTH].concat(Array.from({ length: 20 }, () => DEFAULT_COLUMN_WIDTH));
-export { DATA_TABLE_DEFAULT_NAME, DATA_TABLE_PREFIX, DEFAULT_COLUMN_WIDTH, DEFAULT_ROW_SELECTION_WIDTH, MIN_COLUMN_WIDTH, DEFAULT_COLUMN_WIDTHS, DEFAULT_TOGGLE_WIDTH, };
+const DEFAULT_CELL_EMPTY = '--';
+export { DATA_TABLE_DEFAULT_NAME, DATA_TABLE_PREFIX, DEFAULT_COLUMN_WIDTH, DEFAULT_ROW_SELECTION_WIDTH, MIN_COLUMN_WIDTH, DEFAULT_COLUMN_WIDTHS, DEFAULT_TOGGLE_WIDTH, DEFAULT_CELL_EMPTY, };

package/es/components/organism/DataTable/hooks/useDataTableListing/types.d.ts

@@ -1,9 +1,10 @@
 import { TServiceAuth } from '@antscorp/antsomi-ui/es/types';
 import { TEnv } from '@antscorp/antsomi-ui/es/types/config';
 import { AxiosRequestConfig } from 'axios';
-import { FilterItem, TableProps } from '../../types';
+import { FilterItem, TSearchActionButton, TSearchItem, TableProps } from '../../types';
 import { PaginationProps } from '../../components';
 import { ColumnType } from 'antd/es/table';
+import { ReactNode } from 'react';
 export type TApiGlobal = AxiosRequestConfig<any> & {
     enabled?: boolean;
 };
@@ -14,19 +15,24 @@ export type TConfig = {
         listing?: TApiGlobal;
         column?: TApiGlobal;
         filter?: TApiGlobal;
+        search?: TApiGlobal;
     };
     object?: {
         type: number;
         objectId: number;
     };
 };
-type TToggleColumnType<TTableType> = ColumnType<TTableType> & {
+type TGeneralTableColumnType<TTableType> = Omit<ColumnType<TTableType>, 'render'> & {
+    link?: ((record: TTableType) => string) | string;
+    render?: (value: any, record: TTableType, index: number, node: ReactNode) => ReactNode;
+};
+type TToggleColumnType<TTableType> = TGeneralTableColumnType<TTableType> & {
     value?: ((record: TTableType) => boolean) | boolean;
     valueKey?: keyof TTableType;
     onChange?: (checked: boolean, record: TTableType) => void;
 };
-type TTableColumnType<TTableType, K extends keyof TTableType | 'toggle'> = K extends 'toggle' ? TToggleColumnType<TTableType> : ColumnType<TTableType>;
-export interface UseDataTableListingProps<TTableType = any> {
+type TTableColumnType<TTableType, K extends keyof TTableType | 'toggle'> = K extends 'toggle' ? TToggleColumnType<TTableType> : TGeneralTableColumnType<TTableType>;
+export interface UseDataTableListingProps<TTableType = any, TSearchType = any> {
     config: TConfig;
     name?: string;
     table?: Omit<TableProps<TTableType>, 'columns'> & {
@@ -35,6 +41,12 @@ export interface UseDataTableListingProps<TTableType = any> {
             [K in keyof TTableType | 'toggle']?: TTableColumnType<TTableType, K>;
         };
     };
+    search?: Pick<TSearchActionButton, 'addFilterInfo' | 'isClientSearch' | 'isAddFilterFromSearchItem' | 'onClickSearchItem'> & {
+        link?: ((record: TSearchType) => string) | string;
+        icon?: (record: TSearchType) => ReactNode | ReactNode;
+        itemMapKeys: Record<keyof Omit<TSearchItem, 'icon' | 'link'>, keyof TSearchType>;
+        render?: (record: TSearchType, index: number, node: ReactNode) => ReactNode;
+    };
 }
 export interface DataTableLocalStorage {
     filter?: {

package/es/components/organism/DataTable/hooks/useDataTableListing/useDataTableListing.d.ts

@@ -1,13 +1,14 @@
 import React from 'react';
-import { useGetColumnMetrics, useGetFilterMetricList, useGetModifyColumnList, useGetSavedFilterList, useGetTableListing } from '@antscorp/antsomi-ui/es/queries';
+import { useGetColumnMetrics, useGetFilterMetricList, useGetModifyColumnList, useGetSavedFilterList, useGetSearchListing, useGetTableListing } from '@antscorp/antsomi-ui/es/queries';
 import { UseDataTableListingProps } from './types';
-import { FilterItem, FilterProps, TColumnActionButton, TableProps } from '../../types';
+import { FilterItem, FilterProps, TColumnActionButton, TSearchActionButton, TableProps } from '../../types';
 import { PaginationProps } from '../../components';
 interface TUseDataTableListing<TTableType = any> {
     modifyColumn: TColumnActionButton;
     filter: FilterProps;
     pagination: PaginationProps;
     table: TableProps<TTableType>;
+    search: TSearchActionButton;
     selectedRowKeys: React.Key[];
     queries: {
         getTableListing: ReturnType<typeof useGetTableListing>;
@@ -15,6 +16,7 @@ interface TUseDataTableListing<TTableType = any> {
         getSavedFilterList: ReturnType<typeof useGetSavedFilterList>;
         getColumnMetrics: ReturnType<typeof useGetColumnMetrics>;
         getFilterMetricList: ReturnType<typeof useGetFilterMetricList>;
+        getSearchListing: ReturnType<typeof useGetSearchListing>;
     };
     setDatTableListingState: React.Dispatch<React.SetStateAction<TState<TTableType>>>;
 }
@@ -24,6 +26,7 @@ type TState<TTableType = any> = {
     pagination: PaginationProps;
     table: TableProps<TTableType>;
     selectedRowKeys: React.Key[];
+    searchValue?: string;
 };
-export declare function useDataTableListing<TTableType = Record<string, any>>(props: UseDataTableListingProps<TTableType>): TUseDataTableListing<TTableType>;
+export declare function useDataTableListing<TTableType = Record<string, any>, TSearchType = any>(props: UseDataTableListingProps<TTableType, TSearchType>): TUseDataTableListing<TTableType>;
 export {};

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

@@ -20,22 +20,23 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 // Libraries
 import React, { useCallback, useMemo, useState } from 'react';
-import { isEmpty } from 'lodash';
+import { Link } from 'react-router-dom';
+import { isEmpty, pick } from 'lodash';
 // 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 } from '@antscorp/antsomi-ui/es/constants';
+import { COLUMN_DOMAIN, 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_TOGGLE_WIDTH } from '../../constants';
 // Hooks
 import { useDeepCompareEffect, useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
-import { useCreateModifyColumn, useDeleteModifyColumn, useDeleteSavedFilter, useGetColumnMetrics, useGetFilterMetricList, useGetModifyColumnList, useGetSavedFilterList, useGetTableListing, useSaveFilter, useUpdateFilter, useUpdateModifyColumn, } from '@antscorp/antsomi-ui/es/queries';
+import { useCreateModifyColumn, useDeleteModifyColumn, useDeleteSavedFilter, useGetColumnMetrics, useGetFilterMetricList, useGetModifyColumnList, useGetSavedFilterList, useGetSearchListing, useGetTableListing, useSaveFilter, useUpdateFilter, useUpdateModifyColumn, } from '@antscorp/antsomi-ui/es/queries';
 // Utils
 import { flatTree, safeParseJson } from '@antscorp/antsomi-ui/es/utils';
 import { METRIC_MAP_NUMBER_TYPE } from '../../constants/filter';
 import { mapFiltersToApiFilters, mapFiltersToRules, mapRulesToFilters } from '../../utils';
-import { DEFAULT_TOGGLE_WIDTH } from '../../constants';
 const { Text } = Typography;
 const initialState = {
     filters: [],
@@ -49,24 +50,27 @@ const initialState = {
         loading: false,
     },
     selectedRowKeys: [],
+    searchValue: '',
 };
 export function useDataTableListing(props) {
     // Props
-    const { config, name = 'default', table: tableProps } = props || {};
+    const { config, name = 'default', table: tableProps, search: searchProps } = props || {};
     // Hooks
     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 } = api || {};
+    const { column: apiColumn, filter: apiFilter, listing: apiListing, search: apiSearch, } = api || {};
     const _a = apiColumn || {}, { url: columnUrl = `${COLUMN_DOMAIN[env || 'development']}/api/column`, enabled: enabledApiColumn = true } = _a, restOfApiColumnRequest = __rest(_a, ["url", "enabled"]);
     const _b = apiFilter || {}, { url: filterUrl = `${COLUMN_DOMAIN[env || 'development']}/api/filter`, enabled: enabledApiFilter = true } = _b, restOfApiFilterRequest = __rest(_b, ["url", "enabled"]);
     const _c = apiListing || {}, { url: listingUrl = '', enabled: enabledApiListing = true } = _c, restOfApiListingRequest = __rest(_c, ["url", "enabled"]);
-    const { filters, selectedFilterId, pagination, selectedRowKeys } = state;
+    const _d = apiSearch || {}, { url: searchUrl = '', enabled: enabledApiSearch = true } = _d, restOfApiSearchRequest = __rest(_d, ["url", "enabled"]);
+    const { filters, selectedFilterId, pagination, selectedRowKeys, searchValue } = state;
     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 });
     // Memos
     const mapObject = useMemo(() => ({
         objType: object === null || object === void 0 ? void 0 : object.type,
@@ -133,6 +137,18 @@ export function useDataTableListing(props) {
             enabled: !!(listingAuth === null || listingAuth === void 0 ? void 0 : listingAuth.url) && !!(listingAuth === null || listingAuth === void 0 ? void 0 : listingAuth.token) && enabledApiListing,
         },
     });
+    const getSearchListing = useGetSearchListing({
+        args: {
+            auth: searchAuth,
+            params: {
+                search: searchValue,
+            },
+            request: restOfApiSearchRequest,
+        },
+        options: {
+            enabled: !!(searchAuth === null || searchAuth === void 0 ? void 0 : searchAuth.url) && !!(searchAuth === null || searchAuth === void 0 ? void 0 : searchAuth.token) && enabledApiSearch,
+        },
+    });
     // Variables
     const { data: columnMetricsData } = getColumnMetrics || {};
     const { data: modifyColumnsData, isLoading: isModifyColumnsLoading } = getModifyColumnList || {};
@@ -140,6 +156,8 @@ export function useDataTableListing(props) {
     const { data: filterMetricsData } = getFilterMetricList || {};
     const { data: tableListing, isLoading: isTableListingLoading, isRefetching: isTableListingRefetching, refetch: refetchTableListing, } = getTableListing || {};
     const { body: tableBody, header: tableHeader, total } = tableListing || {};
+    const { data: searchListingData, isLoading: isSearchListingLoading, isFetching: isSearchListingFetching, } = getSearchListing || {};
+    const { body: searchListingBody } = searchListingData || {};
     // Mutations
     const { mutateAsync: updateModifyColumn } = useUpdateModifyColumn({
         auth: modifyColumnAuth,
@@ -208,10 +226,10 @@ export function useDataTableListing(props) {
     const tableColumns = useMemo(() => {
         let data = [];
         const { columns } = tableProps || {};
-        // Check if has column toggle then add toggle column
+        // 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, onChange } = columns.toggle || {};
-            data.push(Object.assign({ key: 'toggle' || key, fixed: 'left', align: 'center', dataIndex: 'toggle' || dataIndex, title: 'Toggle' || title, render: (_, record) => {
+            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)
@@ -223,17 +241,35 @@ export function useDataTableListing(props) {
                                     onChange(checked, record);
                                 }
                             } })));
-                }, width: DEFAULT_TOGGLE_WIDTH }, columns.toggle));
+                } }));
         }
         data = data.concat((tableHeader === null || tableHeader === void 0 ? void 0 : tableHeader.map(headerCol => {
             const { name, label, fixColumn } = headerCol;
-            return Object.assign({ key: name, dataIndex: name, title: label, fixed: fixColumn ? 'left' : undefined, render(value) {
-                    return (React.createElement(Text, { ellipsis: { tooltip: true } }, typeof value !== 'object' ? value : null));
-                } }, columns === null || columns === void 0 ? void 0 : columns[name]);
+            return Object.assign(Object.assign({ key: name, dataIndex: name, title: label, fixed: fixColumn ? 'left' : 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 columns[name].render(value, record, index, renderComponent);
+                    }
+                    if (link) {
+                        return (React.createElement(Link, { to: typeof link === 'function' ? link(record) : link }, renderComponent));
+                    }
+                    return renderComponent;
+                } });
         })) || []);
         return data;
     }, [tableHeader, tableProps]);
     const tableData = useDeepCompareMemo(() => (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] })))) || [], [tableBody]);
+    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]);
     // Effects
     /**
      * Update values from local storage to state
@@ -269,10 +305,12 @@ export function useDataTableListing(props) {
             data: Object.assign(Object.assign({}, mapObject), { modifyColumnId: id, isLasted: 1 }),
         });
         // Refetch Data table listing
-        refetchTableListing();
+        setTimeout(() => {
+            refetchTableListing();
+        }, 500);
     }, [mapObject, refetchTableListing, updateModifyColumn]);
     const onApplyModifyColumn = useCallback((args) => __awaiter(this, void 0, void 0, function* () {
-        var _d;
+        var _e;
         const { selectedMetrics, columnSetName, existColumnSet } = args || {};
         const flattenMetrics = flatTree(columnMetricsData, 'child');
         const selectedColumnMetrics = selectedMetrics
@@ -285,7 +323,7 @@ export function useDataTableListing(props) {
             exitModifyColumnId = (existColumnSet === null || existColumnSet === void 0 ? void 0 : existColumnSet.id) || '';
             if (columnSetName === '') {
                 exitModifyColumnId =
-                    ((_d = modifyColumnsData === null || modifyColumnsData === void 0 ? void 0 : modifyColumnsData.find(modifyColumn => modifyColumn.modifyName === 'Custom')) === null || _d === void 0 ? void 0 : _d.modifyColId) || '';
+                    ((_e = modifyColumnsData === null || modifyColumnsData === void 0 ? void 0 : modifyColumnsData.find(modifyColumn => modifyColumn.modifyName === 'Custom')) === null || _e === void 0 ? void 0 : _e.modifyColId) || '';
             }
         }
         /**
@@ -295,14 +333,12 @@ export function useDataTableListing(props) {
          */
         if (exitModifyColumnId) {
             const { status } = yield updateModifyColumn({
-                data: {
-                    modifyColumnId: exitModifyColumnId,
-                    columns: JSON.stringify(selectedColumnMetrics),
-                    isLasted: 1,
-                },
+                data: Object.assign(Object.assign({}, mapObject), { modifyColumnId: exitModifyColumnId, columns: JSON.stringify(selectedColumnMetrics), isLasted: 1 }),
             });
-            // Refetch Data table listing
-            refetchTableListing();
+            setTimeout(() => {
+                // Refetch Data table listing
+                refetchTableListing();
+            }, 500);
             return {
                 success: !!status,
             };
@@ -311,8 +347,10 @@ export function useDataTableListing(props) {
         const { status } = yield createModifyColumn({
             data: Object.assign(Object.assign({}, mapObject), { name: columnSetName || 'Custom', columns: JSON.stringify(selectedColumnMetrics), isLasted: 1 }),
         });
-        // Refetch Data table listing
-        refetchTableListing();
+        setTimeout(() => {
+            // Refetch Data table listing
+            refetchTableListing();
+        }, 500);
         return {
             success: !!status,
         };
@@ -433,6 +471,23 @@ export function useDataTableListing(props) {
             },
         },
         selectedRowKeys,
+        /* Search */
+        search: 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 })));
+                }
+            } }), pick(searchProps, [
+            'isClientSearch',
+            'addFilterInfo',
+            'isAddFilterFromSearchItem',
+            'onClickSearchItem',
+        ])),
         /* Queries */
         queries: {
             getTableListing,
@@ -440,6 +495,7 @@ export function useDataTableListing(props) {
             getSavedFilterList,
             getColumnMetrics,
             getFilterMetricList,
+            getSearchListing,
         },
         // Handles
         setDatTableListingState: setState,

package/es/components/organism/DataTable/types/toolbar.d.ts

@@ -10,7 +10,7 @@ export type TActionToolbarButtonKey<T extends string[] = []> = (typeof TOOLBAR_A
 export type TSearchItem = {
     id: string | number;
     label: string;
-    path?: string;
+    link?: string;
     icon?: ReactNode;
 };
 export type TSelectedRowButton = TActionButton & {
@@ -29,12 +29,15 @@ export type TSearchActionButton = TActionButton & {
     searchList?: TSearchItem[];
     objectName?: string;
     isClientSearch?: boolean;
+    isAddFilterFromSearchItem?: boolean;
     addFilterInfo?: {
         metricId?: string | number;
         operator: TOperatorKey;
     };
-    itemSearchRender?: (item: TSearchItem, index: number) => React.ReactNode;
+    loading?: boolean;
+    itemSearchRender?: (item: TSearchItem, index: number, node: ReactNode) => React.ReactNode;
     onSearch?: (valueSearch: string) => void;
+    onClickSearchItem?: (item: TSearchItem) => void;
 };
 export type TColumnActionButton = TActionButton & {
     modalTitle?: string;

package/es/components/organism/LeftMenu/LeftMenu.js

@@ -105,7 +105,7 @@ export const LeftMenuComponent = memo(props => {
                 React.createElement(FeatureMenu, { role: "menu", className: "antsomi-scroll-box" },
                     React.createElement("div", { className: "menu-content scroll-content" }, renderAppMenuItems()),
                     React.createElement("div", { className: "nav-blank", onMouseEnter: onHoverMenuBar }),
-                    React.createElement(PopoverWrapper, { show: state.isShowPopover && isExpandable, className: "antsomi-scroll-box antsomi-child-menu-popover" },
+                    React.createElement(PopoverWrapper, { show: state.isShowPopover && isExpandable, hasMarginTop: !isRecommendation, className: "antsomi-scroll-box antsomi-child-menu-popover" },
                         React.createElement("div", { className: "scroll-content", style: { width: '200px', maxHeight: '100%' } }, childHoverMenu))),
                 React.createElement("div", { style: { flexShrink: 0 } }, renderSettings())),
             isExpandable && !isRecommendation && (React.createElement(ExpandWrapper, { onMouseEnter: onMouseLeave },

package/es/components/organism/LeftMenu/components/common/ChildMenu/index.js

@@ -16,13 +16,12 @@ import { IconWrapper } from '../../../styled';
 import { HOME_MENU_ITEMS, ICON_SIZE } from '../../../constants';
 // Utils
 import { findActiveAppCodeByUrl, findLastMatchedItemByUrl, getMenuItem } from '../../../utils';
-import { findItemByPermissionCode, recursiveFindItemByKey, recursiveFindParentOfActiveItem, } from './utils';
+import { handleActiveRecommendationItem, recursiveFindItemByKey, recursiveFindParentOfActiveItem, } from './utils';
 // Hooks
 import { useNavigatePath } from '../../../hooks';
 import { useDeepCompareEffect } from '@antscorp/antsomi-ui/es/hooks';
 // Contexts
 import { useLeftMenuContext } from '../../../contexts';
-import { MARKETING_CHANNEL_CODE } from '@antscorp/antsomi-ui/es/components/template/Layout/constants';
 const noDashboardItem = {
     key: 'no_dashboard',
     label: 'No dashboard available',
@@ -79,53 +78,11 @@ export const ChildMenu = memo(props => {
                 break;
             }
             case isRecommendation: {
-                const activeItem = findItemByPermissionCode({
-                    permissionCode: customActiveCurrentKey,
-                    menuItems: items,
+                const menuActiveKey = handleActiveRecommendationItem({
+                    customActiveCurrentKey,
+                    currentActiveItem,
+                    items,
                 });
-                const { key, permission_code } = activeItem || {};
-                let menuActiveKey;
-                if (permission_code && key) {
-                    switch (permission_code) {
-                        case 'JOURNEY':
-                            if (!Object.values(MARKETING_CHANNEL_CODE).includes(currentActiveItem)) {
-                                menuActiveKey = MARKETING_CHANNEL_CODE.ALL_CHANNEL;
-                            }
-                            break;
-                        case 'EVENT_SOURCES':
-                            if (!['EVENT', 'EVENT_ATTRIBUTE', 'CONVERSION'].includes(currentActiveItem))
-                                menuActiveKey = 'SOURCE';
-                            break;
-                        case 'DATAFLOWS':
-                            if (!['BATCH_STREAMING', 'REALTIME_STREAMING'].includes(currentActiveItem))
-                                menuActiveKey = 'BATCH_STREAM';
-                            break;
-                        case 'BUSINESS_OBJECT': {
-                            if (!['UPLOAD', 'EXPORT'].includes(currentActiveItem)) {
-                                menuActiveKey = 'UPLOAD';
-                            }
-                            break;
-                        }
-                        case 'DATASOURCES':
-                            menuActiveKey = 'DATA_SOURCE';
-                            break;
-                        default:
-                            menuActiveKey = key;
-                            break;
-                    }
-                }
-                else {
-                    switch (customActiveCurrentKey) {
-                        case 'DATASOURCES-SQL_WORKSPACE':
-                            menuActiveKey = 'DATA_SOURCE';
-                            break;
-                        case 'DATASOURCES-DATAFLOWS':
-                            menuActiveKey = 'DF_DATA_SOURCE';
-                            break;
-                        default:
-                            break;
-                    }
-                }
                 if (menuActiveKey) {
                     setCurrentActiveItem(menuActiveKey);
                     /** Find parent key of active menu item to open it */
@@ -216,9 +173,9 @@ export const ChildMenu = memo(props => {
         return (_a = args === null || args === void 0 ? void 0 : args.items) === null || _a === void 0 ? void 0 : _a.map(item => {
             const { key, label, children, icon, logo_url, menu_item_path = null, menu_item_domain = null, options, disabled, optionCallback, } = item;
             const isOwnerDashboardKey = key === HOME_MENU_ITEMS.DASHBOARD.menu_item_code;
-            const renderLabel = () => (React.createElement(LabelWrapper, null,
+            const renderLabel = () => (React.createElement(LabelWrapper, { gap: 10, align: "center", justify: "space-between" },
                 React.createElement(LabelCustom, { ellipsis: { tooltip: label } }, label),
-                (options === null || options === void 0 ? void 0 : options.length) && !isRecommendation && (React.createElement(OptionDropdownWrapper, null,
+                (options === null || options === void 0 ? void 0 : options.length) && !isRecommendation && (React.createElement(OptionDropdownWrapper, { align: "center" },
                     React.createElement(Dropdown, { menu: {
                             items: options,
                             onClick: e => {