npm - @antscorp/antsomi-ui - Versions diffs - 1.3.5-beta.410 → 1.3.5-beta.411 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (28) hide show

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/constants/queries.d.ts CHANGED Viewed

@@ -31,4 +31,5 @@ export declare const QUERY_KEYS: {
     GET_MODIFY_COLUMN_LIST: string;
     GET_SAVED_FILTER_LIST: string;
     GET_FILTER_METRIC_LIST: string;
+    GET_SEARCH_LIST: string;
 };

package/es/constants/queries.js CHANGED Viewed

@@ -44,4 +44,5 @@ export const QUERY_KEYS = {
     GET_MODIFY_COLUMN_LIST: 'GET_MODIFY_COLUMN_LIST',
     GET_SAVED_FILTER_LIST: 'GET_SAVED_FILTER_LIST',
     GET_FILTER_METRIC_LIST: 'GET_FILTER_METRIC_LIST',
+    GET_SEARCH_LIST: 'GET_SEARCH_LIST',
 };

package/es/models/DataTable/DataTableListing.d.ts CHANGED Viewed

@@ -12,3 +12,10 @@ export type DataTableHeaderItem = {
     sortable: boolean;
     type: number;
 };
+export type DataTableColumnDefItem = {
+    name: string;
+    header: string;
+    enableSorting: string;
+    type: string;
+    is_performance: string;
+};

package/es/models/DataTable/SearchListing.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+export interface SearchListing<T = any> {
+    body: T[];
+    total: number;
+}

package/es/models/DataTable/SearchListing.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

package/es/models/DataTable/index.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
 export * from './ColumnMetric';
 export * from './FilterMetric';
 export * from './ModifyColumn';
+export * from './SearchListing';

package/es/models/DataTable/index.js CHANGED Viewed

@@ -1,3 +1,4 @@
 export * from './ColumnMetric';
 export * from './FilterMetric';
 export * from './ModifyColumn';
+export * from './SearchListing';

