@hw-component/table 0.0.7-beta-v8 → 0.0.7-beta-v9

package/lib/HTableBody/hooks.js

@@ -8,10 +8,10 @@ var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js/
 var _Object$defineProperties = require('@babel/runtime-corejs3/core-js/object/define-properties');
 var _Object$defineProperty = require('@babel/runtime-corejs3/core-js/object/define-property');
 var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
-var _toConsumableArray = require('@babel/runtime-corejs3/helpers/toConsumableArray');
+var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
+var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js/instance/filter');
 var _spliceInstanceProperty = require('@babel/runtime-corejs3/core-js/instance/splice');
 var _mapInstanceProperty = require('@babel/runtime-corejs3/core-js/instance/map');
-var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js/instance/filter');
 var _indexOfInstanceProperty = require('@babel/runtime-corejs3/core-js/instance/index-of');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
@@ -31,8 +31,9 @@ var rowSelectionCol = function rowSelectionCol(rowSelection) {
       onChange: onChange,
       getCheckboxProps: getCheckboxProps
     }),
-    dataIndex: "rowSelectionTitle",
     width: 32,
+    rowSelectionTitle: true,
+    fixed: "left",
     render: function render(dom, data) {
       return jsxRuntime.jsx(RowSelection.RowSelectionBox, {
         data: data,
@@ -46,23 +47,39 @@ var useCols = function useCols(_ref2) {
   var configData = _ref2.configData,
     rowSelection = _ref2.rowSelection,
     table = _ref2.table;
-  return React.useMemo(function () {
-    var colsArray = _toConsumableArray(configData);
+  var _useState = React.useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    cols = _useState2[0],
+    setCols = _useState2[1];
+  var changeConfigData = function changeConfigData(data) {
+    var colsArray = _filterInstanceProperty(data).call(data, function (item) {
+      return !item.hideInTable;
+    });
     if (rowSelection !== false) {
       _spliceInstanceProperty(colsArray).call(colsArray, 0, 0, rowSelectionCol(rowSelection));
     }
     return _mapInstanceProperty(colsArray).call(colsArray, function (item) {
       var _render = item.render;
       return _objectSpread(_objectSpread({}, item), {}, {
-        render: function render(dom, data, index) {
+        render: function render(dom, itemData, index) {
           if (!_render) {
             return dom;
           }
-          return _render(dom, data, index, table);
+          return _render(dom, itemData, index, table);
         }
       });
     });
+  };
+  React.useEffect(function () {
+    setCols(changeConfigData(configData));
   }, [configData, table, rowSelection]);
+  var changeCols = function changeCols(cuCols) {
+    setCols(cuCols);
+  };
+  return {
+    cols: cols,
+    changeCols: changeCols
+  };
 };
 var useSynchronousKeys = function useSynchronousKeys(_ref3) {
   var selectedRowKeys = _ref3.selectedRowKeys,
@@ -80,7 +97,21 @@ var useSynchronousKeys = function useSynchronousKeys(_ref3) {
     }
   }, [selectedRowKeys, records, rowKey]);
 };
+var useSize = function useSize(size) {
+  var _useState3 = React.useState(size),
+    _useState4 = _slicedToArray(_useState3, 2),
+    cuSize = _useState4[0],
+    setCuSize = _useState4[1];
+  React.useEffect(function () {
+    setCuSize(size);
+  }, [size]);
+  return {
+    cuSize: cuSize,
+    setCuSize: setCuSize
+  };
+};
 
 exports.useCols = useCols;
+exports.useSize = useSize;
 exports.useSynchronousKeys = useSynchronousKeys;
 // powered by h

package/lib/HTableBody/index.d.ts

@@ -4,7 +4,7 @@ import React from "react";
 import type { HTableInstance } from "../modal";
 import type { HRowSelection } from "../modal";
 import type { AffixProps } from "antd/lib/affix";
-interface HTableBodyProps extends Omit<ProTableProps<any, any>, "dataSource" | "rowSelection"> {
+export interface HTableBodyProps extends Omit<ProTableProps<any, any>, "dataSource" | "rowSelection"> {
     configData?: ConfigDataModal;
     onPageChange?: (params: ParamsModal) => void;
     emptyRender?: (tableInstance: HTableInstance) => React.ReactNode;
@@ -16,5 +16,5 @@ interface HTableBodyProps extends Omit<ProTableProps<any, any>, "dataSource" | "
     affixProps?: AffixProps | false;
     goTop?: boolean;
 }
-declare const _default: ({ configData, pagination, onPageChange, rowSelection, rowKey, emptyRender, errorRender, tableStyle, paginationStyle, headerTitle, options, actionRender, affixProps, goTop, ...props }: HTableBodyProps) => JSX.Element;
+declare const _default: ({ configData, pagination, onPageChange, rowSelection, rowKey, emptyRender, errorRender, tableStyle, paginationStyle, headerTitle, options, actionRender, affixProps, goTop, size, ...props }: HTableBodyProps) => JSX.Element;
 export default _default;

package/lib/HTableBody/index.js

@@ -20,11 +20,12 @@ var context = require('../context.js');
 var React = require('react');
 var antd = require('antd');
 var TableConfig = require('../TableConfig.js');
-var index$1 = require('../HTablePagination/index.js');
+var index$2 = require('../HTablePagination/index.js');
 var index = require('../hooks/index.js');
 var AlertMsg = require('./AlertMsg.js');
+var index$1 = require('./Options/index.js');
 
-var _excluded = ["configData", "pagination", "onPageChange", "rowSelection", "rowKey", "emptyRender", "errorRender", "tableStyle", "paginationStyle", "headerTitle", "options", "actionRender", "affixProps", "goTop"];
+var _excluded = ["configData", "pagination", "onPageChange", "rowSelection", "rowKey", "emptyRender", "errorRender", "tableStyle", "paginationStyle", "headerTitle", "options", "actionRender", "affixProps", "goTop", "size"];
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 var defaultRender = function defaultRender() {
@@ -51,11 +52,13 @@ var Body = (function (_ref) {
     tableStyle = _ref.tableStyle,
     paginationStyle = _ref.paginationStyle,
     headerTitle = _ref.headerTitle,
-    options = _ref.options,
+    _ref$options = _ref.options,
+    options = _ref$options === void 0 ? {} : _ref$options,
     actionRender = _ref.actionRender,
     affixProps = _ref.affixProps,
     _ref$goTop = _ref.goTop,
     goTop = _ref$goTop === void 0 ? true : _ref$goTop,
+    size = _ref.size,
     props = _objectWithoutProperties(_ref, _excluded);
   var selectedRowKeys = rowSelection.selectedRowKeys;
   var _useHTableContext = context.useHTableContext(),
@@ -75,14 +78,18 @@ var Body = (function (_ref) {
     tableEmptyRender = _useHTableConfigConte2 === void 0 ? defaultRender : _useHTableConfigConte2,
     _useHTableConfigConte3 = _useHTableConfigConte.errorRender,
     tableErrorRender = _useHTableConfigConte3 === void 0 ? defaultRender : _useHTableConfigConte3;
+  var _useSize = hooks.useSize(size),
+    cuSize = _useSize.cuSize,
+    setCuSize = _useSize.setCuSize;
   var bodyConfigData = configData || contextConfigData;
   var _ref2 = data || {},
     records = _ref2.records;
-  var cols = hooks.useCols({
-    configData: bodyConfigData,
-    rowSelection: rowSelection,
-    table: tableInstance
-  });
+  var _useCols = hooks.useCols({
+      configData: bodyConfigData,
+      table: tableInstance
+    }),
+    cols = _useCols.cols,
+    changeCols = _useCols.changeCols;
   hooks.useSynchronousKeys({
     selectedRowKeys: selectedRowKeys,
     records: records,
@@ -112,7 +119,16 @@ var Body = (function (_ref) {
         }),
         type: "info"
       })
-    }), jsxRuntime.jsxs(antd.ConfigProvider, {
+    }), options && jsxRuntime.jsx(index$1.default, _objectSpread(_objectSpread({
+      reload: function reload() {
+        tableInstance.table.reloadWithParams();
+      }
+    }, options), {}, {
+      size: cuSize,
+      columns: cols,
+      setSizeChange: setCuSize,
+      onChange: changeCols
+    })), jsxRuntime.jsxs(antd.ConfigProvider, {
       renderEmpty: function renderEmpty() {
         if (error) {
           return tableErrorRender === null || tableErrorRender === void 0 ? void 0 : tableErrorRender(tableInstance, error);
@@ -121,12 +137,9 @@ var Body = (function (_ref) {
       },
       children: [jsxRuntime.jsx(ProTable, _objectSpread(_objectSpread({}, props), {}, {
         columns: cols,
+        size: cuSize,
         search: false,
-        options: options ? options : {
-          reload: function reload() {
-            tableInstance.table.reloadWithParams();
-          }
-        },
+        options: false,
         tableStyle: {
           paddingBottom: 0
         },
@@ -135,7 +148,7 @@ var Body = (function (_ref) {
         rowKey: rowKey,
         dataSource: records,
         pagination: false
-      })), pagination !== false && jsxRuntime.jsx(index$1.default, _objectSpread({
+      })), pagination !== false && jsxRuntime.jsx(index$2.default, _objectSpread({
         onPageChange: onPageChange,
         paginationStyle: paginationStyle,
         affixProps: affixProps,

package/lib/HTableHeader/hooks.js

@@ -24,7 +24,7 @@ var index = require('../hooks/index.js');
 var defaultSubComponent = require('./defaultSubComponent.js');
 var context = require('../context.js');
 
-var _excluded = ["colon", "searchType", "title", "name", "dataIndex", "itemProps", "searchRender"];
+var _excluded = ["colon", "searchType", "title", "name", "dataIndex", "itemProps", "searchRender", "childrenDataIndex", "showSearch", "hideInTable"];
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context3, _context4; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(t), !0)).call(_context3, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context4 = ownKeys(Object(t))).call(_context4, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 var sizeObj = {
@@ -93,8 +93,11 @@ var formConfigDataItemProvider = function formConfigDataItemProvider(_ref) {
     dataIndex = _ref.dataIndex,
     _ref$itemProps = _ref.itemProps,
     itemProps = _ref$itemProps === void 0 ? {} : _ref$itemProps,
-    searchRender = _ref.searchRender,
-    props = _objectWithoutProperties(_ref, _excluded);
+    searchRender = _ref.searchRender;
+    _ref.childrenDataIndex;
+    _ref.showSearch;
+    _ref.hideInTable;
+    var props = _objectWithoutProperties(_ref, _excluded);
   var _itemProps$allowClear = itemProps.allowClear,
     allowClear = _itemProps$allowClear === void 0 ? true : _itemProps$allowClear;
   return _objectSpread(_objectSpread({}, props), {}, {

package/lib/hooks/useHTable.d.ts

@@ -7,6 +7,7 @@ declare const _default: () => {
         dispatch: () => void;
         reloadWithParams: (params?: ParamsModal) => Promise<ParamsModal | undefined>;
         getParams: () => any;
+        settingKeys: never[];
     };
 };
 export default _default;

package/lib/hooks/useHTable.js

@@ -20,7 +20,8 @@ var useHTable = (function () {
       },
       getParams: function getParams() {
         return {};
-      }
+      },
+      settingKeys: []
     };
   }, []);
   return {

package/lib/index.css

@@ -41,3 +41,46 @@
 .ant-hw-table-header .ant-hw-table-header-item-hide {
   display: none;
 }
+.ant-hw-table-body-option {
+  padding: 0px 24px 16px 24px;
+}
+.ant-hw-table-body-option-icon {
+  font-size: 16px;
+}
+.ant-hw-table-body-option-setting-content {
+  width: 198px;
+  margin: -10px -16px;
+}
+.ant-hw-table-body-option-setting-title {
+  width: 198px;
+  margin: 0px -16px;
+  padding: 6px 8px;
+}
+.ant-hw-table-body-option-setting-content-title {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+.ant-hw-table-body-option-tree .ant-tree-treenode {
+  width: 100%;
+  padding-left: 24px !important;
+}
+.ant-hw-table-body-option-tree .ant-tree-node-content-wrapper {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+}
+.ant-hw-table-body-option-tree .ant-tree-switcher {
+  width: 0px;
+}
+.ant-hw-table-body-option-tree .ant-tree-treenode-draggable {
+  padding-left: 0px !important;
+}
+.ant-hw-table-pointer {
+  cursor: pointer;
+}
+.ant-hw-table-pointer:hover {
+  color: #1890ff;
+}

package/lib/modal.d.ts

@@ -26,8 +26,12 @@ interface HColumns extends Omit<ProColumns, "render"> {
     showSearch?: boolean;
     searchType?: HItemProps["type"];
     searchRender?: HItemProps["render"];
+    rowSelectionTitle?: boolean;
 }
-export type ConfigItemModal = Omit<HItemProps, "render" | "type"> & HColumns;
+interface BcItemModal {
+    childrenDataIndex?: string[];
+}
+export type ConfigItemModal = Omit<HItemProps, "render" | "type"> & HColumns & BcItemModal;
 export type ConfigDataModal = ConfigItemModal[];
 export type ActionRenderFn = (selectedRowKeys: RowObj, tableInstance: HTableInstance) => React.ReactNode;
 export type FooterBtnRenderFn = (dom: React.ReactNode, total: string, selectedRowKeys: RowObj, setAllCheck: (row: RowObj) => void) => React.ReactNode;
@@ -69,6 +73,7 @@ export interface TableInstance {
     dispatch: (key: string, params: any) => void;
     reloadWithParams: (params?: ParamsModal) => Promise<any>;
     getParams: () => any;
+    settingKeys: string[];
 }
 export interface HTableInstance {
     form: HFormInstance;

package/package.json

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

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

@@ -0,0 +1,58 @@
+import { useClassName } from "../../hooks";
+import { useMemo } from "react";
+import type { ConfigDataModal } from "../../modal";
+import { Tree } from "antd";
+import type { ItemProps } from "./modal";
+
+export const ColsSettingContent = ({
+  columns,
+  onChange,
+  checkKeys,
+}: 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 }) => {
+      if (dataIndex) {
+        treeData.push({
+          title: <div className={titleClass}>{title}</div>,
+          key: dataIndex.toString(),
+        });
+      }
+    });
+    return treeData;
+  }, [columns]);
+  const change = (key: string[]) => {
+    const newCols = [...columns];
+    newCols.forEach(({ dataIndex }, index) => {
+      if (!dataIndex) {
+        return;
+      }
+      const strDataIndex = dataIndex.toString();
+      const item = newCols[index];
+      newCols[index] = {
+        ...item,
+        hideInTable: key.indexOf(strDataIndex) == -1,
+      };
+    });
+    onChange(newCols);
+  };
+  return (
+    <div className={content}>
+      <div style={{ paddingTop: 6, paddingBottom: 6 }}>
+        <Tree
+          checkable
+          className={treeClass}
+          checkedKeys={checkKeys}
+          onCheck={(key)=>{
+             change((key as string[]))
+          }}
+          height={268}
+          treeData={contentTreeData}
+        />
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,48 @@
+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, onChange, checkKeys }: ItemProps) => {
+  const title = useClassName("hw-table-body-option-setting-title");
+  const relLen = useMemo(() => {
+    const relArray = columns.filter(({ dataIndex }) => {
+      return !!dataIndex;
+    });
+    return relArray.length;
+  }, [columns]);
+  const allChange = (hideInTable: boolean) => {
+    const newCols = [...columns];
+    columns.forEach((item, index) => {
+      const { dataIndex } = item;
+      if (!dataIndex) {
+        return;
+      }
+
+      newCols[index] = {
+        ...item,
+        hideInTable,
+      };
+    });
+    onChange(newCols);
+  };
+  const reset = () => {
+    allChange(false);
+  };
+  const indeterminate = relLen !== checkKeys.length && checkKeys.length > 0;
+  return (
+    <Row className={title} justify={"space-between"}>
+      <Space size={4}>
+        <Checkbox
+          checked={relLen === checkKeys.length}
+          indeterminate={indeterminate}
+          onChange={(e) => {
+            allChange(!e.target.checked);
+          }}
+        />
+        <span>列展示</span>
+      </Space>
+      <Link onClick={reset}>重置</Link>
+    </Row>
+  );
+};

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

@@ -0,0 +1,108 @@
+import { useClassName } from "../../hooks";
+import { Row, Space, Tooltip, Dropdown, Menu, Popover } from "antd";
+import {
+  ReloadOutlined,
+  ColumnHeightOutlined,
+  SettingOutlined,
+} from "@ant-design/icons";
+import type { SizeType } from "antd/lib/config-provider/SizeContext";
+import { useEffect, useRef, useState } from "react";
+import { ColsSettingContent } from "./Content";
+import { Title } from "./Title";
+import type { IProps } from "./modal";
+import { useHTableContext } from "../../context";
+import {defaultKeys} from "@/components/HTableBody/Options/utils";
+export default ({
+  reload,
+  size = "middle",
+  density = true,
+  setSizeChange,
+  columns,
+  onChange,
+}: IProps) => {
+  const className = useClassName("hw-table-body-option");
+  const pointer = useClassName([
+    "hw-table-pointer",
+    "hw-table-body-option-icon",
+  ]);
+  const ref = useRef<HTMLDivElement>(null);
+  const [keys, setKeys] = useState<string[]>([]);
+  const { tableInstance } = useHTableContext();
+  useEffect(() => {
+    const { keys: changeKeys, allKeys } = defaultKeys(columns);
+    tableInstance.table.settingKeys = allKeys;
+    setKeys(changeKeys);
+  }, [columns]);//同步改变
+  const SizeItem = () => {
+    const MenuComponent=(Menu as any);
+    const MenuItem=(Menu.Item as any);
+    return (
+      <MenuComponent
+        selectedKeys={[size]}
+        onClick={({ key }) => {
+          setSizeChange(key as SizeType);
+        }}
+      >
+        <MenuItem key="large">
+          <div style={{ width: 68 }}>默认</div>
+        </MenuItem>
+        <MenuItem key="middle">
+          <div>中等</div>
+        </MenuItem>
+        <MenuItem key="small">
+          <div>紧凑</div>
+        </MenuItem>
+      </MenuComponent>
+    );
+  };
+  return (
+    <Row justify={"end"} className={className} ref={ref}>
+      <Space size={20}>
+        {reload && (
+          <Tooltip title="刷新">
+            <ReloadOutlined
+              className={pointer}
+              width={24}
+              onClick={(e) => {
+                if (typeof reload === "function") {
+                  reload(e);
+                }
+              }}
+            />
+          </Tooltip>
+        )}
+        {density && (
+          <Tooltip title="密度">
+            <Dropdown
+              overlay={SizeItem}
+              placement="bottom"
+              arrow
+              trigger={["click"]}
+            >
+              <ColumnHeightOutlined className={pointer} width={24} />
+            </Dropdown>
+          </Tooltip>
+        )}
+        <Tooltip title="列设置">
+          <Popover
+            content={
+              <ColsSettingContent
+                columns={columns}
+                checkKeys={keys}
+                onChange={onChange}
+              />
+            }
+            title={
+              <Title columns={columns} checkKeys={keys} onChange={onChange} />
+            }
+            placement="bottomLeft"
+            getPopupContainer={() => ref.current||document.body}
+            trigger="click"
+          >
+            <SettingOutlined className={pointer} width={24} />
+          </Popover>
+        </Tooltip>
+      </Space>
+    </Row>
+  );
+};

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

@@ -0,0 +1,14 @@
+import type { OptionConfig } from "@ant-design/pro-table/lib/components/ToolBar";
+import type { SizeType } from "antd/lib/config-provider/SizeContext";
+import type { ConfigDataModal } from "../../modal";
+
+export interface IProps extends OptionConfig {
+  size?: SizeType;
+  setSizeChange: (size: SizeType) => void;
+  columns: ConfigDataModal;
+  onChange: (cols: ConfigDataModal) => void;
+}
+
+export interface ItemProps extends Omit<IProps, "setSizeChange"> {
+  checkKeys: string[];
+}

package/src/components/HTableBody/Options/utils.ts

@@ -0,0 +1,22 @@
+import {ConfigDataModal} from "../../modal";
+
+export const defaultKeys = (cols: ConfigDataModal) => {
+    const keys: string[] = [];
+    const allKeys: string[] = [];
+    cols.forEach((value) => {
+        const { dataIndex, hideInTable, childrenDataIndex } = value;
+        if (hideInTable || !dataIndex) {
+            return;
+        }
+        keys.push(dataIndex.toString());
+        if (childrenDataIndex) {
+            allKeys.push(...childrenDataIndex);
+            return;
+        }
+        allKeys.push(dataIndex.toString());
+    });
+    return {
+        keys,
+        allKeys,
+    };
+};

package/src/components/HTableBody/hooks.tsx

@@ -1,10 +1,11 @@
 import type { HTableInstance, HTableProps } from "../modal";
-import React from "react";
-import { useEffect, useMemo } from "react";
+import React, { useEffect, useState } from "react";
 import { useHTableContext } from "../context";
 import type { GetRowKey } from "rc-table/lib/interface";
 import { RowSelectionBox, RowSelectionTitle } from "./RowSelection";
 import type { HRowSelection } from "../modal";
+import type { ConfigDataModal } from "../modal";
+import type { SizeType } from "antd/lib/config-provider/SizeContext";
 const rowSelectionCol = (rowSelection?: HRowSelection) => {
   const { allPageCheck, onChange, getCheckboxProps } = rowSelection || {};
   return {
@@ -15,8 +16,9 @@ const rowSelectionCol = (rowSelection?: HRowSelection) => {
         getCheckboxProps={getCheckboxProps}
       />
     ),
-    dataIndex: "rowSelectionTitle",
     width: 32,
+    rowSelectionTitle: true,
+    fixed: "left",
     render: (dom, data) => {
       return (
         <RowSelectionBox
@@ -29,24 +31,37 @@ const rowSelectionCol = (rowSelection?: HRowSelection) => {
   };
 };
 export const useCols = ({ configData, rowSelection, table }: HTableProps) => {
-  return useMemo(() => {
-    const colsArray = [...configData];
+  const [cols, setCols] = useState<ConfigDataModal>([]);
+  const changeConfigData = (data: ConfigDataModal) => {
+    const colsArray = data.filter((item) => {
+      return !item.hideInTable;
+    });
     if (rowSelection !== false) {
-      colsArray.splice(0, 0, rowSelectionCol(rowSelection));
+      colsArray.splice(0, 0, (rowSelectionCol(rowSelection) as any));
     }
     return colsArray.map((item) => {
       const { render } = item;
       return {
         ...item,
-        render: (dom: React.ReactNode, data: any, index: number) => {
+        render: (dom: React.ReactNode, itemData: any, index: number) => {
           if (!render) {
             return dom;
           }
-          return render(dom, data, index, table as HTableInstance);
+          return render(dom, itemData, index, table as HTableInstance);
         },
       };
     });
+  };
+  useEffect(() => {
+    setCols(changeConfigData(configData));
   }, [configData, table, rowSelection]);
+  const changeCols = (cuCols: ConfigDataModal) => {
+    setCols(cuCols);
+  };
+  return {
+    cols,
+    changeCols,
+  };
 };
 interface FilterKeysModal {
   selectedRowKeys?: React.Key[];
@@ -70,3 +85,14 @@ export const useSynchronousKeys = ({
     }
   }, [selectedRowKeys, records, rowKey]);
 };
+
+export const useSize = (size: SizeType) => {
+  const [cuSize, setCuSize] = useState(size);
+  useEffect(() => {
+    setCuSize(size);
+  }, [size]);
+  return {
+    cuSize,
+    setCuSize,
+  };
+};