es-grid-template 1.8.79 → 1.8.81

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

@@ -130,6 +130,7 @@ export type ColumnTemplate<RecordType> = {
 export type GetRowKey<RecordType> = (record: RecordType, index?: number) => Key;
 export type ColumnTable<RecordType = AnyObject> = {
     field: string;
+    fieldOrigin?: string;
     width?: number;
     maxWidth?: number;
     minWidth?: number;
@@ -248,6 +249,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

@@ -159,6 +159,7 @@ export declare const removeColumns: <RecordType>(columns: ColumnTable<RecordType
 export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordType>[], fixedFields: string[]) => {
     fixed: string;
     field: string;
+    fieldOrigin?: string;
     width?: number;
     maxWidth?: number;
     minWidth?: number;
@@ -211,9 +212,9 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
     ellipsis?: boolean;
     allowResizing?: boolean;
     allowSelection?: boolean | ((rowData: RecordType) => boolean);
-    onCellStyles?: Omit<CSSProperties, "width" | "display" | "right" | "left" | "position" | "minWidth"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "width" | "display" | "right" | "left" | "position" | "minWidth">);
-    onCellHeaderStyles?: Omit<CSSProperties, "width" | "display" | "right" | "left" | "position" | "minWidth"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "display" | "right" | "left" | "position" | "minWidth">);
-    onCellFooterStyles?: Omit<CSSProperties, "width" | "display" | "right" | "left" | "position" | "minWidth"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "display" | "right" | "left" | "position" | "minWidth">);
+    onCellStyles?: Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position">);
+    onCellHeaderStyles?: Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position">);
+    onCellFooterStyles?: Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "left" | "right" | "display" | "width" | "minWidth" | "position">);
     sumGroup?: boolean;
     onCell?: (rowData: RecordType, index: number) => import("react").TdHTMLAttributes<HTMLTableCellElement>;
 }[];

package/es/table-component/TableContainer.js

@@ -74,6 +74,7 @@ const TableContainer = props => {
     dataSourceFilter,
     onExpandClick,
     setIsExpandClick,
+    recordClick,
     ...rest
   } = props;
   const [paginationLocal] = useLocale('Pagination');
