es-grid-template 1.9.38 → 1.9.40

package/es/grid-component/type.d.ts

@@ -657,6 +657,7 @@ export type ToolbarItem = {
     title?: React.ReactNode;
     disabled?: boolean;
     hasMenu?: boolean;
+    fixedRight?: boolean;
     [key: string]: any;
 };
 export type LoadOptionsArgs = {

package/es/group-component/TableContainerEdit.js

@@ -1432,6 +1432,221 @@ const TableContainerEdit = props => {
       triggerChangeData?.([...newData]);
     }
   };
+  const toolbarItemsTop = React.useMemo(() => {
+    if (!rowsFocus || rowsFocus.length === 0) {
+      return toolbarItems?.filter(it => it.position !== 'Bottom' && it.fixedRight !== false && it.visible !== false && it.key !== 'DUPLICATE' && it.key !== 'INSERT_BEFORE' && it.key !== 'INSERT_AFTER' && it.key !== 'DELETE_ROWS' && it.key !== 'INSERT_CHILDREN').map(item => {
+        if (item.key === 'ADD') {
+          return {
+            ...item,
+            template: () => {
+              return /*#__PURE__*/React.createElement(Fragment, null, item.key === 'ADD' && /*#__PURE__*/React.createElement("div", {
+                className: classNames(`be-toolbar-item`, item?.className)
+              }, /*#__PURE__*/React.createElement(Dropdown.Button, {
+                overlayClassName: 'be-popup-container',
+                trigger: ['click'],
+                style: {
+                  color: '#28c76f',
+                  borderColor: '#28c76f'
+                },
+                className: 'toolbar-button toolbar-dropdown-button',
+                menu: {
+                  items: itemsAdd,
+                  onClick: e => handleAddMulti(item, Number(e.key))
+                }
+              }, /*#__PURE__*/React.createElement("span", {
+                style: {
+                  color: '#28c76f'
+                },
+                onClick: () => handleAddMulti(item, 1)
+              }, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item'))));
+            }
+          };
+        }
+        if (item.key === 'DELETE') {
+          return {
+            ...item,
+            template: () => {
+              return /*#__PURE__*/React.createElement("div", {
+                className: classNames(`be-toolbar-item`, item?.className)
+              }, /*#__PURE__*/React.createElement(Button, {
+                style: {
+                  color: '#eb4619',
+                  borderColor: '#eb4619'
+                },
+                variant: 'outlined',
+                onClick: () => handleDeleteAll(item),
+                className: "d-flex toolbar-button"
+              }, item.label ? t ? t(item.label) : item.label : t ? t('Delete all item') : 'Delete all item'));
+            }
+          };
+        }
+        return {
+          ...item
+        };
+      });
+    }
+    return toolbarItems?.filter(it => it.position === 'Bottom' && it.visible !== false).map(item => {
+      if (item.key === 'ADD') {
+        return {
+          ...item,
+          template: () => {
+            return /*#__PURE__*/React.createElement(Fragment, null, item.key === 'ADD' && /*#__PURE__*/React.createElement("div", {
+              className: classNames(`be-toolbar-item`, item?.className)
+            }, /*#__PURE__*/React.createElement(Dropdown.Button, {
+              overlayClassName: 'be-popup-container',
+              style: {
+                color: '#28c76f',
+                borderColor: '#28c76f'
+              },
+              className: 'toolbar-button toolbar-dropdown-button',
+              menu: {
+                items: itemsAdd,
+                onClick: e => handleAddMulti(item, Number(e.key))
+              }
+            }, /*#__PURE__*/React.createElement("span", {
+              style: {
+                color: '#28c76f'
+              },
+              onClick: () => handleAddMulti(item, 1)
+            }, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item'))));
+          }
+        };
+      }
+      if (item.key === 'DUPLICATE') {
+        return {
+          ...item,
+          template: () => {
+            return /*#__PURE__*/React.createElement(Fragment, null, item.key === 'DUPLICATE' && item.visible !== false && rowsFocus.length > 0 && /*#__PURE__*/React.createElement("div", {
+              className: classNames(`be-toolbar-item`, item?.className)
+            }, /*#__PURE__*/React.createElement(Button, {
+              style: {
+                color: '#28c76f',
+                borderColor: '#28c76f'
+              },
+              variant: 'outlined',
+              onClick: handleDuplicate,
+              className: "d-flex toolbar-button"
+            }, item.label ? t ? t(item.label) : item.label : t ? t('Duplicate') : 'Duplicate')));
+          }
+        };
+      }
+      if (item.key === 'INSERT_BEFORE') {
+        return {
+          ...item,
+          template: () => {
+            return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+              className: classNames(`be-toolbar-item`, item?.className)
+            }, /*#__PURE__*/React.createElement(Dropdown.Button, {
+              overlayClassName: 'be-popup-container',
+              style: {
+                color: '#28c76f',
+                borderColor: '#28c76f'
+              },
+              className: 'toolbar-button toolbar-dropdown-button',
+              menu: {
+                items: itemsAdd,
+                onClick: e => handleInsertBefore(item, Number(e.key))
+              }
+            }, /*#__PURE__*/React.createElement("span", {
+              style: {
+                color: '#28c76f'
+              },
+              onClick: () => handleInsertBefore(item, 1)
+            }, item.label ? t ? t(item.label) : item.label : t ? t('Insert item before') : 'Insert item before'))));
+          }
+        };
+      }
+      if (item.key === 'INSERT_AFTER') {
+        return {
+          ...item,
+          template: () => {
+            return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+              className: classNames(`be-toolbar-item`, item?.className)
+            }, /*#__PURE__*/React.createElement(Dropdown.Button, {
+              overlayClassName: 'be-popup-container',
+              style: {
+                color: '#28c76f',
+                borderColor: '#28c76f'
+              },
+              className: 'toolbar-button toolbar-dropdown-button',
+              menu: {
+                items: itemsAdd,
+                onClick: e => handleInsertAfter(item, Number(e.key))
+              }
+            }, /*#__PURE__*/React.createElement("span", {
+              style: {
+                color: '#28c76f'
+              },
+              onClick: () => handleInsertAfter(item, 1)
+            }, item.label ? t ? t(item.label) : item.label : t ? t('Insert item after') : 'Insert item after'))));
+          }
+        };
+      }
+      if (item.key === 'INSERT_CHILDREN') {
+        return {
+          ...item,
+          template: () => {
+            return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+              className: classNames(`be-toolbar-item`, item?.className)
+            }, /*#__PURE__*/React.createElement(Button, {
+              style: {
+                color: '#28c76f',
+                borderColor: '#28c76f'
+              },
+              variant: 'outlined',
+              onClick: () => handleInsertChild(item),
+              className: "d-flex toolbar-button"
+            }, item.label ? t ? t(item.label) : item.label : t ? t('Insert item children') : 'Insert item children')));
+          }
+        };
+      }
+      if (item.key === 'DELETE') {
+        return {
+          ...item,
+          template: () => {
+            return /*#__PURE__*/React.createElement("div", {
+              className: classNames(`be-toolbar-item`, item?.className)
+            }, /*#__PURE__*/React.createElement(Button, {
+              style: {
+                color: '#eb4619',
+                borderColor: '#eb4619'
+              },
+              variant: 'outlined',
+              onClick: handleDeleteAll,
+              className: "d-flex toolbar-button"
+            }, item.label ? t ? t(item.label) : item.label : t ? t('Delete all item') : 'Delete all item'));
+          }
+        };
+      }
+      if (item.key === 'DELETE_ROWS') {
+        return {
+          ...item,
+          template: () => {
+            return /*#__PURE__*/React.createElement("div", {
+              className: classNames(`be-toolbar-item`, item?.className)
+            }, /*#__PURE__*/React.createElement(Button, {
+              style: {
+                color: '#eb4619',
+                borderColor: '#eb4619'
+              },
+              variant: 'outlined',
+              onClick: () => handleDeleteRows(item),
+              className: "d-flex toolbar-button"
+            }, t ? `${t('Delete')} ${rowsFocus.length} ${t('row')}` : `Delete ${rowsFocus.length} item`));
+          }
+        };
+      }
+      return {
+        ...item
+      };
+    });
+  }, [handleAddMulti, handleDeleteAll, handleDeleteRows, handleDuplicate, handleInsertAfter, handleInsertBefore, handleInsertChild, itemsAdd, rowsFocus, t, toolbarItems]);
+  const toolbarItemTopRight = React.useMemo(() => {
+    if (!toolbarItems) {
+      return undefined;
+    }
+    return toolbarItems.filter(it => it.position !== 'Bottom' && it.fixedRight && it.visible !== false);
+  }, [toolbarItems]);
   const toolbarItemsBottom = React.useMemo(() => {
     if (!rowsFocus || rowsFocus.length === 0) {
       return toolbarItems?.filter(it => it.position === 'Bottom' && it.visible !== false && it.key !== 'DUPLICATE' && it.key !== 'INSERT_BEFORE' && it.key !== 'INSERT_AFTER' && it.key !== 'DELETE_ROWS' && it.key !== 'INSERT_CHILDREN').map(item => {
@@ -1900,7 +2115,7 @@ const TableContainerEdit = props => {
       overflow: 'hidden'
     }
   }, /*#__PURE__*/React.createElement(Toolbar, {
-    items: (toolbarItems ?? []).filter(it => it.position !== 'Bottom'),
+    items: toolbarItemsTop ?? [],
     mode: 'scroll'
   })), /*#__PURE__*/React.createElement("div", {
     style: {
@@ -1917,7 +2132,15 @@ const TableContainerEdit = props => {
     showTotal: (total, range) =>
     // @ts-ignore
     `${range[0]}-${range[1]} / ${total} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
-  }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, fullScreen !== false && (isFullScreen ? /*#__PURE__*/React.createElement(Minimize, {
+  }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, toolbarItemTopRight && /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement(Toolbar, {
+    items: toolbarItemTopRight,
+    mode: 'responsive'
+  })), fullScreen !== false && (isFullScreen ? /*#__PURE__*/React.createElement(Minimize, {
     fontSize: 16,
     onClick: () => {
       setIsFullScreen(!isFullScreen);

package/es/group-component/hook/utils.d.ts

@@ -194,10 +194,10 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
         value: any;
         rowData: RecordType;
     }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
-    onCellStyles?: Omit<CSSProperties, "right" | "left" | "position" | "display" | "minWidth" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "right" | "left" | "position" | "display" | "minWidth" | "width">);
-    onCellHeaderStyles?: Omit<CSSProperties, "right" | "left" | "position" | "display" | "minWidth" | "width"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "right" | "left" | "position" | "display" | "minWidth" | "width">);
+    onCellStyles?: Omit<CSSProperties, "width" | "minWidth" | "right" | "left" | "position" | "display"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "right" | "left" | "position" | "display">);
+    onCellHeaderStyles?: Omit<CSSProperties, "width" | "minWidth" | "right" | "left" | "position" | "display"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "right" | "left" | "position" | "display">);
     onCell?: (rowData: RecordType, index: number) => import("react").TdHTMLAttributes<HTMLTableCellElement>;
-    onCellFooterStyles?: Omit<CSSProperties, "right" | "left" | "position" | "display" | "minWidth" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "right" | "left" | "position" | "display" | "minWidth" | "width">);
+    onCellFooterStyles?: Omit<CSSProperties, "width" | "minWidth" | "right" | "left" | "position" | "display"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "right" | "left" | "position" | "display">);
     getValue?: (row: any, rowIndex: number) => any;
     getCellProps?: (value: any, row: any, rowIndex: number) => import("./../../grid-component/type").CellProps;
     headerCellProps?: import("./../../grid-component/type").CellProps;

package/es/table-component/InternalTable.js

@@ -182,16 +182,23 @@ const InternalTable = props => {
           colorLink: '#eb4619',
           colorLinkHover: '#eb4619'
         },
+        TableSelect: {
+          activeBorderColor: '#1677ff',
+          hoverBorderColor: '#1677ff',
+          zIndexPopup: 1059
+        },
         Select: {
           activeBorderColor: '#1677ff',
-          hoverBorderColor: '#1677ff'
+          hoverBorderColor: '#1677ff',
+          zIndexPopup: 1059
           // colorPrimary: '#eb4619',
           // colorBgBase: 'red'
         },
         DatePicker: {
           colorPrimary: '#eb4619',
           activeBorderColor: '#1677ff',
-          hoverBorderColor: '#1677ff'
+          hoverBorderColor: '#1677ff',
+          zIndexPopup: 1059
         },
         Pagination: {
           fontSize: 12

package/es/table-component/TableContainer.js

@@ -89,7 +89,6 @@ const TableContainer = props => {
   const [tableHeight, settableHeight] = React.useState(0);
   const [focusedCell, setFocusedCell] = React.useState(undefined);
   React.useEffect(() => {
-    // const totalHeight = minHeight ?? height
     const totalHeight = getTableHeight(height, minHeight);
     if (totalHeight) {
       const topHeight = topToolbarRef.current ? topToolbarRef.current.offsetHeight : 0;
@@ -197,6 +196,24 @@ const TableContainer = props => {
       // })
     }
   }, [columnSizingInfo]);
+  const toolbarItemTop = React.useMemo(() => {
+    if (!toolbarItems) {
+      return undefined;
+    }
+    return toolbarItems.filter(it => it.position !== 'Bottom' && it.fixedRight !== false);
+  }, [toolbarItems]);
+  const toolbarItemBottom = React.useMemo(() => {
+    if (!toolbarItems) {
+      return undefined;
+    }
+    return toolbarItems.filter(it => it.position === 'Bottom');
+  }, [toolbarItems]);
+  const toolbarItemTopRight = React.useMemo(() => {
+    if (!toolbarItems) {
+      return undefined;
+    }
+    return toolbarItems.filter(it => it.position !== 'Bottom' && it.fixedRight);
+  }, [toolbarItems]);
   const triggerCommandClick = args => {
     // const { id: idCommand, rowId, rowData, index } = args
 
@@ -219,7 +236,8 @@ const TableContainer = props => {
     style: {
       display: 'flex',
       justifyContent: 'space-between',
-      alignItems: 'center'
+      alignItems: 'center',
+      gap: '1rem'
     }
   }, /*#__PURE__*/React.createElement("div", {
     style: {
@@ -227,7 +245,7 @@ const TableContainer = props => {
       overflow: 'hidden'
     }
   }, /*#__PURE__*/React.createElement(Toolbar, {
-    items: (toolbarItems ?? []).filter(it => it.position !== 'Bottom')
+    items: toolbarItemTop ?? []
     // mode={'scroll'}
     ,
     mode: toolbarMode
@@ -246,7 +264,15 @@ const TableContainer = props => {
     showTotal: (totalItems, range) =>
     // @ts-ignore
     `${range[0]}-${range[1]} / ${totalItems} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
-  }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, fullScreen !== false && (isFullScreen ? /*#__PURE__*/React.createElement(Minimize, {
+  }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, toolbarItemTopRight && /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement(Toolbar, {
+    items: toolbarItemTopRight,
+    mode: toolbarMode
+  })), fullScreen !== false && (isFullScreen ? /*#__PURE__*/React.createElement(Minimize, {
     fontSize: 16,
     onClick: () => {
       setIsFullScreen(!isFullScreen);
@@ -341,7 +367,17 @@ const TableContainer = props => {
     fixedRightColumns: fixedRightColumns
   }))), /*#__PURE__*/React.createElement("div", {
     ref: bottomToolbarRef
-  }, pagination && !infiniteScroll && /*#__PURE__*/React.createElement(Pagination, _extends({
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement(Toolbar, {
+    items: toolbarItemBottom ?? []
+    // mode={'scroll'}
+    ,
+    mode: toolbarMode
+  })), pagination && !infiniteScroll && /*#__PURE__*/React.createElement(Pagination, _extends({
     pageSizeOptions: [20, 50, 100, 1000, 10000],
     rootClassName: 'pagination-template',
     showSizeChanger: true,

package/es/table-component/TableContainerEdit.js

@@ -1,7 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { Fragment } from "react";
 import { useCopyToClipboard } from 'usehooks-ts';
-import { checkDecimalSeparator, checkThousandSeparator, detectSeparators, findItemByKey, flattenArray, flattenData, getAllRowKey, getColIdsBetween, getDefaultValue, getEditType, getFormat, getRowIdsBetween, getSelectedCellMatrix, getTableHeight, isEditable, isFormattedNumber, newGuid, parseExcelClipboard,
+import { checkDecimalSeparator, checkThousandSeparator,
+// convertDateToDayjs,
+detectSeparators, findItemByKey, flattenArray, flattenData, getAllRowKey, getColIdsBetween, getDatepickerFormat,
+// getDatepickerFormat,
+getDefaultValue, getEditType, getFormat, getRowIdsBetween, getSelectedCellMatrix, getTableHeight, isDateValue, isEditable, isEmpty, isFormattedNumber, newGuid, parseExcelClipboard,
 // parseExcelClipboardText,
 sumSize,
 // sumSize,
@@ -24,6 +28,7 @@ import withReactContent from "sweetalert2-react-content";
 import Swal from "sweetalert2";
 import { useLocale } from "rc-master-ui/es/locale";
 import { getToolbarTemplate } from "../grid-component/hooks";
+import moment from "moment";
 const MySwal = withReactContent(Swal);
 const {
   Paragraph,
@@ -409,6 +414,17 @@ const TableContainerEdit = props => {
                   [columnKey]: Number(val)
                 };
               }
+            } else if (columnOri.type === 'data' || columnOri.type === 'datatime' || columnOri.editType === 'date' || columnOri.editType === 'datetime') {
+              const isDate = isDateValue(cellValue.trim());
+              const colFormat = typeof columnOri?.format === 'function' ? columnOri?.format(record) : columnOri?.format;
+              const cellFormat = getFormat(colFormat, format);
+              const editType = getEditType(columnOri);
+              const dateFormat = getDatepickerFormat(editType, cellFormat);
+              const date = isDate && !isEmpty(cellValue.trim()) ? moment(cellValue.trim(), dateFormat).format("YYYY-MM-DDTHH:mm:ssZ") : null;
+              newData[targetRow] = {
+                ...newData[targetRow],
+                [columnKey]: date
+              };
             } else {
               newData[targetRow] = {
                 ...newData[targetRow],
@@ -474,8 +490,6 @@ const TableContainerEdit = props => {
 
           if (isEdit) {
             const columnKey = allCols[targetCol].id;
-
-            // if (columnOri.type === 'number' && isFormattedNumber(cellValue.trim())) {
             if (columnOri.type === 'number') {
               if (cellValue.trim() === '') {
                 childData[targetRow] = {
@@ -505,6 +519,17 @@ const TableContainerEdit = props => {
                   [columnKey]: Number(val)
                 };
               }
+            } else if (columnOri.type === 'data' || columnOri.type === 'datatime' || columnOri.editType === 'date' || columnOri.editType === 'datetime') {
+              const isDate = isDateValue(cellValue.trim());
+              const colFormat = typeof columnOri?.format === 'function' ? columnOri?.format(record) : columnOri?.format;
+              const cellFormat = getFormat(colFormat, format);
+              const editType = getEditType(columnOri);
+              const dateFormat = getDatepickerFormat(editType, cellFormat);
+              const date = isDate && !isEmpty(cellValue.trim()) ? moment(cellValue.trim(), dateFormat).format("YYYY-MM-DDTHH:mm:ssZ") : null;
+              childData[targetRow] = {
+                ...childData[targetRow],
+                [columnKey]: date
+              };
             } else {
               childData[targetRow] = {
                 ...childData[targetRow],
@@ -1550,7 +1575,7 @@ const TableContainerEdit = props => {
   const toolbarItemsTop = React.useMemo(() => {
     // Chưa có dòng| ô được chọn
     if (!rowsFocus || rowsFocus.length === 0) {
-      return toolbarItems?.filter(it => it.position !== 'Bottom' && it.visible !== false && it.key !== 'DUPLICATE' && it.key !== 'INSERT_BEFORE' && it.key !== 'INSERT_AFTER' && it.key !== 'DELETE_ROWS' && it.key !== 'INSERT_CHILDREN').map(item => {
+      return toolbarItems?.filter(it => it.position !== 'Bottom' && it.visible !== false && it.fixedRight !== false && it.key !== 'DUPLICATE' && it.key !== 'INSERT_BEFORE' && it.key !== 'INSERT_AFTER' && it.key !== 'DELETE_ROWS' && it.key !== 'INSERT_CHILDREN').map(item => {
         if (item.key === 'ADD') {
           return {
             ...item,
@@ -1611,7 +1636,7 @@ const TableContainerEdit = props => {
         };
       });
     }
-    return toolbarItems?.filter(it => it.position !== 'Bottom' && it.visible !== false).map(item => {
+    return toolbarItems?.filter(it => it.position !== 'Bottom' && it.visible !== false && it.fixedRight !== false).map(item => {
       if (item.key === 'ADD') {
         return {
           ...item,
@@ -1799,6 +1824,12 @@ const TableContainerEdit = props => {
       };
     });
   }, [handleAddMulti, handleDeleteAll, handleDeleteRows, handleDuplicate, handleInsertAfter, handleInsertBefore, handleInsertChild, itemsAdd, rowsFocus, t, toolbarItems]);
+  const toolbarItemTopRight = React.useMemo(() => {
+    if (!toolbarItems) {
+      return undefined;
+    }
+    return toolbarItems.filter(it => it.position !== 'Bottom' && it.fixedRight);
+  }, [toolbarItems]);
   const triggerCommandClick = args => {
     const {
       id: idCommand,
@@ -2007,7 +2038,8 @@ const TableContainerEdit = props => {
     style: {
       display: 'flex',
       justifyContent: 'space-between',
-      alignItems: 'center'
+      alignItems: 'center',
+      gap: '1rem'
     }
   }, /*#__PURE__*/React.createElement("div", {
     style: {
@@ -2042,7 +2074,15 @@ const TableContainerEdit = props => {
     showTotal: (total, range) =>
     // @ts-ignore
     `${range[0]}-${range[1]} / ${total} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
-  }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, fullScreen !== false && (isFullScreen ? /*#__PURE__*/React.createElement(Minimize, {
+  }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, toolbarItemTopRight && /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement(Toolbar, {
+    items: toolbarItemTopRight,
+    mode: toolbarMode
+  })), fullScreen !== false && (isFullScreen ? /*#__PURE__*/React.createElement(Minimize, {
     fontSize: 16,
     onClick: () => {
       setIsFullScreen(!isFullScreen);

package/es/table-component/body/EditableCell.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useContext } from "react";
-import { DatePicker, TimePicker, ColorPicker } from "rc-master-ui";
-import { Divider, Row, Col, Input, Button } from "antd";
+import { DatePicker, TimePicker, ColorPicker, Input } from "rc-master-ui";
+import { Divider, Row, Col, Button } from "antd";
 import { checkDecimalSeparator, checkThousandSeparator, checkFieldKey, convertArrayWithIndent, convertDateToDayjs, convertLabelToTitle, getDatepickerFormat, isDisable, isEmpty, isNullOrUndefined, customWeekStartEndFormat, convertDayjsToDate, parseBooleanToValue, isColor, genPresets, getFormat, removeVietnameseTones } from "../hook/utils";
 import classNames from "classnames";
 import { NumericFormat } from "react-numeric-component";

package/es/table-component/body/TableBodyCell.js

@@ -1,6 +1,6 @@
 import Space from "rc-master-ui/es/space";
 import Command from "../components/command/Command";
-import { getCommonPinningStyles } from "../hook/utils";
+import { getCommonPinningStyles, getFormat } from "../hook/utils";
 import Checkbox from "rc-master-ui/es/checkbox/Checkbox";
 import classNames from "classnames";
 import React from "react";
@@ -182,7 +182,7 @@ const TableBodyCell = props => {
   const expandIconColumnIndex = expandable?.expandIconColumnIndex ?? 0;
   const [isOpenTooltip, setIsOpenTooltip] = React.useState(false);
   const record = cell.row.original;
-  const columnMeta = cell.column.columnDef.meta ?? {};
+  const columnMeta = React.useMemo(() => cell.column.columnDef.meta ?? {}, [cell.column.columnDef.meta]);
   const cellStyles = typeof columnMeta.onCellStyles === 'function' ? columnMeta.onCellStyles(cell.getValue(), cell) : columnMeta.onCellStyles;
 
   // const tooltipContent: any = (isOpenTooltip === false)
@@ -208,7 +208,9 @@ const TableBodyCell = props => {
   const parrents = cell.row.getParentRows();
   const cellValue = cell.getValue();
   const rowIndex = cell.row.index;
-  const fomatedValue = renderValueCell(columnMeta, cellValue, record, rowIndex, colIndex, format, false);
+  const colFormat = typeof columnMeta?.format === 'function' ? columnMeta?.format(record) : columnMeta?.format;
+  const cellFormat = getFormat(colFormat, format);
+  const fomatedValue = renderValueCell(columnMeta, cellValue, record, rowIndex, colIndex, cellFormat, true);
   const valueCellString = getValueCellString(columnMeta, cellValue, record, rowIndex, colIndex, format);
   const tooltipContent = React.useMemo(() => {
     if (isOpenTooltip === false) {

package/es/table-component/body/TableBodyCellEdit.js

@@ -1,6 +1,6 @@
 import Space from "rc-master-ui/es/space";
 import Command from "../components/command/Command";
-import { addRowsDown, addRowsDownWithCtrl, addRowsUp, addRowsUpWithCtrl, findFirst, flattenArray, flattenData, getColIdsBetween, getCommonPinningStyles, getEditType, getRowIdsBetween, getSelectedCellMatrix, isEditable, isObjEmpty, isObjEqual, newGuid, unFlattenData, updateOrInsert } from "../hook/utils";
+import { addRowsDown, addRowsDownWithCtrl, addRowsUp, addRowsUpWithCtrl, findFirst, flattenArray, flattenData, getColIdsBetween, getCommonPinningStyles, getEditType, getFormat, getRowIdsBetween, getSelectedCellMatrix, isEditable, isObjEmpty, isObjEqual, newGuid, unFlattenData, updateOrInsert } from "../hook/utils";
 import Checkbox from "rc-master-ui/es/checkbox/Checkbox";
 import classNames from "classnames";
 import React from "react";
@@ -1113,7 +1113,9 @@ const TableBodyCellEdit = props => {
   };
   const cellValue = cell.getValue();
   const rowIndex = cell.row.index;
-  const fomatedValue = renderValueCell(columnMeta, cellValue, record, rowIndex, colIndex, format, true);
+  const colFormat = typeof columnMeta?.format === 'function' ? columnMeta?.format(record) : columnMeta?.format;
+  const cellFormat = getFormat(colFormat, format);
+  const fomatedValue = renderValueCell(columnMeta, cellValue, record, rowIndex, colIndex, cellFormat, true);
   return /*#__PURE__*/React.createElement("div", {
     key: cell.id,
     ref: el => {

package/es/table-component/header/TableHeadCell2.js

@@ -182,6 +182,10 @@ const TableHeadCell2 = props => {
         onChange: val => {
           column.setFilterOperator(val);
         }
+        // dropdownStyle={{
+
+        //   zIndex: 1059
+        // }}
       })), /*#__PURE__*/React.createElement("div", {
         style: {
           marginBottom: 8

package/es/table-virtuoso/table/TableContainer.js

@@ -109,6 +109,18 @@ const TableContainer = props => {
       document.removeEventListener('mousedown', handleClickOutside);
     };
   }, []);
+  const toolbarItemTop = React.useMemo(() => {
+    if (!toolbarItems) {
+      return undefined;
+    }
+    return toolbarItems.filter(it => it.position !== 'Bottom' && it.fixedRight !== false);
+  }, [toolbarItems]);
+  const toolbarItemTopRight = React.useMemo(() => {
+    if (!toolbarItems) {
+      return undefined;
+    }
+    return toolbarItems.filter(it => it.position !== 'Bottom' && it.fixedRight);
+  }, [toolbarItems]);
   const triggerCommandClick = args => {
     // const { id: idCommand, rowId, rowData, index } = args
 
@@ -181,7 +193,7 @@ const TableContainer = props => {
       overflow: 'hidden'
     }
   }, /*#__PURE__*/React.createElement(Toolbar, {
-    items: (toolbarItems ?? []).filter(it => it.position !== 'Bottom'),
+    items: toolbarItemTop ?? [],
     mode: toolbarMode
   })), /*#__PURE__*/React.createElement("div", {
     style: {
@@ -198,7 +210,15 @@ const TableContainer = props => {
     showTotal: (totalItems, range) =>
     // @ts-ignore
     `${range[0]}-${range[1]} / ${totalItems} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
-  }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, fullScreen !== false && (isFullScreen ? /*#__PURE__*/React.createElement(Minimize, {
+  }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, toolbarItemTopRight && /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement(Toolbar, {
+    items: toolbarItemTopRight,
+    mode: toolbarMode
+  })), fullScreen !== false && (isFullScreen ? /*#__PURE__*/React.createElement(Minimize, {
     fontSize: 16,
     onClick: () => {
       setIsFullScreen(!isFullScreen);

package/lib/grid-component/type.d.ts

@@ -657,6 +657,7 @@ export type ToolbarItem = {
     title?: React.ReactNode;
     disabled?: boolean;
     hasMenu?: boolean;
+    fixedRight?: boolean;
     [key: string]: any;
 };
 export type LoadOptionsArgs = {

package/lib/group-component/TableContainerEdit.js

@@ -1440,6 +1440,221 @@ const TableContainerEdit = props => {
       triggerChangeData?.([...newData]);
     }
   };
+  const toolbarItemsTop = _react.default.useMemo(() => {
+    if (!rowsFocus || rowsFocus.length === 0) {
+      return toolbarItems?.filter(it => it.position !== 'Bottom' && it.fixedRight !== false && it.visible !== false && it.key !== 'DUPLICATE' && it.key !== 'INSERT_BEFORE' && it.key !== 'INSERT_AFTER' && it.key !== 'DELETE_ROWS' && it.key !== 'INSERT_CHILDREN').map(item => {
+        if (item.key === 'ADD') {
+          return {
+            ...item,
+            template: () => {
+              return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, item.key === 'ADD' && /*#__PURE__*/_react.default.createElement("div", {
+                className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
+              }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Dropdown.Button, {
+                overlayClassName: 'be-popup-container',
+                trigger: ['click'],
+                style: {
+                  color: '#28c76f',
+                  borderColor: '#28c76f'
+                },
+                className: 'toolbar-button toolbar-dropdown-button',
+                menu: {
+                  items: itemsAdd,
+                  onClick: e => handleAddMulti(item, Number(e.key))
+                }
+              }, /*#__PURE__*/_react.default.createElement("span", {
+                style: {
+                  color: '#28c76f'
+                },
+                onClick: () => handleAddMulti(item, 1)
+              }, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item'))));
+            }
+          };
+        }
+        if (item.key === 'DELETE') {
+          return {
+            ...item,
+            template: () => {
+              return /*#__PURE__*/_react.default.createElement("div", {
+                className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
+              }, /*#__PURE__*/_react.default.createElement(_button.default, {
+                style: {
+                  color: '#eb4619',
+                  borderColor: '#eb4619'
+                },
+                variant: 'outlined',
+                onClick: () => handleDeleteAll(item),
+                className: "d-flex toolbar-button"
+              }, item.label ? t ? t(item.label) : item.label : t ? t('Delete all item') : 'Delete all item'));
+            }
+          };
+        }
+        return {
+          ...item
+        };
+      });
+    }
+    return toolbarItems?.filter(it => it.position === 'Bottom' && it.visible !== false).map(item => {
+      if (item.key === 'ADD') {
+        return {
+          ...item,
+          template: () => {
+            return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, item.key === 'ADD' && /*#__PURE__*/_react.default.createElement("div", {
+              className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
+            }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Dropdown.Button, {
+              overlayClassName: 'be-popup-container',
+              style: {
+                color: '#28c76f',
+                borderColor: '#28c76f'
+              },
+              className: 'toolbar-button toolbar-dropdown-button',
+              menu: {
+                items: itemsAdd,
+                onClick: e => handleAddMulti(item, Number(e.key))
+              }
+            }, /*#__PURE__*/_react.default.createElement("span", {
+              style: {
+                color: '#28c76f'
+              },
+              onClick: () => handleAddMulti(item, 1)
+            }, item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item'))));
+          }
+        };
+      }
+      if (item.key === 'DUPLICATE') {
+        return {
+          ...item,
+          template: () => {
+            return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, item.key === 'DUPLICATE' && item.visible !== false && rowsFocus.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
+              className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
+            }, /*#__PURE__*/_react.default.createElement(_button.default, {
+              style: {
+                color: '#28c76f',
+                borderColor: '#28c76f'
+              },
+              variant: 'outlined',
+              onClick: handleDuplicate,
+              className: "d-flex toolbar-button"
+            }, item.label ? t ? t(item.label) : item.label : t ? t('Duplicate') : 'Duplicate')));
+          }
+        };
+      }
+      if (item.key === 'INSERT_BEFORE') {
+        return {
+          ...item,
+          template: () => {
+            return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+              className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
+            }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Dropdown.Button, {
+              overlayClassName: 'be-popup-container',
+              style: {
+                color: '#28c76f',
+                borderColor: '#28c76f'
+              },
+              className: 'toolbar-button toolbar-dropdown-button',
+              menu: {
+                items: itemsAdd,
+                onClick: e => handleInsertBefore(item, Number(e.key))
+              }
+            }, /*#__PURE__*/_react.default.createElement("span", {
+              style: {
+                color: '#28c76f'
+              },
+              onClick: () => handleInsertBefore(item, 1)
+            }, item.label ? t ? t(item.label) : item.label : t ? t('Insert item before') : 'Insert item before'))));
+          }
+        };
+      }
+      if (item.key === 'INSERT_AFTER') {
+        return {
+          ...item,
+          template: () => {
+            return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+              className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
+            }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Dropdown.Button, {
+              overlayClassName: 'be-popup-container',
+              style: {
+                color: '#28c76f',
+                borderColor: '#28c76f'
+              },
+              className: 'toolbar-button toolbar-dropdown-button',
+              menu: {
+                items: itemsAdd,
+                onClick: e => handleInsertAfter(item, Number(e.key))
+              }
+            }, /*#__PURE__*/_react.default.createElement("span", {
+              style: {
+                color: '#28c76f'
+              },
+              onClick: () => handleInsertAfter(item, 1)
+            }, item.label ? t ? t(item.label) : item.label : t ? t('Insert item after') : 'Insert item after'))));
+          }
+        };
+      }
+      if (item.key === 'INSERT_CHILDREN') {
+        return {
+          ...item,
+          template: () => {
+            return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+              className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
+            }, /*#__PURE__*/_react.default.createElement(_button.default, {
+              style: {
+                color: '#28c76f',
+                borderColor: '#28c76f'
+              },
+              variant: 'outlined',
+              onClick: () => handleInsertChild(item),
+              className: "d-flex toolbar-button"
+            }, item.label ? t ? t(item.label) : item.label : t ? t('Insert item children') : 'Insert item children')));
+          }
+        };
+      }
+      if (item.key === 'DELETE') {
+        return {
+          ...item,
+          template: () => {
+            return /*#__PURE__*/_react.default.createElement("div", {
+              className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
+            }, /*#__PURE__*/_react.default.createElement(_button.default, {
+              style: {
+                color: '#eb4619',
+                borderColor: '#eb4619'
+              },
+              variant: 'outlined',
+              onClick: handleDeleteAll,
+              className: "d-flex toolbar-button"
+            }, item.label ? t ? t(item.label) : item.label : t ? t('Delete all item') : 'Delete all item'));
+          }
+        };
+      }
+      if (item.key === 'DELETE_ROWS') {
+        return {
+          ...item,
+          template: () => {
+            return /*#__PURE__*/_react.default.createElement("div", {
+              className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
+            }, /*#__PURE__*/_react.default.createElement(_button.default, {
+              style: {
+                color: '#eb4619',
+                borderColor: '#eb4619'
+              },
+              variant: 'outlined',
+              onClick: () => handleDeleteRows(item),
+              className: "d-flex toolbar-button"
+            }, t ? `${t('Delete')} ${rowsFocus.length} ${t('row')}` : `Delete ${rowsFocus.length} item`));
+          }
+        };
+      }
+      return {
+        ...item
+      };
+    });
+  }, [handleAddMulti, handleDeleteAll, handleDeleteRows, handleDuplicate, handleInsertAfter, handleInsertBefore, handleInsertChild, itemsAdd, rowsFocus, t, toolbarItems]);
+  const toolbarItemTopRight = _react.default.useMemo(() => {
+    if (!toolbarItems) {
+      return undefined;
+    }
+    return toolbarItems.filter(it => it.position !== 'Bottom' && it.fixedRight && it.visible !== false);
+  }, [toolbarItems]);
   const toolbarItemsBottom = _react.default.useMemo(() => {
     if (!rowsFocus || rowsFocus.length === 0) {
       return toolbarItems?.filter(it => it.position === 'Bottom' && it.visible !== false && it.key !== 'DUPLICATE' && it.key !== 'INSERT_BEFORE' && it.key !== 'INSERT_AFTER' && it.key !== 'DELETE_ROWS' && it.key !== 'INSERT_CHILDREN').map(item => {
@@ -1908,7 +2123,7 @@ const TableContainerEdit = props => {
       overflow: 'hidden'
     }
   }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
-    items: (toolbarItems ?? []).filter(it => it.position !== 'Bottom'),
+    items: toolbarItemsTop ?? [],
     mode: 'scroll'
   })), /*#__PURE__*/_react.default.createElement("div", {
     style: {
@@ -1925,7 +2140,15 @@ const TableContainerEdit = props => {
     showTotal: (total, range) =>
     // @ts-ignore
     `${range[0]}-${range[1]} / ${total} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
-  }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, fullScreen !== false && (isFullScreen ? /*#__PURE__*/_react.default.createElement(_becoxyIcons.Minimize, {
+  }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, toolbarItemTopRight && /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      flex: 1,
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
+    items: toolbarItemTopRight,
+    mode: 'responsive'
+  })), fullScreen !== false && (isFullScreen ? /*#__PURE__*/_react.default.createElement(_becoxyIcons.Minimize, {
     fontSize: 16,
     onClick: () => {
       setIsFullScreen(!isFullScreen);

package/lib/table-component/InternalTable.js

@@ -191,16 +191,23 @@ const InternalTable = props => {
           colorLink: '#eb4619',
           colorLinkHover: '#eb4619'
         },
+        TableSelect: {
+          activeBorderColor: '#1677ff',
+          hoverBorderColor: '#1677ff',
+          zIndexPopup: 1059
+        },
         Select: {
           activeBorderColor: '#1677ff',
-          hoverBorderColor: '#1677ff'
+          hoverBorderColor: '#1677ff',
+          zIndexPopup: 1059
           // colorPrimary: '#eb4619',
           // colorBgBase: 'red'
         },
         DatePicker: {
           colorPrimary: '#eb4619',
           activeBorderColor: '#1677ff',
-          hoverBorderColor: '#1677ff'
+          hoverBorderColor: '#1677ff',
+          zIndexPopup: 1059
         },
         Pagination: {
           fontSize: 12

package/lib/table-component/TableContainer.js

@@ -96,7 +96,6 @@ const TableContainer = props => {
   const [tableHeight, settableHeight] = _react.default.useState(0);
   const [focusedCell, setFocusedCell] = _react.default.useState(undefined);
   _react.default.useEffect(() => {
-    // const totalHeight = minHeight ?? height
     const totalHeight = (0, _utils.getTableHeight)(height, minHeight);
     if (totalHeight) {
       const topHeight = topToolbarRef.current ? topToolbarRef.current.offsetHeight : 0;
@@ -204,6 +203,24 @@ const TableContainer = props => {
       // })
     }
   }, [columnSizingInfo]);
+  const toolbarItemTop = _react.default.useMemo(() => {
+    if (!toolbarItems) {
+      return undefined;
+    }
+    return toolbarItems.filter(it => it.position !== 'Bottom' && it.fixedRight !== false);
+  }, [toolbarItems]);
+  const toolbarItemBottom = _react.default.useMemo(() => {
+    if (!toolbarItems) {
+      return undefined;
+    }
+    return toolbarItems.filter(it => it.position === 'Bottom');
+  }, [toolbarItems]);
+  const toolbarItemTopRight = _react.default.useMemo(() => {
+    if (!toolbarItems) {
+      return undefined;
+    }
+    return toolbarItems.filter(it => it.position !== 'Bottom' && it.fixedRight);
+  }, [toolbarItems]);
   const triggerCommandClick = args => {
     // const { id: idCommand, rowId, rowData, index } = args
 
@@ -226,7 +243,8 @@ const TableContainer = props => {
     style: {
       display: 'flex',
       justifyContent: 'space-between',
-      alignItems: 'center'
+      alignItems: 'center',
+      gap: '1rem'
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
     style: {
@@ -234,7 +252,7 @@ const TableContainer = props => {
       overflow: 'hidden'
     }
   }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
-    items: (toolbarItems ?? []).filter(it => it.position !== 'Bottom')
+    items: toolbarItemTop ?? []
     // mode={'scroll'}
     ,
     mode: toolbarMode
@@ -253,7 +271,15 @@ const TableContainer = props => {
     showTotal: (totalItems, range) =>
     // @ts-ignore
     `${range[0]}-${range[1]} / ${totalItems} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
-  }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, fullScreen !== false && (isFullScreen ? /*#__PURE__*/_react.default.createElement(_becoxyIcons.Minimize, {
+  }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, toolbarItemTopRight && /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      flex: 1,
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
+    items: toolbarItemTopRight,
+    mode: toolbarMode
+  })), fullScreen !== false && (isFullScreen ? /*#__PURE__*/_react.default.createElement(_becoxyIcons.Minimize, {
     fontSize: 16,
     onClick: () => {
       setIsFullScreen(!isFullScreen);
@@ -348,7 +374,17 @@ const TableContainer = props => {
     fixedRightColumns: fixedRightColumns
   }))), /*#__PURE__*/_react.default.createElement("div", {
     ref: bottomToolbarRef
-  }, pagination && !infiniteScroll && /*#__PURE__*/_react.default.createElement(_pagination.default, (0, _extends2.default)({
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      flex: 1,
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
+    items: toolbarItemBottom ?? []
+    // mode={'scroll'}
+    ,
+    mode: toolbarMode
+  })), pagination && !infiniteScroll && /*#__PURE__*/_react.default.createElement(_pagination.default, (0, _extends2.default)({
     pageSizeOptions: [20, 50, 100, 1000, 10000],
     rootClassName: 'pagination-template',
     showSizeChanger: true,

package/lib/table-component/TableContainerEdit.js

@@ -27,6 +27,7 @@ var _sweetalert2ReactContent = _interopRequireDefault(require("sweetalert2-react
 var _sweetalert = _interopRequireDefault(require("sweetalert2"));
 var _locale = require("rc-master-ui/es/locale");
 var _hooks = require("../grid-component/hooks");
+var _moment = _interopRequireDefault(require("moment"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const MySwal = (0, _sweetalert2ReactContent.default)(_sweetalert.default);
@@ -414,6 +415,17 @@ const TableContainerEdit = props => {
                   [columnKey]: Number(val)
                 };
               }
+            } else if (columnOri.type === 'data' || columnOri.type === 'datatime' || columnOri.editType === 'date' || columnOri.editType === 'datetime') {
+              const isDate = (0, _utils.isDateValue)(cellValue.trim());
+              const colFormat = typeof columnOri?.format === 'function' ? columnOri?.format(record) : columnOri?.format;
+              const cellFormat = (0, _utils.getFormat)(colFormat, format);
+              const editType = (0, _utils.getEditType)(columnOri);
+              const dateFormat = (0, _utils.getDatepickerFormat)(editType, cellFormat);
+              const date = isDate && !(0, _utils.isEmpty)(cellValue.trim()) ? (0, _moment.default)(cellValue.trim(), dateFormat).format("YYYY-MM-DDTHH:mm:ssZ") : null;
+              newData[targetRow] = {
+                ...newData[targetRow],
+                [columnKey]: date
+              };
             } else {
               newData[targetRow] = {
                 ...newData[targetRow],
@@ -479,8 +491,6 @@ const TableContainerEdit = props => {
 
           if (isEdit) {
             const columnKey = allCols[targetCol].id;
-
-            // if (columnOri.type === 'number' && isFormattedNumber(cellValue.trim())) {
             if (columnOri.type === 'number') {
               if (cellValue.trim() === '') {
                 childData[targetRow] = {
@@ -510,6 +520,17 @@ const TableContainerEdit = props => {
                   [columnKey]: Number(val)
                 };
               }
+            } else if (columnOri.type === 'data' || columnOri.type === 'datatime' || columnOri.editType === 'date' || columnOri.editType === 'datetime') {
+              const isDate = (0, _utils.isDateValue)(cellValue.trim());
+              const colFormat = typeof columnOri?.format === 'function' ? columnOri?.format(record) : columnOri?.format;
+              const cellFormat = (0, _utils.getFormat)(colFormat, format);
+              const editType = (0, _utils.getEditType)(columnOri);
+              const dateFormat = (0, _utils.getDatepickerFormat)(editType, cellFormat);
+              const date = isDate && !(0, _utils.isEmpty)(cellValue.trim()) ? (0, _moment.default)(cellValue.trim(), dateFormat).format("YYYY-MM-DDTHH:mm:ssZ") : null;
+              childData[targetRow] = {
+                ...childData[targetRow],
+                [columnKey]: date
+              };
             } else {
               childData[targetRow] = {
                 ...childData[targetRow],
@@ -1555,7 +1576,7 @@ const TableContainerEdit = props => {
   const toolbarItemsTop = _react.default.useMemo(() => {
     // Chưa có dòng| ô được chọn
     if (!rowsFocus || rowsFocus.length === 0) {
-      return toolbarItems?.filter(it => it.position !== 'Bottom' && it.visible !== false && it.key !== 'DUPLICATE' && it.key !== 'INSERT_BEFORE' && it.key !== 'INSERT_AFTER' && it.key !== 'DELETE_ROWS' && it.key !== 'INSERT_CHILDREN').map(item => {
+      return toolbarItems?.filter(it => it.position !== 'Bottom' && it.visible !== false && it.fixedRight !== false && it.key !== 'DUPLICATE' && it.key !== 'INSERT_BEFORE' && it.key !== 'INSERT_AFTER' && it.key !== 'DELETE_ROWS' && it.key !== 'INSERT_CHILDREN').map(item => {
         if (item.key === 'ADD') {
           return {
             ...item,
@@ -1616,7 +1637,7 @@ const TableContainerEdit = props => {
         };
       });
     }
-    return toolbarItems?.filter(it => it.position !== 'Bottom' && it.visible !== false).map(item => {
+    return toolbarItems?.filter(it => it.position !== 'Bottom' && it.visible !== false && it.fixedRight !== false).map(item => {
       if (item.key === 'ADD') {
         return {
           ...item,
@@ -1804,6 +1825,12 @@ const TableContainerEdit = props => {
       };
     });
   }, [handleAddMulti, handleDeleteAll, handleDeleteRows, handleDuplicate, handleInsertAfter, handleInsertBefore, handleInsertChild, itemsAdd, rowsFocus, t, toolbarItems]);
+  const toolbarItemTopRight = _react.default.useMemo(() => {
+    if (!toolbarItems) {
+      return undefined;
+    }
+    return toolbarItems.filter(it => it.position !== 'Bottom' && it.fixedRight);
+  }, [toolbarItems]);
   const triggerCommandClick = args => {
     const {
       id: idCommand,
@@ -2012,7 +2039,8 @@ const TableContainerEdit = props => {
     style: {
       display: 'flex',
       justifyContent: 'space-between',
-      alignItems: 'center'
+      alignItems: 'center',
+      gap: '1rem'
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
     style: {
@@ -2047,7 +2075,15 @@ const TableContainerEdit = props => {
     showTotal: (total, range) =>
     // @ts-ignore
     `${range[0]}-${range[1]} / ${total} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
-  }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, fullScreen !== false && (isFullScreen ? /*#__PURE__*/_react.default.createElement(_becoxyIcons.Minimize, {
+  }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, toolbarItemTopRight && /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      flex: 1,
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
+    items: toolbarItemTopRight,
+    mode: toolbarMode
+  })), fullScreen !== false && (isFullScreen ? /*#__PURE__*/_react.default.createElement(_becoxyIcons.Minimize, {
     fontSize: 16,
     onClick: () => {
       setIsFullScreen(!isFullScreen);

package/lib/table-component/body/EditableCell.js

@@ -29,7 +29,7 @@ const {
 } = _rcMasterUi.TreeSelect;
 const {
   TextArea
-} = _antd.Input;
+} = _rcMasterUi.Input;
 const filterTreeNode = (input, treeNode) => {
   const {
     title,
@@ -1039,7 +1039,7 @@ const EditableCell = props => {
         }, numericFormatProps, {
           min: column.min,
           max: column.max,
-          customInput: _antd.Input
+          customInput: _rcMasterUi.Input
           // valueIsNumericString={true}
           ,
           placeholder: t && column.placeholder ? t(column.placeholder) : tableLocal?.textPlaceholder,

package/lib/table-component/body/TableBodyCell.js

@@ -189,7 +189,7 @@ const TableBodyCell = props => {
   const expandIconColumnIndex = expandable?.expandIconColumnIndex ?? 0;
   const [isOpenTooltip, setIsOpenTooltip] = _react.default.useState(false);
   const record = cell.row.original;
-  const columnMeta = cell.column.columnDef.meta ?? {};
+  const columnMeta = _react.default.useMemo(() => cell.column.columnDef.meta ?? {}, [cell.column.columnDef.meta]);
   const cellStyles = typeof columnMeta.onCellStyles === 'function' ? columnMeta.onCellStyles(cell.getValue(), cell) : columnMeta.onCellStyles;
 
   // const tooltipContent: any = (isOpenTooltip === false)
@@ -215,7 +215,9 @@ const TableBodyCell = props => {
   const parrents = cell.row.getParentRows();
   const cellValue = cell.getValue();
   const rowIndex = cell.row.index;
-  const fomatedValue = (0, _useColumns.renderValueCell)(columnMeta, cellValue, record, rowIndex, colIndex, format, false);
+  const colFormat = typeof columnMeta?.format === 'function' ? columnMeta?.format(record) : columnMeta?.format;
+  const cellFormat = (0, _utils.getFormat)(colFormat, format);
+  const fomatedValue = (0, _useColumns.renderValueCell)(columnMeta, cellValue, record, rowIndex, colIndex, cellFormat, true);
   const valueCellString = (0, _useColumns.getValueCellString)(columnMeta, cellValue, record, rowIndex, colIndex, format);
   const tooltipContent = _react.default.useMemo(() => {
     if (isOpenTooltip === false) {

package/lib/table-component/body/TableBodyCellEdit.js

@@ -1120,7 +1120,9 @@ const TableBodyCellEdit = props => {
   };
   const cellValue = cell.getValue();
   const rowIndex = cell.row.index;
-  const fomatedValue = (0, _useColumns.renderValueCell)(columnMeta, cellValue, record, rowIndex, colIndex, format, true);
+  const colFormat = typeof columnMeta?.format === 'function' ? columnMeta?.format(record) : columnMeta?.format;
+  const cellFormat = (0, _utils.getFormat)(colFormat, format);
+  const fomatedValue = (0, _useColumns.renderValueCell)(columnMeta, cellValue, record, rowIndex, colIndex, cellFormat, true);
   return /*#__PURE__*/_react.default.createElement("div", {
     key: cell.id,
     ref: el => {

package/lib/table-component/header/TableHeadCell2.js

@@ -191,6 +191,10 @@ const TableHeadCell2 = props => {
         onChange: val => {
           column.setFilterOperator(val);
         }
+        // dropdownStyle={{
+
+        //   zIndex: 1059
+        // }}
       })), /*#__PURE__*/_react.default.createElement("div", {
         style: {
           marginBottom: 8

package/lib/table-virtuoso/table/TableContainer.js

@@ -117,6 +117,18 @@ const TableContainer = props => {
       document.removeEventListener('mousedown', handleClickOutside);
     };
   }, []);
+  const toolbarItemTop = _react.default.useMemo(() => {
+    if (!toolbarItems) {
+      return undefined;
+    }
+    return toolbarItems.filter(it => it.position !== 'Bottom' && it.fixedRight !== false);
+  }, [toolbarItems]);
+  const toolbarItemTopRight = _react.default.useMemo(() => {
+    if (!toolbarItems) {
+      return undefined;
+    }
+    return toolbarItems.filter(it => it.position !== 'Bottom' && it.fixedRight);
+  }, [toolbarItems]);
   const triggerCommandClick = args => {
     // const { id: idCommand, rowId, rowData, index } = args
 
@@ -189,7 +201,7 @@ const TableContainer = props => {
       overflow: 'hidden'
     }
   }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
-    items: (toolbarItems ?? []).filter(it => it.position !== 'Bottom'),
+    items: toolbarItemTop ?? [],
     mode: toolbarMode
   })), /*#__PURE__*/_react.default.createElement("div", {
     style: {
@@ -206,7 +218,15 @@ const TableContainer = props => {
     showTotal: (totalItems, range) =>
     // @ts-ignore
     `${range[0]}-${range[1]} / ${totalItems} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
-  }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, fullScreen !== false && (isFullScreen ? /*#__PURE__*/_react.default.createElement(_becoxyIcons.Minimize, {
+  }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, toolbarItemTopRight && /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      flex: 1,
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
+    items: toolbarItemTopRight,
+    mode: toolbarMode
+  })), fullScreen !== false && (isFullScreen ? /*#__PURE__*/_react.default.createElement(_becoxyIcons.Minimize, {
     fontSize: 16,
     onClick: () => {
       setIsFullScreen(!isFullScreen);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "es-grid-template",
-  "version": "1.9.38",
+  "version": "1.9.40",
   "description": "es-grid-template",
   "keywords": [
     "react",