es-grid-template 1.5.16 → 1.6.0

package/es/grid-component/table/Group.d.ts

@@ -7,10 +7,13 @@ type Props<T> = GridTableProps<T> & {
     triggerChangeData?: (newData: T[], type: string) => void;
     getRowKey: GetRowKey<T>;
     triggerGroupColumns?: (groupedColumns: string[]) => void;
-    triggerPaste?: (pastedRows: T[], pastedColumnsArray: string[], newData: T[]) => void;
+    triggerPaste?: (pastedRows: T[], pastedColumnsArray: string[], newData: T[], copyRows: T[]) => void;
     triggerFilter?: (queries: any) => void;
     setTooltipContent?: any;
     scrollHeight?: number;
+    originData: T[];
+    mergedFilterKeys?: any;
+    setMergedFilterKeys?: any;
 };
 declare const Group: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;
 export default Group;

package/es/grid-component/table/InfiniteTable.d.ts

@@ -10,9 +10,12 @@ type Props<T> = TableProps<T> & {
     getRowKey: GetRowKey<T>;
     triggerGroupColumns?: (groupedColumns: string[]) => void;
     setTooltipContent?: any;
-    triggerPaste?: (pastedRows: T[], pastedColumnsArray: string[], newData: T[]) => void;
+    triggerPaste?: (pastedRows: T[], pastedColumnsArray: string[], newData: T[], copyRows: T[]) => void;
     isFilter?: boolean;
     setIsFilter?: React.Dispatch<React.SetStateAction<boolean>>;
+    originData: T[];
+    mergedFilterKeys?: any;
+    setMergedFilterKeys?: any;
 };
 declare const InfiniteTable: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;
 export default InfiniteTable;

package/es/grid-component/table/InfiniteTable.js

