@antscorp/antsomi-ui 1.3.5-beta.408 → 1.3.5-beta.409

package/es/components/organism/DataTable/components/Filter/FilterCondition/index.js

@@ -12,7 +12,6 @@ const { BETWEEN, EXISTS, NOT_EXISTS } = OPERATORS_OPTION;
 export const FilterCondition = props => {
     // Props
     const { filterMetric, filterCondition, onCancel, onApply } = props;
-    console.log('🚀 ~ filterMetric, filterCondition:', filterMetric, filterCondition);
     // Hooks
     const [form] = Form.useForm();
     // Form

package/es/components/organism/DataTable/components/Filter/FilterConditionList.js

@@ -23,7 +23,6 @@ const { t } = i18nInstance;
 export const FilterConditionList = memo(() => {
     // Store
     const { filterMetrics, filters, isFilterActive, onChangeFilters = () => { }, } = useDataTableContext(store => store.filter);
-    console.log('🚀 ~ constFilterConditionList:React.FC<FilterConditionListProps>=memo ~ filters:', filters, filterMetrics);
     const setFilter = useDataTableContext(store => store.setFilter);
     // State
     /* Reserve for handle popover open per filter condition */

package/es/components/organism/DataTable/components/Filter/SavedFilterAndMetrics.js

@@ -81,8 +81,7 @@ export const SavedFilterAndMetrics = memo(props => {
                                             return new Promise((resolve, reject) => {
                                                 if (onRemove) {
                                                     onRemove(savedFilter)
-                                                        .then(response => {
-                                                        console.log({ response });
+                                                        .then(() => {
                                                         resolve(true);
                                                     })
                                                         .catch(() => reject());

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

@@ -29,7 +29,7 @@ export const ResizableCell = props => {
         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];
+            const cell = (_a = rowEl.querySelectorAll(`.antsomi-table-cell`)) === null || _a === void 0 ? void 0 : _a[(index !== null && index !== void 0 ? index : 0) + 1];
             if (cell) {
                 cell.classList.toggle(className);
             }
@@ -37,7 +37,7 @@ export const ResizableCell = props => {
     };
     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();
-            } },
+            }, onMouseEnter: () => toggleCellClass(), onMouseLeave: () => toggleCellClass() },
             React.createElement("span", Object.assign({ className: "resizable-handle" }, handleProps))), onResize: (...args) => onResize && onResize(...args), draggableOpts: { enableUserSelectHack: true } },
         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

@@ -59,7 +59,7 @@ export const Table = memo(() => {
             });
         }
     }, [tableProps.columns]);
-    return (React.createElement(StyledTable, Object.assign({}, tableProps, { ref: ref => {
+    return (React.createElement(StyledTable, Object.assign({}, tableProps, { virtual: true, ref: ref => {
             tableRef.current = ref === null || ref === void 0 ? void 0 : ref.nativeElement;
         }, scroll: Object.assign(Object.assign({}, scroll), { y: (scroll === null || scroll === void 0 ? void 0 : scroll.y) || '500px', x: (scroll === null || scroll === void 0 ? void 0 : scroll.x) || '100%' }), components: {
             header: Object.assign({ cell: ResizableCell }, (_a = tableProps === null || tableProps === void 0 ? void 0 : tableProps.components) === null || _a === void 0 ? void 0 : _a.header),
@@ -71,22 +71,19 @@ export const Table = memo(() => {
                 });
                 (_b = (_a = tableProps === null || tableProps === void 0 ? void 0 : tableProps.rowSelection) === null || _a === void 0 ? void 0 : _a.onChange) === null || _b === void 0 ? void 0 : _b.call(_a, selectedRowKeys, selectedRows, info);
             } }),
-    }), { 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,
-                        },
-                    },
-                    onResize: handleResize(index),
-                });
-            } }))), bordered: true, pagination: false, loading: {
+    }), { columns: columns === null || columns === void 0 ? void 0 : columns.map((col, index) => (Object.assign(Object.assign({}, col), { onHeaderCell: (column) => ({
+                tableRef,
+                disableResize: index === ((columns === null || columns === void 0 ? void 0 : columns.length) || 1) - 1,
+                fixed: column.fixed,
+                width: column.width,
+                index,
+                // handleProps: {
+                //   style: {
+                //     height: tableRef?.current?.clientHeight,
+                //   },
+                // },
+                onResize: handleResize(index),
+            }) }))), bordered: true, pagination: false, loading: {
             indicator: React.createElement(Spin, null),
             spinning: !!tableProps.loading,
         }, tableLayout: "fixed" })));

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

