es-grid-template 1.7.31 → 1.7.33

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

@@ -167,12 +167,12 @@ const TableWrapper = props => {
   return /*#__PURE__*/React.createElement("div", {
     style: {
       position: 'relative'
-    }
-  }, /*#__PURE__*/React.createElement("div", {
+    },
     className: classNames(`${prefix}-grid-container`, {
       'ui-rc-table-ping-right': tableContainerRef && (tableContainerRef.current?.scrollLeft ?? 0) >= 0 && (tableContainerRef.current?.scrollLeft ?? 0) + (tableContainerRef.current?.clientWidth ?? 0) < (tableContainerRef.current?.scrollWidth ?? 0),
       'ui-rc-table-ping-left': tableContainerRef && (tableContainerRef.current?.scrollLeft ?? 0) > 0
-    }),
+    })
+  }, /*#__PURE__*/React.createElement("div", {
     id: id,
     ref: tableContainerRef,
     style: {
@@ -191,8 +191,8 @@ const TableWrapper = props => {
     onScroll: handleScroll
   }, /*#__PURE__*/React.createElement("table", {
     style: {
-      display: 'grid'
-      // minWidth: table.getTotalSize()
+      display: 'grid',
+      minWidth: table.getTotalSize()
     }
   }, /*#__PURE__*/React.createElement(TableHead, {
     tableContainerRef: tableContainerRef,

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

@@ -106,6 +106,11 @@ export type ColumnTable<RecordType = AnyObject> = {
     source?: any[];
     showFilterSearch?: boolean;
     headerText?: string;
+    /**
+      * @deprecated Please use `visible` instead.
+      * @since  1.7.33
+      */
+    hidden?: boolean;
     visible?: boolean;
     headerTooltip?: boolean | string | (() => ReactNode | ReactElement);
     columnGroupText?: string;

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

@@ -6,6 +6,7 @@ export type IPositionCell = {
     colId: string;
 } | undefined;
 export interface IContext<T> {
+    t?: any;
     prefix: string;
     id: string;
     rowKey: string;

package/lib/grid-component/ColumnsChoose.js

@@ -227,7 +227,6 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 //
 //   const onCheck = (keys: string[]) => {
 //
-//     console.log('keys', keys)
 //     // setSelectedKeys(keys)
 //     setMergedSelectedKeys(keys)
 //     // setIsManualUpdate(true)
@@ -236,12 +235,10 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 //
 //   const handleAccept = () => {
 //
-//     console.log('mergedSelectedKeys', mergedSelectedKeys)
 //
 //     // const rs1  =  updateColumns(propsColumns, selectedKeys)
 //     const rs1  =  updateColumns(propsColumns, mergedSelectedKeys)
 //
-//     console.log('rs1', rs1)
 //
 //     triggerChangeColumns?.(rs1, 'columnChoose')
 //

package/lib/grid-component/InternalTable.js

@@ -307,7 +307,6 @@ const InternalTable = props => {
     setColumns(propsColumns);
   }, [propsColumns]);
   const handleOnFilter = queries => {
-    console.log('queries', queries);
     if (onFilter) {
       onFilter?.((0, _hooks.convertFilters)(queries));
     } else {
@@ -353,8 +352,6 @@ const InternalTable = props => {
       searchValue,
       setSearchValue
     }) => {
-      // console.log('selectedKeys', selectedKeys)
-
       const type = (0, _hooks.getTypeFilter)(column);
       // const operatorOptions = type === ('Checkbox' || 'Dropdown' || 'DropTree' || 'CheckboxDropdown') ? booleanOperator : (!type || type === 'Text' ? stringOperator : numberOperator)
 
@@ -907,7 +904,6 @@ const InternalTable = props => {
     }
   };
   const handleChange = (paging, filters, sorter) => {
-    console.log('sorter', sorter);
     onSorter?.(sorter);
   };
 

package/lib/grid-component/TableGrid.js

@@ -351,10 +351,6 @@ const TableGrid = props => {
       hideSelectAll: !type || type === 'single' || mode === 'radio' ? true : hideSelectAll ?? type !== 'multiple'
     }
 
-    // onScroll={(event) => {
-    //   console.log('event', event)
-    // }}
-
     // onFilter={(val: any) => {
     //   handleOnFilter(val)
     //   // triggerFilter?.(convertFilters(val))

package/lib/grid-component/TempTable.js

@@ -21,6 +21,8 @@ const TempTable = props => {
 
   // const TabComponent = groupAble ? InternalTable  : Table
   const TabComponent = editAble ? _tableComponent.default : _InternalTable.default;
+  // const TabComponent = InternalTable
+
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(TabComponent, (0, _extends2.default)({}, rest, {
     infiniteScroll: infiniteScroll,
     groupAble: groupAble,

package/lib/grid-component/hooks/columns/index.js

@@ -79,9 +79,6 @@ const getValueCell = (column, value, record, rowIndex, colIndex, format) => {
       // const contentNumber = !isEmpty(value) ? ((dec || dec === 0) ? parseFloat(Number(value).toFixed(dec)).toString() : value.toString()) : '0'
 
       const tmpval = typeof value === 'string' ? Number(value) : value;
-
-      // console.log('aaaaa', Number(value))
-
       const numericFormatProps = {
         thousandSeparator: (0, _utils.checkThousandSeparator)(thousandSeparator, decimalSeparator),
         decimalSeparator: (0, _utils.checkDecimalSeparator)(thousandSeparator, decimalSeparator),
@@ -95,7 +92,6 @@ const getValueCell = (column, value, record, rowIndex, colIndex, format) => {
       // if ( typeof value === "string") {
       //   const ttt =  removeNumericFormat(value, undefined, numericFormatProps )
       //
-      //   console.log('ttt', ttt)
       // }
 
       const contentNumber = !(0, _utils.isEmpty)(value) ? dec || dec === 0 ? parseFloat(tmpval.toFixed(dec)).toString() : tmpval.toString() : '0';
@@ -140,9 +136,6 @@ const renderValueCell = (column, value, record, rowIndex, colIndex, format, edit
       // const contentNumber = !isEmpty(value) ? ((dec || dec === 0) ? parseFloat(Number(value).toFixed(dec)).toString() : value.toString()) : '0'
 
       const tmpval = typeof value === 'string' ? Number(value) : value;
-
-      // console.log('aaaaa', Number(value))
-
       const numericFormatProps = {
         thousandSeparator: (0, _utils.checkThousandSeparator)(thousandSeparator, decimalSeparator),
         decimalSeparator: (0, _utils.checkDecimalSeparator)(thousandSeparator, decimalSeparator),
@@ -156,7 +149,6 @@ const renderValueCell = (column, value, record, rowIndex, colIndex, format, edit
       // if ( typeof value === "string") {
       //   const ttt =  removeNumericFormat(value, undefined, numericFormatProps )
       //
-      //   console.log('ttt', ttt)
       // }
 
       const contentNumber = !(0, _utils.isEmpty)(value) ? dec || dec === 0 ? parseFloat(tmpval.toFixed(dec)).toString() : tmpval.toString() : '0';

package/lib/grid-component/hooks/utils.js

@@ -691,7 +691,6 @@ function addRowsDownWithCtrl(arr, n) {
 
   // Hàm kiểm tra kiểu date hợp lệ
   const isValidDate = item => {
-    // console.log('!isNaN(Date.parse(d))', !isNaN(Date.parse(d)))
     // return !isNaN(Date.parse(d))
 
     if (typeof item === 'number') {
@@ -831,7 +830,6 @@ function addRowsDown(arr, n) {
   // const isValidDate = (item: any) => {
   //
   //
-  //   // console.log('!isNaN(Date.parse(d))', !isNaN(Date.parse(d)))
   //   // return !isNaN(Date.parse(d))
   //
   //   if (typeof item === 'number') {
@@ -978,7 +976,6 @@ function addRowsUpWithCtrl(array, n) {
 
   // Hàm kiểm tra kiểu date hợp lệ
   const isValidDate = item => {
-    // console.log('!isNaN(Date.parse(d))', !isNaN(Date.parse(d)))
     // return !isNaN(Date.parse(d))
 
     if (typeof item === 'number') {
@@ -1122,7 +1119,6 @@ function addRowsUp(array, n) {
   // const isValidDate = (item: any) => {
   //
   //
-  //   // console.log('!isNaN(Date.parse(d))', !isNaN(Date.parse(d)))
   //   // return !isNaN(Date.parse(d))
   //
   //   if (typeof item === 'number') {
@@ -2706,17 +2702,12 @@ function mergeWithFilter(dataArray, dataFilter) {
   const result = [...dataArray];
   dataFilter.forEach((filterItem, i) => {
     const existsInArray = result.find(item => item.rowId === filterItem.rowId);
-
-    // console.log('existsInArray', existsInArray)
-
     if (!existsInArray) {
       // tìm index của phần tử trước đó trong dataFilter
       for (let j = i - 1; j >= 0; j--) {
         const prevFilterItem = dataFilter[j];
         const indexInResult = result.findIndex(item => item.rowId === prevFilterItem.rowId);
         if (indexInResult !== -1) {
-          // console.log('filterItem', filterItem)
-
           result.splice(indexInResult + 1, 0, filterItem);
           return;
         }
@@ -2736,17 +2727,12 @@ function mergeWithFilter2(dataArray, dataFilter) {
   const result = [...dataArray];
   dataFilter.forEach((filterItem, i) => {
     const existsInArray = result.find(item => item.rowId === filterItem.rowId);
-
-    // console.log('existsInArray', existsInArray)
-
     if (!existsInArray) {
       // tìm index của phần tử trước đó trong dataFilter
       for (let j = i - 1; j >= 0; j--) {
         const prevFilterItem = dataFilter[j];
         const indexInResult = result.findIndex(item => item.rowId === prevFilterItem.rowId);
         if (indexInResult !== -1) {
-          // console.log('filterItem', filterItem)
-
           result.splice(indexInResult + 1, 0, filterItem);
           return;
         }

package/lib/grid-component/table/GridEdit.js

@@ -742,7 +742,7 @@ const GridEdit = props => {
       const newExpandedKeys = [...mergedExpandedKeys, key];
       setInnerExpandedKeys(newExpandedKeys);
     }
-  }, [dataSource, defaultValue, getRowKey, mergedExpandedKeys, rowKey, rowsFocus, triggerChangeData]);
+  }, [dataSource, defaultValue, getRowKey, mergedExpandedKeys, mergedFilterKeys, originData, rowKey, rowsFocus, setMergedFilterKeys, triggerChangeData]);
   const handleDeleteRows = _react.default.useCallback(item => {
     // setTimeout(() => {
     // onAddBgSelectedCell(selectedCells.current, id)
@@ -808,7 +808,6 @@ const GridEdit = props => {
       indexRow,
       key
     } = args;
-    console.log('changeType', changeType);
     if (changeType === 'blur') {
       const handleChangeCallback = callbackData => {
         const callbackRecord = callbackData;
@@ -854,7 +853,7 @@ const GridEdit = props => {
       onSubmit(record);
     }
   };
-  const handleDeleteContent = _react.default.useCallback(() => {
+  const handleDeleteContent = () => {
     if (selectedCells.current.size > 0) {
       const newData = [...dataSource];
 
@@ -894,7 +893,7 @@ const GridEdit = props => {
       const rsFilterData = (0, _hooks.updateOrInsert)((0, _hooks.flattenArray)([...originData]), newData);
       triggerChangeData?.([...rsFilterData], 'DELETE_CONTENT');
     }
-  }, [dataSource, getRowKey, handleCellChange, originData, triggerChangeData, visibleCols]);
+  };
   const toolbarItemsBottom = (0, _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 => {
@@ -1467,7 +1466,6 @@ const GridEdit = props => {
     row.replace(/\r/g, "").split("\t")
 
     // {
-    //   console.log('row', row)
     //   return row.replace(/\r/g, "").split("\t")
     // }
     );

package/lib/table-component/TableContainer.js

@@ -132,6 +132,12 @@ const TableContainer = props => {
     virtualPaddingRight = fixedRightColumns && fixedRightColumns.length > 0 ? pdRight - rightWidth > 0 ? pdRight - rightWidth : 0 : pdRight;
     // virtualPaddingRight = columnVirtualizer.getTotalSize() - (virtualColumns[virtualColumns.length - 1]?.end ?? 0)
   }
+  const columnSizingState = table.getState().columnSizing;
+  _react.default.useEffect(() => {
+    requestAnimationFrame(() => {
+      columnVirtualizer.measure();
+    });
+  }, [columnSizingState, columnVirtualizer]);
   const triggerCommandClick = () => {};
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: containerRef,
@@ -192,6 +198,7 @@ const TableContainer = props => {
     triggerChangeColumns: triggerChangeColumns
   })))), /*#__PURE__*/_react.default.createElement(_useContext.TableContext.Provider, {
     value: {
+      t,
       locale,
       prefix,
       id,

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

@@ -22,7 +22,6 @@ type TableContainerProps<T> = Omit<TableProps<T>, 'columns'> & {
         innerHeight: number;
         innerWidth: number;
     };
-    triggerPaste?: (pastedRows: T[], pastedColumnsArray: string[], newData: T[], copyRows: T[]) => void;
     mergedFilterKeys?: any;
     setMergedFilterKeys?: any;
     setExpanded?: any;

package/lib/table-component/TableContainerEdit.js

@@ -284,6 +284,8 @@ const TableContainerEdit = props => {
     }
   }, [validate, dataSource]);
   const visibleColumns = table.getVisibleLeafColumns();
+  // const visibleColumns = table.getVisibleFlatColumns();
+
   const fixedLeftColumns = table.getState().columnPinning.left ? visibleColumns.filter(vc => table.getState().columnPinning.left?.includes(vc.id)) : [];
   const fixedRightColumns = table.getState().columnPinning.right ? visibleColumns.filter(vc => table.getState().columnPinning.right?.includes(vc.id)) : [];
 
@@ -300,7 +302,7 @@ const TableContainerEdit = props => {
     // },
 
     measureElement: typeof window !== 'undefined' && navigator.userAgent.indexOf('Firefox') === -1 ? element => element?.getBoundingClientRect().height : undefined,
-    overscan: 1 //how many columns to render on each side off screen each way (adjust this for performance)
+    overscan: 0 //how many columns to render on each side off screen each way (adjust this for performance)
   });
   const virtualColumns = columnVirtualizer.getVirtualItems();
   const cacheColumns = columnVirtualizer.measurementsCache;
@@ -387,7 +389,7 @@ const TableContainerEdit = props => {
   }, [onDataChange]);
   const triggerPaste = _react.default.useCallback((pastedRows, pastedColumnsArray, newData, copyRows) => {
     const handlePasteCallback = callbackData => {
-      const rsFilterData = (0, _utils.updateOrInsert)((0, _utils.flattenArray)([...dataSource]), callbackData);
+      const rsFilterData = (0, _utils.updateOrInsert)((0, _utils.flattenArray)([...originData]), callbackData);
       const rs = (0, _utils.unFlattenData)(rsFilterData);
       triggerChangeData(rs);
     };
@@ -398,7 +400,7 @@ const TableContainerEdit = props => {
           pasteData: pastedRows,
           copyRows,
           type: 'onPaste',
-          data: dataSource,
+          data: originData,
           pastedColumns: pastedColumnsArray
         }, handlePasteCallback);
       } else {
@@ -407,7 +409,7 @@ const TableContainerEdit = props => {
           pasteData: pastedRows,
           type: 'onPaste',
           copyRows,
-          data: dataSource,
+          data: originData,
           pastedColumns: pastedColumnsArray
         }, handlePasteCallback);
         triggerChangeData(newData);
@@ -415,7 +417,7 @@ const TableContainerEdit = props => {
     } else {
       triggerChangeData(newData);
     }
-  }, [dataSource, onCellPaste, triggerChangeData]);
+  }, [onCellPaste, originData, triggerChangeData]);
   const handlePasted = _react.default.useCallback(pasteData => {
     if (!startCell) {
       return;
@@ -613,7 +615,7 @@ const TableContainerEdit = props => {
   }, [startCell, endCell, table, copySelectionToClipboard]);
   _react.default.useEffect(() => {
     const handlePaste = e => {
-      if (startCell) {
+      if (startCell && !editingKey) {
         e.preventDefault(); // Chặn hành vi mặc định
         const clipboardText = e.clipboardData?.getData('text/plain') ?? '';
         handlePasteToTable(clipboardText);
@@ -621,7 +623,7 @@ const TableContainerEdit = props => {
     };
     window.addEventListener('paste', handlePaste);
     return () => window.removeEventListener('paste', handlePaste);
-  }, [startCell, endCell, table, handlePasteToTable]);
+  }, [startCell, endCell, table, handlePasteToTable, editingKey]);
   _react.default.useEffect(() => {
     const handleClickOutside = event => {
       const element = event.target;
@@ -634,7 +636,7 @@ const TableContainerEdit = props => {
       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) {
+      if (isInsideContainer || isInsideToolbar || isInsideHeader || isInsideContainerContext || element.id === id) {
         return;
       }
       if (containerRef.current && tableBody && !tableBody.contains(event.target)) {
@@ -661,14 +663,30 @@ const TableContainerEdit = props => {
       // document.removeEventListener('touchstart', handleClickOutside)
     };
   }, [dataSource, editingKey, id, onBlur]);
+  const columnSizingState = table.getState().columnSizing;
+  _react.default.useEffect(() => {
+    requestAnimationFrame(() => {
+      columnVirtualizer.measure();
+    });
+  }, [columnSizingState, columnVirtualizer]);
 
   // React.useEffect(() => {
-  //   const totalHeight = height
+  //   if (!containerRef.current) return;
+
+  //   const containerWidth = containerRef.current.offsetWidth - 2;
+  //   const totalWidth = table.getTotalSize();
+
+  //   if (totalWidth && totalWidth < containerWidth) {
+  //     const factor = containerWidth / totalWidth;
 
-  //   if (totalHeight && topToolbarRef.current && bottomToolbarRef.current) {
-  //     settableHeight(totalHeight - topToolbarRef.current.offsetHeight - bottomToolbarRef.current.offsetHeight)
+  //     table.setColumnSizing(
+  //       table.getAllLeafColumns().reduce((acc, col) => {
+  //         acc[col.id] = ((col.getSize() || col.columnDef.size || 150) * factor);
+  //         return acc;
+  //       }, {} as Record<string, number>)
+  //     );
   //   }
-  // }, [id, height, editAble])
+  // }, [table.getTotalSize(), windowSize.innerWidth])
 
   _react.default.useEffect(() => {
     const totalHeight = minHeight ?? height;
@@ -1491,6 +1509,7 @@ const TableContainerEdit = props => {
     onSubmit: handleSubmit(onSubmit)
   }, /*#__PURE__*/_react.default.createElement(_useContext.TableContext.Provider, {
     value: {
+      t,
       locale,
       prefix,
       id,

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

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _reactTable = require("@tanstack/react-table");
 var _space = _interopRequireDefault(require("rc-master-ui/es/space"));
 var _Command = _interopRequireDefault(require("../components/command/Command"));
+var _server = _interopRequireDefault(require("react-dom/server"));
 var _utils = require("../hook/utils");
 var _Checkbox = _interopRequireDefault(require("rc-master-ui/lib/checkbox/Checkbox"));
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -15,8 +16,6 @@ var _react = _interopRequireDefault(require("react"));
 var _useContext = require("../useContext");
 var _EditableCell = _interopRequireDefault(require("./EditableCell"));
 var _constant = require("../hook/constant");
-// import ReactDOMServer from 'react-dom/server'
-
 // import { nonActionColumn } from "../hook/constant";
 
 // import type { Dispatch, SetStateAction } from "react";
@@ -52,7 +51,7 @@ const renderCommand = args => {
       visible: typeof it.visible === 'function' ? it.visible?.(record) : it.visible
     };
   }) : [];
-  return /*#__PURE__*/_react.default.createElement("span", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     className: "ui-rc_cell-content"
   }, /*#__PURE__*/_react.default.createElement(_space.default, null, commands.filter(it => it.visible !== false).map(item => {
     return /*#__PURE__*/_react.default.createElement(_Command.default, {
@@ -140,8 +139,7 @@ const TableBodyCellEdit = props => {
   const expandIconColumnIndex = expandable?.expandIconColumnIndex ?? 0;
   const record = cell.row.original;
   const columnMeta = cell.column.columnDef.meta ?? {};
-
-  // const cellContent = columnMeta.type === 'checkbox' ? '' : flexRender(cell.column.columnDef.cell, cell.getContext());
+  const cellContent = columnMeta.type === 'checkbox' ? '' : (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext());
   // const html = ReactDOMServer.renderToStaticMarkup(<>{cellContent}</>);
   // const hasValue = html.trim().length > 0;
 
@@ -211,7 +209,7 @@ const TableBodyCellEdit = props => {
       colSelectIds.forEach(colId => {
         const cellll = row.getVisibleCells().find(c => c.column.id === colId);
         const value = cellll?.getValue();
-        rowData.push(value !== undefined ? String(value) : '');
+        rowData.push(value !== undefined ? value : '');
       });
       dataSelected.push(rowData);
     });
@@ -601,7 +599,7 @@ const TableBodyCellEdit = props => {
       handleEdit(e);
       return;
     }
-    if (e.key.length === 1) {
+    if (e.key.length === 1 && !e.ctrlKey) {
       e.preventDefault();
       e.stopPropagation();
       handleEdit(e);
@@ -734,7 +732,7 @@ const TableBodyCellEdit = props => {
   if (cell.column.id === "command") {
     return /*#__PURE__*/_react.default.createElement("td", {
       key: cell.id,
-      className: (0, _classnames.default)(`${prefix}-grid-cell`, {
+      className: (0, _classnames.default)(`${prefix}-grid-cell ${prefix}-grid-cell-command`, {
         [`${prefix}-grid-cell-ellipsis`]: true,
         [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
         [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
@@ -846,8 +844,9 @@ const TableBodyCellEdit = props => {
     "data-tooltip-id": `${id}-tooltip-content`
     // data-tooltip-html={!isEditing && !hasValue && !message ? undefined : ReactDOMServer.renderToStaticMarkup(<>{rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : cellContent}</>)}
     // data-tooltip-content={!isEditing && !message ? undefined : rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : record[columnMeta.field ?? '']}
+    // data-tooltip-content={isEditing && message ? message : rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : record[columnMeta.field ?? '']}
     ,
-    "data-tooltip-content": isEditing && message ? message : rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : record[columnMeta.field ?? ''],
+    "data-tooltip-html": isEditing && message ? message : rowError && rowError[cell.column.id]?.field === cell.column.id ? rowError[cell.column.id].message : _server.default.renderToStaticMarkup( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, cellContent)),
     className: (0, _classnames.default)(`${prefix}-grid-cell cell-editable `, {
       [`${prefix}-grid-cell-ellipsis`]: true,
       'cell-editing': isEditing,
@@ -1038,7 +1037,7 @@ const TableBodyCellEdit = props => {
       handleEdit(e);
       // setEditingKey?.(cell.row.id)
     }
-  })), !isSelecting && !isEditing && cell.row.id === endCell?.rowId && cell.column.getIndex() === rangeState?.endColIndex && /*#__PURE__*/_react.default.createElement("div", {
+  })), !isSelecting && !isEditing && rowNumber === rangeState?.endRowIndex && cell.column.getIndex() === rangeState?.endColIndex && /*#__PURE__*/_react.default.createElement("div", {
     className: 'dragging-point',
     onMouseDown: e => {
       e.preventDefault();

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

@@ -34,8 +34,13 @@ const TableBodyRow = ({
     recordDoubleClick
   } = _react.default.useContext(_useContext.TableContext);
   const visibleCells = row.getVisibleCells();
+
+  // console.log('visibleCells', visibleCells)
+
   const virtualColumns = columnVirtualizer.getVirtualItems();
 
+  // console.log('virtualColumns', virtualColumns)
+
   // table.options.set
 
   return /*#__PURE__*/_react.default.createElement("tr", {

package/lib/table-component/header/TableHeadCell.d.ts

@@ -1,11 +1,13 @@
 import type { Table } from '@tanstack/react-table';
 import { type Header } from '@tanstack/react-table';
 import React from 'react';
+import type { Virtualizer } from '@tanstack/react-virtual';
 interface TableHeadCellProps<T> {
     t?: any;
     table: Table<T>;
     header: Header<T, unknown>;
     getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+    columnVirtualizer: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
     colSpan: any;
     rowSpan: any;
 }

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

@@ -32,13 +32,14 @@ const TableHeadCell = props => {
     header,
     getPopupContainer,
     table,
-    t,
+    // t,
     // columnVirtualizer,
     // rowHeaderVirtualizer,
     colSpan,
     rowSpan
   } = props;
   const {
+    t,
     prefix,
     setSorterChange,
     setFilterChange,
@@ -122,13 +123,16 @@ const TableHeadCell = props => {
   };
   const doFilter = type => {
     if (type) {
-      header.column.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? [''] : selectedKeys);
+      header.column.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? selectedKeys.length === 0 ? [''] : selectedKeys : selectedKeys);
     } else {
       header.column.setFilterValue(undefined);
       setSelectedKeys([]);
     }
     setFilterChange(true);
     triggerVisible(false);
+    setTimeout(() => {
+      setFilterChange(false);
+    }, 10);
   };
   const mergedDropdownProps = (0, _utils.extendsObject)({
     trigger: ['click'],
@@ -228,7 +232,6 @@ const TableHeadCell = props => {
     style: {
       // display: 'flex',
       width: header.getSize(),
-      // width: 'inherit',
       minWidth: header.getSize(),
       maxWidth: header.getSize(),
       ...(0, _utils.getCommonPinningStyles)(header.column),
@@ -314,7 +317,7 @@ const TableHeadCell = props => {
     // onMouseUp: () => {
     //   requestAnimationFrame(() => {
     //     columnVirtualizer.measure()
-    //     rowHeaderVirtualizer.measure()
+    //     // rowHeaderVirtualizer.measure()
     //   })
     // },
 

package/lib/table-component/header/TableHeadRow.d.ts

@@ -11,5 +11,5 @@ interface TableHeadRowProps<T> {
     fixedLeftColumns: Column<T, unknown>[];
     fixedRightColumns: Column<T, unknown>[];
 }
-declare const TableHeadRow: ({ table, headerGroup, }: TableHeadRowProps<any>) => React.JSX.Element;
+declare const TableHeadRow: ({ table, headerGroup, columnVirtualizer, }: TableHeadRowProps<any>) => React.JSX.Element;
 export default TableHeadRow;

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

@@ -16,9 +16,8 @@ var _TableHeadCell = _interopRequireDefault(require("./TableHeadCell"));
 
 const TableHeadRow = ({
   table,
-  headerGroup
-
-  // columnVirtualizer,
+  headerGroup,
+  columnVirtualizer
   // virtualPaddingLeft,
   // virtualPaddingRight,
   // fixedLeftColumns,
@@ -61,8 +60,8 @@ const TableHeadRow = ({
     return /*#__PURE__*/_react.default.createElement(_TableHeadCell.default, {
       key: header.id,
       header: header,
-      table: table
-      // columnVirtualizer={columnVirtualizer}
+      table: table,
+      columnVirtualizer: columnVirtualizer
       // rowHeaderVirtualizer={rowHeaderVirtualizer}
       ,
       colSpan: header.colSpan,

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

@@ -370,7 +370,7 @@ function getFixedFields(columns, type) {
   const result = [];
   function traverse(cols) {
     for (const col of cols) {
-      if ((col.fixed ?? col.fixedType) === type && col.field && col.visible !== false) {
+      if ((col.fixed ?? col.fixedType) === type && col.field && (col.visible !== false || col.hidden !== true)) {
         result.push(col.field);
       }
       if (col.children && col.children.length > 0) {
@@ -1751,7 +1751,7 @@ exports.convertFilters = convertFilters;
 function getInvisibleColumns(columns) {
   const result = {};
   for (const col of columns) {
-    if (col.visible === false) {
+    if (col.visible === false || col.hidden) {
       result[col.field ?? ''] = false;
     }
   }
@@ -1780,7 +1780,7 @@ const getAllVisibleKeys1 = columns => {
   const keys = [];
   const traverse = (cols, parentHidden = false) => {
     for (const col of cols) {
-      if (col.visible === false || parentHidden) {
+      if (col.visible === false || col.hidden || parentHidden) {
         continue;
       }
       if (col.field) {
@@ -1821,7 +1821,7 @@ function getHiddenParentKeys1(columns, parentKeys = []) {
         childHiddenParents.forEach(key => hiddenParents.add(key));
         currentPath.forEach(key => hiddenParents.add(key));
       }
-    } else if (column.visible !== false) {
+    } else if (column.visible !== false && column.hidden !== true) {
       parentKeys.forEach(key => hiddenParents.add(key));
     }
   }