@antscorp/antsomi-ui 1.3.5-beta.52 → 1.3.5-beta.521

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

@@ -0,0 +1,119 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+// Libraries
+import React, { memo, useEffect, useState } from 'react';
+import { isEmpty } from 'lodash';
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+// Components
+import { Input, Icon, Divider, Flex, Scrollbars } from '@antscorp/antsomi-ui/es/components/atoms';
+import { Modal, EmptyData } from '@antscorp/antsomi-ui/es/components/molecules';
+import { Menu } from '@antscorp/antsomi-ui/es/components/organism';
+// Styled
+import { FilterSelectFieldsContent } from './styled';
+import { IconButton } from '../../styled';
+// Constants
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+// Context
+import { useDataTableContext } from '../../contexts/DataTableContext';
+// Utils
+import { serializeFilterMetricsToMenuItems } from '../../utils';
+import { recursiveSearchItems, searchStringQuery } from '@antscorp/antsomi-ui/es/utils';
+// Hooks
+import { useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+const initialState = {
+    searchValue: '',
+};
+const { t } = i18nInstance;
+export const SavedFilterAndMetrics = memo(props => {
+    const { onSelectFilterMetric, onSelectSavedFilter = () => { } } = props;
+    const savedFilter = useDataTableContext(store => store.filter.savedFilter);
+    const filterMetrics = useDataTableContext(store => store.filter.filterMetrics);
+    // Hooks
+    const [modal, context] = Modal.useModal();
+    // Variables
+    const { list, selected, onSelect = () => { }, onRemove } = savedFilter || {};
+    // State
+    const [state, setState] = useState(initialState);
+    // Variables
+    const { searchValue } = state;
+    // Memos
+    const savedFilterList = useDeepCompareMemo(() => (list === null || list === void 0 ? void 0 : list.filter(({ name }) => searchStringQuery(name, searchValue))) || [], [list, searchValue]);
+    const { matchedParents, results: filterMetricList } = useDeepCompareMemo(() => recursiveSearchItems({
+        list: filterMetrics || [],
+        childrenKey: 'children',
+        searchKeys: ['name'],
+        searchValue,
+    }), [filterMetrics, searchValue]);
+    // Effects
+    useEffect(() => {
+        setState(initialState);
+    }, []);
+    // Handlers
+    const renderSavedFilter = () => {
+        if (savedFilterList === null || savedFilterList === void 0 ? void 0 : savedFilterList.length) {
+            return (React.createElement(Menu, { selectedKeys: [(selected === null || selected === void 0 ? void 0 : selected.toString()) || ''], items: savedFilterList.map(savedFilter => {
+                    const { id, name, removable } = savedFilter || {};
+                    return {
+                        key: id,
+                        label: (React.createElement(Flex, { className: "saved-filter__item", align: "center", justify: "space-between", onClick: () => {
+                                onSelect(savedFilter);
+                                onSelectSavedFilter(savedFilter);
+                            } },
+                            name,
+                            !!removable && (React.createElement(IconButton, { className: "remove-btn", onClick: e => {
+                                    e.stopPropagation();
+                                    modal.confirm({
+                                        title: t(translations.dataTableFilter.deleteFilterSet.title).toString(),
+                                        content: t(translations.dataTableFilter.deleteFilterSet.description, {
+                                            filterName: name,
+                                        }).toString(),
+                                        icon: React.createElement("div", null),
+                                        okText: t(translations.remove).toString(),
+                                        onOk: () => __awaiter(void 0, void 0, void 0, function* () {
+                                            return new Promise((resolve, reject) => {
+                                                if (onRemove) {
+                                                    onRemove(savedFilter)
+                                                        .then(() => {
+                                                        resolve(true);
+                                                    })
+                                                        .catch(() => reject());
+                                                }
+                                                else {
+                                                    resolve(true);
+                                                }
+                                            });
+                                        }),
+                                    });
+                                } },
+                                React.createElement(Icon, { type: "icon-ants-outline-delete" }))))),
+                    };
+                }) }));
+        }
+        return null;
+    };
+    const filterMetricItems = useDeepCompareMemo(() => serializeFilterMetricsToMenuItems({
+        filterMetrics: filterMetricList || [],
+        onClickFilterMetric: filterMetric => {
+            if (onSelectFilterMetric) {
+                onSelectFilterMetric(filterMetric);
+            }
+        },
+    }), [filterMetricList, onSelectFilterMetric]);
+    const renderFilterMetrics = () => (React.createElement(Menu, { key: matchedParents.map(item => `${item.id}`).join(','), mode: "inline", inlineIndent: 10, defaultOpenKeys: matchedParents.map(item => `${item.id}`), items: filterMetricItems }));
+    return (React.createElement(FilterSelectFieldsContent, null,
+        React.createElement(Input, { bordered: false, value: searchValue, className: "search-input", autoFocus: true, onAfterChange: value => setState(prev => (Object.assign(Object.assign({}, prev), { searchValue: value }))), suffix: React.createElement(Icon, { type: "icon-ants-search-2", size: 24 }) }),
+        React.createElement(Divider, { style: { borderColor: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw3, margin: '8px 0 2px 0' } }),
+        isEmpty(savedFilterList) && isEmpty(filterMetricList) ? (React.createElement(EmptyData, { showIcon: false, title: "No data" })) : (React.createElement(Scrollbars, { autoHeight: true, autoHeightMax: 300, autoHide: true },
+            renderSavedFilter(),
+            !isEmpty(filterMetricList) && !isEmpty(savedFilterList) && (React.createElement(Divider, { style: { borderColor: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw3, margin: '0 0 2px 0' } })),
+            renderFilterMetrics())),
+        context));
+});

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

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

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

@@ -0,0 +1,15 @@
+// Libraries
+import React, { memo } from 'react';
+// Styled
+import { FilterWrapper } from './styled';
+import { FilterButton } from '../../styled';
+// Components
+import { AddFilterButton } from './AddFilterButton';
+import { FilterConditionList } from './FilterConditionList';
+import { Flex, Icon } from '@antscorp/antsomi-ui/es/components/atoms';
+export const Filter = memo(() => (React.createElement(FilterWrapper, { align: "center", gap: 10 },
+    React.createElement(FilterButton, null,
+        React.createElement(Icon, { type: "icon-ants-filter-slim", size: 18 })),
+    React.createElement(Flex, { align: "center", gap: 5, wrap: "wrap", style: { width: '100%', overflow: 'auto' } },
+        React.createElement(FilterConditionList, null),
+        React.createElement(AddFilterButton, null)))));

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const FilterWrapper: 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 FilterSelectFieldsContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FilterConditionListWrapper: 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 StyledFilterItem: 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>;

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

@@ -0,0 +1,86 @@
+// Libraries
+import styled from 'styled-components';
+// Components
+import { Flex } from '@antscorp/antsomi-ui/es/components/atoms';
+// Constants
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+export const FilterWrapper = styled(Flex) `
+  width: 100%;
+  overflow: auto;
+`;
+/* Filter Item */
+export const FilterSelectFieldsContent = styled.div `
+  .search-input {
+    margin-top: 8px;
+
+    i {
+      color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8};
+    }
+  }
+
+  .saved-filter {
+    &__item {
+      .remove-btn {
+        opacity: 0;
+        transform: all 300ms;
+      }
+
+      &:hover {
+        .remove-btn {
+          opacity: 1;
+        }
+      }
+    }
+  }
+`;
+/* Filter condition wrapper */
+export const FilterConditionListWrapper = styled(Flex) ``;
+export const StyledFilterItem = styled(Flex) `
+  position: relative;
+  height: 30px;
+  border: 1px solid ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue1};
+  border-radius: 30px;
+  padding: 0 10px;
+  box-sizing: border-box;
+  background-color: #fff;
+  width: fit-content;
+  max-width: 100%;
+  cursor: pointer;
+
+  > span:not(.filter-item__value) {
+    flex-shrink: 0;
+  }
+
+  * {
+    color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorPrimary} !important;
+  }
+
+  .filter-item {
+    &__value {
+      flex-shrink: 1;
+    }
+    &__close-btn {
+      position: absolute;
+      border-radius: 100%;
+      width: 20px;
+      height: 20px;
+      right: 5px;
+      background-color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.blue};
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: 0;
+      transition: all 200ms;
+    }
+  }
+
+  &:hover {
+    .filter-item__close-btn {
+      opacity: 1;
+    }
+  }
+`;
+StyledFilterItem.defaultProps = {
+    align: 'center',
+    gap: 5,
+};

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { TColumnActionButton } from '../../types';
+interface ModifyColumnProps extends TColumnActionButton {
+}
+export declare const ModifyColumn: React.FC<React.PropsWithChildren<ModifyColumnProps>>;
+export {};

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

@@ -0,0 +1,137 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import React, { memo, useState } from 'react';
+// Components
+import { ModifyColumnModal } from '../../../ModifyColumnModal';
+import { Divider, Flex, Icon, Popover, Scrollbars, Spin, Typography, message, } from '@antscorp/antsomi-ui/es/components/atoms';
+import { Menu } from '@antscorp/antsomi-ui/es/components/organism';
+import { Modal, EmptyData } from '@antscorp/antsomi-ui/es/components/molecules';
+// Locales
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+// Hooks
+import { useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
+import { useDataTableContext } from '../../contexts/DataTableContext';
+// Constants
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+// Styled
+import { IconButton } from '../../styled';
+import { SavedModifyColumnOption } from './styled';
+const { t } = i18nInstance;
+export const ModifyColumn = memo(props => {
+    // Props
+    const { children } = props;
+    // Hooks
+    const [modal, context] = Modal.useModal();
+    const [messageApi, messageContext] = message.useMessage();
+    // Store
+    const { savedModifyColumn, metrics, modalTitle, onApply } = useDataTableContext(store => { var _a; return (_a = store.toolbar.actionButtons) === null || _a === void 0 ? void 0 : _a.COLUMN; }) || {};
+    // State
+    const [state, setState] = useState({
+        isOpenModal: false,
+        isOpenPopover: false,
+        editedColumnSet: undefined,
+    });
+    // Variables
+    const { list, selected, loading = false, onRemove, onSelect = () => { }, } = savedModifyColumn || {};
+    const { isOpenModal, isOpenPopover, editedColumnSet } = state;
+    // Memo
+    const savedModifyColumns = useDeepCompareMemo(() => (list === null || list === void 0 ? void 0 : list.map(item => ({
+        key: item.id,
+        label: (React.createElement(SavedModifyColumnOption, { align: "center", justify: "space-between", gap: 5, onClick: () => onSelect(item) },
+            React.createElement(Typography.Text, { ellipsis: { tooltip: true }, style: { width: '100%' } }, item.name),
+            React.createElement(Flex, { align: "center", className: "action-buttons", onClick: e => {
+                    e.stopPropagation();
+                    setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: false })));
+                } },
+                !!item.editable && (React.createElement(IconButton, { onClick: () => {
+                        setState(Object.assign(Object.assign({}, state), { isOpenModal: true, editedColumnSet: item }));
+                    } },
+                    React.createElement(Icon, { type: "icon-ants-edit-2", size: 16 }))),
+                !!item.removable && item.id !== selected && (React.createElement(IconButton, { onClick: () => {
+                        modal.confirm({
+                            title: t(translations.modifyColumn.deleteColumnSet.title).toString(),
+                            content: t(translations.modifyColumn.deleteColumnSet.description, {
+                                columnName: item.name,
+                            }).toString(),
+                            okText: t(translations.remove).toString(),
+                            icon: React.createElement("div", null),
+                            onOk: () => __awaiter(void 0, void 0, void 0, function* () {
+                                return new Promise((resolve, reject) => {
+                                    if (onRemove) {
+                                        onRemove(item)
+                                            .then(response => {
+                                            const { success, message } = response || {};
+                                            messageApi.open({
+                                                type: success ? 'success' : 'error',
+                                                content: message ||
+                                                    t(translations.modifyColumn.deleteColumnSet[success ? 'messageSuccess' : 'messageError']).toString(),
+                                            });
+                                            resolve(true);
+                                        })
+                                            .catch(err => {
+                                            messageApi.error({
+                                                content: (err === null || err === void 0 ? void 0 : err.message) ||
+                                                    t(translations.modifyColumn.deleteColumnSet.messageError).toString(),
+                                            });
+                                            reject(err);
+                                        });
+                                    }
+                                    else {
+                                        resolve(true);
+                                    }
+                                });
+                            }),
+                        });
+                    } },
+                    React.createElement(Icon, { type: "icon-ants-outline-delete" })))))),
+    }))) || [], [list, messageApi, modal, onRemove, onSelect, selected]);
+    /**
+     * If editedColumnSet exists, get the metrics of this editedColumnSet
+     * If editedColumnSet is not selected, use metrics of the selected modified column
+     */
+    const selectedMetrics = useDeepCompareMemo(() => {
+        var _a;
+        return editedColumnSet
+            ? editedColumnSet === null || editedColumnSet === void 0 ? void 0 : editedColumnSet.metrics
+            : ((_a = list === null || list === void 0 ? void 0 : list.find(item => item.id === selected)) === null || _a === void 0 ? void 0 : _a.metrics) || [];
+    }, [list, selected, editedColumnSet]);
+    // Handlers
+    const onCancelModal = () => {
+        setState(prev => (Object.assign(Object.assign({}, prev), { isOpenModal: false, editedColumnSet: undefined })));
+    };
+    const handleApplyModifyColumn = (args) => __awaiter(void 0, void 0, void 0, function* () {
+        if (onApply) {
+            yield onApply(args);
+            setState(prev => (Object.assign(Object.assign({}, prev), { isOpenModal: false, editedColumnSet: undefined })));
+        }
+    });
+    // Renders
+    const SavedModifyColumnContent = (React.createElement(Spin, { spinning: loading },
+        React.createElement(Flex, { vertical: true },
+            React.createElement(Menu, { items: [
+                    {
+                        key: 'modify-column',
+                        label: 'Modify column',
+                    },
+                ], onClick: () => {
+                    // If not modify column is selected then do nothing
+                    if (!selected)
+                        return;
+                    setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: false, isOpenModal: true })));
+                } }),
+            React.createElement(Divider, { style: { borderColor: globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw3, margin: 0 } }),
+            React.createElement(Scrollbars, { autoHeight: true, autoHeightMax: 300 }, !(savedModifyColumns === null || savedModifyColumns === void 0 ? void 0 : savedModifyColumns.length) ? (React.createElement(EmptyData, { showIcon: false, title: t(translations.noData).toString() })) : (React.createElement(Menu, { selectedKeys: [(selected === null || selected === void 0 ? void 0 : selected.toString()) || ''], items: savedModifyColumns }))))));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Popover, { content: SavedModifyColumnContent, open: isOpenPopover, trigger: ['click'], placement: "bottomRight", arrow: false, overlayInnerStyle: { width: 250, padding: 0 }, onOpenChange: isOpen => setState(prev => (Object.assign(Object.assign({}, prev), { isOpenPopover: isOpen }))), destroyTooltipOnHide: true }, children),
+        React.createElement(ModifyColumnModal, { title: modalTitle, open: isOpenModal, metrics: metrics, selectedMetrics: selectedMetrics, savedColumnSets: (savedModifyColumn === null || savedModifyColumn === void 0 ? void 0 : savedModifyColumn.list) || [], editedColumnSet: editedColumnSet, onCancel: onCancelModal, onApply: handleApplyModifyColumn }, "Cancel"),
+        context,
+        messageContext));
+});

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const PopoverContent: 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 SavedModifyColumnOption: 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>;

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