@@ -19,7 +19,7 @@ export const StyledTable = styled(Table) `
       }
     }
 
-    .antsomi-table-body {
+    .antsomi-table-tbody-virtual {
       .antsomi-table-row {
         .antsomi-table-cell {
           &.resizable-cell {
@@ -39,8 +39,9 @@ export const StyledTable = styled(Table) `
   .resizable-handle-wrapper {
     position: absolute;
     top: 0px;
-    right: -10.5px;
+    right: -10px;
     width: 20px;
+    height: 100%;
     display: flex;
     justify-content: center;
     z-index: 10;

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

@@ -1,7 +1,8 @@
 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 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, };
+export { DATA_TABLE_DEFAULT_NAME, DATA_TABLE_PREFIX, DEFAULT_COLUMN_WIDTH, DEFAULT_ROW_SELECTION_WIDTH, MIN_COLUMN_WIDTH, DEFAULT_COLUMN_WIDTHS, DEFAULT_TOGGLE_WIDTH, };

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

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

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

@@ -3,6 +3,7 @@ import { TEnv } from '@antscorp/antsomi-ui/es/types/config';
 import { AxiosRequestConfig } from 'axios';
 import { FilterItem, TableProps } from '../../types';
 import { PaginationProps } from '../../components';
+import { ColumnType } from 'antd/es/table';
 export type TApiGlobal = AxiosRequestConfig<any> & {
     enabled?: boolean;
 };
@@ -19,11 +20,20 @@ export type TConfig = {
         objectId: number;
     };
 };