@@ -25,6 +25,7 @@ const InfiniteTable = props => {
     scrollHeight,
     rowHoverable,
     pagination,
+    dataSource,
     ...rest
   } = props;
   const {
@@ -49,7 +50,7 @@ const InfiniteTable = props => {
     loadData(currentPage + 1);
   };
   const handleScroll = e => {
-    if (loadingRef.current || loading) {
+    if (loadingRef.current || loading || dataSource?.length === 0) {
       e.stopPropagation();
       e.preventDefault();
       return;
@@ -60,7 +61,7 @@ const InfiniteTable = props => {
       clientHeight
     } = e.currentTarget;
     const isEnd = scrollTop + clientHeight >= tbScrollHeight - 50;
-    if (isEnd && !loadingRef.current && hasMoreRef.current) {
+    if (isEnd && !loadingRef.current && hasMoreRef.current && dataSource?.length > 0) {
       handleNext();
     }
   };
@@ -87,6 +88,7 @@ const InfiniteTable = props => {
     }
   }, /*#__PURE__*/React.createElement(TableGrid, _extends({}, rest, {
     id: id,
+    dataSource: dataSource,
     pagination: false,
     virtual: true,
     onScroll: handleScroll,

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

@@ -227,6 +227,7 @@ export interface TableProps<RecordType = AnyObject> extends Omit<RcTableProps<Re
         rowData: any;
     }) => void;
     wrapSettings?: IWrapSettings;
+    actionTemplate?: ReactNode | ReactElement | (() => ReactNode | ReactElement);
 }
 export type PaginationConfig = TablePaginationConfig & {
     currentPage?: number;
@@ -259,6 +260,7 @@ export type IGroupSetting = {
     hiddenColumnGroup?: boolean;
     showGroupIcon?: boolean;
     unClearableLevel?: 1 | 2 | 3 | undefined;
+    sumGroup?: boolean;
 };
 type IOnGroup = {
     columnGrouped: string[];
@@ -284,6 +286,7 @@ export type CellChangeArgs<T> = {
 };
 export type IOnPastedProps = {
     data: any[];
+    copyRows: any[];
     pastedColumns: string[];
     pasteData: any[];
     type: 'onPaste' | 'onChange' | 'onCellPaste';

package/es/index.d.ts

@@ -6,6 +6,8 @@ export { default as Tabs } from './tabs';
 export type { TabPaneProps, TabsProps } from './tabs';
 export { default as SelectTable } from './select-table';
 export type { TableSelectProps as SelectTableProps } from './select-table';
+export { default as Select } from './select';
+export type { SelectProps } from './select';
 export { default as DateRangePicker } from './date-range-picker';
 export type { DateRangePickerProps } from './date-range-picker';
 export { default as DatePicker } from './datepicker';

package/es/index.js

@@ -2,6 +2,7 @@ export { default as Dropdown } from "./dropdown";
 export { default as GridComponent } from "./grid-component";
 export { default as Tabs } from "./tabs";
 export { default as SelectTable } from "./select-table";
+export { default as Select } from "./select";
 export { default as DateRangePicker } from "./date-range-picker";
 export { default as DatePicker } from "./datepicker";
 export { default as Splitter } from "./splitter";

package/es/select/index.d.ts

@@ -1,4 +1,4 @@
 import { Select } from 'rc-master-ui';
-import type { SelectProps } from 'rc-master-ui/es/select';
+import type { SelectProps } from 'rc-master-ui';
 export type { SelectProps };
 export default Select;

package/lib/grid-component/CheckboxFilter2.js

@@ -88,7 +88,6 @@ const CheckboxFilter = props => {
 
   // const [searchValue, setSearchValue] = React.useState('');
 
-  console.log('options', options);
   const [openKeys, setOpenKeys] = React.useState([]);
 
   // clear search value after close filter dropdown
@@ -181,9 +180,6 @@ const CheckboxFilter = props => {
       onSelect?.(keys);
     }
   };
-  console.log('getTreeData({ filters: options })', getTreeData({
-    filters: options
-  }));
   if (filterMode === 'tree') {
     return /*#__PURE__*/React.createElement(React.Fragment, null, showFilter && /*#__PURE__*/React.createElement(_FilterSearch.default, {
       filterSearch: filterSearch,

package/lib/grid-component/ColumnsChoose.js

@@ -387,7 +387,7 @@ const ColumnsChoose = props => {
   const defaultSelectedKeys = (0, _react.useMemo)(() => {
     const defaultColumns = propsColumns.filter(it => (it.key || it.dataIndex) && it.showInColumnChoose !== false && !columnsGroup?.includes(it.field));
     return (0, _hooks.getVisibleColumnKeys)(defaultColumns);
-  }, [propsColumns]);
+  }, [columnsGroup, propsColumns]);
   const [clicked, setClicked] = (0, _react.useState)(false);
   const [autoExpandParent, setAutoExpandParent] = (0, _react.useState)(true);
 
@@ -482,7 +482,8 @@ const ColumnsChoose = props => {
     placement: 'bottomLeft',
     content: /*#__PURE__*/_react.default.createElement("div", {
       style: {
-        minWidth: 250
+        minWidth: 250,
+        maxWidth: 320
       }
     }, /*#__PURE__*/_react.default.createElement(_antd.Input, {
       style: {
@@ -527,8 +528,12 @@ const ColumnsChoose = props => {
       defaultCheckedKeys: selectedKeys
       // defaultCheckedKeys={defaultSelectedKeys}
       ,
-      selectedKeys: [],
-      height: window.innerHeight - 200
+      selectedKeys: []
+
+      // height={window.innerHeight - 200}
+      ,
+      height: window.innerHeight / 2 > 450 ? 450 : window.innerHeight / 2 - 110
+      // style={{height: 300}}
     }), /*#__PURE__*/_react.default.createElement(BoxAction, {
       className: 'px-1'
     }, /*#__PURE__*/_react.default.createElement(_antd.Button

package/lib/grid-component/ColumnsGroup/ColumnsGroup.js

@@ -10,6 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _antd = require("antd");
 var _rcMasterUi = require("rc-master-ui");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _hooks = require("../hooks");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 // import {
@@ -129,7 +130,8 @@ const ColumnsGroup = props => {
     }, "M\u1EE9c 1"), /*#__PURE__*/_react.default.createElement(_rcMasterUi.Select, {
       style: {
         width: '100%'
-      }
+      },
+      showSearch: true
       // labelInValue={true}
       // options={columns.filter((it: any) => !tempGroup.includes(it.field))}
       // options={columns && columns.length > 0 ? options : []}
@@ -146,7 +148,8 @@ const ColumnsGroup = props => {
       labelRender: labelProps => {
         const it = columns.find(col => col.field === labelProps.value);
         return t ? t(it?.columnGroupText ?? it?.headerText) : it?.columnGroupText ?? it?.headerText;
-      }
+      },
+      filterOption: _hooks.customFilterOption
       // hideSelectedOptions
     })), /*#__PURE__*/_react.default.createElement("div", {
       className: 'mb-1',
@@ -159,6 +162,7 @@ const ColumnsGroup = props => {
         margin: 0
       }
     }, "M\u1EE9c 2"), /*#__PURE__*/_react.default.createElement(_rcMasterUi.Select, {
+      showSearch: true,
       style: {
         width: '100%'
       },
@@ -175,7 +179,8 @@ const ColumnsGroup = props => {
       labelRender: labelProps => {
         const it = columns.find(col => col.field === labelProps.value);
         return t ? t(it?.columnGroupText ?? it?.headerText) : it?.columnGroupText ?? it?.headerText;
-      }
+      },
+      filterOption: _hooks.customFilterOption
     })), /*#__PURE__*/_react.default.createElement("div", {
       className: 'mb-1',
       style: {
@@ -191,6 +196,7 @@ const ColumnsGroup = props => {
         width: '100%'
       },
       options: options,
+      showSearch: true,
       value: tempGroup?.[2],
       onChange: val => onChangeGroupColumns(val, 2),
       allowClear: !!tempGroup?.[2] && !(unClearableLevel && unClearableLevel - 3 >= 0)
@@ -202,7 +208,8 @@ const ColumnsGroup = props => {
       labelRender: labelProps => {
         const it = columns.find(col => col.field === labelProps.value);
         return t ? t(it?.columnGroupText ?? it?.headerText) : it?.columnGroupText ?? it?.headerText;
-      }
+      },
+      filterOption: _hooks.customFilterOption
     }))), /*#__PURE__*/_react.default.createElement(BoxAction, {
       className: 'px-1'
     }, /*#__PURE__*/_react.default.createElement(_antd.Button

package/lib/grid-component/EditableCell.js

@@ -30,6 +30,9 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const {
   SHOW_PARENT
 } = _rcMasterUi.TreeSelect;
+const {
+  TextArea
+} = _antd.Input;
 const filterTreeNode = (input, treeNode) => {
   const {
     title,
@@ -116,8 +119,13 @@ const EditableCell = props => {
           style: {
             width: '100%',
             height: '100%'
-          },
-          value: date,
+          }
+          // value={date}
+          ,
+          defaultValue: date
+          // preserveInvalidOnBlur
+          ,
+
           onBlur: () => {
             const formState = getValues();
             const itemState = getValues(dataIndex);
@@ -180,8 +188,10 @@ const EditableCell = props => {
             width: '100%',
             height: '100%'
           },
-          showTime: true,
-          value: date,
+          showTime: true
+          // value={date}
+          ,
+          defaultValue: date,
           placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
           disabled: (0, _hooks.isDisable)(column, record) ?? false,
           maxDate: maxDate,
@@ -710,7 +720,7 @@ const EditableCell = props => {
           style: {
             display: 'flex',
             alignItems: 'center',
-            justifyContent: column.align ?? 'left',
+            justifyContent: column.align ?? 'center',
             paddingInline: 5,
             height: '100%',
             width: '100%'
@@ -720,7 +730,7 @@ const EditableCell = props => {
           // style={{ textAlign: column.align ?? 'left' }}
           ,
           onChange: val => {
-            const newVal = (0, _hooks.parseBooleanToValue)(val.target.checked, typeof value);
+            const newVal = typeof value === "number" ? (0, _hooks.parseBooleanToValue)(val.target.checked, typeof value) : val.target.checked;
             onChange(newVal);
             const key = getRowKey?.(record, index);
             const formState = getValues();
@@ -931,11 +941,14 @@ const EditableCell = props => {
           "data-tooltip-id": `${id}-tooltip-form-error`
         }));
       default:
-        return /*#__PURE__*/_react.default.createElement(_antd.Input, {
+        return /*#__PURE__*/_react.default.createElement(TextArea, {
           id: `col${indexCol}-record${indexRow}`,
           style: {
-            textAlign: column.align
+            textAlign: column.align,
+            resize: 'none',
+            height: '100%'
           }
+
           // @ts-ignore
           // value={!isNullOrUndefined(record[column.dataIndex]) ? record[column.dataIndex] : ''}
           ,
@@ -991,7 +1004,11 @@ const EditableCell = props => {
           onChange: onChange,
           status: isInvalid ? 'error' : undefined,
           "data-tooltip-content": message,
-          "data-tooltip-id": `${id}-tooltip-form-error`
+          "data-tooltip-id": `${id}-tooltip-form-error`,
+          autoSize: {
+            minRows: 1,
+            maxRows: 1
+          }
         });
     }
   };

package/lib/grid-component/InternalTable.js

@@ -37,6 +37,7 @@ var _sortable = require("@dnd-kit/sortable");
 var _reactResizable = require("react-resizable");
 var _faker = require("@faker-js/faker");
 var _InfiniteTable = _interopRequireDefault(require("./table/InfiniteTable"));
+var _useMergedState = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 // import {Resizable} from "react-resizable";
@@ -191,15 +192,19 @@ const InternalTable = props => {
     summary,
     infiniteScroll,
     wrapSettings,
+    onFilter,
     ...rest
   } = props;
   const id = _react.default.useMemo(() => {
     return tableId ?? _faker.faker.string.alpha(20);
     // return tableId ?? newGuid()
   }, [tableId]);
-  const rowKey = _react.default.useMemo(() => {
-    return propRowKey ?? 'rowId';
-  }, [propRowKey]);
+
+  // const rowKey = React.useMemo(() => {
+  //   return  propRowKey ?? 'rowId'
+  // }, [propRowKey])
+
+  const rowKey = 'rowId';
   const [scrollHeight, setHeight] = (0, _react.useState)(0);
   const local = lang && lang === 'en' ? _en_US.default : _vi_VN.default;
   const dateRangeLocale = lang && lang === 'en' ? _en_US2.default : _vi_VN2.default;
@@ -219,14 +224,30 @@ const InternalTable = props => {
     over: -1
   });
   const [tooltipContent, setTooltipContent] = (0, _react.useState)('');
-  const mergedData = _react.default.useMemo(() => {
-    // return addRowIdArray(dataSource)
+  const [filterStates, setFilterState] = _react.default.useState(null);
+  // const [filterData, setFilterData] = React.useState<any>(null)
 
+  const mergedData = _react.default.useMemo(() => {
     if (groupAble && groupSetting && groupSetting.client !== false) {
       return (0, _hooks.groupArrayByColumns)(dataSource, groupColumns);
     }
     return (0, _hooks.addRowIdArray)(dataSource);
   }, [dataSource, groupAble, groupColumns, groupSetting]);
+
+  // ========================= Keys =========================
+  const [mergedFilterKeys, setMergedFilterKeys] = (0, _useMergedState.default)((0, _hooks.getAllRowKey)(mergedData), {
+    value: undefined
+  });
+  //
+  // const originData = React.useMemo(() => {
+  //
+  //   if (groupAble && groupSetting && groupSetting.client !== false) {
+  //     return groupArrayByColumns(dataSource, groupColumns)
+  //   }
+  //   return addRowIdArray(dataSource)
+  //
+  // }, [dataSource, groupAble, groupColumns, groupSetting])
+
   const [columns, setColumns] = _react.default.useState([]);
   _react.default.useEffect(() => {
     if (propsHeight) {
@@ -245,6 +266,20 @@ const InternalTable = props => {
   _react.default.useEffect(() => {
     setColumns(propsColumns);
   }, [propsColumns]);
+  const handleOnFilter = queries => {
+    if (onFilter) {
+      onFilter?.((0, _hooks.convertFilters)(queries));
+    } else {
+      setFilterState((0, _hooks.convertFilters)(queries));
+      const b = (0, _hooks.filterDataByColumns4)(mergedData, (0, _hooks.convertFilters)(queries), []);
+      setMergedFilterKeys((0, _hooks.getAllRowKey)(b));
+      if (queries && queries.length > 0) {
+        // setIsFilter?.(true)
+      } else {
+        // setIsFilter?.(false)
+      }
+    }
+  };
   const handleResize = column => (e, {
     size
   }) => {
@@ -416,10 +451,11 @@ const InternalTable = props => {
             })
           }),
           render: (val, record) => {
+            const tmpData = (0, _hooks.filterDataByColumns4)(mergedData, filterStates, mergedFilterKeys);
             if (pagination && pagination.onChange && pagination.currentPage && pagination.pageSize) {
-              return (0, _hooks.findItemPath)(mergedData, record, rowKey, pagination.currentPage, pagination.pageSize);
+              return (0, _hooks.findItemPath)(tmpData, record, rowKey, pagination.currentPage, pagination.pageSize);
             }
-            return (0, _hooks.findItemPath)(mergedData, record, rowKey);
+            return (0, _hooks.findItemPath)(tmpData, record, rowKey);
           }
         };
       }
@@ -515,28 +551,28 @@ const InternalTable = props => {
         render: (value, record, rowIndex) => {
           const colFormat = typeof column.format === 'function' ? column.format(record) : column.format;
           const cellFormat = (0, _hooks.getFormat)(colFormat, format);
-          if (groupSetting && groupSetting.hiddenColumnGroup === false) {
+          if (groupAble && groupSetting && groupSetting.hiddenColumnGroup === false) {
             if (record.children) {
-              return (0, _columns.renderContent)(column, value, record, rowIndex, cellFormat);
+              return (0, _columns.renderContent)(column, value, record, rowIndex, colIndex, false, cellFormat);
             }
             if (groupColumns?.includes(column.field)) {
               return '';
             }
-            return (0, _columns.renderContent)(column, value, record, rowIndex, cellFormat);
+            return (0, _columns.renderContent)(column, value, record, rowIndex, colIndex, false, cellFormat);
           }
-          if (column.field === firstNonGroupColumn?.field && record.children) {
+          if (groupAble && column.field === firstNonGroupColumn?.field && record.children) {
             const currentGroupColumn = (0, _columns.flatColumns2)(columns).find(it => it.field === record.field);
             if (currentGroupColumn?.template) {
-              return (0, _columns.renderContent)(currentGroupColumn, record[record.field], record, rowIndex, cellFormat);
+              return (0, _columns.renderContent)(currentGroupColumn, record[record.field], record, rowIndex, colIndex, false, cellFormat);
             }
-            return /*#__PURE__*/_react.default.createElement("span", null, currentGroupColumn?.headerText, ": ", (0, _columns.renderContent)(currentGroupColumn, record[record.field], record, rowIndex, cellFormat));
+            return /*#__PURE__*/_react.default.createElement("span", null, currentGroupColumn?.headerText, ": ", (0, _columns.renderContent)(currentGroupColumn, record[record.field], record, rowIndex, colIndex, false, cellFormat));
           }
-          return (0, _columns.renderContent)(column, value, record, rowIndex, cellFormat);
+          return (0, _columns.renderContent)(column, value, record, rowIndex, colIndex, false, cellFormat);
         },
         hidden: groupSetting && groupSetting.hiddenColumnGroup === false ? transformedColumn.hidden : groupAble && groupColumns && groupColumns.includes(column.field) ? true : transformedColumn.hidden
       };
     });
-  }, [columns, t, getColumnSearchProps, sortMultiple, groupSetting, groupAble, groupColumns, pagination, mergedData, rowKey, handleResize, firstNonGroupColumn?.field, nonGroupColumns, format]);
+  }, [columns, t, id, wrapSettings, getColumnSearchProps, sortMultiple, groupSetting, groupAble, groupColumns, mergedData, filterStates, mergedFilterKeys, pagination, handleResize, firstNonGroupColumn?.field, nonGroupColumns, format]);
   const transformColumns = _react.default.useCallback(cols => {
     return cols.map(column => {
       const find = convertColumns.find(it => it.field === column.field);
@@ -584,7 +620,7 @@ const InternalTable = props => {
         };
       }
     });
-  }, [convertColumns, t]);
+  }, [convertColumns, id, t, wrapSettings]);
   const mergedColumns = _react.default.useMemo(() => {
     return transformColumns(columns);
   }, [columns, transformColumns]);
@@ -602,9 +638,9 @@ const InternalTable = props => {
       });
     }
     onChooseColumns?.({
-      showColumns: [],
-      columns: [],
-      flattenColumns: []
+      showColumns: (0, _hooks.removeInvisibleColumns)([...newColumns]),
+      columns: [...newColumns],
+      flattenColumns: (0, _hooks.convertFlatColumn)([...newColumns])
     });
   };
   const onDragEnd = ({
@@ -683,7 +719,9 @@ const InternalTable = props => {
       rowData,
       index
     } = args;
-    const tmpData = [...mergedData];
+
+    // const tmpData = [...mergedData]
+    const tmpData = (0, _hooks.filterDataByColumns4)(mergedData, filterStates, mergedFilterKeys);
     if (idCommand === 'DELETE') {
       // bật modal confirm
       if (commandSettings && commandSettings.confirmDialog) {
@@ -709,7 +747,7 @@ const InternalTable = props => {
 
               let newData = [];
               if (rowData?.parentId) {
-                const parent = (0, _hooks.findItemByKey)(mergedData, rowKey, rowData.parentId);
+                const parent = (0, _hooks.findItemByKey)(tmpData, rowKey, rowData.parentId);
                 const childData = parent?.children ? [...parent.children] : [];
                 const findIndex = childData.findIndex(obj => obj[rowKey] === rowData[rowKey]);
                 childData.splice(Number(findIndex), 1);
@@ -796,7 +834,7 @@ const InternalTable = props => {
       }
     }
   };
-  const triggerPaste = (pastedRows, pastedColumnsArray, newData) => {
+  const triggerPaste = (pastedRows, pastedColumnsArray, newData, copyRows) => {
     const handlePasteCallback = callbackData => {
       const newDataUpdate = (0, _hooks.updateData)(mergedData, callbackData, rowKey);
       triggerChangeData(newDataUpdate);
@@ -808,6 +846,7 @@ const InternalTable = props => {
         // có callback
         onCellPaste.onPasted({
           pasteData: pastedRows,
+          copyRows,
           type: 'onPaste',
           data: mergedData,
           pastedColumns: pastedColumnsArray
@@ -817,6 +856,7 @@ const InternalTable = props => {
         onCellPaste.onPasted({
           pasteData: pastedRows,
           type: 'onPaste',
+          copyRows,
           data: mergedData,
           pastedColumns: pastedColumnsArray
         }, handlePasteCallback);
@@ -844,8 +884,13 @@ const InternalTable = props => {
     t: t,
     id: id,
     locale: locale,
-    tableRef: tableRef,
-    dataSource: mergedData,
+    tableRef: tableRef
+    // dataSource={mergedData}
+    ,
+    originData: mergedData
+    // dataSource={filterStates && filterStates.length ? filterData : mergedData}
+    ,
+    dataSource: (0, _hooks.filterDataByColumns4)(mergedData, filterStates, mergedFilterKeys),
     format: format,
     columns: mergedColumns,
     showSorterTooltip: {
@@ -885,14 +930,23 @@ const InternalTable = props => {
         cell: TableBodyCell
       }
     },
-    setTooltipContent: setTooltipContent
+    setTooltipContent: setTooltipContent,
+    onFilter: val => {
+      handleOnFilter(val);
+      // triggerFilter?.(convertFilters(val))
+      // onFilter?.(convertFilters(val))
+    },
+    setMergedFilterKeys: setMergedFilterKeys,
+    mergedFilterKeys: mergedFilterKeys,
+    wrapSettings: wrapSettings
   })))), /*#__PURE__*/_react.default.createElement(_core.DragOverlay, {
     style: {
-      width: 100
+      minWidth: 100,
+      width: columns[columns.findIndex(i => i.field === dragIndex.active)]?.width
     }
   }, /*#__PURE__*/_react.default.createElement("th", {
     style: {
-      backgroundColor: '#c4c4c4',
+      backgroundColor: '#f0f0f0',
       padding: 6,
       borderRadius: 6,
       fontWeight: 500