@hw-component/table 1.9.89 → 1.9.91

package/lib/HTableBody/HeaderTitle/hooks.js

@@ -14,7 +14,6 @@ var useHeaderStyle = function useHeaderStyle(_ref) {
   var setHeaderStyle = function setHeaderStyle() {
     var _bodyRef$current, _titleContentRef$curr, _rightNodeRef$current;
     var headerWidth = ((_bodyRef$current = bodyRef.current) === null || _bodyRef$current === void 0 ? void 0 : _bodyRef$current.clientWidth) || 0;
-    console.log(headerWidth, "headerWidth");
     var titleWidth = ((_titleContentRef$curr = titleContentRef.current) === null || _titleContentRef$curr === void 0 ? void 0 : _titleContentRef$curr.clientWidth) || 0;
     var rightNodeWidth = ((_rightNodeRef$current = rightNodeRef.current) === null || _rightNodeRef$current === void 0 ? void 0 : _rightNodeRef$current.clientWidth) || 0;
     if (rightNodeWidth + titleWidth >= headerWidth) {

package/lib/HTableBody/Options/Content.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import type { ItemProps } from "./modal";
-export declare const ColsSettingContent: ({ columns, onCheck, checkKeys, }: ItemProps) => JSX.Element;
+export declare const ColsSettingContent: ({ columns, onCheck, checkKeys, onDrop }: ItemProps) => JSX.Element;

package/lib/HTableBody/Options/Content.js

@@ -1,6 +1,9 @@
 'use strict';
 
+var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
+var _toConsumableArray = require('@babel/runtime-corejs3/helpers/toConsumableArray');
 var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
+var _spliceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/splice');
 var _indexOfInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/index-of');
 var jsxRuntime = require('react/jsx-runtime');
 var index = require('../../hooks/index.js');
@@ -8,19 +11,45 @@ var React = require('react');
 var antd = require('antd');
 var utils = require('./utils.js');
 
-var ColsSettingContent = function ColsSettingContent(_ref) {
-  var columns = _ref.columns,
-    onCheck = _ref.onCheck,
-    checkKeys = _ref.checkKeys;
+var moveArray = function moveArray(_ref) {
+  var startKey = _ref.startKey,
+    endKey = _ref.endKey,
+    data = _ref.data;
+  var indexArray = [-1, -1];
+  _forEachInstanceProperty(data).call(data, function (item, index) {
+    var dataIndex = item.dataIndex;
+    if (!dataIndex) {
+      return;
+    }
+    if (dataIndex === startKey) {
+      indexArray[0] = index;
+    }
+    if (dataIndex === endKey) {
+      indexArray[1] = index;
+    }
+  });
+  var oldIndex = indexArray[0],
+    newIndex = indexArray[1];
+  var newData = _toConsumableArray(data);
+  var oldItem = data[oldIndex];
+  _spliceInstanceProperty(newData).call(newData, oldIndex, 1);
+  _spliceInstanceProperty(newData).call(newData, newIndex, 0, oldItem);
+  return newData;
+};
+var ColsSettingContent = function ColsSettingContent(_ref2) {
+  var columns = _ref2.columns,
+    onCheck = _ref2.onCheck,
+    checkKeys = _ref2.checkKeys,
+    onDrop = _ref2.onDrop;
   var content = index.useClassName("hw-table-body-option-setting-content");
   var titleClass = index.useClassName("hw-table-body-option-setting-content-title");
   var treeClass = index.useClassName("hw-table-body-option-tree");
   var contentTreeData = React.useMemo(function () {
     var treeData = [];
-    _forEachInstanceProperty(columns).call(columns, function (_ref2) {
-      var dataIndex = _ref2.dataIndex,
-        title = _ref2.title,
-        titleStr = _ref2.titleStr;
+    _forEachInstanceProperty(columns).call(columns, function (_ref3) {
+      var dataIndex = _ref3.dataIndex,
+        title = _ref3.title,
+        titleStr = _ref3.titleStr;
       if (dataIndex) {
         var _getItemValue = utils.getItemValue({
             titleStr: titleStr,
@@ -40,8 +69,8 @@ var ColsSettingContent = function ColsSettingContent(_ref) {
   }, [columns]);
   var check = function check(keys) {
     var notCheck = [];
-    _forEachInstanceProperty(contentTreeData).call(contentTreeData, function (_ref3) {
-      var key = _ref3.key;
+    _forEachInstanceProperty(contentTreeData).call(contentTreeData, function (_ref4) {
+      var key = _ref4.key;
       var cuKey = key;
       var index = _indexOfInstanceProperty(keys).call(keys, cuKey);
       if (index === -1) {
@@ -50,6 +79,22 @@ var ColsSettingContent = function ColsSettingContent(_ref) {
     });
     onCheck(keys, notCheck);
   };
+  var onDropEnd = function onDropEnd(_ref5) {
+    var dragNodesKeys = _ref5.dragNodesKeys,
+      dropPosition = _ref5.dropPosition;
+    if (dropPosition < 1) {
+      return;
+    }
+    var _dragNodesKeys = _slicedToArray(dragNodesKeys, 1),
+      key = _dragNodesKeys[0];
+    var sourceKey = contentTreeData[dropPosition - 1].key;
+    var newData = moveArray({
+      startKey: key,
+      endKey: sourceKey,
+      data: columns
+    });
+    onDrop(newData);
+  };
   return jsxRuntime.jsx("div", {
     className: content,
     children: jsxRuntime.jsx("div", {
@@ -60,7 +105,9 @@ var ColsSettingContent = function ColsSettingContent(_ref) {
       children: jsxRuntime.jsx(antd.Tree, {
         checkable: true,
         className: treeClass,
+        draggable: true,
         checkedKeys: checkKeys,
+        onDrop: onDropEnd,
         onCheck: function onCheck(key) {
           check(key);
         },

package/lib/HTableBody/Options/Title.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import type { ItemProps } from "./modal";
-export declare const Title: ({ columns, onCheck, checkKeys, reset }: ItemProps) => JSX.Element;
+export declare const Title: ({ columns, onCheck, checkKeys, reset }: Omit<ItemProps, "onDrop">) => JSX.Element;

package/lib/HTableBody/Options/index.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import type { IProps } from "./modal";
-declare const _default: ({ reload, size, density, setSizeChange, columns, onChange, colStatusValue, reset, settingRender, }: IProps) => JSX.Element;
+declare const _default: ({ reload, size, density, setSizeChange, columns, onChange, colStatusValue, reset, settingRender, onDrop }: IProps) => JSX.Element;
 export default _default;

package/lib/HTableBody/Options/index.js

@@ -22,7 +22,8 @@ var Options = (function (_ref) {
     onChange = _ref.onChange,
     colStatusValue = _ref.colStatusValue,
     reset = _ref.reset,
-    settingRender = _ref.settingRender;
+    settingRender = _ref.settingRender,
+    onDrop = _ref.onDrop;
   var pointer = index.useClassName(["hw-table-pointer", "hw-table-body-option-icon"]);
   var ref = React.useRef(null);
   var checkKeys = hooks.useCheckKeys({
@@ -87,7 +88,8 @@ var Options = (function (_ref) {
         content: jsxRuntime.jsx(Content.ColsSettingContent, {
           columns: columns,
           checkKeys: checkKeys,
-          onCheck: onChange
+          onCheck: onChange,
+          onDrop: onDrop
         }),
         title: jsxRuntime.jsx(Title.Title, {
           columns: columns,

package/lib/HTableBody/RowCheckBox/RowItem.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { RowRadioSelectionProps } from "@/components/HTableBody/modal";
+import type { RowRadioSelectionProps } from "@/components/HTableBody/modal";
 declare const _default: ({ data, onChange, index, getCheckboxProps, }: RowRadioSelectionProps) => JSX.Element;
 export default _default;

package/lib/HTableBody/RowCheckBox/hooks.d.ts

@@ -1,5 +1,5 @@
 import type { Key } from "react";
-import { RowRadioSelectionProps } from '../modal';
+import type { RowRadioSelectionProps } from "../modal";
 export declare const useAllChecked: (keys?: Key[], data?: any[]) => boolean;
 export declare const useCheckControl: (data: any[] | undefined, onChange: RowRadioSelectionProps["onChange"]) => {
     checkChange: (e: any) => void;

package/lib/HTableBody/RowRadioBoxSelection.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import { RowRadioSelectionProps } from './modal';
+import type { RowRadioSelectionProps } from "./modal";
 export declare const RowRadioSelection: ({ data, onChange, index, getCheckboxProps, }: RowRadioSelectionProps) => JSX.Element;

package/lib/HTableBody/hooks/useColData.d.ts

@@ -1,8 +1,10 @@
+/// <reference types="react" />
 import type { ConfigDataModal, HTableProps } from "@/components/modal";
 import type { ColumnsState } from "@ant-design/pro-table/es/container";
 import type { ColumnsStateType } from "@ant-design/pro-table/es/typing";
 export declare const useCols: ({ configData, rowSelection, table, bordered, }: HTableProps) => {
     cols: ConfigDataModal;
+    setCols: import("react").Dispatch<import("react").SetStateAction<ConfigDataModal>>;
 };
 interface useColumnsStateTypeModal {
     columnsState?: ColumnsStateType;

package/lib/HTableBody/hooks/useColData.js

@@ -94,7 +94,8 @@ var useCols = function useCols(_ref) {
     setCols(changeConfigData(configData));
   }, [configData, table, rowSelection]);
   return {
-    cols: cols
+    cols: cols,
+    setCols: setCols
   };
 };
 var useColumnsStateType = function useColumnsStateType(_ref3) {

package/lib/HTableBody/index.js

@@ -92,7 +92,8 @@ var Body = (function (bodyProps) {
       rowSelection: rowSelection,
       bordered: bordered
     }),
-    cols = _useCols.cols;
+    cols = _useCols.cols,
+    setCols = _useCols.setCols;
   var _useColumnsStateType = useColData.useColumnsStateType({
       columnsState: columnsState,
       columns: cols
@@ -116,7 +117,8 @@ var Body = (function (bodyProps) {
     setSizeChange: setCuSize,
     colStatusValue: value || {},
     onChange: onChange,
-    reset: reset
+    reset: reset,
+    onDrop: setCols
   }));
   var defaultOptionsNode = optionsRender ? optionsRender(optionsNode) : optionsNode;
   var alwaysShowAlert = useControl.useAlwaysShowAlert(selectedRowData, configAlwaysShowAlert);

package/lib/HTableBody/modal.d.ts

@@ -1,5 +1,6 @@
 import type { OptionConfig } from "@ant-design/pro-table/lib/components/ToolBar";
-import React, { Key } from "react";
+import type { Key } from "react";
+import type React from "react";
 import type { ProTableProps } from "@ant-design/pro-table";
 import type { ActionRenderFn, ConfigDataModal, HRowSelection, HTableInstance, ParamsModal } from "@/components/modal";
 import type { AffixProps } from "antd/lib/affix";

package/lib/modal.d.ts

@@ -2,7 +2,8 @@ import type { ProColumns } from "@ant-design/pro-table/lib/typing";
 import type { ProTableProps } from "@ant-design/pro-table";
 import type { HItemProps, HFormInstance } from "@hw-component/form/es/Form/modal";
 import type { ColProps, FormInstance } from "antd";
-import React, { Key } from "react";
+import type { Key } from "react";
+import type React from "react";
 import type { ModalProps } from "antd";
 import type { TableProps } from "antd/lib/table";
 import type { AffixProps } from "antd/lib/affix";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hw-component/table",
-  "version": "1.9.89",
+  "version": "1.9.91",
   "description": "基于antd二次开发table组件",
   "keywords": [
     "table"

package/src/components/HTableBody/HeaderTitle/hooks.ts

@@ -1,48 +1,52 @@
-import {MutableRefObject, useEffect, useLayoutEffect, useState} from "react";
+import type { MutableRefObject} from "react";
+import { useEffect, useLayoutEffect, useState } from "react";
 
 interface HeaderStyleParams {
-    bodyRef:MutableRefObject<HTMLDivElement|null>;
-    titleContentRef:MutableRefObject<HTMLDivElement|null>;
-    rightNodeRef:MutableRefObject<HTMLDivElement|null>;
+  bodyRef: MutableRefObject<HTMLDivElement | null>;
+  titleContentRef: MutableRefObject<HTMLDivElement | null>;
+  rightNodeRef: MutableRefObject<HTMLDivElement | null>;
 }
 
-export const useHeaderStyle = ({bodyRef,titleContentRef,rightNodeRef}:HeaderStyleParams) => {
-    const [style, setStyle] = useState({});
-    const setHeaderStyle = () => {
-        const headerWidth = bodyRef.current?.clientWidth || 0;
-        console.log(headerWidth,"headerWidth")
-        const titleWidth = titleContentRef.current?.clientWidth || 0;
-        const rightNodeWidth = rightNodeRef.current?.clientWidth || 0;
-        if (rightNodeWidth + titleWidth >= headerWidth) {
-            setStyle({
-                overflow: "auto",
-            });
-            return;
-        }
-        setStyle({});
+export const useHeaderStyle = ({
+  bodyRef,
+  titleContentRef,
+  rightNodeRef,
+}: HeaderStyleParams) => {
+  const [style, setStyle] = useState({});
+  const setHeaderStyle = () => {
+    const headerWidth = bodyRef.current?.clientWidth || 0;
+    const titleWidth = titleContentRef.current?.clientWidth || 0;
+    const rightNodeWidth = rightNodeRef.current?.clientWidth || 0;
+    if (rightNodeWidth + titleWidth >= headerWidth) {
+      setStyle({
+        overflow: "auto",
+      });
+      return;
+    }
+    setStyle({});
+  };
+  useLayoutEffect(() => {
+    setHeaderStyle();
+  }, []);
+  useEffect(() => {
+    const resizeFn = () => {
+      setHeaderStyle();
     };
-    useLayoutEffect(() => {
-        setHeaderStyle();
-    }, []);
-    useEffect(() => {
-        const resizeFn = () => {
-            setHeaderStyle();
-        };
-        window.addEventListener("resize", resizeFn);
-        return () => {
-            window.removeEventListener("resize", resizeFn);
-        };
-    }, []);
-    useEffect(() => {
-        const element = titleContentRef.current;
-        if (!element||!window.ResizeObserver) return;
-        const observer = new ResizeObserver(() => {
-           setHeaderStyle();
-        });
-        observer.observe(element);
-        return () => {
-          observer.disconnect();
-        }
-    }, []);
-    return style;
-}
+    window.addEventListener("resize", resizeFn);
+    return () => {
+      window.removeEventListener("resize", resizeFn);
+    };
+  }, []);
+  useEffect(() => {
+    const element = titleContentRef.current;
+    if (!element || !window.ResizeObserver) return;
+    const observer = new ResizeObserver(() => {
+      setHeaderStyle();
+    });
+    observer.observe(element);
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+  return style;
+};

package/src/components/HTableBody/HeaderTitle/index.tsx

@@ -1,9 +1,10 @@
 import type { HTableBodyProps } from "../modal";
-import {DetailedReactHTMLElement, useLayoutEffect} from "react";
+import type { DetailedReactHTMLElement} from "react";
+import { useLayoutEffect } from "react";
 import React, { useRef } from "react";
 import { useHTableContext } from "../../context";
 import { useClassName } from "../../hooks";
-import {useHeaderStyle} from "./hooks";
+import { useHeaderStyle } from "./hooks";
 
 interface IProps {
   headerTitle: HTableBodyProps["headerTitle"];
@@ -11,7 +12,8 @@ interface IProps {
   rNode?: React.ReactNode;
 }
 export default ({ headerTitle, contentStyle, rNode }: IProps) => {
-  const { tableInstance, selectedRowData, rowOnChange, allSelectChange } = useHTableContext();
+  const { tableInstance, selectedRowData, rowOnChange, allSelectChange } =
+    useHTableContext();
   const bodyRef = useRef<any>();
   const titleContentRef = useRef<any>();
   const rightNodeRef = useRef<any>();
@@ -19,10 +21,10 @@ export default ({ headerTitle, contentStyle, rNode }: IProps) => {
   const headerBoxContent = useClassName("hw-table-header-title-box-content");
   const titleClassname = useClassName("hw-table-header-title");
   const rightNodeClassname = useClassName("hw-table-header-right-node");
-  const style=useHeaderStyle({
+  const style = useHeaderStyle({
     bodyRef,
     titleContentRef,
-    rightNodeRef
+    rightNodeRef,
   });
   if (!headerTitle && !rNode) {
     return null;

package/src/components/HTableBody/Options/Content.tsx

@@ -5,14 +5,44 @@ import { Tree } from "antd";
 import type { ItemProps } from "./modal";
 import { getItemValue } from "./utils";
 
+interface MoveArrayProps {
+    startKey:string;
+    endKey:string;
+    data: ConfigDataModal;
+}
+
+
+const moveArray=({startKey,endKey,data}:MoveArrayProps)=>{
+   const indexArray=[-1,-1];
+   data.forEach((item,index)=>{
+      const{dataIndex}=item;
+      if(!dataIndex){
+         return;
+      };
+      if(dataIndex===startKey){
+        indexArray[0]=index;
+      }
+      if(dataIndex===endKey){
+        indexArray[1]=index;
+      }
+   });
+  const [oldIndex,newIndex]=indexArray;
+  const newData = [...data];
+  const oldItem = data[oldIndex];
+  newData.splice(oldIndex, 1);
+  newData.splice(newIndex, 0, oldItem);
+  return newData;
+};
 export const ColsSettingContent = ({
   columns,
   onCheck,
   checkKeys,
+  onDrop
 }: ItemProps) => {
   const content = useClassName("hw-table-body-option-setting-content");
   const titleClass = useClassName("hw-table-body-option-setting-content-title");
   const treeClass = useClassName("hw-table-body-option-tree");
+
   const contentTreeData = useMemo(() => {
     const treeData: ConfigDataModal = [];
     columns.forEach(({ dataIndex, title, titleStr }) => {
@@ -29,6 +59,7 @@ export const ColsSettingContent = ({
     });
     return treeData;
   }, [columns]);
+
   const check = (keys: string[]) => {
     const notCheck: string[] = [];
     contentTreeData.forEach(({ key }) => {
@@ -40,13 +71,24 @@ export const ColsSettingContent = ({
     });
     onCheck(keys, notCheck);
   };
+  const onDropEnd=({dragNodesKeys,dropPosition})=>{
+      if (dropPosition<1) {
+         return;
+      };
+       const [key]=dragNodesKeys;
+       const sourceKey=contentTreeData[dropPosition-1].key;
+       const newData= moveArray({startKey:key,endKey:(sourceKey as string),data:columns});
+       onDrop(newData);
+  }
   return (
     <div className={content}>
       <div style={{ paddingTop: 6, paddingBottom: 6 }}>
         <Tree
           checkable
           className={treeClass}
+          draggable
           checkedKeys={checkKeys}
+          onDrop={onDropEnd}
           onCheck={(key) => {
             check(key as string[]);
           }}

package/src/components/HTableBody/Options/Title.tsx

@@ -2,8 +2,9 @@ import { useClassName } from "../../hooks";
 import { Checkbox, Row, Space, Typography } from "antd";
 import type { ItemProps } from "./modal";
 import { useMemo } from "react";
+
 const { Link } = Typography;
-export const Title = ({ columns, onCheck, checkKeys, reset }: ItemProps) => {
+export const Title = ({ columns, onCheck, checkKeys, reset }: Omit<ItemProps,"onDrop">) => {
   const title = useClassName("hw-table-body-option-setting-title");
   const relArrayKeys = useMemo(() => {
     const keys: string[] = [];
@@ -17,7 +18,6 @@ export const Title = ({ columns, onCheck, checkKeys, reset }: ItemProps) => {
     });
     return keys;
   }, [columns]);
-  const allKeys = columns;
   const allCheck = () => {
     onCheck(relArrayKeys, []);
   };

package/src/components/HTableBody/Options/index.tsx

@@ -11,6 +11,9 @@ import { ColsSettingContent } from "./Content";
 import { Title } from "./Title";
 import type { IProps } from "./modal";
 import { useCheckKeys } from "@/components/HTableBody/Options/hooks";
+
+
+
 export default ({
   reload,
   size = "middle",
@@ -21,6 +24,7 @@ export default ({
   colStatusValue,
   reset,
   settingRender,
+    onDrop
 }: IProps) => {
   const pointer = useClassName([
     "hw-table-pointer",
@@ -84,6 +88,7 @@ export default ({
               columns={columns}
               checkKeys={checkKeys}
               onCheck={onChange}
+              onDrop={onDrop}
             />
           }
           title={

package/src/components/HTableBody/Options/modal.d.ts

@@ -12,6 +12,7 @@ export interface IProps extends OptionConfig {
   colStatusValue: Record<string, ColumnsState>;
   reset: VoidFunction;
   settingRender?: () => React.ReactNode;
+  onDrop:(columns:ConfigDataModal)=>void;
 }
 
 export interface ItemProps {
@@ -19,4 +20,5 @@ export interface ItemProps {
   onCheck: (keys: string[], notCheck: string[]) => void;
   columns: ConfigDataModal;
   reset?: VoidFunction;
+  onDrop:(columns:ConfigDataModal)=>void;
 }

package/src/components/HTableBody/RowCheckBox/RowItem.tsx

@@ -1,6 +1,6 @@
 import { useHTableContext } from "../../context";
 import { Checkbox } from "antd";
-import {RowRadioSelectionProps} from "@/components/HTableBody/modal";
+import type { RowRadioSelectionProps } from "@/components/HTableBody/modal";
 
 export default ({
   data,

package/src/components/HTableBody/RowCheckBox/hooks.ts

@@ -1,7 +1,7 @@
 import type { HTableProps } from "@/components/modal";
 import type { Key } from "react";
 import { useHTableContext } from "@/components/context";
-import {RowRadioSelectionProps} from '../modal';
+import type { RowRadioSelectionProps } from "../modal";
 
 const getRowKey = (item: any, index: number, rowKey: HTableProps["rowKey"]) => {
   return typeof rowKey === "function"

package/src/components/HTableBody/RowRadioBoxSelection.tsx

@@ -1,6 +1,6 @@
 import { useHTableContext } from "@/components/context";
 import { Radio } from "antd";
-import {RowRadioSelectionProps} from './modal';
+import type { RowRadioSelectionProps } from "./modal";
 
 export const RowRadioSelection = ({
   data,

package/src/components/HTableBody/hooks/useColData.tsx

@@ -78,11 +78,14 @@ export const useCols = ({
   useEffect(() => {
     setCols(changeConfigData(configData));
   }, [configData, table, rowSelection]);
+
   return {
     cols,
+    setCols
   };
 };
 
+
 interface useColumnsStateTypeModal {
   columnsState?: ColumnsStateType;
   columns: ConfigDataModal;
@@ -93,11 +96,9 @@ export const useColumnsStateType = ({
   columns,
 }: useColumnsStateTypeModal) => {
   const { tableInstance } = useHTableContext();
-  const { persistenceType, persistenceKey, value, defaultValue, onChange } =
-    columnsState || {};
-  const [selfValue, setSelfValue] = useState<
-    Record<string, ColumnsState> | undefined
-  >(defaultValue);
+  const { persistenceType, persistenceKey, value, defaultValue, onChange } = columnsState || {};
+  const [selfValue, setSelfValue] = useState<Record<string, ColumnsState> | undefined>(defaultValue);
+
   const initTableColsVal = useMemo(() => {
     return selfValue || {};
   }, []);
@@ -118,6 +119,7 @@ export const useColumnsStateType = ({
     setSelfValue(newObj);
     onChange?.(newObj);
   };
+
   const reset = () => {
     setSelfValue(initTableColsVal);
   };

package/src/components/HTableBody/index.tsx

@@ -65,13 +65,13 @@ export default (bodyProps: HTableBodyProps) => {
   const bodyConfigData = configData || contextConfigData;
   const { records } = data || {};
   const tableInstance = table || contextTableInstance;
-  const { cols } = useCols({
+
+  const { cols ,setCols} = useCols({
     configData: bodyConfigData,
     table: tableInstance,
     rowSelection,
     bordered,
   });
-
   const { value, onChange, reset, ...selfColStatus } = useColumnsStateType({
     columnsState,
     columns: cols,
@@ -90,6 +90,7 @@ export default (bodyProps: HTableBodyProps) => {
       colStatusValue={value || {}}
       onChange={onChange}
       reset={reset}
+      onDrop={setCols}
     />
   );
   const defaultOptionsNode = optionsRender
@@ -131,7 +132,7 @@ export default (bodyProps: HTableBodyProps) => {
         >
           <ProTable
             {...props}
-            rowClassName={(rowClassNameFn as any)}
+            rowClassName={rowClassNameFn as any}
             bordered={bordered}
             columnsState={{
               ...selfColStatus,

package/src/components/HTableBody/modal.ts

@@ -1,5 +1,6 @@
 import type { OptionConfig } from "@ant-design/pro-table/lib/components/ToolBar";
-import React, {Key} from "react";
+import type { Key } from "react";
+import type React from "react";
 import type { ProTableProps } from "@ant-design/pro-table";
 import type {
   ActionRenderFn,
@@ -42,7 +43,7 @@ export interface HTableBodyProps
 
 export interface RowRadioSelectionProps {
   data: any;
-  onChange?:(keys:Key[],data:any[])=>void;
+  onChange?: (keys: Key[], data: any[]) => void;
   getCheckboxProps?: HRowSelection["getCheckboxProps"];
   index: number;
-}
+}

package/src/components/hooks/useRowObj.ts

@@ -1,5 +1,5 @@
 import type React from "react";
-import {  useState } from "react";
+import { useState } from "react";
 import type { RowObj } from "../modal";
 import type { HRowSelection } from "../modal";