package/es/queries/DataTable/index.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { UseMutationOptions, UseQueryOptions } from '@tanstack/react-query';
-import { TCreateModifyColumnArgs, TDeleteModifyColumnArgs, TDeleteSavedFilterArgs, TGetFilterMetricListArgs, TGetMetricListArgs, TGetModifyColumnListArgs, TGetSavedFilterListArgs, TGetTableListingArgs, TSaveFilterArgs, TUpdateFilterArgs, TUpdateModifyColumnArgs } from '../../services/DataTable';
-import { ColumnMetric, FilterMetric, ModifyColumn } from '../../models/DataTable';
+import { TCreateModifyColumnArgs, TDeleteModifyColumnArgs, TDeleteSavedFilterArgs, TGetFilterMetricListArgs, TGetMetricListArgs, TGetModifyColumnListArgs, TGetSavedFilterListArgs, TGetSearchListingArgs, TGetTableListingArgs, TSaveFilterArgs, TUpdateFilterArgs, TUpdateModifyColumnArgs } from '../../services/DataTable';
+import { ColumnMetric, FilterMetric, ModifyColumn, SearchListing } from '../../models/DataTable';
 import { SavedFilter } from '../../models/DataTable/SavedFilter';
 import { DataTableListing } from '../../models/DataTable/DataTableListing';
 export type TGetColumnMetrics = {
@@ -59,6 +59,10 @@ export type TGetTableListing<T = any> = {
     args: TGetTableListingArgs;
     options?: UseQueryOptions<any, any, DataTableListing<T>, any[]>;
 };
+export type TGetSearchListing<T = any> = {
+    args: TGetSearchListingArgs;
+    options?: UseQueryOptions<any, any, SearchListing<T>, any[]>;
+};
 export declare const useGetColumnMetrics: (params: TGetColumnMetrics) => import("@tanstack/react-query").UseQueryResult<ColumnMetric[], any>;
 export declare const useGetModifyColumnList: (params: TGetModifyColumnList) => import("@tanstack/react-query").UseQueryResult<ModifyColumn[], any>;
 export declare const useUpdateModifyColumn: (params?: TUpdateModifyColumn) => import("@tanstack/react-query").UseMutationResult<{
@@ -82,3 +86,4 @@ export declare const useDeleteSavedFilter: (params?: TDeleteSavedFilter) => impo
     status: number;
 }, any, TDeleteSavedFilterArgs, unknown>;
 export declare const useGetTableListing: <T>(params: TGetTableListing<T>) => import("@tanstack/react-query").UseQueryResult<DataTableListing<T>, any>;
+export declare const useGetSearchListing: <T>(params: TGetSearchListing<T>) => import("@tanstack/react-query").UseQueryResult<SearchListing<T>, any>;

package/es/queries/DataTable/index.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { useMutation, useQuery, useQueryClient, } from '@tanstack/react-query';
 import { dataTableServices, } from '../../services/DataTable';
 // Constants
 import { QUERY_KEYS } from '../../constants';
-const { GET_COLUMN_METRICS, GET_MODIFY_COLUMN_LIST, GET_SAVED_FILTER_LIST, GET_FILTER_METRIC_LIST, } = QUERY_KEYS;
+const { GET_COLUMN_METRICS, GET_MODIFY_COLUMN_LIST, GET_SAVED_FILTER_LIST, GET_FILTER_METRIC_LIST, GET_SEARCH_LIST, } = QUERY_KEYS;
 /* Column */
 export const useGetColumnMetrics = (params) => {
     const { args, options } = params;
@@ -82,3 +82,7 @@ export const useGetTableListing = (params) => {
     const { options, args } = params || {};
     return useQuery(Object.assign({ queryKey: [GET_FILTER_METRIC_LIST, args === null || args === void 0 ? void 0 : args.params, args === null || args === void 0 ? void 0 : args.request], queryFn: () => dataTableServices.listing.getTableListing(args) }, options));
 };
+export const useGetSearchListing = (params) => {
+    const { args, options } = params || {};
+    return useQuery(Object.assign({ queryKey: [GET_SEARCH_LIST, args === null || args === void 0 ? void 0 : args.params, args === null || args === void 0 ? void 0 : args.request], queryFn: () => dataTableServices.search.getSearchListing(args) }, options));
+};

package/es/services/DataTable/index.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { AxiosRequestConfig } from 'axios';
 import { TServiceAuth } from '../../types';
-import { ColumnMetric, FilterMetric, ModifyColumn } from '../../models/DataTable';
+import { ColumnMetric, FilterMetric, ModifyColumn, SearchListing } from '../../models/DataTable';
 import { SavedFilter } from '../../models/DataTable/SavedFilter';
 import { DataTableListing } from '../../models/DataTable/DataTableListing';
 export type TGlobalApiParams = {
@@ -81,6 +81,13 @@ export type TGetTableListingArgs = {
     };
     request?: AxiosRequestConfig<any>;
 };
+export type TGetSearchListingArgs = {
+    auth?: TServiceAuth;
+    params?: {
+        search?: string;
+    };
+    request?: AxiosRequestConfig<any>;
+};
 export declare const dataTableServices: {
     column: {
         getColumnMetrics: ({ auth, params, request, }: TGetMetricListArgs) => Promise<ColumnMetric[]>;
@@ -111,4 +118,7 @@ export declare const dataTableServices: {
     listing: {
         getTableListing<T = any>({ auth, params, request, }: TGetTableListingArgs): Promise<DataTableListing<T>>;
     };
+    search: {
+        getSearchListing<T_1 = any>({ auth, params, request, }: TGetSearchListingArgs): Promise<SearchListing<T_1>>;
+    };
 };

package/es/services/DataTable/index.js CHANGED Viewed

@@ -23,10 +23,9 @@ import axios from 'axios';
 import { get } from 'lodash';
 // Constants
 import { COLUMN_API_TYPE, FILTER_API_TYPE } from '../../constants/dataTable';
-import { mapResponseListingToGeneral } from '../../utils';
+import { mapResponseListingToGeneral, mapResponseSearchToGeneral } from '../../utils';
 const { GET_COLUMNS, GET_LIST_MODIFY_COLUMN, UPDATE_MODIFY_COLUMN, ADD_MODIFY_COLUMN } = COLUMN_API_TYPE;
 const { GET_SAVED_FILTER, GET_LIST_FILTER, SAVE_FILTER, UPDATE_FILTER } = FILTER_API_TYPE;
-/* ----------  END OF LISTING  ---------- */
 const mapAuth = (auth) => {
     const { token, userId, accountId } = auth || {};
     return { _token: token, _user_id: userId, _account_id: accountId };
@@ -194,4 +193,19 @@ export const dataTableServices = {
             });
         },
     },
+    search: {
+        getSearchListing(_a) {
+            return __awaiter(this, arguments, void 0, function* ({ auth, params, request, }) {
+                const { search } = params || {};
+                const _b = request || {}, { method = 'GET' } = _b, restOfRequest = __rest(_b, ["method"]);
+                try {
+                    const response = yield axios(Object.assign(Object.assign({}, restOfRequest), { method, url: `${auth === null || auth === void 0 ? void 0 : auth.url}`, params: Object.assign(Object.assign(Object.assign({}, request === null || request === void 0 ? void 0 : request.params), mapAuth(auth)), { search }) }));
+                    return mapResponseSearchToGeneral(get(response, 'data.data', {}));
+                }
+                catch (error) {
+                    return Promise.reject(error);
+                }
+            });
+        },
+    },
 };

package/es/tests/DataTableTest.js CHANGED Viewed

@@ -1,36 +1,14 @@
 // Libraries
-import React, { useCallback, useMemo, useState } from 'react';
-import { BrowserRouter, Link } from 'react-router-dom';
+import React, { useCallback, useState } from 'react';
+import { BrowserRouter } from 'react-router-dom';
 // Components
-import { DataTable, } from '../components/organism/DataTable';
-import { Popover, Typography } from '../components';
+import { DataTable } from '../components/organism/DataTable';
+import { Popover } from '../components';
 // Styled
 import { TableTestWrapper } from './styled';
-// Constants
-import { SEARCH_LIST } from '../components/organism/DataTable/constants';
 import { random } from '../utils';
 import { useDataTableListing } from '../components/organism/DataTable/hooks/useDataTableListing';
-const columns = [
-    {
-        key: 'story_name',
-        dataIndex: 'story_name',
-        title: 'Name',
-        fixed: 'left',
-        sortDirections: ['ascend', 'descend'],
-        sorter: true,
-    },
-    {
-        key: 'status',
-        dataIndex: 'status',
-        title: 'Status',
-        width: 500,
-    },
-    {
-        key: 'story_id',
-        dataIndex: 'story_id',
-        title: 'Journey ID',
-    },
-];
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 export const DataTableTest = () => {
     // State
     const [state, setState] = useState({
@@ -46,15 +24,36 @@ export const DataTableTest = () => {
     // Variables
     const { tableCollapsed } = state;
     // Hooks
-    const { modifyColumn, filter, pagination, table, selectedRowKeys } = useDataTableListing({
+    const { modifyColumn, filter, pagination, table, search, selectedRowKeys } = useDataTableListing({
         config: {
             // auth: {}, // Default is get from AppConfigProvider
+            auth: {
+                token: '5474r2x214z284d4w2b4y4n5v2t5a4n5a4j46464t5n5',
+                userId: '1600083836',
+                portalId: 33167,
+                accountId: '1600083836',
+            },
             api: {
                 listing: {
-                    url: 'https://sandbox-survey.antsomi.com/api/v1/survey/performance',
+                    // url: 'https://sandbox-survey.antsomi.com/api/v1/survey/performance',
+                    url: 'https://sandbox-issue.antsomi.com/api/ticket/performance',
+                    params: {
+                        objType: 5,
+                        format: 'grid',
+                    },
                 },
                 column: {
-                    enabled: false,
+                    url: 'https://sandbox-issue.antsomi.com/api/column/index',
+                },
+                filter: {
+                    url: 'https://sandbox-issue.antsomi.com/api/filter/index',
+                },
+                search: {
+                    url: 'https://sandbox-survey.antsomi.com/api/v1/survey/performance',
+                    params: {
+                        limit: 100,
+                        page: 1,
+                    },
                 },
             },
             object: {
@@ -67,30 +66,75 @@ export const DataTableTest = () => {
             mainColumnKey: 'survey_id',
             columns: {
                 survey_name: {
-                    render: (value, record) => (React.createElement(Link, { to: `/survey/${record.survey_id}` },
-                        React.createElement(Typography.Link, null, value))),
+                    link: record => `/routes/${record.survey_id}`,
                 },
-                // toggle: {
-                //   title: 'Status',
-                //   valueKey: 'responses',
-                //   onChange: (checked, record) => {
-                //     console.log({ checked, record });
-                //   },
-                // },
             },
         },
+        search: {
+            addFilterInfo: {
+                metricId: 'survey_name',
+                operator: 'contain',
+            },
+            isClientSearch: true,
+            itemMapKeys: {
+                id: 'survey_id',
+                label: 'survey_name',
+            },
+            link: record => `/survey/${record.survey_id}`,
+            // isAddFilterFromSearchItem: true,
+            // onClickSearchItem(item) {
+            //   console.log({ item });
+            // },
+            // link(record) {
+            //   return `/survey/${record.survey_id}`;
+            // },
+        },
     });
-    const searchList = useMemo(() => {
-        const draft = SEARCH_LIST.entries.map(searchItem => ({
-            id: searchItem.id,
-            label: searchItem.name,
-            path: `/journey/${searchItem.id}`,
-        }));
-        return draft;
-    }, []);
-    // Store
-    const dataTableStore = DataTable.useDataTableStore();
-    const dataTableState = dataTableStore === null || dataTableStore === void 0 ? void 0 : dataTableStore.getState();
+    // const { filter, pagination, table, modifyColumn } = useDataTableListing<ProjectSurvey>({
+    //   name: 'permission-account',
+    //   config: {
+    //     //  NOTES: This is no need pass auth props when had
+    //     // Provider wrapper
+    //     env: 'development',
+    //     auth: {
+    //       token: '5474r2x214r284b41354y4a4m464d4m5r294k484t5y5',
+    //       userId: '1600003680',
+    //       accountId: '1600003680',
+    //       portalId: 76753,
+    //     },
+    //     api: {
+    //       listing: {
+    //         url: 'https://sandbox-permission.ants.vn/api/account/performance',
+    //         params: {
+    //           _state: 'app.permission.account',
+    //           format: 'grid',
+    //           objType: 4,
+    //         },
+    //       },
+    //       filter: {
+    //         url: 'https://sandbox-permission.ants.vn/api/filter/index',
+    //       },
+    //       column: {
+    //         url: 'https://sandbox-permission.ants.vn/api/column/index',
+    //       },
+    //     },
+    //     object: {
+    //       type: 4, // Survey,
+    //       objectId: -1,
+    //       // objectId: -1 // NOTES: will note detail when to use objectId, current is no need
+    //     },
+    //   },
+    //   table: {
+    //     mainColumnKey: 'user_id',
+    //     columns: {
+    //       survey_name: {
+    //         onCell: ({ status }) => ({
+    //           onClick: () => console.log({ status }),
+    //         }),
+    //       },
+    //     },
+    //   },
+    // });
     const onCollapse = useCallback((collapsed) => {
         setState(prev => (Object.assign(Object.assign({}, prev), { tableCollapsed: collapsed })));
     }, []);
@@ -100,17 +144,9 @@ export const DataTableTest = () => {
                         SAVE: {},
                         RESET: {},
                     } }), toolbar: {
-                    addButton: node => React.createElement("div", null, node),
+                    addButton: {},
                     actionButtons: {
-                        SEARCH: {
-                            searchList,
-                            isClientSearch: true,
-                            addFilterInfo: {
-                                operator: 'contains',
-                                metricId: 'story_name',
-                            },
-                            // buttonProps: { disabled: true },
-                        },
+                        SEARCH: search,
                         COLUMN: modifyColumn,
                     },
                     selectedRowButtons: {
@@ -136,5 +172,6 @@ export const DataTableTest = () => {
                         collapsed: tableCollapsed,
                         onCollapse,
                     },
-                }, pagination: pagination }))));
+                }, pagination: pagination })),
+        React.createElement(ReactQueryDevtools, { initialIsOpen: false })));
 };

