@antscorp/antsomi-ui 1.3.5-beta.526 → 1.3.5-beta.528

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/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

@@ -57,3 +57,6 @@ export { LoadingIcon } from './LoadingIcon';
 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

@@ -57,3 +57,6 @@ export { LoadingIcon } from './LoadingIcon';
 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/ShareAccess/components/GeneralAccess/GeneralAccess.js

@@ -59,7 +59,7 @@ export const GeneralAccess = ({ generalAccessSettings }) => {
                         React.createElement("div", { className: "accessable-title" }, isPublic ? 'Public' : 'Restricted'),
                         allowEdit && (React.createElement(Icon, { className: "icon-angle", type: "icon-ants-expand-more", style: { fontSize: 20 } })))),
                 React.createElement("div", { className: "description" }, renderDescription())),
-            !!isPublic && publicRole && (React.createElement(Dropdown, { placement: "bottomLeft", trigger: ['click'], destroyPopupOnHide: true, disabled: !allowEdit || isShowOnlyText, overlayStyle: { zIndex: 3002 }, menu: {
+            !!isPublic && publicRole && (React.createElement(Dropdown, { placement: "bottomRight", trigger: ['click'], destroyPopupOnHide: true, disabled: !allowEdit || isShowOnlyText, overlayStyle: { zIndex: 3002 }, menu: {
                     items: [
                         publicRole === PUBLIC_ROLE.ONLY_VIEWER
                             ? {

package/es/components/molecules/ShareAccess/components/GeneralAccess/styled.js

@@ -11,6 +11,7 @@ export const StyledGeneralAccessRoot = styled.div `
 
   .setting {
     display: flex;
+    align-items: center;
     justify-content: space-between;
     border: 1px solid #e6e6e6;
     border-radius: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.borderRadius}px;
@@ -53,6 +54,7 @@ export const StyledGeneralAccessRoot = styled.div `
       display: flex;
       align-items: center;
       gap: 4px;
+      cursor: pointer;
     }
   }
 `;

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,8 +34,8 @@ 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):not(.antsomi-table-row-expand-icon-cell)`)) === null || _a === void 0 ? void 0 : _a[index !== null && index !== void 0 ? index : 0];
             if (cell) {

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/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/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;
@@ -98,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
@@ -49,6 +50,8 @@ type TState<TTableType = any> = {
     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

@@ -62,11 +62,12 @@ const initialState = {
     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();
@@ -79,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, expandedRowKeys, } = 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, 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 });
@@ -375,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
@@ -619,6 +630,33 @@ export function useDataTableListing(props) {
                     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 */
         selectedRowKeys,
         selectedRow,

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/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/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.3.5-beta.526",
+  "version": "1.3.5-beta.528",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",