@antscorp/antsomi-ui 1.7.6 → 1.7.7

package/es/components/icons/DataIcon.js

@@ -1,18 +1,8 @@
-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, { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
 export const DataIcon = forwardRef((props, ref) => {
-    const restProps = __rest(props, []);
-    return (React.createElement("svg", Object.assign({ ref: ref, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, restProps),
+    const { width, height } = useIcon(props);
+    return (React.createElement("svg", Object.assign({ viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg" }, props, { ref: ref, width: width, height: height }),
         React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M19.002 6.5C19.002 7.88071 15.6499 9 11.515 9C7.38 9 4.02795 7.88071 4.02795 6.5C4.02795 5.11929 7.38 4 11.515 4C15.6499 4 19.002 5.11929 19.002 6.5ZM18.974 12.131C18.974 13.42 15.622 14.465 11.487 14.465C7.352 14.465 4 13.419 4 12.131V8.46204C4 9.75104 7.352 10.795 11.487 10.795C15.622 10.795 18.974 9.74904 18.974 8.46204V12.131ZM18.974 17.8423C18.974 19.1313 15.622 20.1763 11.487 20.1763C7.352 20.1763 4 19.1303 4 17.8423V14.1733C4 15.4623 7.352 16.5063 11.487 16.5063C15.622 16.5063 18.974 15.4603 18.974 14.1733V17.8423Z", fill: "currentColor" })));
 });

package/es/components/icons/ExpandLessIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IconProps } from './type';
+export declare const ExpandLessIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

package/es/components/icons/ExpandLessIcon.js

@@ -0,0 +1,8 @@
+import React, { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const ExpandLessIcon = forwardRef((props, ref) => {
+    const { width, height } = useIcon(props);
+    return (React.createElement("svg", Object.assign({ viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg" }, props, { ref: ref, height: height, width: width }),
+        React.createElement("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
+        React.createElement("path", { d: "M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14l-6-6z" })));
+});

package/es/components/icons/GridViewIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IconProps } from './type';
+export declare const GridViewIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

package/es/components/icons/GridViewIcon.js

@@ -0,0 +1,10 @@
+// Libraries
+import React, { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const GridViewIcon = forwardRef((props, ref) => {
+    const { width, height } = useIcon(props);
+    return (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor" }, props, { ref: ref, height: height, width: width }),
+        React.createElement("g", { fillRule: "evenodd" },
+            React.createElement("path", { d: "M0 0h24v24H0z", fill: "none" }),
+            React.createElement("path", { d: "M3 3v8h8V3H3zm6 6H5V5h4v4zm-6 4v8h8v-8H3zm6 6H5v-4h4v4zm4-16v8h8V3h-8zm6 6h-4V5h4v4zm-6 4v8h8v-8h-8zm6 6h-4v-4h4v4z" }))));
+});

package/es/components/icons/SearchIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IconProps } from './type';
+export declare const SearchIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

package/es/components/icons/SearchIcon.js

@@ -0,0 +1,9 @@
+// Libraries
+import React, { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const SearchIcon = forwardRef((props, ref) => {
+    const { width, height } = useIcon(props);
+    return (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24" }, props, { ref: ref, height: height, width: width, fill: "currentColor" }),
+        React.createElement("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
+        React.createElement("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" })));
+});

package/es/components/icons/ViewColumnIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IconProps } from './type';
+export declare const ViewColumnIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

package/es/components/icons/ViewColumnIcon.js

@@ -0,0 +1,10 @@
+// Libraries
+import React, { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const ViewColumnIcon = forwardRef((props, ref) => {
+    const { width, height } = useIcon(props);
+    return (React.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", enableBackground: "new 0 0 24 24" }, props, { viewBox: "0 0 24 24", ref: ref, height: height, width: width, fill: "currentColor" }),
+        React.createElement("rect", { fill: "none", height: "24", width: "24" }),
+        React.createElement("g", null,
+            React.createElement("path", { d: "M14.67,5v14H9.33V5H14.67z M15.67,19H21V5h-5.33V19z M8.33,19V5H3v14H8.33z" }))));
+});

package/es/components/icons/hooks/useIcon.d.ts

@@ -1,5 +1,5 @@
 import { IconProps } from '../type';
 export declare const useIcon: (props: IconProps) => {
-    width: string | number | undefined;
-    height: string | number | undefined;
+    width: string | number;
+    height: string | number;
 };

package/es/components/icons/hooks/useIcon.js

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 export const useIcon = (props) => {
     const { size = 24 } = props;
-    const [width, height] = useMemo(() => [size || (props === null || props === void 0 ? void 0 : props.width), size || (props === null || props === void 0 ? void 0 : props.height)], [size, props.width, props.height]);
+    const [width, height] = useMemo(() => [(props === null || props === void 0 ? void 0 : props.width) || size, (props === null || props === void 0 ? void 0 : props.height) || size], [size, props.width, props.height]);
     return {
         width,
         height,

package/es/components/icons/index.d.ts

@@ -54,5 +54,9 @@ export { Interactive } from './Interactive';
 export { Web } from './Web';
 export { LocalMallIcon } from './LocalMallIcon';
 export { LoadingIcon } from './LoadingIcon';
-export { TableIcon } from './TableIcon';
 export { DataIcon } from './DataIcon';
+export { TableIcon } from './TableIcon';
+export { ExpandLessIcon } from './ExpandLessIcon';
+export { SearchIcon } from './SearchIcon';
+export { ViewColumnIcon } from './ViewColumnIcon';
+export { GridViewIcon } from './GridViewIcon';

package/es/components/icons/index.js

@@ -54,5 +54,9 @@ export { Interactive } from './Interactive';
 export { Web } from './Web';
 export { LocalMallIcon } from './LocalMallIcon';
 export { LoadingIcon } from './LoadingIcon';
-export { TableIcon } from './TableIcon';
 export { DataIcon } from './DataIcon';
+export { TableIcon } from './TableIcon';
+export { ExpandLessIcon } from './ExpandLessIcon';
+export { SearchIcon } from './SearchIcon';
+export { ViewColumnIcon } from './ViewColumnIcon';
+export { GridViewIcon } from './GridViewIcon';

package/es/components/molecules/MatchAnySelect/MatchesAnySelect.js

@@ -229,7 +229,7 @@ export const MatchesAny = props => {
             React.createElement(Text, { strong: true }, `${t(translations.global.selected)} (${(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) || 0})`),
             React.createElement(TextButton, { disabled: isDisableRemoveAll, onClick: onRemoveAll }, t(translations.global.removeAll).toString())),
         React.createElement("div", { className: "matches-any__body" },
-            React.createElement(Scrollbars, { style: { height: '100%' } }, !(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) ? (React.createElement(EmptyData, { icon: React.createElement(DataIcon, { color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw5, width: 48, height: 48 }), description: t(translations.global.selectItemsFromList).toString() })) : (React.createElement(StyledTree, { selectable: false, treeData: selectedTreeData, switcherIcon: props => (React.createElement(Icon, { type: "icon-ants-caret-down", style: {
+            React.createElement(Scrollbars, { style: { height: '100%' } }, !(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) ? (React.createElement(EmptyData, { icon: React.createElement(DataIcon, { color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw5, size: 48 }), description: t(translations.global.selectItemsFromList).toString() })) : (React.createElement(StyledTree, { selectable: false, treeData: selectedTreeData, switcherIcon: props => (React.createElement(Icon, { type: "icon-ants-caret-down", style: {
                         transform: props.expanded ? 'rotate(0)' : 'rotate(-90deg)',
                         transition: 'transform 0.3s ease',
                     }, color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8 })) }))))));

package/es/components/molecules/ThumbnailCard/ThumbnailCard.js

@@ -221,8 +221,8 @@ export const ThumbnailCard = (props) => {
     const [modal, contextHolder] = Modal.useModal();
     const { id, name, width = THUMBNAIL_CARD_DEFAULT_WIDTH, height = THUMBNAIL_CARD_DEFAULT_HEIGHT, thumbnail, thumbnailFit, removable = true, actionAvailable = true, showSkeleton, loading = false, removeModalProps, editBtnProps, previewBtnProps, thumbnailCacheValue, actionButtons, onClickWrapper } = props, restOfProps = __rest(props, ["id", "name", "width", "height", "thumbnail", "thumbnailFit", "removable", "actionAvailable", "showSkeleton", "loading", "removeModalProps", "editBtnProps", "previewBtnProps", "thumbnailCacheValue", "actionButtons", "onClickWrapper"]);
     const _a = removeModalProps || {}, { onOk } = _a, restOfRemoveTemplateModalProps = __rest(_a, ["onOk"]);
-    const _b = editBtnProps || {}, { text: editText = 'Use template', onClick: onClickEdit } = _b, restOfEditBtnProps = __rest(_b, ["text", "onClick"]);
-    const _c = previewBtnProps || {}, { text: previewText = 'Preview', onClick: onClickPreview } = _c, restOfPreviewBtnProps = __rest(_c, ["text", "onClick"]);
+    const _b = editBtnProps || {}, { text: editText = 'Use template', onClick: onClickEdit, show: showEditBtn = true } = _b, restOfEditBtnProps = __rest(_b, ["text", "onClick", "show"]);
+    const _c = previewBtnProps || {}, { text: previewText = 'Preview', onClick: onClickPreview, show: showPreviewBtn = true } = _c, restOfPreviewBtnProps = __rest(_c, ["text", "onClick", "show"]);
     // Memo
     const showSkeletonMemo = 
     // NOTES: Hot fix for showSkeleton base url if showSkeleton is not defined
@@ -286,16 +286,16 @@ export const ThumbnailCard = (props) => {
                 } }))),
             actionAvailable && !loading && (React.createElement(React.Fragment, null,
                 React.createElement(Flex, { className: "center-action", align: "center", gap: 10, vertical: true },
-                    React.createElement(Button, Object.assign({ type: "primary", className: "animate__animated animate__fadeIn" }, restOfEditBtnProps, { onClick: e => {
+                    showEditBtn && (React.createElement(Button, Object.assign({ type: "primary", className: "animate__animated animate__fadeIn" }, restOfEditBtnProps, { onClick: e => {
                             e.stopPropagation();
                             onClickEdit === null || onClickEdit === void 0 ? void 0 : onClickEdit(id);
                         } }),
-                        React.createElement(Typography.Text, { ellipsis: { tooltip: editText }, style: { maxWidth: '100%', color: 'inherit' } }, editText)),
-                    React.createElement(Button, Object.assign({ className: "animate__animated animate__fadeIn", onClick: e => {
+                        React.createElement(Typography.Text, { ellipsis: { tooltip: editText }, style: { maxWidth: '100%', color: 'inherit' } }, editText))),
+                    showPreviewBtn && (React.createElement(Button, Object.assign({ className: "animate__animated animate__fadeIn", onClick: e => {
                             e.stopPropagation();
                             onClickPreview === null || onClickPreview === void 0 ? void 0 : onClickPreview(id);
                         } }, restOfPreviewBtnProps),
-                        React.createElement(Typography.Text, { ellipsis: { tooltip: previewText }, style: { maxWidth: '100%', color: 'inherit' } }, previewText))),
+                        React.createElement(Typography.Text, { ellipsis: { tooltip: previewText }, style: { maxWidth: '100%', color: 'inherit' } }, previewText)))),
                 React.createElement("div", { className: "top-right-corner-action animate__animated animate__fadeIn" },
                     renderActionButtons(),
                     removable && (React.createElement(Tooltip, { title: i18nInstance.t(translations.remove).toString() },

package/es/components/molecules/ThumbnailCard/types.d.ts

@@ -6,6 +6,7 @@ export type TRemoveModalProps = Omit<ModalFuncProps, 'onOk'> & {
     onOk?: (id: TThumbnailCardId) => void;
 };
 export type TThumbnailButton = Omit<ButtonProps, 'onClick'> & {
+    show?: boolean;
     text?: string;
     onClick?: (id: TThumbnailCardId) => void;
 };

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

@@ -14,22 +14,43 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 // Hooks
 import { useDataTable } from './hooks';
+import { useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
 // Styled
-import { DataTableWrapper } from './styled';
+import { DataTableContent, DataTableWrapper } from './styled';
+// Constants
+import { GRID_VIEW_KEYS } from './constants';
 // Components
-import { Table, Pagination, Toolbar } from './components';
+import { Table, Pagination, Toolbar, GridView } from './components';
 // Providers
 import { DataTableProvider } from './providers/DataTableProvider';
 import { AntdTableConfigProvider } from './providers';
 // Store
 import { useDataTableStore } from './hooks/useDataTableStore';
+const { GRID, TABLE } = GRID_VIEW_KEYS;
+const RENDER_VIEW_COMPONENTS = {
+    [GRID]: React.createElement(GridView, null),
+    [TABLE]: React.createElement(Table, null),
+};
 function DataTableComponent(props) {
+    const { contentRender } = props || {};
     // Hooks
     const { pagination, toolbar, setPagination } = useDataTable(props);
-    const { show: showToolbar = true } = toolbar || {};
+    const { show: showToolbar = true, actionButtons } = toolbar || {};
+    const { GRID_VIEW } = actionButtons || {};
+    const renderModeView = useDeepCompareMemo(() => {
+        // Check if has content render then return this content
+        if (contentRender) {
+            return contentRender();
+        }
+        const modeView = (GRID_VIEW === null || GRID_VIEW === void 0 ? void 0 : GRID_VIEW.mode) || 'TABLE';
+        const renderContentWrapper = (key = 'TABLE', children) => (React.createElement(DataTableContent, { style: {
+                display: key === modeView ? 'flex' : 'none',
+            } }, children));
+        return Object.keys(RENDER_VIEW_COMPONENTS).map(key => (React.createElement(React.Fragment, { key: key }, renderContentWrapper(key, RENDER_VIEW_COMPONENTS[key]))));
+    }, [GRID_VIEW === null || GRID_VIEW === void 0 ? void 0 : GRID_VIEW.mode, contentRender]);
     return (React.createElement(DataTableWrapper, null,
         !!showToolbar && React.createElement(Toolbar, null),
-        React.createElement(Table, null),
+        renderModeView,
         React.createElement(Pagination, Object.assign({ id: "data-table-pagination" }, pagination, { onChange: payload => {
                 var _a;
                 setPagination(payload);

package/es/components/organism/DataTable/components/GridView/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+interface GridViewProps {
+}
+export declare const GridView: React.FC<GridViewProps>;
+export {};

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

@@ -0,0 +1,13 @@
+// Libraries
+import React, { memo } from 'react';
+// Components
+import { TemplateListing } from '@antscorp/antsomi-ui/es/components/template';
+import { useDataTableContext } from '../../contexts/DataTableContext';
+export const GridView = memo(() => {
+    const gridView = useDataTableContext(store => { var _a; return (_a = store.toolbar.actionButtons) === null || _a === void 0 ? void 0 : _a.GRID_VIEW; });
+    if (gridView) {
+        const { templateListingProps } = gridView;
+        return React.createElement(TemplateListing, Object.assign({}, templateListingProps));
+    }
+    return null;
+});

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

@@ -34,10 +34,10 @@ export const ResizableCell = props => {
         return (React.createElement("th", Object.assign({}, restProps, { style: columnStyle, onClick: onClick }), CellHeaderContent));
     }
     const handleStyleResizable = (type) => {
-        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;
+        (_a = tableRef === null || tableRef === void 0 ? void 0 : tableRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.antsomi-table-body > table > tbody.antsomi-table-tbody > .antsomi-table-row').forEach(rowEl => {
             var _a;
-            const cell = (_a = rowEl.querySelectorAll(`.antsomi-table-cell:not(.antsomi-table-selection-column)`)) === null || _a === void 0 ? void 0 : _a[index !== null && index !== void 0 ? index : 0];
+            const cell = (_a = rowEl.querySelectorAll(`.antsomi-table-cell:not(.antsomi-table-selection-column):not(.antsomi-table-row-expand-icon-cell)`)) === null || _a === void 0 ? void 0 : _a[index !== null && index !== void 0 ? index : 0];
             if (cell) {
                 if (type === 'add') {
                     return cell.setAttribute('aria-resizable', 'true');
@@ -55,7 +55,7 @@ export const ResizableCell = props => {
             // Update the state with the new width
             setWidth(size.width);
             // Select all column elements within the table body colgroup
-            const resizeColEls = (_a = tableRef === null || tableRef === void 0 ? void 0 : tableRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`.antsomi-table-body colgroup > col:not(.antsomi-table-selection-col)`);
+            const resizeColEls = (_a = tableRef === null || tableRef === void 0 ? void 0 : tableRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll(`.antsomi-table-body colgroup > col:not(.antsomi-table-selection-col):not(.antsomi-table-expand-icon-col)`);
             // Select the specific column element to resize
             const resizeColEl = resizeColEls === null || resizeColEls === void 0 ? void 0 : resizeColEls[index !== null && index !== void 0 ? index : 0];
             // If the column element exists, update its width style

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

@@ -65,7 +65,7 @@ export const Table = memo(() => {
             });
         }
     }, [tableProps.columns, columnWidths]);
-    return (React.createElement(ConfigProvider, { theme: { token: { motion: false } }, renderEmpty: () => (React.createElement(EmptyData, { icon: React.createElement(DataIcon, { color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw5, width: 48, height: 48 }), description: t(translations.noData).toString() })) },
+    return (React.createElement(ConfigProvider, { theme: { token: { motion: false } }, renderEmpty: () => (React.createElement(EmptyData, { icon: React.createElement(DataIcon, { color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw5, size: 48 }), description: t(translations.noData).toString() })) },
         React.createElement(StyledTable, Object.assign({}, restOfTable, { 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) || '100%', x: (scroll === null || scroll === void 0 ? void 0 : scroll.x) || '100%' }), components: {

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

@@ -74,6 +74,26 @@ export const StyledTable = styled(Table) `
         overflow: hidden;
       }
     }
+
+    .antsomi-table-expanded-row-fixed {
+      padding: 15px;
+
+      &::after {
+        display: none;
+      }
+    }
+
+    .antsomi-table-container {
+      &::after {
+        box-shadow: none !important;
+      }
+    }
+
+    .antsomi-table-cell-fix-left {
+      &::after {
+        box-shadow: none !important;
+      }
+    }
   }
 
   thead.antsomi-table-thead {

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

@@ -27,6 +27,7 @@ import { Icon } from '@antscorp/antsomi-ui/es/components/atoms';
 // Utils
 import { renderActionButtons } from '@antscorp/antsomi-ui/es/utils';
 import { flatFilterMetrics } from '../../utils';
+import { GridViewIcon, TableIcon } from '@antscorp/antsomi-ui/es/components/icons';
 export const ToolbarActionButtons = memo(() => {
     // Store
     const actionButtons = useDataTableContext(useShallow(store => store.toolbar.actionButtons));
@@ -54,13 +55,16 @@ export const ToolbarActionButtons = memo(() => {
     };
     // Renders
     const renderComponent = (action) => {
-        const { key, label, buttonProps, icon, customRender } = action;
-        const actionButton = (React.createElement(ActionButton, Object.assign({ key: key, type: "text" }, buttonProps),
-            React.createElement(Icon, { type: icon, size: 18 }),
-            `${label}`.toUpperCase()));
+        const { key, label: actionLabel, buttonProps, icon: actionIcon, customRender } = action;
+        const actionButton = (payload) => {
+            const { icon = actionIcon, label = actionLabel } = payload || {};
+            return (React.createElement(ActionButton, Object.assign({ key: key, type: "text" }, buttonProps),
+                React.createElement("div", { className: "action-icon" }, typeof icon === 'string' ? React.createElement(Icon, { type: icon }) : icon),
+                `${label}`.toUpperCase()));
+        };
         // If customRender is exist then return custom render instead of render internal component
         if (customRender)
-            return actionButton;
+            return actionButton();
         switch (key) {
             case 'SEARCH': {
                 const _a = action, { addFilterInfo, onClickSearchItem, isAddFilterFromSearchItem } = _a, restOfAction = __rest(_a, ["addFilterInfo", "onClickSearchItem", "isAddFilterFromSearchItem"]);
@@ -69,13 +73,22 @@ export const ToolbarActionButtons = memo(() => {
                             onAddFilterFromSearch(searchItem.label, addFilterInfo);
                         }
                         onClickSearchItem === null || onClickSearchItem === void 0 ? void 0 : onClickSearchItem(searchItem, index);
-                    }, onAddFilter: value => onAddFilterFromSearch(value, addFilterInfo) }), actionButton));
+                    }, onAddFilter: value => onAddFilterFromSearch(value, addFilterInfo) }), actionButton()));
             }
             case 'COLUMN': {
-                return React.createElement(ModifyColumn, { key: key }, actionButton);
+                return React.createElement(ModifyColumn, { key: key }, actionButton());
+            }
+            case 'GRID_VIEW': {
+                const { mode, onChangeMode = () => { } } = action;
+                return (React.createElement("div", { key: key, onClick: () => {
+                        onChangeMode(mode === 'TABLE' ? 'GRID' : 'TABLE');
+                    } }, actionButton({
+                    icon: mode === 'TABLE' ? React.createElement(GridViewIcon, null) : React.createElement(TableIcon, null),
+                    label: mode === 'TABLE' ? 'Grid view' : 'Table',
+                })));
             }
             default:
-                return actionButton;
+                return actionButton();
         }
     };
     return (React.createElement(ToolbarActionButtonWrapper, { align: "center", gap: 2 }, renderActionButtons({

package/es/components/organism/DataTable/components/index.d.ts

@@ -3,3 +3,4 @@ export * from './ModifyColumn';
 export * from './Filter';
 export * from './Toolbar';
 export * from './Pagination';
+export * from './GridView';

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

@@ -3,3 +3,4 @@ export * from './ModifyColumn';
 export * from './Filter';
 export * from './Toolbar';
 export * from './Pagination';
+export * from './GridView';

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

@@ -17,7 +17,7 @@ export const DATA_TABLE_THEME = {
             cellPaddingBlock: 10,
             cellPaddingInline: 10,
             borderColor: '#E5E5E5',
-            rowHoverBg: '#DEEFFE',
+            rowHoverBg: '#F2F9FF',
             borderRadius: 0,
             headerBorderRadius: 0,
             rowSelectedBg: '#DEEFFE',

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

@@ -12,3 +12,7 @@ export declare const TOOLBAR_ACTION_KEYS: {
     readonly MORE: "MORE";
 };
 export declare const TOOLBAR_ACTION_OPTIONS: TActionOptions;
+export declare const GRID_VIEW_KEYS: {
+    readonly TABLE: "TABLE";
+    readonly GRID: "GRID";
+};

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

@@ -1,4 +1,7 @@
+import React from 'react';
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+// Icons
+import { SearchIcon, TableIcon, ViewColumnIcon } from '@antscorp/antsomi-ui/es/components/icons';
 // Types
 import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
 export const TOOLBAR_ACTION_KEYS = {
@@ -13,17 +16,17 @@ export const TOOLBAR_ACTION_KEYS = {
     GRID_VIEW: 'GRID_VIEW',
     MORE: 'MORE',
 };
-const { SEARCH, COLUMN, EXPLORE, EXPORT, CALENDAR, TABLE, COMPARE } = TOOLBAR_ACTION_KEYS;
+const { SEARCH, COLUMN, EXPLORE, EXPORT, CALENDAR, TABLE, COMPARE, GRID_VIEW } = TOOLBAR_ACTION_KEYS;
 export const TOOLBAR_ACTION_OPTIONS = {
     [SEARCH]: {
         key: SEARCH,
         label: i18nInstance.t(translations.dataTableToolbar.toolbarActions.search).toString(),
-        icon: 'icon-ants-search-2',
+        icon: React.createElement(SearchIcon, null),
     },
     [COLUMN]: {
         key: COLUMN,
         label: 'Column',
-        icon: 'icon-ants-column-2',
+        icon: React.createElement(ViewColumnIcon, null),
     },
     [EXPLORE]: {
         key: EXPLORE,
@@ -50,4 +53,13 @@ export const TOOLBAR_ACTION_OPTIONS = {
         label: 'Compare',
         icon: 'file-download',
     },
+    [GRID_VIEW]: {
+        key: GRID_VIEW,
+        label: 'Grid View',
+        icon: React.createElement(TableIcon, null),
+    },
+};
+export const GRID_VIEW_KEYS = {
+    TABLE: 'TABLE',
+    GRID: 'GRID',
 };

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

@@ -7,7 +7,8 @@ import { PaginationProps } from '../../components';
 import { ColumnType } from 'antd/es/table';
 import { SorterResult } from 'antd/es/table/interface';
 import { TGetColumnMetrics, TGetFilterMetricList, TGetModifyColumnList, TGetSavedFilterList, TGetSearchListing, TGetTableListing } from '@antscorp/antsomi-ui/es/queries';
-import { MatchesAnyItem } from '@antscorp/antsomi-ui/es/components/molecules';
+import { MatchesAnyItem, TThumbnailButton } from '@antscorp/antsomi-ui/es/components/molecules';
+import { TTemplateItem } from '@antscorp/antsomi-ui/es/components/template';
 export type TApiGlobal = AxiosRequestConfig<any> & {
     enabled?: boolean;
 };
@@ -60,6 +61,17 @@ type TSearchProps<TSearchType> = Partial<Pick<TSearchActionButton, 'addFilterInf
     onClickSearchItem?: (record?: Partial<TSearchType>) => void;
     formatData?: (response: any) => Partial<TSearchType>[];
 };
+type TGridViewProps<TTableType> = {
+    itemMapKeys: Record<keyof TTemplateItem, keyof TTableType>;
+    name?: (record: TTableType) => ReactNode | ReactNode;
+    thumbnail?: (record: TTableType) => string | string;
+    itemProps?: {
+        showButton?: boolean;
+        buttonProps?: Omit<TThumbnailButton, 'onClick'> & {
+            onClick: (record: TTableType) => void;
+        };
+    };
+};
 export type TFormatFilterValue = Partial<Record<TOperatorKey, (value: any) => unknown>>;
 export interface UseDataTableListingProps<TTableType = any, TSearchType = any> {
     name?: string;
@@ -73,7 +85,11 @@ export interface UseDataTableListingProps<TTableType = any, TSearchType = any> {
         getSearchListing?: TGetSearchListing['options'];
     };
     table?: Omit<TableProps<TTableType>, 'columns'> & {
+        /** Main key for map ids */
         mainColumnKey: keyof TTableType;
+        /** Expand column key for show icon expand row */
+        expandColumnKey?: keyof TTableType;
+        /** columns?: Partial<Record<keyof TTableType, ColumnType<TTableType>>>; */
         columns?: {
             [K in keyof TTableType | 'toggle']?: TTableColumnType<TTableType, K>;
         };
@@ -94,6 +110,7 @@ export interface UseDataTableListingProps<TTableType = any, TSearchType = any> {
          */
         formatFilterValue?: TFormatFilterValue;
     };
+    gridView?: TGridViewProps<TTableType>;
 }
 export interface DataTableLocalStorage<TTableType = any> {
     filter?: {

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useGetColumnMetrics, useGetFilterMetricList, useGetModifyColumnList, useGetSavedFilterList, useGetSearchListing, useGetTableListing } from '@antscorp/antsomi-ui/es/queries';
 import { UseDataTableListingProps } from './types';
-import { FilterItem, FilterProps, TColumnActionButton, TSearchActionButton, TableProps } from '../../types';
+import { FilterItem, FilterProps, TColumnActionButton, TGridViewActionButton, TSearchActionButton, TableProps, TGridViewKeys } from '../../types';
 import { PaginationProps } from '../../components';
 import { SorterResult } from 'antd/es/table/interface';
 interface TUseDataTableListing<TTableType = any> {
@@ -10,6 +10,7 @@ interface TUseDataTableListing<TTableType = any> {
     pagination: PaginationProps;
     table: TableProps<TTableType>;
     search: TSearchActionButton;
+    gridView: TGridViewActionButton;
     /**
      * This selectedRowKeys is deprecated. Use selectedRow.keys instead.
      * @deprecated
@@ -48,6 +49,9 @@ type TState<TTableType = any> = {
     searchValue?: string;
     sorter?: SorterResult<TTableType>;
     selectedFilterItem?: FilterItem;
+    expandedRowKeys?: React.Key[];
+    /** Mode view of data table listing */
+    modeView?: TGridViewKeys;
 };
 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

@@ -21,7 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 // Libraries
 import React, { useCallback, useMemo, useState } from 'react';
 import { Link } from 'react-router-dom';
-import { flatMap, isEmpty, pick } from 'lodash';
+import { flatMap, isEmpty, pick, xor } from 'lodash';
 import { useQueryClient } from '@tanstack/react-query';
 // Types
 import { useAppConfigContext } from '@antscorp/antsomi-ui/es/providers';
@@ -38,6 +38,7 @@ import { useCreateModifyColumn, useDeleteModifyColumn, useDeleteSavedFilter, use
 import { flatTree, mapResponseSearchToGeneral, parseJSONFromLocalStorage, } from '@antscorp/antsomi-ui/es/utils';
 import { METRIC_MAP_NUMBER_TYPE } from '../../constants/filter';
 import { mapFiltersToApiFilters, mapFiltersToRules, mapRulesToFilters } from '../../utils';
+import { ExpandLessIcon } from '@antscorp/antsomi-ui/es/components/icons';
 const { Text } = Typography;
 const { MATCHES, MATCHES_ANY, NOT_MATCHES } = OPERATORS_CODE;
 const initialState = {
@@ -60,11 +61,13 @@ const initialState = {
     searchValue: '',
     sorter: {},
     selectedFilterItem: undefined,
+    expandedRowKeys: [],
+    modeView: 'TABLE',
 };
 export function useDataTableListing(props) {
     var _a, _b, _c;
     // Props
-    const { config, name = 'default', table: tableProps, search: searchProps, filter: filterProps, queryOptions, } = props || {};
+    const { config, name = 'default', table: tableProps, search: searchProps, filter: filterProps, gridView: gridViewProps, queryOptions, } = props || {};
     // Hooks
     const queryClient = useQueryClient();
     const { appConfig } = useAppConfigContext();
@@ -77,9 +80,10 @@ export function useDataTableListing(props) {
     const _e = apiFilter || {}, { url: filterUrl = `${COLUMN_DOMAIN[env || 'development']}/api/filter`, enabled: enabledApiFilter = true } = _e, restOfApiFilterRequest = __rest(_e, ["url", "enabled"]);
     const _f = apiListing || {}, { url: listingUrl = '', enabled: enabledApiListing = true } = _f, restOfApiListingRequest = __rest(_f, ["url", "enabled"]);
     const _g = apiSearch || {}, { url: searchUrl = '', enabled: enabledApiSearch = true } = _g, restOfApiSearchRequest = __rest(_g, ["url", "enabled"]);
-    const { filters, selectedFilterId, pagination, selectedRowKeys, searchValue, table, sorter, selectedRow, selectedFilterItem, } = state;
+    const { filters, selectedFilterId, pagination, selectedRowKeys, searchValue, table, sorter, selectedRow, selectedFilterItem, expandedRowKeys, modeView, } = state;
     const { externalFilters, includeDataType = false, matchesAny, formatFilterValue, } = filterProps || {};
-    const { sortDirectionKey = 'az', mainColumnKey } = tableProps || {};
+    const { sortDirectionKey = 'az', mainColumnKey, expandColumnKey, expandable } = tableProps || {};
+    const { itemProps: gridViewItemProps } = gridViewProps || {};
     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 });
@@ -285,6 +289,34 @@ export function useDataTableListing(props) {
         name: filterName,
         removable: true,
     }))) || []), [savedFiltersData]);
+    const renderColumnWithExpandIcon = useCallback((children, // The content of the column
+    headerCol, // The header configuration for the column
+    record) => {
+        const { name } = headerCol || {}; // Destructure the name from the headerCol, with a fallback to an empty object
+        if (expandColumnKey === name) {
+            // Check if the current column is the expand column
+            const expanded = expandedRowKeys === null || expandedRowKeys === void 0 ? void 0 : expandedRowKeys.includes(
+            // Check if the current row is expanded
+            (record === null || record === void 0 ? void 0 : record[mainColumnKey]) || '');
+            return (React.createElement(Flex, { align: "center", gap: 4 },
+                React.createElement(ExpandLessIcon, { size: 20, style: {
+                        flexShrink: 0,
+                        color: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8,
+                        transform: `rotate(${expanded ? 0 : 180}deg)`,
+                        cursor: 'pointer',
+                        transition: 'transform 0.3s ease',
+                    }, onClick: () => {
+                        if (expandable && expandable.onExpand) {
+                            expandable.onExpand(!expanded, record);
+                        }
+                        setState(prev => (Object.assign(Object.assign({}, prev), { expandedRowKeys: xor(expandedRowKeys, [
+                                record[mainColumnKey],
+                            ]) })));
+                    } }),
+                children));
+        }
+        return children;
+    }, [expandColumnKey, expandable, expandedRowKeys, mainColumnKey]);
     const tableColumns = useDeepCompareMemo(() => {
         let data = [];
         const { columns } = tableProps || {};
@@ -318,16 +350,16 @@ export function useDataTableListing(props) {
                             }
                             : {})) }, 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);
+                        return renderColumnWithExpandIcon(columns[name].render(value, record, index, RenderComponent), headerCol, record);
                     }
                     if (link) {
-                        return (React.createElement(Link, { to: typeof link === 'function' ? link(record) : link }, RenderComponent));
+                        return renderColumnWithExpandIcon(React.createElement(Link, { to: typeof link === 'function' ? link(record) : link }, RenderComponent), headerCol, record);
                     }
-                    return RenderComponent;
+                    return renderColumnWithExpandIcon(RenderComponent, headerCol, record);
                 } });
         })) || []);
         return data;
-    }, [tableHeader, tableProps, sorter]);
+    }, [tableProps, tableHeader, sorter === null || sorter === void 0 ? void 0 : sorter.columnKey, sorter === null || sorter === void 0 ? void 0 : sorter.order, renderColumnWithExpandIcon]);
     const tableData = useDeepCompareMemo(() => ((Array === null || Array === void 0 ? void 0 : Array.isArray(tableBody)) &&
         (tableBody === null || tableBody === void 0 ? void 0 : tableBody.map((row) => (Object.assign(Object.assign({}, row), { key: row === null || row === void 0 ? void 0 : row[tableProps === null || tableProps === void 0 ? void 0 : tableProps.mainColumnKey] }))))) ||
         [], [tableBody]);
@@ -345,6 +377,15 @@ export function useDataTableListing(props) {
         }
         return [];
     }, [matchesAny, infiniteMatchesAnyData, selectedFilterItem === null || selectedFilterItem === void 0 ? void 0 : selectedFilterItem.column]);
+    const gridViewList = useDeepCompareMemo(() => {
+        if (gridViewProps === null || gridViewProps === void 0 ? void 0 : gridViewProps.itemMapKeys) {
+            const { name, thumbnail } = gridViewProps || {};
+            return ((tableData === null || tableData === void 0 ? void 0 : tableData.map(record => Object.entries((gridViewProps === null || gridViewProps === void 0 ? void 0 : gridViewProps.itemMapKeys) || {}).reduce((acc, [key, value]) => (Object.assign(Object.assign(Object.assign(Object.assign({}, acc), { [key]: record[value] }), (thumbnail && {
+                thumbnail: typeof thumbnail === 'function' ? thumbnail(record) : thumbnail,
+            })), (name && { name: typeof name === 'function' ? name(record) : name }))), {}))) || []);
+        }
+        return [];
+    }, [gridViewProps, tableData]);
     // Effects
     /**
      * Update values from local storage to state
@@ -580,21 +621,40 @@ export function useDataTableListing(props) {
         /* Pagination */
         pagination: Object.assign(Object.assign({}, pagination), { total, onChange: onChangePagination }),
         /* Table */
-        table: {
-            loading: isTableListingLoading || isTableListingRefetching,
-            columns: tableColumns,
-            dataSource: tableData,
-            columnWidths: table.columnWidths || {},
-            rowSelection: {
+        table: Object.assign(Object.assign({}, tableProps), { loading: isTableListingLoading || isTableListingRefetching, columns: tableColumns, dataSource: tableData, columnWidths: table.columnWidths || {}, expandable: Object.assign({ showExpandColumn: false, expandedRowKeys: expandedRowKeys || [] }, tableProps === null || tableProps === void 0 ? void 0 : tableProps.expandable), rowSelection: {
                 selectedRowKeys: selectedRow.keys || [],
                 onChange: onChangeSelectedRow,
-            },
-            onChange: onChangeTable,
-            onColumnResize(data) {
+            }, onChange: onChangeTable, onColumnResize(data) {
                 const { index, width } = data;
                 handleUpdateTable({
                     columnWidths: Object.assign(Object.assign({}, table.columnWidths), { [index]: width }),
                 });
+            } }),
+        /* Grid view */
+        gridView: {
+            mode: modeView,
+            onChangeMode(mode) {
+                setState(prev => (Object.assign(Object.assign({}, prev), { modeView: mode })));
+            },
+            templateListingProps: {
+                templatesProps: {
+                    items: gridViewList,
+                    loading: isTableListingLoading || isTableListingRefetching,
+                },
+                templateItemProps: {
+                    removable: false,
+                    previewBtnProps: {
+                        show: false,
+                    },
+                    actionAvailable: gridViewItemProps === null || gridViewItemProps === void 0 ? void 0 : gridViewItemProps.showButton,
+                    editBtnProps: Object.assign(Object.assign({}, gridViewItemProps === null || gridViewItemProps === void 0 ? void 0 : gridViewItemProps.buttonProps), { onClick(id) {
+                            var _a, _b;
+                            const record = tableData === null || tableData === void 0 ? void 0 : tableData.find(item => (item === null || item === void 0 ? void 0 : item[gridViewProps === null || gridViewProps === void 0 ? void 0 : gridViewProps.itemMapKeys.id]) === id);
+                            if (record && ((_a = gridViewItemProps === null || gridViewItemProps === void 0 ? void 0 : gridViewItemProps.buttonProps) === null || _a === void 0 ? void 0 : _a.onClick)) {
+                                (_b = gridViewItemProps === null || gridViewItemProps === void 0 ? void 0 : gridViewItemProps.buttonProps) === null || _b === void 0 ? void 0 : _b.onClick(record);
+                            }
+                        } }),
+                },
             },
         },
         /* Selected row */

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

@@ -7,4 +7,5 @@ export declare const ActionButton: import("styled-components").StyledComponent<i
     $hide?: boolean | undefined;
 }, never>;
 export declare const FilterMetricLabel: 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 DataTableContent: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const FilterButton: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -34,15 +34,26 @@ export const ActionButton = styled(Button) `
   display: flex !important;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
-  gap: 4px 0px !important;
   height: 43px !important;
   width: 50px !important;
+  gap: 4px !important;
+  padding: 3px 0px !important;
   font-size: 8px !important;
+  line-height: 1 !important;
   color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8} !important;
 
   ${props => props.$hide && `visibility: hidden !important;`}
 
+  .action-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    > i {
+      font-size: 24px !important;
+    }
+  }
+
   /* &:hover, */
   &:active {
     color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorPrimary} !important;
@@ -60,6 +71,16 @@ export const FilterMetricLabel = styled(Flex) `
     color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8};
   }
 `;
+export const DataTableContent = styled.div `
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+
+  .scrollbar-view {
+    height: 100%;
+    position: relative !important;
+  }
+`;
 /* Filter */
 export const FilterButton = styled.div `
   width: 24px;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { TableProps as AntdTableProps } from 'antd';
 import { StoreApi } from 'zustand';
 import { ToolbarProps } from './toolbar';
@@ -13,6 +14,7 @@ export interface TableProps<T> extends AntdTableProps<T> {
 export interface ModifyColumnProps {
 }
 export interface DataTableProps<TTableDataType = any> extends Partial<DataTableState<TTableDataType>> {
+    contentRender?: () => React.ReactNode;
     store?: StoreApi<DataTableStore<any>> | null;
 }
 export interface DataTableState<TTableDataType> {

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

@@ -1,13 +1,15 @@
 import { ReactNode } from 'react';
 import { DropdownProps } from 'antd';
-import { TOOLBAR_ACTION_KEYS } from '../constants';
+import { GRID_VIEW_KEYS, TOOLBAR_ACTION_KEYS } from '../constants';
 import { AddButtonProps } from '../components/AddButton';
 import { TActionButton, TConfirmResponse } from '@antscorp/antsomi-ui/es/types';
 import { TOperatorKey } from '@antscorp/antsomi-ui/es/types/condition';
 import { ModifyColumnMetric } from '../../ModifyColumnModal';
 import { SavedModifyColumnItem, TOnSaveModifyColumnArgs } from '../../ModifyColumnModal/types';
 import { TextProps } from 'antd/es/typography/Text';
+import { TemplateListingProps } from '../../../template';
 export type TActionToolbarButtonKey<T extends string[] = []> = (typeof TOOLBAR_ACTION_KEYS)[keyof typeof TOOLBAR_ACTION_KEYS] | T[number];
+export type TGridViewKeys = (typeof GRID_VIEW_KEYS)[keyof typeof GRID_VIEW_KEYS];
 export type TSearchItem = {
     id: string | number;
     label: string;
@@ -54,7 +56,14 @@ export type TColumnActionButton = TActionButton & {
     metrics?: ModifyColumnMetric[];
     onApply?: (args: TOnSaveModifyColumnArgs) => Promise<TConfirmResponse>;
 };
-export type TToolbarActionButton<TActionKey extends string[] = [], ActionKey extends TActionToolbarButtonKey<TActionKey> = TActionToolbarButtonKey<TActionKey>> = ActionKey extends 'SEARCH' ? TSearchActionButton : ActionKey extends 'COLUMN' ? TColumnActionButton : TActionButton;
+export type TGridViewActionButton = TActionButton & {
+    /** The mode of the grid view. Ex: '' */
+    mode?: TGridViewKeys;
+    templateListingProps?: TemplateListingProps;
+    /** The callback function to change the mode of the grid view. */
+    onChangeMode?: (mode: TGridViewKeys) => void;
+};
+export type TToolbarActionButton<TActionKey extends string[] = [], ActionKey extends TActionToolbarButtonKey<TActionKey> = TActionToolbarButtonKey<TActionKey>> = ActionKey extends 'SEARCH' ? TSearchActionButton : ActionKey extends 'COLUMN' ? TColumnActionButton : ActionKey extends 'GRID_VIEW' ? TGridViewActionButton : TActionButton;
 export type TCollapse = {
     collapsed?: boolean;
     onCollapse?: (collapsed: boolean) => void;

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

@@ -34,6 +34,7 @@ export const HOME_MENU_ITEMS = {
         menu_item_name: 'Dashboard',
         menu_item_code: 'ownedDashboard',
         icon_name: 'icon-ants-dashboard',
+        // menu_item_path: `${HOME_ROUTE}/detail`,
         page_title: '_dashboard',
     },
 };

package/es/components/template/Layout/Layout.js

@@ -142,11 +142,12 @@ export const Layout = memo(props => {
     return (React.createElement(LayoutWrapper, { showLeftMenu: !!showLeftMenu },
         React.createElement(Helmet, null,
             React.createElement("meta", { charSet: "utf-8" }),
-            React.createElement("title", null, (header === null || header === void 0 ? void 0 : header.browserTitle) || (header === null || header === void 0 ? void 0 : header.pageTitle)
-                ? isString(header === null || header === void 0 ? void 0 : header.pageTitle)
-                    ? header === null || header === void 0 ? void 0 : header.pageTitle
-                    : ''
-                : activePageTitle)),
+            React.createElement("title", null, (header === null || header === void 0 ? void 0 : header.browserTitle) ||
+                ((header === null || header === void 0 ? void 0 : header.pageTitle)
+                    ? isString(header === null || header === void 0 ? void 0 : header.pageTitle)
+                        ? header === null || header === void 0 ? void 0 : header.pageTitle
+                        : ''
+                    : activePageTitle))),
         React.createElement(HeaderV2, Object.assign({}, mergeHeaderProps, { showLogo: !showLeftMenu })),
         React.createElement(Flex, { className: "layout-body" },
             showLeftMenu && (React.createElement(LeftMenu, Object.assign({ className: `layout-body__menu ${leftMenuClassName}` }, mergeLeftMenuProps, { appConfig: leftMenuAppConfig, onActiveMenuCodeChange: onActiveMenuCodeChange }))),

package/es/components/template/TemplateListing/index.js

@@ -32,6 +32,7 @@ export const TemplateListing = memo(props => {
     const { header, footer, items = [], gap = LISTING_GAP_DEFAULT, loading = false, wrapperClassName, wrapperStyle, onLoadMoreTemplates = () => { }, } = templatesProps || {};
     const _a = previewModalProps || {}, { onOk, onCancel } = _a, restOfPreviewModalProps = __rest(_a, ["onOk", "onCancel"]);
     const _b = templateItemProps || {}, { width = THUMBNAIL_CARD_DEFAULT_WIDTH, height = THUMBNAIL_CARD_DEFAULT_HEIGHT, previewBtnProps } = _b, restOfTemplateItemProps = __rest(_b, ["width", "height", "previewBtnProps"]);
+    console.log('🚀 ~ templateItemProps:', templateItemProps);
     const { onClick: onClickPreview } = previewBtnProps || {};
     const isHasData = items.length > 0;
     // Memo
@@ -80,9 +81,7 @@ export const TemplateListing = memo(props => {
                                 const loading = typeof (item === null || item === void 0 ? void 0 : item.name) === 'undefined';
                                 return (React.createElement("div", { key: id },
                                     index === items.length - 2 && React.createElement(LoadMoreBlock, { ref: loadMoreRef }),
-                                    React.createElement(ThumbnailCard, Object.assign({ id: id || 0, name: name || 'Untitled', loading: loading, width: width * ratio, height: height * ratio, thumbnail: thumbnail, className: `${templateItemProps.className}`, thumbnailCacheValue: thumbnailCacheValue, previewBtnProps: {
-                                            onClick: handleClickThumbnailPreview,
-                                        } }, restOfTemplateItemProps))));
+                                    React.createElement(ThumbnailCard, Object.assign({ id: id || 0, name: name || 'Untitled', loading: loading, width: width * ratio, height: height * ratio, thumbnail: thumbnail, className: `${templateItemProps.className}`, thumbnailCacheValue: thumbnailCacheValue, previewBtnProps: Object.assign({ onClick: handleClickThumbnailPreview }, previewBtnProps) }, restOfTemplateItemProps))));
                             }))),
                     !loading && !blankTemplateProps.show && !isHasData && React.createElement(Empty, Object.assign({}, emptyProps)))),
             footer),

package/es/constants/theme.js

@@ -244,5 +244,23 @@ THEME.components = {
     Form: {
         itemMarginBottom: 15,
     },
+    Table: {
+        headerBg: '#F9F9F9',
+        headerSortActiveBg: '#F9F9F9',
+        headerSortHoverBg: '#F9F9F9',
+        headerFilterHoverBg: '#F9F9F9',
+        fixedHeaderSortActiveBg: '#F9F9F9',
+        bodySortBg: '#ffffff',
+        fontWeightStrong: 700,
+        cellPaddingBlock: 10,
+        cellPaddingInline: 10,
+        borderColor: '#E5E5E5',
+        rowHoverBg: '#F2F9FF',
+        borderRadius: 0,
+        headerBorderRadius: 0,
+        rowSelectedBg: '#DEEFFE',
+        rowSelectedHoverBg: '#F2F9FF',
+        rowExpandedBg: '#F9F9F9',
+    },
 };
 export const globalToken = theme.getDesignToken(THEME);

package/es/tests/DataTableTest.js

@@ -118,6 +118,10 @@ export const DataTableTest = () => {
             //   },
             // },
         },
+        table: {
+            mainColumnKey: 'survey_id',
+            expandColumnKey: 'survey_name',
+        },
     });
     return (React.createElement(BrowserRouter, null,
         React.createElement(TableTestWrapper, null,

package/es/types/actionsButton.d.ts

@@ -4,13 +4,13 @@ export type TActionButton = {
     buttonProps?: ButtonProps;
     key?: string;
     label?: React.ReactNode;
-    icon?: string;
+    icon?: ReactNode;
     customRender?: (node: ReactNode) => ReactNode;
 };
 export type TActionOption = {
     key: string;
     label: string;
-    icon?: string;
+    icon?: ReactNode;
     iconSize?: number;
 };
 export type TActionOptions = Record<string, TActionOption>;

package/package.json

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

package/CHANGELOG.md

@@ -1,91 +0,0 @@
-### Changelog
-
-All notable changes to this project will be documented in this file. Dates are displayed in UTC.
-
-Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
-
-#### [v1.7.6](https://bitbucket.org/git-vn/at.packages.frontend/compare/v1.7.6..v2.0.22)
-
-- chore: update storybook version [`d13f194`](https://bitbucket.org/git-vn/at.packages.frontend/commits/d13f19462c2fe117934df7fe2e09fd0aa95a0167)
-- feat: update input width when in view [`f27b982`](https://bitbucket.org/git-vn/at.packages.frontend/commits/f27b982a4427c414a1b5d5538641516a3d35aa6e)
-- chore: update datatable components [`d38cf96`](https://bitbucket.org/git-vn/at.packages.frontend/commits/d38cf9687b2a6fd03396247d04c6ef37a6b030f1)
-
-### [v2.0.22](https://bitbucket.org/git-vn/at.packages.frontend/compare/v2.0.22..v1.7.5)
-
-> 19 January 2023
-
-#### [v1.7.5](https://bitbucket.org/git-vn/at.packages.frontend/compare/v1.7.5..v1.7.4)
-
-> 11 July 2024
-
-- feat(compoents): add component AccountProfile [`e504187`](https://bitbucket.org/git-vn/at.packages.frontend/commits/e5041873fa3236acf35312801754240a7542b8dd)
-- chore(component): remove unuse common folder [`5123bac`](https://bitbucket.org/git-vn/at.packages.frontend/commits/5123bac8005db98661ca48c500aab56ac42b1feb)
-- chore: update formatFitlerValue for useTablisting hook [`2b173a0`](https://bitbucket.org/git-vn/at.packages.frontend/commits/2b173a02ab8fb24a8cd3b6d1c8403c111e831eb4)
-
-#### [v1.7.4](https://bitbucket.org/git-vn/at.packages.frontend/compare/v1.7.4..v1.3.5-beta.446)
-
-> 5 July 2024
-
-- chore: update storybook version [`d13f194`](https://bitbucket.org/git-vn/at.packages.frontend/commits/d13f19462c2fe117934df7fe2e09fd0aa95a0167)
-- feat(MatchesAnySelect): create and handle new MatchesAnySelect component [`a89c46e`](https://bitbucket.org/git-vn/at.packages.frontend/commits/a89c46e00e81d5a28ac37f42166dcab1c49212df)
-- chore: update filter matches any datatable [`4db6dc8`](https://bitbucket.org/git-vn/at.packages.frontend/commits/4db6dc81b62a9168ca9fe1a5e39e414e473e7285)
-
-#### [v1.3.5-beta.446](https://bitbucket.org/git-vn/at.packages.frontend/compare/v1.3.5-beta.446..v1.0.10)
-
-> 2 July 2024
-
-- chore(datatable): update useTableListing hook [`262def1`](https://bitbucket.org/git-vn/at.packages.frontend/commits/262def14c8a44ae73d1d9163696afc25e026ba45)
-- chore: update data table component [`7fce77d`](https://bitbucket.org/git-vn/at.packages.frontend/commits/7fce77db8191ff7633679ea9befe28718eb40a88)
-- chore(storybook): add addon-controls [`8ea93fc`](https://bitbucket.org/git-vn/at.packages.frontend/commits/8ea93fc4bb41c50f7a7025bc79d968d849e8d113)
-
-#### [v1.0.10](https://bitbucket.org/git-vn/at.packages.frontend/compare/v1.0.10..v1.0.9)
-
-> 20 June 2024
-
-#### [v1.0.9](https://bitbucket.org/git-vn/at.packages.frontend/compare/v1.0.9..v1.0.8)
-
-> 20 June 2024
-
-#### [v1.0.8](https://bitbucket.org/git-vn/at.packages.frontend/compare/v1.0.8..v1.0.3)
-
-> 20 June 2024
-
-- feat(SelectAccount): add component [`2f1dea0`](https://bitbucket.org/git-vn/at.packages.frontend/commits/2f1dea035af07a01a6be8da47b531d52d2977bbe)
-- fix: update style for calendar selection [`4347b91`](https://bitbucket.org/git-vn/at.packages.frontend/commits/4347b91f5bbe31caeb64478116c1822fe443f359)
-- feat(EditorTab): use modal async in onCloseTab [`76aece8`](https://bitbucket.org/git-vn/at.packages.frontend/commits/76aece8cc7a44385d63019058daa1f8477c8fbcb)
-
-#### [v1.0.3](https://bitbucket.org/git-vn/at.packages.frontend/compare/v1.0.3..v1.0.2)
-
-> 17 January 2023
-
-- update timeline package [`e198927`](https://bitbucket.org/git-vn/at.packages.frontend/commits/e198927d83931f9155e90ab9a1d9d3a5ac2989c4)
-- update-ticket-editor [`38dd7b0`](https://bitbucket.org/git-vn/at.packages.frontend/commits/38dd7b0a7b2b0b58a63e725419e9b057e053f44f)
-- update-upload-file-ticket-editor [`bb2f2ef`](https://bitbucket.org/git-vn/at.packages.frontend/commits/bb2f2ef1c46f4239ad716c897e53856a6368ea7d)
-
-#### v1.0.2
-
-> 4 January 2023
-
-- Sprint10/vinlt/feature/date advanced [`#24`](https://bitbucket.org/git-vn/at.packages.frontend/pull-requests/24)
-- Sprint10/sangndd/feature/extend value matches any [`#23`](https://bitbucket.org/git-vn/at.packages.frontend/pull-requests/23)
-- Sprint10/sangndd/feature/extend value matches any [`#22`](https://bitbucket.org/git-vn/at.packages.frontend/pull-requests/22)
-- [Scatter chart] Max X-axis giá trị bị lặp [`#20`](https://bitbucket.org/git-vn/at.packages.frontend/pull-requests/20)
-- Sprint8/vinlt/feature/show data label short [`#18`](https://bitbucket.org/git-vn/at.packages.frontend/pull-requests/18)
-- Fix duplicate axis max value [`#17`](https://bitbucket.org/git-vn/at.packages.frontend/pull-requests/17)
-- [Antalyser] Một số bug khi nhập axis giá trị thập phân [`#16`](https://bitbucket.org/git-vn/at.packages.frontend/pull-requests/16)
-- Sprint6/vinlt/fixbug/chart [`#15`](https://bitbucket.org/git-vn/at.packages.frontend/pull-requests/15)
-- - Axis allows input of decimal values [`#14`](https://bitbucket.org/git-vn/at.packages.frontend/pull-requests/14)
-- Sprint4/sangndd/feature/icons [`#12`](https://bitbucket.org/git-vn/at.packages.frontend/pull-requests/12)
-- Sprint4/sangndd/feature/icons [`#11`](https://bitbucket.org/git-vn/at.packages.frontend/pull-requests/11)
-- Sprint4/thanghn/fixbug/pivot alias border [`#10`](https://bitbucket.org/git-vn/at.packages.frontend/pull-requests/10)
-- fix scroll dimension and total column [`#9`](https://bitbucket.org/git-vn/at.packages.frontend/pull-requests/9)
-- [ANTALYSER][Filter][Khi filter filed có type date và semantic là "Month day" thì không load được danh sách các ngày trong tháng] [`#7`](https://bitbucket.org/git-vn/at.packages.frontend/pull-requests/7)
-- [ANTALYSER][Pivot chart][Tính năng Add border shadow chưa hoạt động] [`#8`](https://bitbucket.org/git-vn/at.packages.frontend/pull-requests/8)
-- Fix bug [ANTALYSER][Scatter chart][Label ở cột X và Y chưa đổi theo alias name đã change ở metric] [`#6`](https://bitbucket.org/git-vn/at.packages.frontend/pull-requests/6)
-- Fix bug [Pivot chart] Row color không hiển thị được khi chọn hiển thị data của metric là Bar [`#5`](https://bitbucket.org/git-vn/at.packages.frontend/pull-requests/5)
-- Fix bug package antscorp/charts [`#1`](https://bitbucket.org/git-vn/at.packages.frontend/pull-requests/1)
-- Fix bug package antscorp/chart [`#2`](https://bitbucket.org/git-vn/at.packages.frontend/pull-requests/2)
-- table component [`#1`](https://bitbucket.org/git-vn/at.packages.frontend/pull-requests/1)
-- Update map indonesia [`fc94208`](https://bitbucket.org/git-vn/at.packages.frontend/commits/fc9420838b3f4087a5763017e9bf7e72ee8c5e31)
-- Update geomap [`43f3098`](https://bitbucket.org/git-vn/at.packages.frontend/commits/43f3098506f30a215dc2b30734590e5c55f8b490)
-- sync package master [`7476118`](https://bitbucket.org/git-vn/at.packages.frontend/commits/7476118de2fcfa1bd6b0a9e3c0f887b29fd149b6)