es-grid-template 1.8.78 → 1.8.80

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

@@ -224,6 +224,7 @@ export type TableProps<RecordType = AnyObject> = {
     rowKey?: string;
     infiniteScroll?: boolean;
     next?: () => void;
+    onEndReachedThreshold?: number;
     locale?: Locale;
     groupAble?: boolean;
     groupColumns?: string[];
@@ -247,6 +248,7 @@ export type TableProps<RecordType = AnyObject> = {
     contextMenuOpen?: (args: Omit<ContextInfo<RecordType>, 'item'>) => void;
     contextMenuClick?: (args: ContextInfo<RecordType>) => void;
     recordDoubleClick?: (args: RecordDoubleClickEventArgs<RecordType>) => void;
+    recordClick?: (args: RecordDoubleClickEventArgs<RecordType>) => void;
     toolbarItems?: ToolbarItem[];
     showColumnChoose?: boolean;
     showAdvanceFilter?: boolean;

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

@@ -165,7 +165,7 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
     type?: IColumnType;
     haveSum?: boolean;
     isSummary?: boolean;
-    summaryTemplate?: (data: number, key: string) => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    summaryTemplate?: (data: number, key: string) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode;
     format?: IFormat | ((rowData: any) => IFormat);
     allowFiltering?: boolean;
     sorter?: boolean;
@@ -180,18 +180,18 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
     headerText?: string;
     hidden?: boolean;
     visible?: boolean;
-    headerTooltip?: string | boolean | (() => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>);
+    headerTooltip?: string | boolean | (() => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
     columnGroupText?: string;
     align?: import("./../../grid-component/type").ITextAlign;
     textAlign?: import("./../../grid-component/type").ITextAlign;
     headerTextAlign?: import("./../../grid-component/type").ITextAlign;
-    template?: import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | ((args: import("./../../grid-component/type").ColumnTemplate<RecordType>) => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>);
+    template?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode | ((args: import("./../../grid-component/type").ColumnTemplate<RecordType>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
     showTooltip?: boolean;
     tooltipDescription?: string | ((args: {
         value: any;
         rowData: RecordType;
-    }) => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>);
-    headerTemplate?: import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | ((column: ColumnTable<RecordType>) => import("react").ReactNode | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>);
+    }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
+    headerTemplate?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode | ((column: ColumnTable<RecordType>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
     commandItems?: import("./../../grid-component/type").CommandItem[];
     children?: ColumnTable<RecordType>[];
     editType?: EditType | ((rowData?: RecordType) => EditType);
@@ -211,9 +211,9 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
     ellipsis?: boolean;
     allowResizing?: boolean;
     allowSelection?: boolean | ((rowData: RecordType) => boolean);
-    onCellStyles?: Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width">);
-    onCellHeaderStyles?: Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width">);
-    onCellFooterStyles?: Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "minWidth" | "position" | "width">);
+    onCellStyles?: Omit<CSSProperties, "position" | "display" | "left" | "minWidth" | "right" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "position" | "display" | "left" | "minWidth" | "right" | "width">);
+    onCellHeaderStyles?: Omit<CSSProperties, "position" | "display" | "left" | "minWidth" | "right" | "width"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "display" | "left" | "minWidth" | "right" | "width">);
+    onCellFooterStyles?: Omit<CSSProperties, "position" | "display" | "left" | "minWidth" | "right" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "position" | "display" | "left" | "minWidth" | "right" | "width">);
     sumGroup?: boolean;
     onCell?: (rowData: RecordType, index: number) => import("react").TdHTMLAttributes<HTMLTableCellElement>;
 }[];

package/es/table-component/TableContainer.js

@@ -73,7 +73,9 @@ const TableContainer = props => {
     title,
     dataSourceFilter,
     onExpandClick,
-    setIsExpandClick
+    setIsExpandClick,
+    recordClick,
+    ...rest
   } = props;
   const [paginationLocal] = useLocale('Pagination');
   const [tableLocal] = useLocale('Table');
@@ -266,6 +268,7 @@ const TableContainer = props => {
       // triggerFilter,
       wrapSettings,
       recordDoubleClick,
+      recordClick,
       selectionSettings,
       isSelectionChange,
       setIsSelectionChange,
@@ -286,7 +289,7 @@ const TableContainer = props => {
       onExpandClick,
       setIsExpandClick
     }
-  }, /*#__PURE__*/React.createElement(TableWrapper, {
+  }, /*#__PURE__*/React.createElement(TableWrapper, _extends({}, rest, {
     contextMenuItems: contextMenuItems,
     height: tableHeight,
     minHeight: minHeight,
@@ -310,7 +313,7 @@ const TableContainer = props => {
     virtualPaddingRight: virtualPaddingRight,
     fixedLeftColumns: fixedLeftColumns,
     fixedRightColumns: fixedRightColumns
-  })), /*#__PURE__*/React.createElement("div", {
+  }))), /*#__PURE__*/React.createElement("div", {
     ref: bottomToolbarRef
   }, pagination && !infiniteScroll && /*#__PURE__*/React.createElement(Pagination, _extends({
     pageSizeOptions: [20, 50, 100, 1000, 10000],

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

@@ -176,7 +176,8 @@ const TableBodyCell = props => {
     selectionSettings,
     wrapSettings,
     pagination,
-    onExpandClick
+    onExpandClick,
+    recordClick
     // dataSource
   } = React.useContext(TableContext);
   const expandIconColumnIndex = expandable?.expandIconColumnIndex ?? 0;
@@ -428,6 +429,11 @@ const TableBodyCell = props => {
       }
     },
     onClick: e => {
+      recordClick?.({
+        e,
+        rowData: record,
+        rowIndex: rowNumber
+      });
       const selection = window.getSelection();
       const text = selection ? selection.toString() : "";
       if (text.length > 0 || enableClick === false) {} else {

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

@@ -95,11 +95,14 @@ export const renderFilter = args => {
         format: dateRangeFormat,
         value: dateRangeValue,
         onChange: value => {
-          console.log('value', value);
           const newDateRangeValue = value ? [value[0] ? moment(value[0]).format() : '', value[1] ? moment(value[1]).format() : ''] : [];
-          console.log('newDateRangeValue', newDateRangeValue);
           setSelectedKeys(newDateRangeValue);
-        },
+        }
+
+        // onSelect={(val) => {
+        // }}
+        ,
+
         menuClassName: "rc-menu-popup",
         placement: "auto"
       }))));

package/es/table-component/table/TableWrapper.d.ts

@@ -23,6 +23,7 @@ type Props<T> = {
     dataSource: T[];
     pagination?: false | PaginationConfig;
     infiniteScroll?: boolean;
+    onEndReachedThreshold?: number;
     columnVirtualizer: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
     virtualPaddingLeft: number | undefined;
     virtualPaddingRight: number | undefined;

package/es/table-component/table/TableWrapper.js

@@ -7,6 +7,7 @@ import { Tooltip } from "react-tooltip";
 import ContextMenu from "../ContextMenu";
 import React, { useContext } from "react";
 import { TableContext } from "../useContext";
+import { isNullOrUndefined } from "../hook/utils";
 const TableWrapper = props => {
   const {
     id,
@@ -28,6 +29,7 @@ const TableWrapper = props => {
     dataSource,
     pagination,
     infiniteScroll,
+    onEndReachedThreshold,
     columnVirtualizer,
     fixedLeftColumns,
     fixedRightColumns,
@@ -93,7 +95,9 @@ const TableWrapper = props => {
         scrollTop,
         clientHeight
       } = e.currentTarget;
-      const isEnd = scrollTop + clientHeight >= tbScrollHeight - 50;
+      const abc = clientHeight * (isNullOrUndefined(onEndReachedThreshold) ? 0.1 : onEndReachedThreshold ?? 0);
+      // const isEnd = scrollTop + clientHeight >= tbScrollHeight - 50;
+      const isEnd = scrollTop + clientHeight >= tbScrollHeight - abc;
       if (isEnd && !loadingRef.current && hasMoreRef.current && dataSource?.length > 0) {
         handleNext();
       }

package/es/table-component/useContext.d.ts

@@ -19,6 +19,7 @@ export interface IContext<T> {
     setExpanded: Dispatch<SetStateAction<ExpandedState>>;
     expanded: ExpandedState;
     recordDoubleClick?: (args: RecordDoubleClickEventArgs<T>) => void;
+    recordClick?: (args: RecordDoubleClickEventArgs<T>) => void;
     selectionSettings?: SelectionSettings;
     isSelectionChange?: {
         isChange: boolean;

package/es/table-virtuoso/InternalTable.js

@@ -398,7 +398,8 @@ const InternalTable = props => {
     columnSizing: columnSizing,
     columnSizingInfo: columnSizingInfo,
     setColumnSizing: setColumnSizing,
-    rowSelection: rowSelection
+    rowSelection: rowSelection,
+    pagination: pagination
   })))));
 };
 export default InternalTable;

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

@@ -347,8 +347,12 @@ const TableBodyCell = props => {
       ...getCommonPinningStyles(cell.column)
     },
     onMouseEnter: e => {
-      if (e.target.firstChild?.clientWidth < e.target.firstChild?.scrollWidth) {
+      if (e.target?.firstChild?.className === 'ui-rc_cell-content' && e.target.firstChild?.clientWidth < e.target.firstChild?.scrollWidth) {
         setIsOpenTooltip(true);
+      } else {
+        if (e.target?.clientWidth < e.target?.scrollWidth) {
+          setIsOpenTooltip(true);
+        }
       }
     },
     onKeyDown: e => {

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

@@ -73,7 +73,8 @@ const TableContainer = props => {
     onRowFooterStyles,
     onRowHeaderStyles,
     title,
-    groupSetting
+    groupSetting,
+    ...rest
   } = props;
   const [paginationLocal] = useLocale('Pagination');
   const [tableLocal] = useLocale('Table');
@@ -250,7 +251,7 @@ const TableContainer = props => {
       pagination,
       groupSetting
     }
-  }, /*#__PURE__*/React.createElement(TableWrapper, {
+  }, /*#__PURE__*/React.createElement(TableWrapper, _extends({}, rest, {
     tableContainerRef: tableContainerRef,
     prefix: prefix,
     id: id,
@@ -260,7 +261,7 @@ const TableContainer = props => {
     table: table,
     columns: columns,
     commandClick: triggerCommandClick
-  })), /*#__PURE__*/React.createElement("div", {
+  }))), /*#__PURE__*/React.createElement("div", {
     ref: bottomToolbarRef
   }, pagination && !infiniteScroll && /*#__PURE__*/React.createElement(Pagination, _extends({
     pageSizeOptions: [20, 50, 100, 1000, 10000],

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

@@ -14,7 +14,8 @@ import { TableContext } from "../useContext";
 import classNames from 'classnames';
 import TableBodyRow from "../body/TableBodyRow";
 import TableFooterCell from "../footer/TableFooterCell";
-
+import { Tooltip } from 'react-tooltip';
+import ContextMenu from "../../table-component/ContextMenu";
 // import type { ColumnsTable, TableProps } from '../type';
 
 // type TableContainerProps<T> = Omit<TableProps<T>, 'columns'> & {
@@ -25,19 +26,103 @@ const TableWrapper = props => {
     height,
     id,
     commandClick,
-    editAble
+    editAble,
+    contextMenuItems: propContextMenuItems,
+    contextMenuHidden,
+    contextMenuClick,
+    contextMenuOpen
   } = props;
+  const menuRef = React.useRef(null);
   const {
     prefix,
     editingKey,
-    rowEditable
+    rowEditable,
+    windowSize
   } = useContext(TableContext); //onRowHeaderStyles
+  // const { windowSize } = useContext(TableContext)
 
   // ref cho scroll container
   const scrollRef = useRef(null);
   const {
     rows
   } = table.getRowModel();
+  const [menuVisible, setMenuVisible] = React.useState(false);
+  const [selectedRowData, setSelectedRowData] = React.useState(null);
+  const [position, setPosition] = React.useState({
+    x: 0,
+    y: 0,
+    viewportWidth: windowSize.innerWidth,
+    viewportHeight: windowSize.innerHeight
+  });
+  const contextMenuItems = React.useMemo(() => {
+    if (typeof contextMenuHidden === 'function' && propContextMenuItems && selectedRowData) {
+      const hiddenItems = contextMenuHidden({
+        rowInfo: {
+          rowData: selectedRowData
+        }
+      });
+      return propContextMenuItems.filter(item => !hiddenItems.includes(item?.key));
+    }
+    if (contextMenuHidden && typeof contextMenuHidden !== 'function' && propContextMenuItems) {
+      return propContextMenuItems.filter(item => !contextMenuHidden.includes(item?.key));
+    }
+    return propContextMenuItems;
+  }, [propContextMenuItems, contextMenuHidden, selectedRowData]);
+  const onContextMenu = data => event => {
+    event.preventDefault(); // Ngăn chặn menu mặc định của trình duyệt
+
+    setSelectedRowData(data);
+    contextMenuOpen?.({
+      rowInfo: {
+        rowData: data
+      },
+      event
+    });
+    setMenuVisible(true);
+
+    // Đợi DOM cập nhật và lấy kích thước menu
+    setTimeout(() => {
+      const menuElement = menuRef.current; // Lấy menu từ DOM
+      const menuWidth = menuElement?.offsetWidth || 200; // Mặc định 200px nếu chưa render
+      const menuHeight = menuElement?.offsetHeight; // Mặc định 450px nếu chưa render
+
+      // Điều chỉnh vị trí menu
+      let x = event.clientX;
+      let y = event.clientY;
+      if (x + menuWidth > windowSize.innerWidth) {
+        x = x - menuWidth - 10; // Cách cạnh phải 10px
+      }
+      if (y + menuHeight > windowSize.innerHeight) {
+        if (y < menuHeight) {
+          y = 10;
+        } else {
+          y = y - 10 - menuHeight; // Cách cạnh dưới 10px
+        }
+      }
+      setPosition(prevState => ({
+        ...prevState,
+        x,
+        y
+      }));
+    }, 100);
+    if (!menuVisible) {
+      document.addEventListener(`click`, function onClickOutside(e) {
+        const element = e.target;
+        const menuContainer = document.querySelector('.popup-context-menu');
+        const isInsideContainer = element.closest('.popup-context-menu') && menuContainer;
+        if (isInsideContainer) {
+          return;
+        }
+        setMenuVisible(false);
+        setPosition(prevState => ({
+          ...prevState,
+          x: undefined,
+          y: undefined
+        }));
+        document.removeEventListener(`click`, onClickOutside);
+      });
+    }
+  };
   return /*#__PURE__*/React.createElement("div", {
     className: classNames(`${prefix}-grid-container`, {})
   }, /*#__PURE__*/React.createElement("div", {
@@ -102,7 +187,9 @@ const TableWrapper = props => {
           rowheight: editAble ? 37 : rowheight,
           isEditing: isEditing,
           isRowEditable: isRowEditable,
-          editAble: editAble
+          editAble: editAble,
+          onContextMenu: onContextMenu,
+          contextMenuItems: contextMenuItems
         }, rest));
       }
     },
@@ -159,6 +246,27 @@ const TableWrapper = props => {
         });
       }));
     }