@@ -0,0 +1,19 @@
+// Libraries
+import styled from 'styled-components';
+// Components
+import { Flex } from '@antscorp/antsomi-ui/es/components/atoms';
+export const PopoverContent = styled(Flex) ``;
+export const SavedModifyColumnOption = styled(Flex) `
+  height: 100%;
+
+  .action-buttons {
+    opacity: 0;
+    transform: all 300ms;
+  }
+
+  &:hover {
+    .action-buttons {
+      opacity: 1;
+    }
+  }
+`;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { FlexProps } from 'antd/lib';
+export type TChangePageSizePayload = {
+    pageSize: number;
+    page: number;
+};
+export interface PaginationProps extends Omit<FlexProps, 'children' | 'onChange'> {
+    page?: number;
+    pageSize?: number;
+    total?: number;
+    onChange?: (payload: TChangePageSizePayload) => void;
+}
+export declare const Pagination: React.FC<PaginationProps>;

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

@@ -0,0 +1,59 @@
+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, { useMemo } from 'react';
+// Components
+import { Select } from '@antscorp/antsomi-ui/es/components/molecules';
+import { Flex, Icon, Typography } from '@antscorp/antsomi-ui/es/components/atoms';
+// Instance
+import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
+// Locales
+import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
+// Styled
+import { ActionButton, PaginationWrapper } from './styled';
+// Constants
+import { DEFAULT_PAGE, DEFAULT_PAGE_SIZE, PAGE_SIZE_OPTIONS } from '../../constants';
+const { Text } = Typography;
+export const Pagination = props => {
+    // Props
+    const { pageSize = DEFAULT_PAGE_SIZE, page = DEFAULT_PAGE, total = 0, onChange } = props, restProps = __rest(props, ["pageSize", "page", "total", "onChange"]);
+    // Instance
+    const { t } = i18nInstance;
+    // Memo
+    const paginationSizeOptions = useMemo(() => PAGE_SIZE_OPTIONS.map(pageSize => ({ label: pageSize.toString(), value: pageSize })), []);
+    // Variables
+    const disabledNext = page * pageSize >= total;
+    const disabledPrevious = page === 1;
+    // Handlers
+    const onChangePagination = (payload) => {
+        if (onChange) {
+            onChange(Object.assign({ page,
+                pageSize }, payload));
+        }
+    };
+    return (React.createElement(PaginationWrapper, Object.assign({ align: "center", gap: 10 }, restProps),
+        React.createElement(Flex, { align: "center", gap: 10 },
+            React.createElement(Text, null,
+                t(translations.pagination.showRow).toString(),
+                ":"),
+            React.createElement(Select, { defaultValue: DEFAULT_PAGE_SIZE, value: pageSize, className: "show-row-select", options: paginationSizeOptions, popupMatchSelectWidth: 70, onChange: value => onChangePagination({ pageSize: value, page: 1 }) })),
+        React.createElement(Text, null, `${total ? page * pageSize - pageSize + 1 : 0} - ${Math.min(page * pageSize, total)} of ${total}`),
+        React.createElement(Flex, { align: "center", gap: 10 },
+            React.createElement(ActionButton, { onClick: () => onChangePagination({ page: 1 }), disabled: disabledPrevious },
+                React.createElement(Icon, { type: "icon-ants-first-page", size: 12 })),
+            React.createElement(ActionButton, { disabled: disabledPrevious, onClick: () => onChangePagination({ page: page - 1 }) },
+                React.createElement(Icon, { type: "icon-ants-angle-left", size: 12 })),
+            React.createElement(ActionButton, { disabled: disabledNext, onClick: () => onChangePagination({ page: page + 1 }) },
+                React.createElement(Icon, { type: "icon-ants-angle-right", size: 12 })),
+            React.createElement(ActionButton, { onClick: () => onChangePagination({ page: Math.ceil(total / pageSize) }), disabled: disabledNext },
+                React.createElement(Icon, { type: "icon-ants-last-page", size: 12 })))));
+};

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const PaginationWrapper: 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 ActionButton: import("styled-components").StyledComponent<"div", any, {
+    disabled?: boolean | undefined;
+}, never>;

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