@@ -94,12 +95,27 @@ const TableContainer = props => {
     }
   }, [id, height, editAble, minHeight]);
   React.useEffect(() => {
-    const handleClickOutside = () => {
-      setFocusedCell(undefined);
-      setIsSelectionChange(prev => ({
-        ...prev,
-        isChange: false
-      }));
+    const handleClickOutside = event => {
+      const element = event.target;
+      const container = document.querySelector(".be-popup-container");
+      const containerContextMenu = document.querySelector(".popup-context-menu");
+      const tableBody = document.querySelector(`#${id} .ui-rc-grid-tbody`);
+      const itemContainer = document.querySelector(`#${id} .ui-rc-toolbar-selection-overflow-item`);
+      const itemHeader = document.querySelector(`#${id} .ui-rc-table-thead`);
+      const isInsideContainer = element.closest(".be-popup-container") && container;
+      const isInsideContainerContext = containerContextMenu && element.closest(".popup-context-menu");
+      const isInsideToolbar = element.closest(`.ui-rc-toolbar-selection-overflow-item`) && itemContainer;
+      const isInsideHeader = itemHeader && itemHeader.contains(event.target);
+      if (isInsideContainer || isInsideToolbar || isInsideHeader || isInsideContainerContext || element.id === id) {
+        return;
+      }
+      if (containerRef.current && tableBody && !tableBody.contains(event.target)) {
+        setFocusedCell(undefined);
+        setIsSelectionChange(prev => ({
+          ...prev,
+          isChange: false
+        }));
+      }
     };
     document.addEventListener('mousedown', handleClickOutside);
     return () => {
@@ -267,6 +283,7 @@ const TableContainer = props => {
       // triggerFilter,
       wrapSettings,
       recordDoubleClick,
+      recordClick,
       selectionSettings,
       isSelectionChange,
       setIsSelectionChange,

package/es/table-component/TableContainerEdit.js

@@ -627,195 +627,11 @@ const TableContainerEdit = props => {
     if (!tableContainerRef.current) {
       return;
     }
-
-    // const containerWidth = tableContainerRef.current.offsetWidth
-    // const totalWidth = table.getTotalSize()
-
-    // if (totalWidth && totalWidth <= containerWidth) {
-
-    //   return
-
-    // }
-
     if (columnSizingInfo.isResizingColumn === false) {
       const aa = updateColumnWidthsRecursive(propsColumns, columnSizing);
       setColumns(aa);
-
-      // requestAnimationFrame(() => {
-
-      //   columnVirtualizer.measure()
-      // })
     }
   }, [columnSizingInfo]);
-
-  // React.useEffect(() => {
-
-  //   // if (!containerRef.current || !tableContainerRef.current) { 
-  //   if (!tableContainerRef.current) {
-  //     return
-  //   }
-
-  //   // const containerWidth = containerRef.current.offsetWidth - 1
-  //   // const containerWidth = tableContainerRef.current.offsetWidth
-  //   const containerWidth = tableContainerRef.current.offsetWidth - (tableContainerRef.current.scrollHeight > tableContainerRef.current.offsetHeight ? 15 : 0)
-
-  //   const totalWidth = table.getTotalSize() - (tableContainerRef.current.scrollHeight > tableContainerRef.current.offsetHeight ? 15 : 0)
-
-  //   if (totalWidth && totalWidth > 0 && totalWidth < containerWidth) {
-
-  //     const factor = containerWidth / totalWidth
-
-  //     const visibleCols = table.getVisibleLeafColumns()
-
-  //     const baseSizes = visibleCols.map(
-  //       (col) => col.getSize() || col.columnDef.size || 150
-  //     )
-
-  //     const scaledSizes = baseSizes.map((size) => size * factor)
-  //     const roundedSizes = scaledSizes.map((size) => Math.floor(size))
-
-  //     let diff = containerWidth - roundedSizes.reduce((a, b) => a + b, 0)
-
-  //     // phân bổ diff cho các cột từ trái qua phải
-  //     for (let i = 0; diff > 0; i = (i + 1) % roundedSizes.length) {
-  //       roundedSizes[i]++
-  //       diff--
-  //     }
-
-  //     const aaa = visibleCols.reduce((acc, col, idx) => {
-  //       acc[col.id] = roundedSizes[idx]
-  //       return acc
-  //     }, {} as Record<string, number>)
-
-  //     const aa = updateColumnWidthsRecursive(propsColumns, aaa)
-
-  //     // setColumns(aa)
-
-  //     // table.setColumnSizing(aaa)
-
-  //     requestAnimationFrame(() => {
-
-  //       columnVirtualizer.measure()
-  //     })
-
-  //     // setColumnSizing?.(aaa)
-  //   } else {
-  //     if (columnHidden) {
-  //       const abb = table.getVisibleLeafColumns()?.[0]
-
-  //       if (abb && Object.keys(columnSizingInfo).length === 0
-  //       ) {
-  //         // setColumnSizing({ "#": abb.getSize() })
-  //         table.setColumnSizing({ "#": abb.getSize() })
-
-  //         requestAnimationFrame(() => {
-
-  //           columnVirtualizer.measure()
-  //         })
-  //       }
-  //     }
-
-  //   }
-
-  // }, [table.getTotalSize(), dataSource.length, windowSize.innerWidth, columnVirtualizer])
-
-  // React.useEffect(() => {
-
-  //   if (!tableContainerRef.current) { 
-  //     return 
-  //   }
-
-  //   const containerWidth = tableContainerRef.current.offsetWidth
-  //   const totalWidth = table.getTotalSize()
-
-  //   if (totalWidth && totalWidth <= containerWidth) {
-
-  //     return
-
-  //   }
-
-  //   if (columnSizingInfo.isResizingColumn === false) {
-
-  //     const aa =  updateColumnWidthsRecursive(propsColumns, columnSizing)
-  //     setColumns(aa)
-
-  //   }
-
-  // }, [columnSizing, columnSizingInfo, propsColumns, setColumns])
-
-  // React.useEffect(() => {
-
-  //   // if (!containerRef.current || !tableContainerRef.current) { 
-  //   if (!tableContainerRef.current) { 
-  //     return 
-  //   }
-
-  //   // const containerWidth = containerRef.current.offsetWidth - 1
-  //   const containerWidth = tableContainerRef.current.offsetWidth - (tableContainerRef.current.scrollHeight > tableContainerRef.current.offsetHeight ? 15 : 0 )
-
-  //   const totalWidth = table.getTotalSize()
-
-  //   if (totalWidth && totalWidth < containerWidth) {
-
-  //     const factor = containerWidth / totalWidth
-
-  //     const visibleCols = table.getVisibleLeafColumns()
-
-  //     const baseSizes = visibleCols.map(
-  //       (col) => col.getSize() || col.columnDef.size || 150
-  //     )
-
-  //     const scaledSizes = baseSizes.map((size) => size * factor)
-  //     const roundedSizes = scaledSizes.map((size) => Math.floor(size))
-
-  //     let diff = containerWidth - roundedSizes.reduce((a, b) => a + b, 0)
-
-  //     // phân bổ diff cho các cột từ trái qua phải
-  //     for (let i = 0; diff > 0; i = (i + 1) % roundedSizes.length) {
-  //       roundedSizes[i]++
-  //       diff--
-  //     }
-
-  //     const aaa = visibleCols.reduce((acc, col, idx) => {
-  //       acc[col.id] = roundedSizes[idx]
-  //       return acc
-  //     }, {} as Record<string, number>)
-
-  //     const aa =  updateColumnWidthsRecursive(propsColumns, aaa)
-
-  //     // setColumns(aa)
-
-  //     table.setColumnSizing(aaa)
-
-  //     // setColumnSizing?.(aaa)
-  //   }
-
-  // }, [windowSize.innerWidth, tableContainerRef, propsColumns, table.getState().columnSizing])
-  // // }, [windowSize.innerWidth, tableContainerRef, propsColumns, table.getState().columnSizing, dataSource.length])
-  // // }, [table.getState().columnSizing, table.getTotalSize(), containerRef])
-
-  // React.useEffect(() => {
-
-  //   if (!containerRef.current) return;
-
-  //   const containerWidth = containerRef.current.offsetWidth - 1;
-  //   const totalWidth = table.getTotalSize();
-
-  //   if (totalWidth && totalWidth < containerWidth) {
-
-  //     const factor = containerWidth / totalWidth;
-
-  //     table.setColumnSizing(
-  //       table.getVisibleLeafColumns().reduce((acc, col) => {
-  //         acc[col.id] = ((col.getSize() || col.columnDef.size || 150) * factor);
-  //         return acc;
-  //       }, {} as Record<string, number>)
-  //     );
-  //   }
-
-  // }, [table.getTotalSize(), windowSize.innerWidth, table.getState().columnSizing])
-  // // }, [table.getState().columnSizing, table.getTotalSize(), containerRef])
-
   React.useEffect(() => {
     // const totalHeight = minHeight ?? height
     const totalHeight = getTableHeight(height, minHeight);
@@ -1397,6 +1213,7 @@ const TableContainerEdit = props => {
         if (item.key === 'ADD') {
           return {
             ...item,
+            label: item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add item',
             template: () => {
               return /*#__PURE__*/React.createElement(Fragment, null, item.key === 'ADD' && /*#__PURE__*/React.createElement("div", {
                 className: classNames(`be-toolbar-item`, item?.className)
@@ -1424,6 +1241,7 @@ const TableContainerEdit = props => {
         if (item.key === 'DELETE') {
           return {
             ...item,
+            label: item.label ? t ? t(item.label) : item.label : t ? t('Delete all item') : 'Delete all item',
             template: () => {
               return /*#__PURE__*/React.createElement("div", {
                 className: classNames(`be-toolbar-item`, item?.className)
@@ -1448,10 +1266,12 @@ const TableContainerEdit = props => {
       if (item.key === 'ADD') {
         return {
           ...item,
+          label: item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add 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, {
+              title: "",
               overlayClassName: 'be-popup-container',
               style: {
                 color: '#28c76f',
@@ -1474,6 +1294,7 @@ const TableContainerEdit = props => {
       if (item.key === 'DUPLICATE') {
         return {
           ...item,
+          label: item.label ? t ? t(item.label) : item.label : t ? t('Duplicate') : 'Duplicate',
           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)
@@ -1492,6 +1313,7 @@ const TableContainerEdit = props => {
       if (item.key === 'INSERT_BEFORE') {
         return {
           ...item,
+          label: item.label ? t ? t(item.label) : item.label : t ? t('Insert item before') : 'Insert item before',
           template: () => {
             return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
               className: classNames(`be-toolbar-item`, item?.className)
@@ -1518,6 +1340,7 @@ const TableContainerEdit = props => {
       if (item.key === 'INSERT_AFTER') {
         return {
           ...item,
+          label: item.label ? t ? t(item.label) : item.label : t ? t('Insert item after') : 'Insert item after',
           template: () => {
             return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
               className: classNames(`be-toolbar-item`, item?.className)
@@ -1544,6 +1367,7 @@ const TableContainerEdit = props => {
       if (item.key === 'INSERT_CHILDREN') {
         return {
           ...item,
+          label: item.label ? t ? t(item.label) : item.label : t ? t('Insert item children') : 'Insert item children',
           template: () => {
             return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
               className: classNames(`be-toolbar-item`, item?.className)
@@ -1562,6 +1386,7 @@ const TableContainerEdit = props => {
       if (item.key === 'DELETE') {
         return {
           ...item,
+          label: item.label ? t ? t(item.label) : item.label : t ? t('Delete all item') : 'Delete all item',
           template: () => {
             return /*#__PURE__*/React.createElement("div", {
               className: classNames(`be-toolbar-item`, item?.className)
@@ -1580,6 +1405,7 @@ const TableContainerEdit = props => {
       if (item.key === 'DELETE_ROWS') {
         return {
           ...item,
+          label: t ? `${t('Delete')} ${rowsFocus.length} ${t('row')}` : `Delete ${rowsFocus.length} item`,
           template: () => {
             return /*#__PURE__*/React.createElement("div", {
               className: classNames(`be-toolbar-item`, item?.className)

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

@@ -155,9 +155,9 @@ const TableBodyCell = props => {
   const {
     cell,
     commandClick,
-    // tableId,
     table,
     isEditing
+    // rowVirtualizer
   } = props;
   const {
     id,
@@ -176,7 +176,8 @@ const TableBodyCell = props => {
     selectionSettings,
     wrapSettings,
     pagination,
-    onExpandClick
+    onExpandClick,
+    recordClick
     // dataSource
   } = React.useContext(TableContext);
   const expandIconColumnIndex = expandable?.expandIconColumnIndex ?? 0;
@@ -397,6 +398,15 @@ const TableBodyCell = props => {
           colId: cell.column.id,
           rowId: nextId
         });
+
+        // if (rowNumber < flatRows.length - 5) {
+        //   e.stopPropagation()
+        //   e.preventDefault()
+        //   rowVirtualizer.scrollToIndex(cell.row.index, {
+        //     align: 'center', // 'start' | 'center' | 'end'
+        //   })
+        // }
+
         const row = document.querySelector(`.ui-rc-grid-row[data-row-key="${nextId}"]`);
         const cellFocus = row?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
         if (cellFocus) {
@@ -428,6 +438,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

@@ -101,9 +101,10 @@ export const renderFilter = args => {
 
         // onSelect={(val) => {
         // }}
-        ,
 
-        menuClassName: "rc-menu-popup",
+        // menuClassName="rc-menu-popup"
+        ,
+        menuClassName: "be-popup-container",
         placement: "auto"
       }))));
     case 'Week':

package/es/table-component/hook/utils.js

@@ -783,7 +783,8 @@ export const shouldInclude = (item, queries, ignoreAccents) => {
         // condition = isDateComparison ? compareDates(itemDate, queryDate) : (itemValue === value)
         break;
       case "notequal":
-        condition = isDateComparison ? !compareDates(itemDate, queryDate) : itemValue !== value;
+        const abcN = ignoreAccents === false ? itemValue !== value : itemStr !== queryStr;
+        condition = isDateComparison ? !compareDates(itemDate, queryDate) : abcN;
         break;
       case "greaterthan":
         // @ts-ignore

package/es/table-component/style.scss

@@ -1071,7 +1071,7 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
 
 
 
-.rc-menu-popup {
+.be-popup-container {
   z-index: 1090 !important;
 }
 

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/table/TableWrapper.js

@@ -192,10 +192,12 @@ const TableWrapper = props => {
           contextMenuItems: contextMenuItems
         }, rest));
       }
-    },
-    defaultItemHeight: 37,
-    fixedItemHeight: 37,
-    itemSize: () => 37
+    }
+
+    // defaultItemHeight={37}
+    // fixedItemHeight={37}
+
+    // itemSize={() => 37}
 
     // overscan={{
     //   main: 10,

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

@@ -130,6 +130,7 @@ export type ColumnTemplate<RecordType> = {
 export type GetRowKey<RecordType> = (record: RecordType, index?: number) => Key;
 export type ColumnTable<RecordType = AnyObject> = {
     field: string;
+    fieldOrigin?: string;
     width?: number;
     maxWidth?: number;
     minWidth?: number;
@@ -248,6 +249,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/group-component/hook/utils.d.ts

@@ -159,6 +159,7 @@ export declare const removeColumns: <RecordType>(columns: ColumnTable<RecordType
 export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordType>[], fixedFields: string[]) => {
     fixed: string;
     field: string;
+    fieldOrigin?: string;
     width?: number;
     maxWidth?: number;
     minWidth?: number;

package/lib/table-component/TableContainer.js

@@ -81,6 +81,7 @@ const TableContainer = props => {
     dataSourceFilter,
     onExpandClick,
     setIsExpandClick,
+    recordClick,
     ...rest
   } = props;
   const [paginationLocal] = (0, _locale.useLocale)('Pagination');
@@ -101,12 +102,27 @@ const TableContainer = props => {
     }
   }, [id, height, editAble, minHeight]);
   _react.default.useEffect(() => {
-    const handleClickOutside = () => {
-      setFocusedCell(undefined);
-      setIsSelectionChange(prev => ({
-        ...prev,
-        isChange: false
-      }));
+    const handleClickOutside = event => {
+      const element = event.target;
+      const container = document.querySelector(".be-popup-container");
+      const containerContextMenu = document.querySelector(".popup-context-menu");
+      const tableBody = document.querySelector(`#${id} .ui-rc-grid-tbody`);
+      const itemContainer = document.querySelector(`#${id} .ui-rc-toolbar-selection-overflow-item`);
+      const itemHeader = document.querySelector(`#${id} .ui-rc-table-thead`);
+      const isInsideContainer = element.closest(".be-popup-container") && container;
+      const isInsideContainerContext = containerContextMenu && element.closest(".popup-context-menu");
+      const isInsideToolbar = element.closest(`.ui-rc-toolbar-selection-overflow-item`) && itemContainer;
+      const isInsideHeader = itemHeader && itemHeader.contains(event.target);
+      if (isInsideContainer || isInsideToolbar || isInsideHeader || isInsideContainerContext || element.id === id) {
+        return;
+      }
+      if (containerRef.current && tableBody && !tableBody.contains(event.target)) {
+        setFocusedCell(undefined);
+        setIsSelectionChange(prev => ({
+          ...prev,
+          isChange: false
+        }));
+      }
     };
     document.addEventListener('mousedown', handleClickOutside);
     return () => {
@@ -274,6 +290,7 @@ const TableContainer = props => {
       // triggerFilter,
       wrapSettings,
       recordDoubleClick,
+      recordClick,
       selectionSettings,
       isSelectionChange,
       setIsSelectionChange,

package/lib/table-component/TableContainerEdit.js

@@ -634,195 +634,11 @@ const TableContainerEdit = props => {
     if (!tableContainerRef.current) {
       return;
     }
-
-    // const containerWidth = tableContainerRef.current.offsetWidth
-    // const totalWidth = table.getTotalSize()
-
-    // if (totalWidth && totalWidth <= containerWidth) {
-
-    //   return
-
-    // }
-
     if (columnSizingInfo.isResizingColumn === false) {
       const aa = (0, _utils.updateColumnWidthsRecursive)(propsColumns, columnSizing);
       setColumns(aa);
-
-      // requestAnimationFrame(() => {
-
-      //   columnVirtualizer.measure()
-      // })
     }
   }, [columnSizingInfo]);
-
-  // React.useEffect(() => {
-
-  //   // if (!containerRef.current || !tableContainerRef.current) { 
-  //   if (!tableContainerRef.current) {
-  //     return
-  //   }
-
-  //   // const containerWidth = containerRef.current.offsetWidth - 1
-  //   // const containerWidth = tableContainerRef.current.offsetWidth
-  //   const containerWidth = tableContainerRef.current.offsetWidth - (tableContainerRef.current.scrollHeight > tableContainerRef.current.offsetHeight ? 15 : 0)
-
-  //   const totalWidth = table.getTotalSize() - (tableContainerRef.current.scrollHeight > tableContainerRef.current.offsetHeight ? 15 : 0)
-
-  //   if (totalWidth && totalWidth > 0 && totalWidth < containerWidth) {
-
-  //     const factor = containerWidth / totalWidth
-
-  //     const visibleCols = table.getVisibleLeafColumns()
-
-  //     const baseSizes = visibleCols.map(
-  //       (col) => col.getSize() || col.columnDef.size || 150
-  //     )
-
-  //     const scaledSizes = baseSizes.map((size) => size * factor)
-  //     const roundedSizes = scaledSizes.map((size) => Math.floor(size))
-
-  //     let diff = containerWidth - roundedSizes.reduce((a, b) => a + b, 0)
-
-  //     // phân bổ diff cho các cột từ trái qua phải
-  //     for (let i = 0; diff > 0; i = (i + 1) % roundedSizes.length) {
-  //       roundedSizes[i]++
-  //       diff--
-  //     }
-
-  //     const aaa = visibleCols.reduce((acc, col, idx) => {
-  //       acc[col.id] = roundedSizes[idx]
-  //       return acc
-  //     }, {} as Record<string, number>)
-
-  //     const aa = updateColumnWidthsRecursive(propsColumns, aaa)
-
-  //     // setColumns(aa)
-
-  //     // table.setColumnSizing(aaa)
-
-  //     requestAnimationFrame(() => {
-
-  //       columnVirtualizer.measure()
-  //     })
-
-  //     // setColumnSizing?.(aaa)
-  //   } else {
-  //     if (columnHidden) {
-  //       const abb = table.getVisibleLeafColumns()?.[0]
-
-  //       if (abb && Object.keys(columnSizingInfo).length === 0
-  //       ) {
-  //         // setColumnSizing({ "#": abb.getSize() })
-  //         table.setColumnSizing({ "#": abb.getSize() })
-
-  //         requestAnimationFrame(() => {
-
-  //           columnVirtualizer.measure()
-  //         })
-  //       }
-  //     }
-
-  //   }
-
-  // }, [table.getTotalSize(), dataSource.length, windowSize.innerWidth, columnVirtualizer])
-
-  // React.useEffect(() => {
-
-  //   if (!tableContainerRef.current) { 
-  //     return 
-  //   }
-
-  //   const containerWidth = tableContainerRef.current.offsetWidth
-  //   const totalWidth = table.getTotalSize()
-
-  //   if (totalWidth && totalWidth <= containerWidth) {
-
-  //     return
-
-  //   }
-
-  //   if (columnSizingInfo.isResizingColumn === false) {
-
-  //     const aa =  updateColumnWidthsRecursive(propsColumns, columnSizing)
-  //     setColumns(aa)
-
-  //   }
-
-  // }, [columnSizing, columnSizingInfo, propsColumns, setColumns])
-
-  // React.useEffect(() => {
-
-  //   // if (!containerRef.current || !tableContainerRef.current) { 
-  //   if (!tableContainerRef.current) { 
-  //     return 
-  //   }
-
-  //   // const containerWidth = containerRef.current.offsetWidth - 1
-  //   const containerWidth = tableContainerRef.current.offsetWidth - (tableContainerRef.current.scrollHeight > tableContainerRef.current.offsetHeight ? 15 : 0 )
-
-  //   const totalWidth = table.getTotalSize()
-
-  //   if (totalWidth && totalWidth < containerWidth) {
-
-  //     const factor = containerWidth / totalWidth
-
-  //     const visibleCols = table.getVisibleLeafColumns()
-
-  //     const baseSizes = visibleCols.map(
-  //       (col) => col.getSize() || col.columnDef.size || 150
-  //     )
-
-  //     const scaledSizes = baseSizes.map((size) => size * factor)
-  //     const roundedSizes = scaledSizes.map((size) => Math.floor(size))
-
-  //     let diff = containerWidth - roundedSizes.reduce((a, b) => a + b, 0)
-
-  //     // phân bổ diff cho các cột từ trái qua phải
-  //     for (let i = 0; diff > 0; i = (i + 1) % roundedSizes.length) {
-  //       roundedSizes[i]++
-  //       diff--
-  //     }
-
-  //     const aaa = visibleCols.reduce((acc, col, idx) => {
-  //       acc[col.id] = roundedSizes[idx]
-  //       return acc
-  //     }, {} as Record<string, number>)
-
-  //     const aa =  updateColumnWidthsRecursive(propsColumns, aaa)
-
-  //     // setColumns(aa)
-
-  //     table.setColumnSizing(aaa)
-
-  //     // setColumnSizing?.(aaa)
-  //   }
-
-  // }, [windowSize.innerWidth, tableContainerRef, propsColumns, table.getState().columnSizing])
-  // // }, [windowSize.innerWidth, tableContainerRef, propsColumns, table.getState().columnSizing, dataSource.length])
-  // // }, [table.getState().columnSizing, table.getTotalSize(), containerRef])
-
-  // React.useEffect(() => {
-
-  //   if (!containerRef.current) return;
-
-  //   const containerWidth = containerRef.current.offsetWidth - 1;
-  //   const totalWidth = table.getTotalSize();
-
-  //   if (totalWidth && totalWidth < containerWidth) {
-
-  //     const factor = containerWidth / totalWidth;
-
-  //     table.setColumnSizing(
-  //       table.getVisibleLeafColumns().reduce((acc, col) => {
-  //         acc[col.id] = ((col.getSize() || col.columnDef.size || 150) * factor);
-  //         return acc;
-  //       }, {} as Record<string, number>)
-  //     );
-  //   }
-
-  // }, [table.getTotalSize(), windowSize.innerWidth, table.getState().columnSizing])
-  // // }, [table.getState().columnSizing, table.getTotalSize(), containerRef])
-
   _react.default.useEffect(() => {
     // const totalHeight = minHeight ?? height
     const totalHeight = (0, _utils.getTableHeight)(height, minHeight);
@@ -1404,6 +1220,7 @@ const TableContainerEdit = props => {
         if (item.key === 'ADD') {
           return {
             ...item,
+            label: item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add 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)
@@ -1431,6 +1248,7 @@ const TableContainerEdit = props => {
         if (item.key === 'DELETE') {
           return {
             ...item,
+            label: item.label ? t ? t(item.label) : item.label : t ? t('Delete all item') : 'Delete all item',
             template: () => {
               return /*#__PURE__*/_react.default.createElement("div", {
                 className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
@@ -1455,10 +1273,12 @@ const TableContainerEdit = props => {
       if (item.key === 'ADD') {
         return {
           ...item,
+          label: item.label ? t ? t(item.label) : item.label : t ? t('Add item') : 'Add 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(_antd.Dropdown.Button, {
+              title: "",
               overlayClassName: 'be-popup-container',
               style: {
                 color: '#28c76f',
@@ -1481,6 +1301,7 @@ const TableContainerEdit = props => {
       if (item.key === 'DUPLICATE') {
         return {
           ...item,
+          label: item.label ? t ? t(item.label) : item.label : t ? t('Duplicate') : 'Duplicate',
           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)
@@ -1499,6 +1320,7 @@ const TableContainerEdit = props => {
       if (item.key === 'INSERT_BEFORE') {
         return {
           ...item,
+          label: item.label ? t ? t(item.label) : item.label : t ? t('Insert item before') : 'Insert item before',
           template: () => {
             return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
               className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
@@ -1525,6 +1347,7 @@ const TableContainerEdit = props => {
       if (item.key === 'INSERT_AFTER') {
         return {
           ...item,
+          label: item.label ? t ? t(item.label) : item.label : t ? t('Insert item after') : 'Insert item after',
           template: () => {
             return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
               className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
@@ -1551,6 +1374,7 @@ const TableContainerEdit = props => {
       if (item.key === 'INSERT_CHILDREN') {
         return {
           ...item,
+          label: item.label ? t ? t(item.label) : item.label : t ? t('Insert item children') : 'Insert item children',
           template: () => {
             return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
               className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
@@ -1569,6 +1393,7 @@ const TableContainerEdit = props => {
       if (item.key === 'DELETE') {
         return {
           ...item,
+          label: item.label ? t ? t(item.label) : item.label : t ? t('Delete all item') : 'Delete all item',
           template: () => {
             return /*#__PURE__*/_react.default.createElement("div", {
               className: (0, _classnames.default)(`be-toolbar-item`, item?.className)
@@ -1587,6 +1412,7 @@ const TableContainerEdit = props => {
       if (item.key === 'DELETE_ROWS') {
         return {
           ...item,
+          label: t ? `${t('Delete')} ${rowsFocus.length} ${t('row')}` : `Delete ${rowsFocus.length} item`,
           template: () => {
             return /*#__PURE__*/_react.default.createElement("div", {
               className: (0, _classnames.default)(`be-toolbar-item`, item?.className)

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

@@ -162,9 +162,9 @@ const TableBodyCell = props => {
   const {
     cell,
     commandClick,
-    // tableId,
     table,
     isEditing
+    // rowVirtualizer
   } = props;
   const {
     id,
@@ -183,7 +183,8 @@ const TableBodyCell = props => {
     selectionSettings,
     wrapSettings,
     pagination,
-    onExpandClick
+    onExpandClick,
+    recordClick
     // dataSource
   } = _react.default.useContext(_useContext.TableContext);
   const expandIconColumnIndex = expandable?.expandIconColumnIndex ?? 0;
@@ -404,6 +405,15 @@ const TableBodyCell = props => {
           colId: cell.column.id,
           rowId: nextId
         });
+
+        // if (rowNumber < flatRows.length - 5) {
+        //   e.stopPropagation()
+        //   e.preventDefault()
+        //   rowVirtualizer.scrollToIndex(cell.row.index, {
+        //     align: 'center', // 'start' | 'center' | 'end'
+        //   })
+        // }
+
         const row = document.querySelector(`.ui-rc-grid-row[data-row-key="${nextId}"]`);
         const cellFocus = row?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
         if (cellFocus) {
@@ -435,6 +445,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

@@ -110,9 +110,10 @@ const renderFilter = args => {
 
         // onSelect={(val) => {
         // }}
-        ,
 
-        menuClassName: "rc-menu-popup",
+        // menuClassName="rc-menu-popup"
+        ,
+        menuClassName: "be-popup-container",
         placement: "auto"
       }))));
     case 'Week':

package/lib/table-component/hook/utils.js

@@ -880,7 +880,8 @@ const shouldInclude = (item, queries, ignoreAccents) => {
         // condition = isDateComparison ? compareDates(itemDate, queryDate) : (itemValue === value)
         break;
       case "notequal":
-        condition = isDateComparison ? !compareDates(itemDate, queryDate) : itemValue !== value;
+        const abcN = ignoreAccents === false ? itemValue !== value : itemStr !== queryStr;
+        condition = isDateComparison ? !compareDates(itemDate, queryDate) : abcN;
         break;
       case "greaterthan":
         // @ts-ignore

package/lib/table-component/style.scss

@@ -1071,7 +1071,7 @@ $cell-index-focus-bg-Dark: #E6EFFD !default;
 
 
 
-.rc-menu-popup {
+.be-popup-container {
   z-index: 1090 !important;
 }
 

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/table/TableWrapper.js

@@ -198,10 +198,12 @@ const TableWrapper = props => {
           contextMenuItems: contextMenuItems
         }, rest));
       }
-    },
-    defaultItemHeight: 37,
-    fixedItemHeight: 37,
-    itemSize: () => 37
+    }
+
+    // defaultItemHeight={37}
+    // fixedItemHeight={37}
+
+    // itemSize={() => 37}
 
     // overscan={{
     //   main: 10,

package/package.json

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