-  })));
+  })), /*#__PURE__*/React.createElement(Tooltip, {
+    id: `${id}-tooltip-content`,
+    style: {
+      zIndex: 1999,
+      maxWidth: 450
+    },
+    delayShow: 100
+  }), /*#__PURE__*/React.createElement(Tooltip, {
+    id: `${id}-tooltip-error`,
+    style: {
+      zIndex: 1999,
+      maxWidth: 450
+    }
+  }), menuVisible && /*#__PURE__*/React.createElement(ContextMenu, {
+    open: menuVisible,
+    pos: position,
+    setOpen: setMenuVisible,
+    menuRef: menuRef,
+    contextMenuItems: contextMenuItems,
+    contextMenuClick: contextMenuClick,
+    rowData: selectedRowData
+  }));
 };
 export default TableWrapper;

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

@@ -224,6 +224,7 @@ export type TableProps<RecordType = AnyObject> = {
     rowKey?: string;
     infiniteScroll?: boolean;
     next?: () => void;
+    onEndReachedThreshold?: number;
     locale?: Locale;
     groupAble?: boolean;
     groupColumns?: string[];
@@ -247,6 +248,7 @@ export type TableProps<RecordType = AnyObject> = {
     contextMenuOpen?: (args: Omit<ContextInfo<RecordType>, 'item'>) => void;
     contextMenuClick?: (args: ContextInfo<RecordType>) => void;
     recordDoubleClick?: (args: RecordDoubleClickEventArgs<RecordType>) => void;
+    recordClick?: (args: RecordDoubleClickEventArgs<RecordType>) => void;
     toolbarItems?: ToolbarItem[];
     showColumnChoose?: boolean;
     showAdvanceFilter?: boolean;

package/lib/table-component/TableContainer.js

@@ -80,7 +80,9 @@ const TableContainer = props => {
     title,
     dataSourceFilter,
     onExpandClick,
-    setIsExpandClick
+    setIsExpandClick,
+    recordClick,
+    ...rest
   } = props;
   const [paginationLocal] = (0, _locale.useLocale)('Pagination');
   const [tableLocal] = (0, _locale.useLocale)('Table');
@@ -273,6 +275,7 @@ const TableContainer = props => {
       // triggerFilter,
       wrapSettings,
       recordDoubleClick,
+      recordClick,
       selectionSettings,
       isSelectionChange,
       setIsSelectionChange,
@@ -293,7 +296,7 @@ const TableContainer = props => {
       onExpandClick,
       setIsExpandClick
     }
-  }, /*#__PURE__*/_react.default.createElement(_TableWrapper.default, {
+  }, /*#__PURE__*/_react.default.createElement(_TableWrapper.default, (0, _extends2.default)({}, rest, {
     contextMenuItems: contextMenuItems,
     height: tableHeight,
     minHeight: minHeight,
@@ -317,7 +320,7 @@ const TableContainer = props => {
     virtualPaddingRight: virtualPaddingRight,
     fixedLeftColumns: fixedLeftColumns,
     fixedRightColumns: fixedRightColumns
-  })), /*#__PURE__*/_react.default.createElement("div", {
+  }))), /*#__PURE__*/_react.default.createElement("div", {
     ref: bottomToolbarRef
   }, pagination && !infiniteScroll && /*#__PURE__*/_react.default.createElement(_pagination.default, (0, _extends2.default)({
     pageSizeOptions: [20, 50, 100, 1000, 10000],

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

@@ -183,7 +183,8 @@ const TableBodyCell = props => {
     selectionSettings,
     wrapSettings,
     pagination,
-    onExpandClick
+    onExpandClick,
+    recordClick
     // dataSource
   } = _react.default.useContext(_useContext.TableContext);
   const expandIconColumnIndex = expandable?.expandIconColumnIndex ?? 0;
@@ -435,6 +436,11 @@ const TableBodyCell = props => {
       }
     },
     onClick: e => {
+      recordClick?.({
+        e,
+        rowData: record,
+        rowIndex: rowNumber
+      });
       const selection = window.getSelection();
       const text = selection ? selection.toString() : "";
       if (text.length > 0 || enableClick === false) {} else {

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

@@ -104,11 +104,14 @@ const renderFilter = args => {
         format: dateRangeFormat,
         value: dateRangeValue,
         onChange: value => {
-          console.log('value', value);
           const newDateRangeValue = value ? [value[0] ? (0, _moment.default)(value[0]).format() : '', value[1] ? (0, _moment.default)(value[1]).format() : ''] : [];
-          console.log('newDateRangeValue', newDateRangeValue);
           setSelectedKeys(newDateRangeValue);
-        },
+        }
+
+        // onSelect={(val) => {
+        // }}
+        ,
+
         menuClassName: "rc-menu-popup",
         placement: "auto"
       }))));

package/lib/table-component/table/TableWrapper.d.ts

@@ -23,6 +23,7 @@ type Props<T> = {
     dataSource: T[];
     pagination?: false | PaginationConfig;
     infiniteScroll?: boolean;
+    onEndReachedThreshold?: number;
     columnVirtualizer: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
     virtualPaddingLeft: number | undefined;
     virtualPaddingRight: number | undefined;

package/lib/table-component/table/TableWrapper.js

@@ -14,6 +14,7 @@ var _reactTooltip = require("react-tooltip");
 var _ContextMenu = _interopRequireDefault(require("../ContextMenu"));
 var _react = _interopRequireWildcard(require("react"));
 var _useContext = require("../useContext");
+var _utils = require("../hook/utils");
 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 TableWrapper = props => {
@@ -37,6 +38,7 @@ const TableWrapper = props => {
     dataSource,
     pagination,
     infiniteScroll,
+    onEndReachedThreshold,
     columnVirtualizer,
     fixedLeftColumns,
     fixedRightColumns,
@@ -102,7 +104,9 @@ const TableWrapper = props => {
         scrollTop,
         clientHeight
       } = e.currentTarget;
-      const isEnd = scrollTop + clientHeight >= tbScrollHeight - 50;
+      const abc = clientHeight * ((0, _utils.isNullOrUndefined)(onEndReachedThreshold) ? 0.1 : onEndReachedThreshold ?? 0);
+      // const isEnd = scrollTop + clientHeight >= tbScrollHeight - 50;
+      const isEnd = scrollTop + clientHeight >= tbScrollHeight - abc;
       if (isEnd && !loadingRef.current && hasMoreRef.current && dataSource?.length > 0) {
         handleNext();
       }

package/lib/table-component/useContext.d.ts

@@ -19,6 +19,7 @@ export interface IContext<T> {
     setExpanded: Dispatch<SetStateAction<ExpandedState>>;
     expanded: ExpandedState;
     recordDoubleClick?: (args: RecordDoubleClickEventArgs<T>) => void;
+    recordClick?: (args: RecordDoubleClickEventArgs<T>) => void;
     selectionSettings?: SelectionSettings;
     isSelectionChange?: {
         isChange: boolean;

package/lib/table-virtuoso/InternalTable.js

@@ -408,7 +408,8 @@ const InternalTable = props => {
     columnSizing: columnSizing,
     columnSizingInfo: columnSizingInfo,
     setColumnSizing: setColumnSizing,
-    rowSelection: rowSelection
+    rowSelection: rowSelection,
+    pagination: pagination
   })))));
 };
 var _default = exports.default = InternalTable;

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

@@ -354,8 +354,12 @@ const TableBodyCell = props => {
       ...(0, _utils.getCommonPinningStyles)(cell.column)
     },
     onMouseEnter: e => {
-      if (e.target.firstChild?.clientWidth < e.target.firstChild?.scrollWidth) {
+      if (e.target?.firstChild?.className === 'ui-rc_cell-content' && e.target.firstChild?.clientWidth < e.target.firstChild?.scrollWidth) {
         setIsOpenTooltip(true);
+      } else {
+        if (e.target?.clientWidth < e.target?.scrollWidth) {
+          setIsOpenTooltip(true);
+        }
       }
     },
     onKeyDown: e => {

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

@@ -81,7 +81,8 @@ const TableContainer = props => {
     onRowFooterStyles,
     onRowHeaderStyles,
     title,
-    groupSetting
+    groupSetting,
+    ...rest
   } = props;
   const [paginationLocal] = (0, _locale.useLocale)('Pagination');
   const [tableLocal] = (0, _locale.useLocale)('Table');
@@ -258,7 +259,7 @@ const TableContainer = props => {
       pagination,
       groupSetting
     }
-  }, /*#__PURE__*/_react.default.createElement(_TableWrapper.default, {
+  }, /*#__PURE__*/_react.default.createElement(_TableWrapper.default, (0, _extends2.default)({}, rest, {
     tableContainerRef: tableContainerRef,
     prefix: prefix,
     id: id,
@@ -268,7 +269,7 @@ const TableContainer = props => {
     table: table,
     columns: columns,
     commandClick: triggerCommandClick
-  })), /*#__PURE__*/_react.default.createElement("div", {
+  }))), /*#__PURE__*/_react.default.createElement("div", {
     ref: bottomToolbarRef
   }, pagination && !infiniteScroll && /*#__PURE__*/_react.default.createElement(_pagination.default, (0, _extends2.default)({
     pageSizeOptions: [20, 50, 100, 1000, 10000],

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

@@ -14,6 +14,8 @@ var _useContext = require("../useContext");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _TableBodyRow = _interopRequireDefault(require("../body/TableBodyRow"));
 var _TableFooterCell = _interopRequireDefault(require("../footer/TableFooterCell"));
+var _reactTooltip = require("react-tooltip");
+var _ContextMenu = _interopRequireDefault(require("../../table-component/ContextMenu"));
 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; }
 /* eslint-disable @typescript-eslint/no-shadow */
@@ -30,19 +32,103 @@ const TableWrapper = props => {
     height,
     id,
     commandClick,
-    editAble
+    editAble,
+    contextMenuItems: propContextMenuItems,
+    contextMenuHidden,
+    contextMenuClick,
+    contextMenuOpen
   } = props;
+  const menuRef = _react.default.useRef(null);
   const {
     prefix,
     editingKey,
-    rowEditable
+    rowEditable,
+    windowSize
   } = (0, _react.useContext)(_useContext.TableContext); //onRowHeaderStyles
+  // const { windowSize } = useContext(TableContext)
 
   // ref cho scroll container
   const scrollRef = (0, _react.useRef)(null);
   const {
     rows
   } = table.getRowModel();
+  const [menuVisible, setMenuVisible] = _react.default.useState(false);
+  const [selectedRowData, setSelectedRowData] = _react.default.useState(null);
+  const [position, setPosition] = _react.default.useState({
+    x: 0,
+    y: 0,
+    viewportWidth: windowSize.innerWidth,
+    viewportHeight: windowSize.innerHeight
+  });
+  const contextMenuItems = _react.default.useMemo(() => {
+    if (typeof contextMenuHidden === 'function' && propContextMenuItems && selectedRowData) {
+      const hiddenItems = contextMenuHidden({
+        rowInfo: {
+          rowData: selectedRowData
+        }
+      });
+      return propContextMenuItems.filter(item => !hiddenItems.includes(item?.key));
+    }
+    if (contextMenuHidden && typeof contextMenuHidden !== 'function' && propContextMenuItems) {
+      return propContextMenuItems.filter(item => !contextMenuHidden.includes(item?.key));
+    }
+    return propContextMenuItems;
+  }, [propContextMenuItems, contextMenuHidden, selectedRowData]);
+  const onContextMenu = data => event => {
+    event.preventDefault(); // Ngăn chặn menu mặc định của trình duyệt
+
+    setSelectedRowData(data);
+    contextMenuOpen?.({
+      rowInfo: {
+        rowData: data
+      },
+      event
+    });
+    setMenuVisible(true);
+
+    // Đợi DOM cập nhật và lấy kích thước menu
+    setTimeout(() => {
+      const menuElement = menuRef.current; // Lấy menu từ DOM
+      const menuWidth = menuElement?.offsetWidth || 200; // Mặc định 200px nếu chưa render
+      const menuHeight = menuElement?.offsetHeight; // Mặc định 450px nếu chưa render
+
+      // Điều chỉnh vị trí menu
+      let x = event.clientX;
+      let y = event.clientY;
+      if (x + menuWidth > windowSize.innerWidth) {
+        x = x - menuWidth - 10; // Cách cạnh phải 10px
+      }
+      if (y + menuHeight > windowSize.innerHeight) {
+        if (y < menuHeight) {
+          y = 10;
+        } else {
+          y = y - 10 - menuHeight; // Cách cạnh dưới 10px
+        }
+      }
+      setPosition(prevState => ({
+        ...prevState,
+        x,
+        y
+      }));
+    }, 100);
+    if (!menuVisible) {
+      document.addEventListener(`click`, function onClickOutside(e) {
+        const element = e.target;
+        const menuContainer = document.querySelector('.popup-context-menu');
+        const isInsideContainer = element.closest('.popup-context-menu') && menuContainer;
+        if (isInsideContainer) {
+          return;
+        }
+        setMenuVisible(false);
+        setPosition(prevState => ({
+          ...prevState,
+          x: undefined,
+          y: undefined
+        }));
+        document.removeEventListener(`click`, onClickOutside);
+      });
+    }
+  };
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(`${prefix}-grid-container`, {})
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -107,7 +193,9 @@ const TableWrapper = props => {
           rowheight: editAble ? 37 : rowheight,
           isEditing: isEditing,
           isRowEditable: isRowEditable,
-          editAble: editAble
+          editAble: editAble,
+          onContextMenu: onContextMenu,
+          contextMenuItems: contextMenuItems
         }, rest));
       }
     },
@@ -164,6 +252,27 @@ const TableWrapper = props => {
         });
       }));
     }
-  })));
+  })), /*#__PURE__*/_react.default.createElement(_reactTooltip.Tooltip, {
+    id: `${id}-tooltip-content`,
+    style: {
+      zIndex: 1999,
+      maxWidth: 450
+    },
+    delayShow: 100
+  }), /*#__PURE__*/_react.default.createElement(_reactTooltip.Tooltip, {
+    id: `${id}-tooltip-error`,
+    style: {
+      zIndex: 1999,
+      maxWidth: 450
+    }
+  }), menuVisible && /*#__PURE__*/_react.default.createElement(_ContextMenu.default, {
+    open: menuVisible,
+    pos: position,
+    setOpen: setMenuVisible,
+    menuRef: menuRef,
+    contextMenuItems: contextMenuItems,
+    contextMenuClick: contextMenuClick,
+    rowData: selectedRowData
+  }));
 };
 var _default = exports.default = TableWrapper;

package/package.json

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