+type TToggleColumnType<TTableType> = ColumnType<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> {
     config: TConfig;
     name?: string;
-    table?: TableProps<TTableType> & {
+    table?: Omit<TableProps<TTableType>, 'columns'> & {
         mainColumnKey: keyof TTableType;
+        columns?: {
+            [K in keyof TTableType | 'toggle']?: TTableColumnType<TTableType, K>;
+        };
     };
 }
 export interface DataTableLocalStorage {
@@ -33,3 +43,4 @@ export interface DataTableLocalStorage {
     };
     pagination?: PaginationProps;
 }
+export {};

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

@@ -1,11 +1,29 @@
+import React from 'react';
+import { useGetColumnMetrics, useGetFilterMetricList, useGetModifyColumnList, useGetSavedFilterList, useGetTableListing } from '@antscorp/antsomi-ui/es/queries';
 import { UseDataTableListingProps } from './types';
-import { FilterProps, TColumnActionButton, TableProps } from '../../types';
+import { FilterItem, FilterProps, TColumnActionButton, TableProps } from '../../types';
 import { PaginationProps } from '../../components';
 interface TUseDataTableListing<TTableType = any> {
     modifyColumn: TColumnActionButton;
     filter: FilterProps;
     pagination: PaginationProps;
     table: TableProps<TTableType>;
+    selectedRowKeys: React.Key[];
+    queries: {
+        getTableListing: ReturnType<typeof useGetTableListing>;
+        getModifyColumnList: ReturnType<typeof useGetModifyColumnList>;
+        getSavedFilterList: ReturnType<typeof useGetSavedFilterList>;
+        getColumnMetrics: ReturnType<typeof useGetColumnMetrics>;
+        getFilterMetricList: ReturnType<typeof useGetFilterMetricList>;
+    };
+    setDatTableListingState: React.Dispatch<React.SetStateAction<TState<TTableType>>>;
 }
+type TState<TTableType = any> = {
+    filters?: FilterItem[];
+    selectedFilterId?: string | number;
+    pagination: PaginationProps;
+    table: TableProps<TTableType>;
+    selectedRowKeys: React.Key[];
+};
 export declare function useDataTableListing<TTableType = Record<string, any>>(props: UseDataTableListingProps<TTableType>): TUseDataTableListing<TTableType>;
 export {};

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

@@ -24,7 +24,7 @@ import { isEmpty } from 'lodash';
 // Types
 import { useAppConfigContext } from '@antscorp/antsomi-ui/es/providers';
 // Components
-import { Typography } from '@antscorp/antsomi-ui/es/components/atoms';
+import { Typography, Switch, Flex } from '@antscorp/antsomi-ui/es/components/atoms';
 // Constants
 import { COLUMN_DOMAIN } from '@antscorp/antsomi-ui/es/constants';
 import { MODIFY_COLUMN_DISABLE_EDITABLE, MODIFY_COLUMN_DISABLE_REMOVE, SAVED_FILTER_DEFAULT, TABLE_LISTING_PREFIX, } from './constants';
@@ -35,6 +35,7 @@ import { useCreateModifyColumn, useDeleteModifyColumn, useDeleteSavedFilter, use
 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: [],
@@ -47,6 +48,7 @@ const initialState = {
     table: {
         loading: false,
     },
+    selectedRowKeys: [],
 };
 export function useDataTableListing(props) {
     // Props
@@ -61,7 +63,7 @@ export function useDataTableListing(props) {
     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 { filters, selectedFilterId, pagination, selectedRowKeys } = 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 });
@@ -77,7 +79,7 @@ export function useDataTableListing(props) {
         return jsonValues;
     }, [localStorageKey]);
     // Queries
-    const { data: columnMetricsData } = useGetColumnMetrics({
+    const getColumnMetrics = useGetColumnMetrics({
         args: {
             auth: modifyColumnAuth,
             params: mapObject,
@@ -87,7 +89,7 @@ export function useDataTableListing(props) {
             enabled: enabledApiColumn,
         },
     });
-    const { data: modifyColumnsData, isLoading: isModifyColumnsLoading } = useGetModifyColumnList({
+    const getModifyColumnList = useGetModifyColumnList({
         args: {
             auth: modifyColumnAuth,
             params: mapObject,
@@ -97,7 +99,7 @@ export function useDataTableListing(props) {
             enabled: enabledApiColumn,
         },
     });
-    const { data: savedFiltersData } = useGetSavedFilterList({
+    const getSavedFilterList = useGetSavedFilterList({
         args: {
             auth: filterAuth,
             params: mapObject,
@@ -107,7 +109,7 @@ export function useDataTableListing(props) {
             enabled: enabledApiFilter,
         },
     });
-    const { data: filterMetricsData } = useGetFilterMetricList({
+    const getFilterMetricList = useGetFilterMetricList({
         args: {
             auth: filterAuth,
             params: mapObject,
@@ -117,7 +119,7 @@ export function useDataTableListing(props) {
             enabled: enabledApiFilter,
         },
     });
-    const { data: tableListing, isLoading: isTableListingLoading, isRefetching: isTableListingRefetching, refetch: refetchTableListing, } = useGetTableListing({
+    const getTableListing = useGetTableListing({
         args: {
             auth: listingAuth,
             params: {
@@ -132,6 +134,11 @@ export function useDataTableListing(props) {
         },
     });
     // Variables
+    const { data: columnMetricsData } = getColumnMetrics || {};
+    const { data: modifyColumnsData, isLoading: isModifyColumnsLoading } = getModifyColumnList || {};
+    const { data: savedFiltersData } = getSavedFilterList || {};
+    const { data: filterMetricsData } = getFilterMetricList || {};
+    const { data: tableListing, isLoading: isTableListingLoading, isRefetching: isTableListingRefetching, refetch: refetchTableListing, } = getTableListing || {};
     const { body: tableBody, header: tableHeader, total } = tableListing || {};
     // Mutations
     const { mutateAsync: updateModifyColumn } = useUpdateModifyColumn({
@@ -198,30 +205,34 @@ export function useDataTableListing(props) {
         name: filterName,
         removable: true,
     }))) || []), [savedFiltersData]);
-    const tableColumns = useDeepCompareMemo(() => {
+    const tableColumns = useMemo(() => {
         let data = [];
-        data =
-            (tableHeader === null || tableHeader === void 0 ? void 0 : tableHeader.map(headerCol => {
-                const { name, label, fixColumn } = headerCol;
-                return {
-                    key: name,
-                    dataIndex: name,
-                    title: label,
-                    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' }}>
-                    //       {value}
-                    //     </Text>
-                    //   );
-                    // },
-                };
-            })) || [];
+        const { columns } = tableProps || {};
+        // Check if has column toggle then add toggle 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) => {
+                    const checked = value
+                        ? typeof value === 'function'
+                            ? value(record)
+                            : value
+                        : !!record[valueKey];
+                    return (React.createElement(Flex, { align: "center", justify: "center" },
+                        React.createElement(Switch, { checked: checked, onChange: checked => {
+                                if (onChange) {
+                                    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 data;
-    }, [tableHeader]);
+    }, [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]);
     // Effects
     /**
@@ -414,7 +425,23 @@ export function useDataTableListing(props) {
             loading: isTableListingLoading || isTableListingRefetching,
             columns: tableColumns,
             dataSource: tableData,
-            rowSelection: {},
+            rowSelection: {
+                selectedRowKeys,
+                onChange(selectedRowKeys) {
+                    setState(prev => (Object.assign(Object.assign({}, prev), { selectedRowKeys })));
+                },
+            },
+        },
+        selectedRowKeys,
+        /* Queries */
+        queries: {
+            getTableListing,
+            getModifyColumnList,
+            getSavedFilterList,
+            getColumnMetrics,
+            getFilterMetricList,
         },
+        // Handles
+        setDatTableListingState: setState,
     };
 }

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

@@ -8,6 +8,5 @@ export const createDataTableStore = (initProps) => createStore()(set => (Object.
     setState: newState => set(store => merge(cloneDeep(store), cloneDeep(newState))), setFilter: filter => {
         set(store => (Object.assign(Object.assign({}, store), { filter: Object.assign(Object.assign({}, store.filter), filter) })));
     }, setModifyColumn: modifyColumn => set(store => (Object.assign(Object.assign({}, store), { modifyColumn: Object.assign(Object.assign({}, store.modifyColumn), modifyColumn) }))), setTable: table => set(store => (Object.assign(Object.assign({}, store), { table: Object.assign(Object.assign({}, store.table), table) }))), setToolbar: toolbar => set(store => (Object.assign(Object.assign({}, store), { toolbar: Object.assign(Object.assign({}, store.toolbar), toolbar) }))), setPagination: pagination => {
-        console.log('🚀 ~ pagination:', pagination);
         set(store => (Object.assign(Object.assign({}, store), { pagination: Object.assign(Object.assign({}, store.pagination), pagination) })));
     } })));

package/es/providers/ConfigProvider/GlobalStyle.js

@@ -35,6 +35,7 @@ export const GlobalStyle = () => {
 
       .rc-virtual-list-scrollbar {
         width: 4px !important;
+        height: 4px !important;
       }
 
       /* Custom */

package/es/services/DataTable/index.js

@@ -23,6 +23,7 @@ import axios from 'axios';
 import { get } from 'lodash';
 // Constants
 import { COLUMN_API_TYPE, FILTER_API_TYPE } from '../../constants/dataTable';
+import { mapResponseListingToGeneral } 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  ---------- */
@@ -185,11 +186,7 @@ export const dataTableServices = {
             return __awaiter(this, arguments, void 0, function* ({ auth, params, request, }) {
                 try {
                     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: [],
-                        total: 0,
-                    });
+                    return mapResponseListingToGeneral(get(response, 'data.data', {}));
                 }
                 catch (error) {
                     return Promise.reject(error);

package/es/tests/DataTableTest.js

@@ -1,9 +1,9 @@
 // Libraries
 import React, { useCallback, useMemo, useState } from 'react';
-import { BrowserRouter } from 'react-router-dom';
+import { BrowserRouter, Link } from 'react-router-dom';
 // Components
 import { DataTable, } from '../components/organism/DataTable';
-import { Popover } from '../components';
+import { Popover, Typography } from '../components';
 // Styled
 import { TableTestWrapper } from './styled';
 // Constants
@@ -46,7 +46,7 @@ export const DataTableTest = () => {
     // Variables
     const { tableCollapsed } = state;
     // Hooks
-    const { modifyColumn, filter, pagination, table } = useDataTableListing({
+    const { modifyColumn, filter, pagination, table, selectedRowKeys } = useDataTableListing({
         config: {
             // auth: {}, // Default is get from AppConfigProvider
             api: {
@@ -65,6 +65,19 @@ export const DataTableTest = () => {
         name: 'survey',
         table: {
             mainColumnKey: 'survey_id',
+            columns: {
+                survey_name: {
+                    render: (value, record) => (React.createElement(Link, { to: `/survey/${record.survey_id}` },
+                        React.createElement(Typography.Link, null, value))),
+                },
+                // toggle: {
+                //   title: 'Status',
+                //   valueKey: 'responses',
+                //   onChange: (checked, record) => {
+                //     console.log({ checked, record });
+                //   },
+                // },
+            },
         },
     });
     const searchList = useMemo(() => {

package/es/utils/dataTable.d.ts

@@ -0,0 +1,5 @@
+export declare const mapResponseListingToGeneral: (response: Record<string, any>) => {
+    body: any;
+    header: any;
+    total: any;
+};

package/es/utils/dataTable.js

@@ -0,0 +1,9 @@
+// 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 || [],
+        total: total || total_records || 0,
+    };
+};

package/es/utils/index.d.ts

@@ -5,3 +5,4 @@ export * from './templateListing';
 export * from './styles';
 export * from './variables';
 export * from './actionButtons';
+export * from './dataTable';

package/es/utils/index.js

@@ -5,3 +5,4 @@ export * from './templateListing';
 export * from './styles';
 export * from './variables';
 export * from './actionButtons';
+export * from './dataTable';

package/package.json

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