es-grid-template 1.7.31 → 1.7.33

package/es/grid-component/ColumnsChoose.js

@@ -211,7 +211,6 @@
 //
 //   const onCheck = (keys: string[]) => {
 //
-//     console.log('keys', keys)
 //     // setSelectedKeys(keys)
 //     setMergedSelectedKeys(keys)
 //     // setIsManualUpdate(true)
@@ -220,12 +219,10 @@
 //
 //   const handleAccept = () => {
 //
-//     console.log('mergedSelectedKeys', mergedSelectedKeys)
 //
 //     // const rs1  =  updateColumns(propsColumns, selectedKeys)
 //     const rs1  =  updateColumns(propsColumns, mergedSelectedKeys)
 //
-//     console.log('rs1', rs1)
 //
 //     triggerChangeColumns?.(rs1, 'columnChoose')
 //

package/es/grid-component/InternalTable.js

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

package/es/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/es/grid-component/TempTable.js

@@ -12,6 +12,8 @@ const TempTable = props => {
 
   // const TabComponent = groupAble ? InternalTable  : Table
   const TabComponent = editAble ? Table : InternalTable;
+  // const TabComponent = InternalTable
+
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(TabComponent, _extends({}, rest, {
     infiniteScroll: infiniteScroll,
     groupAble: groupAble,

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

@@ -68,9 +68,6 @@ export 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: checkThousandSeparator(thousandSeparator, decimalSeparator),
         decimalSeparator: checkDecimalSeparator(thousandSeparator, decimalSeparator),
@@ -84,7 +81,6 @@ export const getValueCell = (column, value, record, rowIndex, colIndex, format)
       // if ( typeof value === "string") {
       //   const ttt =  removeNumericFormat(value, undefined, numericFormatProps )
       //
-      //   console.log('ttt', ttt)
       // }
 
       const contentNumber = !isEmpty(value) ? dec || dec === 0 ? parseFloat(tmpval.toFixed(dec)).toString() : tmpval.toString() : '0';
@@ -128,9 +124,6 @@ export const renderValueCell = (column, value, record, rowIndex, colIndex, forma
       // 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: checkThousandSeparator(thousandSeparator, decimalSeparator),
         decimalSeparator: checkDecimalSeparator(thousandSeparator, decimalSeparator),
@@ -144,7 +137,6 @@ export const renderValueCell = (column, value, record, rowIndex, colIndex, forma
       // if ( typeof value === "string") {
       //   const ttt =  removeNumericFormat(value, undefined, numericFormatProps )
       //
-      //   console.log('ttt', ttt)
       // }
 
       const contentNumber = !isEmpty(value) ? dec || dec === 0 ? parseFloat(tmpval.toFixed(dec)).toString() : tmpval.toString() : '0';

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

@@ -602,7 +602,6 @@ export 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') {
@@ -742,7 +741,6 @@ export 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') {
@@ -889,7 +887,6 @@ export 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') {
@@ -1033,7 +1030,6 @@ export 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') {
@@ -2571,17 +2567,12 @@ export 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;
         }
@@ -2601,17 +2592,12 @@ export 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/es/grid-component/table/GridEdit.js

@@ -745,7 +745,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.useCallback(item => {
     // setTimeout(() => {
     // onAddBgSelectedCell(selectedCells.current, id)
@@ -811,7 +811,6 @@ const GridEdit = props => {
       indexRow,
       key
     } = args;
-    console.log('changeType', changeType);
     if (changeType === 'blur') {
       const handleChangeCallback = callbackData => {
         const callbackRecord = callbackData;
@@ -857,7 +856,7 @@ const GridEdit = props => {
       onSubmit(record);
     }
   };
-  const handleDeleteContent = React.useCallback(() => {
+  const handleDeleteContent = () => {
     if (selectedCells.current.size > 0) {
       const newData = [...dataSource];
 
@@ -897,7 +896,7 @@ const GridEdit = props => {
       const rsFilterData = updateOrInsert(flattenArray([...originData]), newData);
       triggerChangeData?.([...rsFilterData], 'DELETE_CONTENT');
     }
-  }, [dataSource, getRowKey, handleCellChange, originData, triggerChangeData, visibleCols]);
+  };
   const toolbarItemsBottom = 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 => {
@@ -1470,7 +1469,6 @@ const GridEdit = props => {
     row.replace(/\r/g, "").split("\t")
 
     // {
-    //   console.log('row', row)
     //   return row.replace(/\r/g, "").split("\t")
     // }
     );

package/es/table-component/TableContainer.js

@@ -122,6 +122,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.useEffect(() => {
+    requestAnimationFrame(() => {
+      columnVirtualizer.measure();
+    });
+  }, [columnSizingState, columnVirtualizer]);
   const triggerCommandClick = () => {};
   return /*#__PURE__*/React.createElement("div", {
     ref: containerRef,
@@ -182,6 +188,7 @@ const TableContainer = props => {
     triggerChangeColumns: triggerChangeColumns
   })))), /*#__PURE__*/React.createElement(TableContext.Provider, {
     value: {
+      t,
       locale,
       prefix,
       id,

package/es/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/es/table-component/TableContainerEdit.js

@@ -277,6 +277,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)) : [];
 
@@ -293,7 +295,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;
@@ -380,7 +382,7 @@ const TableContainerEdit = props => {
   }, [onDataChange]);
   const triggerPaste = React.useCallback((pastedRows, pastedColumnsArray, newData, copyRows) => {
     const handlePasteCallback = callbackData => {
-      const rsFilterData = updateOrInsert(flattenArray([...dataSource]), callbackData);
+      const rsFilterData = updateOrInsert(flattenArray([...originData]), callbackData);
       const rs = unFlattenData(rsFilterData);
       triggerChangeData(rs);
     };
@@ -391,7 +393,7 @@ const TableContainerEdit = props => {
           pasteData: pastedRows,
           copyRows,
           type: 'onPaste',
-          data: dataSource,
+          data: originData,
           pastedColumns: pastedColumnsArray
         }, handlePasteCallback);
       } else {
@@ -400,7 +402,7 @@ const TableContainerEdit = props => {
           pasteData: pastedRows,
           type: 'onPaste',
           copyRows,
-          data: dataSource,
+          data: originData,
           pastedColumns: pastedColumnsArray
         }, handlePasteCallback);
         triggerChangeData(newData);
@@ -408,7 +410,7 @@ const TableContainerEdit = props => {
     } else {
       triggerChangeData(newData);
     }
-  }, [dataSource, onCellPaste, triggerChangeData]);
+  }, [onCellPaste, originData, triggerChangeData]);
   const handlePasted = React.useCallback(pasteData => {
     if (!startCell) {
       return;
@@ -606,7 +608,7 @@ const TableContainerEdit = props => {
   }, [startCell, endCell, table, copySelectionToClipboard]);
   React.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);
@@ -614,7 +616,7 @@ const TableContainerEdit = props => {
     };
     window.addEventListener('paste', handlePaste);
     return () => window.removeEventListener('paste', handlePaste);
-  }, [startCell, endCell, table, handlePasteToTable]);
+  }, [startCell, endCell, table, handlePasteToTable, editingKey]);
   React.useEffect(() => {
     const handleClickOutside = event => {
       const element = event.target;
@@ -627,7 +629,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)) {
@@ -654,14 +656,30 @@ const TableContainerEdit = props => {
       // document.removeEventListener('touchstart', handleClickOutside)
     };
   }, [dataSource, editingKey, id, onBlur]);
+  const columnSizingState = table.getState().columnSizing;
+  React.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.useEffect(() => {
     const totalHeight = minHeight ?? height;
@@ -1484,6 +1502,7 @@ const TableContainerEdit = props => {
     onSubmit: handleSubmit(onSubmit)
   }, /*#__PURE__*/React.createElement(TableContext.Provider, {
     value: {
+      t,
       locale,
       prefix,
       id,

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

@@ -1,9 +1,7 @@
 import { flexRender } from "@tanstack/react-table";
 import Space from "rc-master-ui/es/space";
 import Command from "../components/command/Command";
-
-// import ReactDOMServer from 'react-dom/server'
-
+import ReactDOMServer from 'react-dom/server';
 import { addRowsDown, addRowsDownWithCtrl, addRowsUp, addRowsUpWithCtrl, flattenArray, flattenData,
 // getCellsByPosition,
 getColIdsBetween, getCommonPinningStyles, getEditType, getRowIdsBetween, getSelectedCellMatrix, isEditable, isObjEmpty, isObjEqual, newGuid, unFlattenData, updateOrInsert } from "../hook/utils";
@@ -46,7 +44,7 @@ const renderCommand = args => {
       visible: typeof it.visible === 'function' ? it.visible?.(record) : it.visible
     };
   }) : [];
-  return /*#__PURE__*/React.createElement("span", {
+  return /*#__PURE__*/React.createElement("div", {
     className: "ui-rc_cell-content"
   }, /*#__PURE__*/React.createElement(Space, null, commands.filter(it => it.visible !== false).map(item => {
     return /*#__PURE__*/React.createElement(Command, {
@@ -134,8 +132,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' ? '' : flexRender(cell.column.columnDef.cell, cell.getContext());
   // const html = ReactDOMServer.renderToStaticMarkup(<>{cellContent}</>);
   // const hasValue = html.trim().length > 0;
 
@@ -205,7 +202,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);
     });
@@ -595,7 +592,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);
@@ -728,7 +725,7 @@ const TableBodyCellEdit = props => {
   if (cell.column.id === "command") {
     return /*#__PURE__*/React.createElement("td", {
       key: cell.id,
-      className: classNames(`${prefix}-grid-cell`, {
+      className: classNames(`${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,
@@ -840,8 +837,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 : ReactDOMServer.renderToStaticMarkup( /*#__PURE__*/React.createElement(React.Fragment, null, cellContent)),
     className: classNames(`${prefix}-grid-cell cell-editable `, {
       [`${prefix}-grid-cell-ellipsis`]: true,
       'cell-editing': isEditing,
@@ -1032,7 +1030,7 @@ const TableBodyCellEdit = props => {
       handleEdit(e);
       // setEditingKey?.(cell.row.id)
     }
-  })), !isSelecting && !isEditing && cell.row.id === endCell?.rowId && cell.column.getIndex() === rangeState?.endColIndex && /*#__PURE__*/React.createElement("div", {
+  })), !isSelecting && !isEditing && rowNumber === rangeState?.endRowIndex && cell.column.getIndex() === rangeState?.endColIndex && /*#__PURE__*/React.createElement("div", {
     className: 'dragging-point',
     onMouseDown: e => {
       e.preventDefault();

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

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

package/es/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/es/table-component/header/TableHeadCell.js

@@ -13,6 +13,7 @@ import { extendsObject, getCommonPinningStyles, getDefaultOperator, getTypeFilte
 import { TableContext } from "../useContext";
 import { renderFilter } from "./renderFilter";
 import ReactDOMServer from 'react-dom/server';
+
 // import { ColumnTable } from "../type";
 
 // import { Tooltip } from 'react-tooltip'
@@ -22,13 +23,14 @@ const TableHeadCell = props => {
     header,
     getPopupContainer,
     table,
-    t,
+    // t,
     // columnVirtualizer,
     // rowHeaderVirtualizer,
     colSpan,
     rowSpan
   } = props;
   const {
+    t,
     prefix,
     setSorterChange,
     setFilterChange,
@@ -112,13 +114,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 = extendsObject({
     trigger: ['click'],
@@ -218,7 +223,6 @@ const TableHeadCell = props => {
     style: {
       // display: 'flex',
       width: header.getSize(),
-      // width: 'inherit',
       minWidth: header.getSize(),
       maxWidth: header.getSize(),
       ...getCommonPinningStyles(header.column),
@@ -304,7 +308,7 @@ const TableHeadCell = props => {
     // onMouseUp: () => {
     //   requestAnimationFrame(() => {
     //     columnVirtualizer.measure()
-    //     rowHeaderVirtualizer.measure()
+    //     // rowHeaderVirtualizer.measure()
     //   })
     // },
 

package/es/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/es/table-component/header/TableHeadRow.js

@@ -8,9 +8,8 @@ import TableHeadCell from "./TableHeadCell";
 
 const TableHeadRow = ({
   table,
-  headerGroup
-
-  // columnVirtualizer,
+  headerGroup,
+  columnVirtualizer
   // virtualPaddingLeft,
   // virtualPaddingRight,
   // fixedLeftColumns,
@@ -53,8 +52,8 @@ const TableHeadRow = ({
     return /*#__PURE__*/React.createElement(TableHeadCell, {
       key: header.id,
       header: header,
-      table: table
-      // columnVirtualizer={columnVirtualizer}
+      table: table,
+      columnVirtualizer: columnVirtualizer
       // rowHeaderVirtualizer={rowHeaderVirtualizer}
       ,
       colSpan: header.colSpan,

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

@@ -309,7 +309,7 @@ export 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) {
@@ -1660,7 +1660,7 @@ export const convertFilters = filters => {
 export function getInvisibleColumns(columns) {
   const result = {};
   for (const col of columns) {
-    if (col.visible === false) {
+    if (col.visible === false || col.hidden) {
       result[col.field ?? ''] = false;
     }
   }
@@ -1688,7 +1688,7 @@ export 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) {
@@ -1728,7 +1728,7 @@ export 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));
     }
   }

package/es/table-component/style.scss

@@ -42,7 +42,22 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
   }
 
   .#{$prefix}-grid-container {
+
     border: 1px solid $tableBorderColor;
+    border-right: 0;
+    font-size: 13px;
+
+    &::after {
+      content: "";
+      position: absolute;
+      top: 0px;
+      right: 0;
+      height: 100%;
+      // width: 100%;
+      border-right: 1px solid $tableBorderColor;
+      pointer-events: none;
+      z-index: 1;
+    }
 
     .#{$prefix}-grid-cell {
 
@@ -527,6 +542,13 @@ $fontFamily: "Montserrat", Helvetica, Arial, serif !default;
           background-color: #f0f0f0;
         }
 
+        &.#{$prefix}-grid-cell-command {
+          padding: 2px 8px;
+          .ui-rc_cell-content {
+            display: flex;
+          }
+        }
+
 
         .isValid {
           &::after {

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

@@ -218,6 +218,7 @@ const Grid = props => {
     sensors: sensors
   }, /*#__PURE__*/React.createElement(ContainerComponent, _extends({}, rest, {
     id: id,
+    t: t,
     table: table,
     editAble: editAble,
     dataSource: dataSource,
@@ -236,7 +237,8 @@ const Grid = props => {
     columnHidden: columnHidden,
     setExpanded: setExpanded,
     expanded: expanded,
-    infiniteScroll: infiniteScroll
+    infiniteScroll: infiniteScroll,
+    setMergedFilterKeys: setMergedFilterKeys
   }))));
 };
 export default Grid;