package/es/utils/dataTable.d.ts CHANGED Viewed

@@ -1,5 +1,11 @@
+import { DataTableColumnDefItem, DataTableHeaderItem } from '../models/DataTable/DataTableListing';
+export declare const mapColumnDefItemToGeneral: (columnDefItem: DataTableColumnDefItem) => DataTableHeaderItem;
 export declare const mapResponseListingToGeneral: (response: Record<string, any>) => {
     body: any;
     header: any;
     total: any;
 };
+export declare const mapResponseSearchToGeneral: (response: Record<string, any>) => {
+    body: any;
+    total: any;
+};

package/es/utils/dataTable.js CHANGED Viewed

@@ -1,9 +1,26 @@
+export const mapColumnDefItemToGeneral = (columnDefItem) => ({
+    editable: false,
+    fixColumn: false,
+    label: columnDefItem.header,
+    name: columnDefItem.name,
+    sortable: !!parseInt(columnDefItem.enableSorting),
+    type: parseInt(columnDefItem.type),
+});
 // NOTES: Improve typescript
 export const mapResponseListingToGeneral = (response) => {
     const { body, header, total, entries, column_defs, rows, total_records } = response || {};
     return {
         body: body || entries || rows || [],
-        header: header || column_defs || [],
+        header: header ||
+            column_defs.map(columnDefItem => mapColumnDefItemToGeneral(columnDefItem || {})) ||
+            [],
         total: total || total_records || 0,
     };
 };
+export const mapResponseSearchToGeneral = (response) => {
+    const { total, rows, body } = response || {};
+    return {
+        body: body || rows || [],
+        total: total || 0,
+    };
+};

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.410",
+  "version": "1.3.5-beta.411",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",