@antscorp/antsomi-ui 1.3.5-beta.405 → 1.3.5-beta.407

package/es/components/organism/DataTable/components/Table/ResizableCell.d.ts

@@ -7,6 +7,9 @@ interface ResizableCellProps extends Omit<React.ThHTMLAttributes<HTMLTableCellEl
     width?: number;
     handleProps?: HandleProps;
     disableResize?: boolean;
+    fixed?: string;
+    index?: number;
+    tableRef?: React.RefObject<HTMLDivElement>;
 }
 export declare const ResizableCell: React.FC<ResizableCellProps>;
 export {};

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

@@ -10,18 +10,35 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 // Libraries
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Resizable } from 'react-resizable';
+import { MIN_COLUMN_WIDTH } from '../../constants';
+// Components
+import { Typography } from '@antscorp/antsomi-ui/es/components/atoms';
 export const ResizableCell = props => {
     var _a;
-    const { width, handleProps, disableResize, onResize } = props, restProps = __rest(props, ["width", "handleProps", "disableResize", "onResize"]);
+    const { width, handleProps, disableResize, onResize, children, style, fixed, index, tableRef } = props, restProps = __rest(props, ["width", "handleProps", "disableResize", "onResize", "children", "style", "fixed", "index", "tableRef"]);
+    // Memos
+    const columnStyle = useMemo(() => (Object.assign(Object.assign({}, style), { zIndex: fixed ? 100 - (index || 0) : undefined })), [style, fixed, index]);
     const isRowSelectionCol = (_a = props === null || props === void 0 ? void 0 : props.className) === null || _a === void 0 ? void 0 : _a.includes('antsomi-table-selection-column');
     if (isRowSelectionCol || !width || disableResize) {
-        return React.createElement("th", Object.assign({}, restProps));
+        return (React.createElement("th", Object.assign({}, restProps, { style: columnStyle }),
+            React.createElement(Typography.Text, { ellipsis: { tooltip: true } }, children)));
     }
-    return (React.createElement(Resizable, { width: width || 0, height: 0, handle: React.createElement("div", { className: "resizable-handle-wrapper", onClick: e => {
+    const toggleCellClass = (className = 'resizable-cell') => {
+        var _a, _b;
+        (_b = (_a = tableRef === null || tableRef === void 0 ? void 0 : tableRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.antsomi-table-row')) === null || _b === void 0 ? void 0 : _b.forEach(rowEl => {
+            var _a;
+            const cell = (_a = rowEl.querySelectorAll(`.antsomi-table-cell`)) === null || _a === void 0 ? void 0 : _a[1];
+            if (cell) {
+                cell.classList.toggle(className);
+            }
+        });
+    };
+    return (React.createElement(Resizable, { width: width || 0, height: 0, minConstraints: [MIN_COLUMN_WIDTH, 0], handle: React.createElement("div", { className: "resizable-handle-wrapper", onClick: e => {
                 e.stopPropagation();
             } },
             React.createElement("span", Object.assign({ className: "resizable-handle" }, handleProps))), onResize: (...args) => onResize && onResize(...args), draggableOpts: { enableUserSelectHack: true } },
-        React.createElement("th", Object.assign({}, restProps, { tabIndex: 0 }))));
+        React.createElement("th", Object.assign({}, restProps, { style: columnStyle }),
+            React.createElement(Typography.Text, { ellipsis: { tooltip: true } }, children))));
 };

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

@@ -1,14 +1,3 @@
-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, useCallback, useRef, useState } from 'react';
 import { cloneDeep } from 'lodash';
@@ -41,12 +30,21 @@ export const Table = memo(() => {
     // Variables
     const { scroll } = tableProps;
     // Handles
-    const handleResize = useCallback((index) => (e, _a) => {
-        var { size } = _a, restOfCallback = __rest(_a, ["size"]);
+    const handleResize = useCallback((index) => (e, { size }) => {
         const nextColumns = cloneDeep(columns || []);
         nextColumns[index] = Object.assign(Object.assign({}, nextColumns[index]), { width: size.width });
         setState(prev => (Object.assign(Object.assign({}, prev), { columns: nextColumns })));
     }, [columns]);
+    const calculateLastColWidth = (col) => {
+        var _a, _b;
+        // If last column is fixed then return full rest of width
+        if (col.fixed) {
+            return '100%';
+        }
+        const restOfWidth = ((((_a = tableProps.columns) === null || _a === void 0 ? void 0 : _a.length) || 1) - 1) * DEFAULT_COLUMN_WIDTH;
+        const tableWidth = ((_b = tableRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth) || restOfWidth;
+        return tableWidth > restOfWidth ? tableWidth - restOfWidth : DEFAULT_COLUMN_WIDTH;
+    };
     // Effects
     useDeepCompareEffect(() => {
         if (tableProps.columns) {
@@ -55,7 +53,7 @@ export const Table = memo(() => {
                 return (Object.assign(Object.assign({}, prev), { columns: (_a = tableProps.columns) === null || _a === void 0 ? void 0 : _a.map((col, index) => {
                         var _a, _b;
                         return (Object.assign(Object.assign({}, col), { width: index === (((_a = tableProps.columns) === null || _a === void 0 ? void 0 : _a.length) || 1) - 1
-                                ? 'auto'
+                                ? calculateLastColWidth(col)
                                 : (_b = col.width) !== null && _b !== void 0 ? _b : (DEFAULT_COLUMN_WIDTHS[index] || DEFAULT_COLUMN_WIDTH) }));
                     }) }));
             });
@@ -76,8 +74,11 @@ export const Table = memo(() => {
     }), { columns: columns === null || columns === void 0 ? void 0 : columns.map((col, index) => (Object.assign(Object.assign({}, col), { onHeaderCell: (column) => {
                 var _a;
                 return ({
+                    tableRef,
                     disableResize: index === ((columns === null || columns === void 0 ? void 0 : columns.length) || 1) - 1,
+                    fixed: column.fixed,
                     width: column.width,
+                    index,
                     handleProps: {
                         style: {
                             height: (_a = tableRef === null || tableRef === void 0 ? void 0 : tableRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight,
@@ -88,5 +89,5 @@ export const Table = memo(() => {
             } }))), bordered: true, pagination: false, loading: {
             indicator: React.createElement(Spin, null),
             spinning: !!tableProps.loading,
-        }, tableLayout: "auto" })));
+        }, tableLayout: "fixed" })));
 });

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

@@ -18,6 +18,16 @@ export const StyledTable = styled(Table) `
         }
       }
     }
+
+    .antsomi-table-body {
+      .antsomi-table-row {
+        .antsomi-table-cell {
+          &.resizable-cell {
+            border-inline-end: 2px solid ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue1} !important;
+          }
+        }
+      }
+    }
   }
 
   thead.antsomi-table-thead {
@@ -26,7 +36,6 @@ export const StyledTable = styled(Table) `
   }
 
   /* Style handle resize */
-
   .resizable-handle-wrapper {
     position: absolute;
     top: 0px;
@@ -34,7 +43,7 @@ export const StyledTable = styled(Table) `
     width: 20px;
     display: flex;
     justify-content: center;
-    z-index: 20;
+    z-index: 10;
     cursor: col-resize;
 
     .resizable-handle {

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

@@ -1,6 +1,7 @@
 declare const DATA_TABLE_PREFIX = "data-table";
 declare const DATA_TABLE_DEFAULT_NAME = "default";
 declare const DEFAULT_COLUMN_WIDTH = 200;
+declare const MIN_COLUMN_WIDTH = 100;
 declare const DEFAULT_ROW_SELECTION_WIDTH = 47;
 declare const DEFAULT_COLUMN_WIDTHS: number[];
-export { DATA_TABLE_DEFAULT_NAME, DATA_TABLE_PREFIX, DEFAULT_COLUMN_WIDTH, DEFAULT_ROW_SELECTION_WIDTH, DEFAULT_COLUMN_WIDTHS, };
+export { DATA_TABLE_DEFAULT_NAME, DATA_TABLE_PREFIX, DEFAULT_COLUMN_WIDTH, DEFAULT_ROW_SELECTION_WIDTH, MIN_COLUMN_WIDTH, DEFAULT_COLUMN_WIDTHS, };

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

@@ -1,7 +1,8 @@
 const DATA_TABLE_PREFIX = 'data-table';
 const DATA_TABLE_DEFAULT_NAME = 'default';
 const DEFAULT_COLUMN_WIDTH = 200;
+const MIN_COLUMN_WIDTH = 100;
 const DEFAULT_FIRST_COLUMN_WIDTH = 200;
 const DEFAULT_ROW_SELECTION_WIDTH = 47;
 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, DEFAULT_COLUMN_WIDTHS, };
+export { DATA_TABLE_DEFAULT_NAME, DATA_TABLE_PREFIX, DEFAULT_COLUMN_WIDTH, DEFAULT_ROW_SELECTION_WIDTH, MIN_COLUMN_WIDTH, DEFAULT_COLUMN_WIDTHS, };

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

@@ -3,13 +3,16 @@ import { TEnv } from '@antscorp/antsomi-ui/es/types/config';
 import { AxiosRequestConfig } from 'axios';
 import { FilterItem, TableProps } from '../../types';
 import { PaginationProps } from '../../components';
+export type TApiGlobal = AxiosRequestConfig<any> & {
+    enabled?: boolean;
+};
 export type TConfig = {
     env?: TEnv;
     auth?: TServiceAuth;
     api?: {
-        listing?: AxiosRequestConfig<any>;
-        column?: AxiosRequestConfig<any>;
-        filter?: AxiosRequestConfig<any>;
+        listing?: TApiGlobal;
+        column?: TApiGlobal;
+        filter?: TApiGlobal;
     };
     object?: {
         type: number;

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

@@ -7,8 +7,19 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         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 { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { isEmpty } from 'lodash';
 // Types
 import { useAppConfigContext } from '@antscorp/antsomi-ui/es/providers';
@@ -47,9 +58,9 @@ export function useDataTableListing(props) {
     // 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 { url: columnUrl = `${COLUMN_DOMAIN[env || 'development']}/api/column` } = apiColumn || {};
-    const { url: filterUrl = `${COLUMN_DOMAIN[env || 'development']}/api/filter` } = apiFilter || {};
-    const { url: listingUrl = '' } = apiListing || {};
+    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 } = state;
     const modifyColumnAuth = Object.assign(Object.assign({}, auth), { url: columnUrl });
     const filterAuth = Object.assign(Object.assign({}, auth), { url: filterUrl });
@@ -70,24 +81,40 @@ export function useDataTableListing(props) {
         args: {
             auth: modifyColumnAuth,
             params: mapObject,
+            request: restOfApiColumnRequest,
+        },
+        options: {
+            enabled: enabledApiColumn,
         },
     });
     const { data: modifyColumnsData, isLoading: isModifyColumnsLoading } = useGetModifyColumnList({
         args: {
             auth: modifyColumnAuth,
             params: mapObject,
+            request: restOfApiColumnRequest,
+        },
+        options: {
+            enabled: enabledApiColumn,
         },
     });
     const { data: savedFiltersData } = useGetSavedFilterList({
         args: {
             auth: filterAuth,
             params: mapObject,
+            request: restOfApiFilterRequest,
+        },
+        options: {
+            enabled: enabledApiFilter,
         },
     });
     const { data: filterMetricsData } = useGetFilterMetricList({
         args: {
             auth: filterAuth,
             params: mapObject,
+            request: restOfApiFilterRequest,
+        },
+        options: {
+            enabled: enabledApiFilter,
         },
     });
     const { data: tableListing, isLoading: isTableListingLoading, isRefetching: isTableListingRefetching, refetch: refetchTableListing, } = useGetTableListing({
@@ -98,9 +125,10 @@ export function useDataTableListing(props) {
                 page: pagination.page,
                 filter: JSON.stringify(mapFiltersToApiFilters(filters || [])),
             },
+            request: restOfApiListingRequest,
         },
         options: {
-            enabled: !!(listingAuth === null || listingAuth === void 0 ? void 0 : listingAuth.url) && !!(listingAuth === null || listingAuth === void 0 ? void 0 : listingAuth.token),
+            enabled: !!(listingAuth === null || listingAuth === void 0 ? void 0 : listingAuth.url) && !!(listingAuth === null || listingAuth === void 0 ? void 0 : listingAuth.token) && enabledApiListing,
         },
     });
     // Variables
@@ -179,8 +207,10 @@ export function useDataTableListing(props) {
                     key: name,
                     dataIndex: name,
                     title: label,
-                    ellipsis: true,
                     fixed: fixColumn ? 'left' : undefined,
+                    render(value, record, index) {
+                        return React.createElement(Text, { ellipsis: { tooltip: true } }, value);
+                    },
                     // render(value, record, index) {
                     //   return (
                     //     <Text ellipsis={{ tooltip: true }} style={{ width: 'fit-content' }}>
@@ -231,7 +261,7 @@ export function useDataTableListing(props) {
         refetchTableListing();
     }, [mapObject, refetchTableListing, updateModifyColumn]);
     const onApplyModifyColumn = useCallback((args) => __awaiter(this, void 0, void 0, function* () {
-        var _a;
+        var _d;
         const { selectedMetrics, columnSetName, existColumnSet } = args || {};
         const flattenMetrics = flatTree(columnMetricsData, 'child');
         const selectedColumnMetrics = selectedMetrics
@@ -244,7 +274,7 @@ export function useDataTableListing(props) {
             exitModifyColumnId = (existColumnSet === null || existColumnSet === void 0 ? void 0 : existColumnSet.id) || '';
             if (columnSetName === '') {
                 exitModifyColumnId =
-                    ((_a = modifyColumnsData === null || modifyColumnsData === void 0 ? void 0 : modifyColumnsData.find(modifyColumn => modifyColumn.modifyName === 'Custom')) === null || _a === void 0 ? void 0 : _a.modifyColId) || '';
+                    ((_d = modifyColumnsData === null || modifyColumnsData === void 0 ? void 0 : modifyColumnsData.find(modifyColumn => modifyColumn.modifyName === 'Custom')) === null || _d === void 0 ? void 0 : _d.modifyColId) || '';
             }
         }
         /**

package/es/providers/ConfigProvider/GlobalStyle.js

@@ -375,6 +375,10 @@ export const GlobalStyle = () => {
       }
 
       .antsomi-picker-dropdown__advanced {
+        &.antsomi-picker-dropdown > .antsomi-picker-panel-container {
+          border-radius: 10px;
+        }
+
         > .antsomi-picker-panel-container > .antsomi-picker-panel-layout > .antsomi-picker-panel {
           flex-direction: column-reverse;
           padding-bottom: 60px;

package/es/queries/DataTable/index.js

@@ -8,11 +8,11 @@ const { GET_COLUMN_METRICS, GET_MODIFY_COLUMN_LIST, GET_SAVED_FILTER_LIST, GET_F
 /* Column */
 export const useGetColumnMetrics = (params) => {
     const { args, options } = params;
-    return useQuery(Object.assign({ queryKey: [GET_COLUMN_METRICS, args.params], queryFn: () => dataTableServices.column.getColumnMetrics(args) }, options));
+    return useQuery(Object.assign({ queryKey: [GET_COLUMN_METRICS, args.params, args.request], queryFn: () => dataTableServices.column.getColumnMetrics(args) }, options));
 };
 export const useGetModifyColumnList = (params) => {
     const { args, options } = params;
-    return useQuery(Object.assign({ queryKey: [GET_MODIFY_COLUMN_LIST, args.params], queryFn: () => dataTableServices.column.getModifyColumnList(args) }, options));
+    return useQuery(Object.assign({ queryKey: [GET_MODIFY_COLUMN_LIST, args.params, args.request], queryFn: () => dataTableServices.column.getModifyColumnList(args) }, options));
 };
 export const useUpdateModifyColumn = (params) => {
     const { options, auth } = params || {};
@@ -44,11 +44,11 @@ export const useDeleteModifyColumn = (params) => {
 /* Filter */
 export const useGetSavedFilterList = (params) => {
     const { args, options } = params;
-    return useQuery(Object.assign({ queryKey: [GET_SAVED_FILTER_LIST, args.params], queryFn: () => dataTableServices.filter.getSavedFilterList(args) }, options));
+    return useQuery(Object.assign({ queryKey: [GET_SAVED_FILTER_LIST, args.params, args.request], queryFn: () => dataTableServices.filter.getSavedFilterList(args) }, options));
 };
 export const useGetFilterMetricList = (params) => {
     const { args, options } = params;
-    return useQuery(Object.assign({ queryKey: [GET_FILTER_METRIC_LIST, args.params], queryFn: () => dataTableServices.filter.getFilterMetricList(args) }, options));
+    return useQuery(Object.assign({ queryKey: [GET_FILTER_METRIC_LIST, args.params, args.request], queryFn: () => dataTableServices.filter.getFilterMetricList(args) }, options));
 };
 export const useSaveFilter = (params) => {
     const { options, auth } = params || {};
@@ -80,5 +80,5 @@ export const useDeleteSavedFilter = (params) => {
 /* Table Listing */
 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], queryFn: () => dataTableServices.listing.getTableListing(args) }, options));
+    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));
 };

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

@@ -1,3 +1,4 @@
+import { AxiosRequestConfig } from 'axios';
 import { TServiceAuth } from '../../types';
 import { ColumnMetric, FilterMetric, ModifyColumn } from '../../models/DataTable';
 import { SavedFilter } from '../../models/DataTable/SavedFilter';
@@ -10,10 +11,12 @@ export type TGlobalApiParams = {
 export type TGetMetricListArgs = {
     auth?: TServiceAuth;
     params?: TGlobalApiParams;
+    request?: AxiosRequestConfig<any>;
 };
 export type TGetModifyColumnListArgs = {
     auth?: TServiceAuth;
     params?: TGlobalApiParams;
+    request?: AxiosRequestConfig<any>;
 };
 export type TUpdateModifyColumnArgs = {
     auth?: TServiceAuth;
@@ -40,10 +43,12 @@ export type TDeleteModifyColumnArgs = {
 export type TGetSavedFilterListArgs = {
     auth?: TServiceAuth;
     params?: TGlobalApiParams;
+    request?: AxiosRequestConfig<any>;
 };
 export type TGetFilterMetricListArgs = {
     auth?: TServiceAuth;
     params?: TGlobalApiParams;
+    request?: AxiosRequestConfig<any>;
 };
 export type TSaveFilterArgs = {
     auth?: TServiceAuth;
@@ -74,11 +79,12 @@ export type TGetTableListingArgs = {
         page?: number;
         filter?: string;
     };
+    request?: AxiosRequestConfig<any>;
 };
 export declare const dataTableServices: {
     column: {
-        getColumnMetrics: ({ auth, params }: TGetMetricListArgs) => Promise<ColumnMetric[]>;
-        getModifyColumnList: ({ auth, params, }: TGetModifyColumnListArgs) => Promise<ModifyColumn[]>;
+        getColumnMetrics: ({ auth, params, request, }: TGetMetricListArgs) => Promise<ColumnMetric[]>;
+        getModifyColumnList: ({ auth, params, request, }: TGetModifyColumnListArgs) => Promise<ModifyColumn[]>;
         updateModifyColumn: ({ auth, data, }: TUpdateModifyColumnArgs) => Promise<{
             status: number;
         }>;
@@ -90,8 +96,8 @@ export declare const dataTableServices: {
         }>;
     };
     filter: {
-        getSavedFilterList: ({ auth, params, }: TGetSavedFilterListArgs) => Promise<SavedFilter[]>;
-        getFilterMetricList: ({ auth, params, }: TGetFilterMetricListArgs) => Promise<FilterMetric[]>;
+        getSavedFilterList: ({ auth, params, request, }: TGetSavedFilterListArgs) => Promise<SavedFilter[]>;
+        getFilterMetricList: ({ auth, params, request, }: TGetFilterMetricListArgs) => Promise<FilterMetric[]>;
         saveFilter: ({ auth, data }: TSaveFilterArgs) => Promise<{
             status: number;
         }>;
@@ -103,6 +109,6 @@ export declare const dataTableServices: {
         }>;
     };
     listing: {
-        getTableListing<T = any>({ auth, params, }: TGetTableListingArgs): Promise<DataTableListing<T>>;
+        getTableListing<T = any>({ auth, params, request, }: TGetTableListingArgs): Promise<DataTableListing<T>>;
     };
 };

package/es/services/DataTable/index.js

@@ -32,29 +32,21 @@ const mapAuth = (auth) => {
 };
 export const dataTableServices = {
     column: {
-        getColumnMetrics: (_a) => __awaiter(void 0, [_a], void 0, function* ({ auth, params }) {
+        getColumnMetrics: (_a) => __awaiter(void 0, [_a], void 0, function* ({ auth, params, request, }) {
             const { url } = auth || {};
             const { type = GET_COLUMNS, objType, objId } = params || {};
-            const response = yield axios({
-                url,
-                method: 'GET',
-                params: Object.assign(Object.assign({}, mapAuth(auth)), { type,
+            const response = yield axios(Object.assign(Object.assign({}, request), { url, method: 'GET', params: Object.assign(Object.assign(Object.assign({}, request === null || request === void 0 ? void 0 : request.params), mapAuth(auth)), { type,
                     objType,
-                    objId }),
-            });
+                    objId }) }));
             return get(response, 'data.data.metrics', []);
         }),
-        getModifyColumnList: (_b) => __awaiter(void 0, [_b], void 0, function* ({ auth, params, }) {
+        getModifyColumnList: (_b) => __awaiter(void 0, [_b], void 0, function* ({ auth, params, request, }) {
             try {
                 const { url } = auth || {};
                 const { type = GET_LIST_MODIFY_COLUMN, objType, objId } = params || {};
-                const response = yield axios({
-                    url,
-                    method: 'GET',
-                    params: Object.assign(Object.assign({}, mapAuth(auth)), { type,
+                const response = yield axios(Object.assign(Object.assign({}, request), { url, method: 'GET', params: Object.assign(Object.assign(Object.assign({}, request === null || request === void 0 ? void 0 : request.params), mapAuth(auth)), { type,
                         objType,
-                        objId }),
-                });
+                        objId }) }));
                 return get(response, 'data.data.modifyColumns', []);
             }
             catch (error) {
@@ -107,34 +99,26 @@ export const dataTableServices = {
         }),
     },
     filter: {
-        getSavedFilterList: (_j) => __awaiter(void 0, [_j], void 0, function* ({ auth, params, }) {
+        getSavedFilterList: (_j) => __awaiter(void 0, [_j], void 0, function* ({ auth, params, request, }) {
             try {
                 const { url } = auth || {};
                 const { type = GET_SAVED_FILTER, objType: object, objId } = params || {};
-                const response = yield axios({
-                    url,
-                    method: 'GET',
-                    params: Object.assign(Object.assign({}, mapAuth(auth)), { type,
+                const response = yield axios(Object.assign(Object.assign({}, request), { url, method: 'GET', params: Object.assign(Object.assign(Object.assign({}, request === null || request === void 0 ? void 0 : request.params), mapAuth(auth)), { type,
                         object,
-                        objId }),
-                });
+                        objId }) }));
                 return get(response, 'data.data.filters', []);
             }
             catch (error) {
                 return Promise.reject(error);
             }
         }),
-        getFilterMetricList: (_k) => __awaiter(void 0, [_k], void 0, function* ({ auth, params, }) {
+        getFilterMetricList: (_k) => __awaiter(void 0, [_k], void 0, function* ({ auth, params, request, }) {
             try {
                 const { url } = auth || {};
                 const { type = GET_LIST_FILTER, objType: object, objId } = params || {};
-                const response = yield axios({
-                    url,
-                    method: 'GET',
-                    params: Object.assign(Object.assign({}, mapAuth(auth)), { type,
+                const response = yield axios(Object.assign(Object.assign({}, request), { url, method: 'GET', params: Object.assign(Object.assign(Object.assign({}, request === null || request === void 0 ? void 0 : request.params), mapAuth(auth)), { type,
                         object,
-                        objId }),
-                });
+                        objId }) }));
                 return get(response, 'data.data.filters', []);
             }
             catch (error) {
@@ -198,13 +182,9 @@ export const dataTableServices = {
     },
     listing: {
         getTableListing(_a) {
-            return __awaiter(this, arguments, void 0, function* ({ auth, params, }) {
+            return __awaiter(this, arguments, void 0, function* ({ auth, params, request, }) {
                 try {
-                    const response = yield axios({
-                        url: `${auth === null || auth === void 0 ? void 0 : auth.url}`,
-                        method: 'GET',
-                        params: Object.assign(Object.assign({}, mapAuth(auth)), params),
-                    });
+                    const response = yield axios(Object.assign(Object.assign({}, request), { url: `${auth === null || auth === void 0 ? void 0 : auth.url}`, method: 'GET', params: Object.assign(Object.assign(Object.assign({}, request === null || request === void 0 ? void 0 : request.params), mapAuth(auth)), params) }));
                     return get(response, 'data.data', {
                         body: [],
                         header: [],

package/es/tests/DataTableTest.js

@@ -53,6 +53,9 @@ export const DataTableTest = () => {
                 listing: {
                     url: 'https://sandbox-survey.antsomi.com/api/v1/survey/performance',
                 },
+                column: {
+                    enabled: false,
+                },
             },
             object: {
                 objectId: -1, // Current just support for survey

package/package.json

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