@@ -0,0 +1,34 @@
+// Libraries
+import styled, { css } from 'styled-components';
+// Components
+import { Flex } from '@antscorp/antsomi-ui/es/components/atoms';
+// Constants
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+export const PaginationWrapper = styled(Flex) `
+  height: 60px;
+
+  .show-row-select {
+    width: 50px;
+  }
+`;
+export const ActionButton = styled.div `
+  height: 24px;
+  width: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw8};
+  transition: all 0.3s;
+
+  ${props => props.disabled &&
+    css `
+      pointer-events: none;
+      color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.bw5};
+    `}
+
+  &:hover {
+    color: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.colorText};
+  }
+
+  cursor: pointer;
+`;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ResizeCallbackData } from 'react-resizable';
+interface HandleProps extends React.HTMLAttributes<HTMLSpanElement> {
+}
+interface ResizableCellProps extends Omit<React.ThHTMLAttributes<HTMLTableCellElement>, 'onResize'> {
+    width?: number;
+    handleProps?: HandleProps;
+    disableResize?: boolean;
+    fixed?: string;
+    index?: number;
+    tableRef?: React.RefObject<HTMLDivElement>;
+    onResizeStop?: (e: React.SyntheticEvent<Element, Event>, data: ResizeCallbackData) => void;
+}
+export declare const ResizableCell: React.FC<ResizableCellProps>;
+export {};

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

@@ -0,0 +1,80 @@
+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, { useEffect, useMemo, useState } from 'react';
+import { Resizable } from 'react-resizable';
+import { MIN_COLUMN_WIDTH } from '../../constants';
+// Components
+import { Typography } from '@antscorp/antsomi-ui/es/components/atoms';
+export const ResizableCell = props => {
+    var _a;
+    const { width: widthProp, handleProps, disableResize, children, style, fixed, index, tableRef, onResizeStop, onClick = () => { } } = props, restProps = __rest(props, ["width", "handleProps", "disableResize", "children", "style", "fixed", "index", "tableRef", "onResizeStop", "onClick"]);
+    // Ref
+    const isResizing = React.useRef(false);
+    // State
+    const [width, setWidth] = useState(widthProp);
+    // Memos
+    const columnStyle = useMemo(() => (Object.assign(Object.assign({}, style), { zIndex: fixed ? 100 - (index || 0) : undefined })), [style, fixed, index]);
+    // Effect
+    useEffect(() => {
+        setWidth(widthProp);
+    }, [widthProp]);
+    const CellHeaderContent = (React.createElement(Typography.Text, { ellipsis: { tooltip: true }, style: { width: '100%' } }, children));
+    const isRowSelectionCol = (_a = props === null || props === void 0 ? void 0 : props.className) === null || _a === void 0 ? void 0 : _a.includes('antsomi-table-selection-column');
+    if (isRowSelectionCol || !width || disableResize) {
+        return (React.createElement("th", Object.assign({}, restProps, { 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;
+            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];
+            if (cell) {
+                if (type === 'add') {
+                    return cell.setAttribute('aria-resizable', 'true');
+                }
+                cell.removeAttribute('aria-resizable');
+            }
+        });
+    };
+    return (React.createElement(Resizable, { width: width || 0, height: 0, minConstraints: [MIN_COLUMN_WIDTH, 0], handle: React.createElement("div", { className: "resizable-handle-wrapper", onClick: e => {
+                e.stopPropagation();
+            }, onMouseEnter: () => handleStyleResizable('add'), onMouseLeave: () => handleStyleResizable('remove') },
+            React.createElement("span", Object.assign({ className: "resizable-handle" }, handleProps))), onResize: (_e, data) => {
+            var _a;
+            const { size } = data; // Destructure size from the resize data
+            // 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)`);
+            // 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
+            if (resizeColEl) {
+                resizeColEl.style.width = `${size.width}px`;
+            }
+        }, onResizeStart: () => {
+            isResizing.current = true;
+        }, onResizeStop: (...args) => {
+            setTimeout(() => {
+                isResizing.current = false;
+            });
+            if (onResizeStop) {
+                onResizeStop(...args);
+            }
+        }, draggableOpts: { enableUserSelectHack: true } },
+        React.createElement("th", Object.assign({}, restProps, { style: columnStyle, onClick: e => {
+                if (!isResizing.current) {
+                    onClick(e);
+                }
+            } }), CellHeaderContent)));
+};

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { TableProps as AntdTableProps } from 'antd';
+interface TableProps extends AntdTableProps<any> {
+}
+export declare const Table: React.FC<TableProps>;
+export {};