@hw-component/table 0.0.4-beta-v9 → 0.0.4-beta-v16

package/lib/HTableBody/index.js

@@ -2,6 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
+var _keysInstanceProperty = require('@babel/runtime-corejs3/core-js/instance/keys');
 var _Object$keys = require('@babel/runtime-corejs3/core-js/object/keys');
 var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js/object/get-own-property-symbols');
 var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js/instance/filter');
@@ -10,9 +13,6 @@ var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js/instance/
 var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js/object/get-own-property-descriptors');
 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 _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
-var _keysInstanceProperty = require('@babel/runtime-corejs3/core-js/instance/keys');
 var jsxRuntime = require('react/jsx-runtime');
 var ProTable = require('@ant-design/pro-table');
 var hooks = require('./hooks.js');
@@ -22,8 +22,9 @@ var antd = require('antd');
 var TableConfig = require('../TableConfig.js');
 var index$1 = require('../HTablePagination/index.js');
 var index = require('../hooks/index.js');
+var AlertMsg = require('./AlertMsg.js');
 
-var _excluded = ["configData", "pagination", "onPageChange", "rowSelection", "rowKey", "emptyRender", "errorRender", "tableStyle", "paginationStyle", "headerTitle"];
+var _excluded = ["configData", "pagination", "onPageChange", "rowSelection", "rowKey", "emptyRender", "errorRender", "tableStyle", "paginationStyle", "headerTitle", "options", "actionRender"];
 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() {
@@ -31,6 +32,11 @@ var defaultRender = function defaultRender() {
     image: antd.Empty.PRESENTED_IMAGE_SIMPLE
   });
 };
+var contentStyle = {
+  paddingLeft: 24,
+  paddingRight: 24,
+  marginBottom: 12
+};
 var Body = (function (_ref) {
   var configData = _ref.configData,
     _ref$pagination = _ref.pagination,
@@ -45,9 +51,11 @@ var Body = (function (_ref) {
     tableStyle = _ref.tableStyle,
     paginationStyle = _ref.paginationStyle,
     headerTitle = _ref.headerTitle,
+    options = _ref.options,
+    actionRender = _ref.actionRender,
     props = _objectWithoutProperties(_ref, _excluded);
-  var selectedRowKeys = rowSelection.selectedRowKeys,
-    onChange = rowSelection.onChange;
+  var selectedRowKeys = rowSelection.selectedRowKeys;
+    rowSelection.onChange;
   var _useHTableContext = context.useHTableContext(),
     tableInstance = _useHTableContext.tableInstance,
     contextConfigData = _useHTableContext.configData,
@@ -68,21 +76,20 @@ var Body = (function (_ref) {
   var bodyConfigData = configData || contextConfigData;
   var _ref2 = data || {},
     records = _ref2.records;
-    _ref2.size;
-    _ref2.current;
-    _ref2.total;
-  var cols = hooks.useCols(bodyConfigData, tableInstance);
-  var change = function change(key, rowData) {
-    if (onChange) {
-      return onChange(key, rowData);
-    }
-    rowOnChange(key, rowData);
-  };
+  var cols = hooks.useCols({
+    configData: bodyConfigData,
+    rowSelection: rowSelection,
+    table: tableInstance
+  });
   hooks.useSynchronousKeys({
     selectedRowKeys: selectedRowKeys,
     records: records,
     rowKey: rowKey
   });
+  var _selectedRowData$keys = _keysInstanceProperty(selectedRowData),
+    keys = _selectedRowData$keys === void 0 ? [] : _selectedRowData$keys,
+    selectAll = selectedRowData.selectAll;
+  var alwaysShowAlert = keys.length > 0 || selectAll;
   var className = index.useClassName("hw-table-body");
   return jsxRuntime.jsx("div", {
     style: tableStyle,
@@ -94,16 +101,26 @@ var Body = (function (_ref) {
         }
         return tableEmptyRender === null || tableEmptyRender === void 0 ? void 0 : tableEmptyRender(tableInstance);
       },
-      children: [jsxRuntime.jsx(ProTable, _objectSpread(_objectSpread({}, props), {}, {
-        columns: cols,
-        tableAlertRender: false,
-        search: false,
-        headerTitle: headerTitle ? /*#__PURE__*/React.cloneElement(headerTitle, {
+      children: [headerTitle && jsxRuntime.jsx(antd.Row, {
+        gutter: [0, 8],
+        style: contentStyle,
+        children: /*#__PURE__*/React.cloneElement(headerTitle, {
           selectedRowData: selectedRowData,
           allSelectChange: allSelectChange,
           rowOnChange: rowOnChange
-        }) : null,
-        options: {
+        })
+      }), alwaysShowAlert && jsxRuntime.jsx("div", {
+        style: contentStyle,
+        children: jsxRuntime.jsx(antd.Alert, {
+          message: jsxRuntime.jsx(AlertMsg.default, {
+            actionRender: actionRender
+          }),
+          type: "info"
+        })
+      }), jsxRuntime.jsx(ProTable, _objectSpread(_objectSpread({}, props), {}, {
+        columns: cols,
+        search: false,
+        options: options ? options : {
           reload: function reload() {
             tableInstance.table.reloadWithParams();
           }
@@ -111,10 +128,7 @@ var Body = (function (_ref) {
         tableStyle: {
           paddingBottom: 0
         },
-        rowSelection: rowSelection === false ? rowSelection : _objectSpread(_objectSpread({}, rowSelection), {}, {
-          selectedRowKeys: _keysInstanceProperty(selectedRowData),
-          onChange: change
-        }),
+        rowSelection: false,
         loading: loading,
         rowKey: rowKey,
         dataSource: records,

package/lib/HTableFooter/index.js

@@ -22,7 +22,7 @@ function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymb
 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 Text = antd.Typography.Text,
   Link = antd.Typography.Link;
-var Footer = (function (_ref) {
+var index = (function (_ref) {
   var actionRender = _ref.actionRender,
     footerRender = _ref.footerRender,
     footerStyle = _ref.footerStyle,
@@ -94,5 +94,5 @@ var Footer = (function (_ref) {
   });
 });
 
-exports.default = Footer;
+exports.default = index;
 // powered by h

package/lib/HTableHeader/index.js

@@ -17,6 +17,7 @@ var context = require('../context.js');
 var form = require('@hw-component/form');
 var React = require('react');
 var utils = require('./utils.js');
+var index = require('../hooks/index.js');
 
 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; }
@@ -39,12 +40,11 @@ var Header = (function (_ref) {
   var nConfigData = React.useMemo(function () {
     return utils.formConfigDataProvider(headerConfigData);
   }, [configData]);
+  var className = index.useClassName("hw-table-header");
   return jsxRuntime.jsx(antd.Card, {
-    style: _objectSpread({
-      borderRadius: 4
-    }, headerStyle),
+    style: _objectSpread({}, headerStyle),
     bordered: false,
-    className: "hw_table_header",
+    className: "hw_table_header ".concat(className),
     bodyStyle: {
       paddingBottom: 0
     },

package/lib/Table.d.ts

@@ -1,3 +1,3 @@
 import type { HTableProps } from "./modal";
-declare const _default: ({ request, configData, searchSpan, table, actionRender, footerRender, hideHeader, headerStyle, footerStyle, tableStyle, action, spaceSize, className, paginationStyle, footerBtnRender, ...props }: HTableProps) => JSX.Element;
+declare const _default: ({ request, configData, searchSpan, table, hideHeader, headerStyle, tableStyle, action, spaceSize, className, paginationStyle, rowKey, ...props }: HTableProps) => JSX.Element;
 export default _default;

package/lib/Table.js

@@ -16,14 +16,13 @@ var jsxRuntime = require('react/jsx-runtime');
 var index = require('./HTableHeader/index.js');
 var index$1 = require('./HTableBody/index.js');
 var useCurrentTable = require('./hooks/useCurrentTable.js');
-var index$2 = require('./HTableFooter/index.js');
 var useRowObj = require('./hooks/useRowObj.js');
 var context = require('./context.js');
 var antd = require('antd');
 var useReq = require('./hooks/useReq.js');
 var useDispatch = require('./hooks/useDispatch.js');
 
-var _excluded = ["request", "configData", "searchSpan", "table", "actionRender", "footerRender", "hideHeader", "headerStyle", "footerStyle", "tableStyle", "action", "spaceSize", "className", "paginationStyle", "footerBtnRender"];
+var _excluded = ["request", "configData", "searchSpan", "table", "hideHeader", "headerStyle", "tableStyle", "action", "spaceSize", "className", "paginationStyle", "rowKey"];
 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 Table = (function (_ref) {
@@ -31,22 +30,18 @@ var Table = (function (_ref) {
     configData = _ref.configData,
     searchSpan = _ref.searchSpan,
     table = _ref.table,
-    actionRender = _ref.actionRender,
-    footerRender = _ref.footerRender,
     hideHeader = _ref.hideHeader,
     _ref$headerStyle = _ref.headerStyle,
     headerStyle = _ref$headerStyle === void 0 ? {} : _ref$headerStyle,
-    _ref$footerStyle = _ref.footerStyle,
-    footerStyle = _ref$footerStyle === void 0 ? {} : _ref$footerStyle,
     _ref$tableStyle = _ref.tableStyle,
     tableStyle = _ref$tableStyle === void 0 ? {} : _ref$tableStyle,
     _ref$action = _ref.action,
-    action = _ref$action === void 0 ? {} : _ref$action,
-    _ref$spaceSize = _ref.spaceSize,
-    spaceSize = _ref$spaceSize === void 0 ? 15 : _ref$spaceSize;
+    action = _ref$action === void 0 ? {} : _ref$action;
+    _ref.spaceSize;
     _ref.className;
     var paginationStyle = _ref.paginationStyle,
-    footerBtnRender = _ref.footerBtnRender,
+    _ref$rowKey = _ref.rowKey,
+    rowKey = _ref$rowKey === void 0 ? "id" : _ref$rowKey,
     props = _objectWithoutProperties(_ref, _excluded);
   var _useReq = useReq.default({
       request: request
@@ -95,11 +90,12 @@ var Table = (function (_ref) {
         return run(value);
       },
       onPageChange: tableInstance.table.reloadWithParams,
-      setSelectedRowData: setSelectedRowData
+      setSelectedRowData: setSelectedRowData,
+      rowKey: rowKey
     },
     children: jsxRuntime.jsxs(antd.Space, {
       direction: "vertical",
-      size: spaceSize,
+      size: 0,
       style: {
         width: "100%"
       },
@@ -108,13 +104,9 @@ var Table = (function (_ref) {
         headerStyle: headerStyle
       }), jsxRuntime.jsx(index$1.default, _objectSpread({
         tableStyle: tableStyle,
-        paginationStyle: paginationStyle
-      }, props)), footerRender !== false && jsxRuntime.jsx(index$2.default, {
-        actionRender: actionRender,
-        footerRender: footerRender,
-        footerStyle: footerStyle,
-        footerBtnRender: footerBtnRender
-      })]
+        paginationStyle: paginationStyle,
+        rowKey: rowKey
+      }, props))]
     })
   });
 });

package/lib/context.d.ts

@@ -13,6 +13,7 @@ interface HContextModal extends Omit<HTableProps, "request"> {
     onFinish: (value: Record<string, any>) => Promise<any>;
     onPageChange: (value: Record<string, any>) => Promise<any>;
     setSelectedRowData: (row: RowObj) => void;
+    rowKey?: string;
 }
 export declare const HTableContext: React.Context<HContextModal | null>;
 export declare const useHTableContext: () => HContextModal;

package/lib/index.css

@@ -1,5 +1,6 @@
 .ant-hw-table-body {
-  border-radius: 4px;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
   background-color: #fff;
   overflow: hidden;
 }
@@ -11,3 +12,8 @@
   border-radius: 4px;
   background-color: #ffffff;
 }
+.ant-hw-table-header {
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  padding-bottom: 0px;
+}

package/lib/index.d.ts

@@ -2,7 +2,6 @@ import "./index.less";
 export { default as HTable } from "./Table";
 export { default as useHTable } from "./hooks/useHTable";
 export { default as HTableConfig } from "./TableConfig";
-export { default as TableCustomize } from "./TableCustomize";
 export { default as HTableBody } from "./HTableBody";
 export { default as HTableFooter } from "./HTableFooter";
 export { default as HTableHeader } from "./HTableHeader";

package/lib/index.js

@@ -3,7 +3,6 @@
 var Table = require('./Table.js');
 var useHTable = require('./hooks/useHTable.js');
 var TableConfig = require('./TableConfig.js');
-var TableCustomize = require('./TableCustomize.js');
 var index = require('./HTableBody/index.js');
 var index$1 = require('./HTableFooter/index.js');
 var index$2 = require('./HTableHeader/index.js');
@@ -16,7 +15,6 @@ var hooks = require('./ModalTable/hooks.js');
 exports.HTable = Table.default;
 exports.useHTable = useHTable.default;
 exports.HTableConfig = TableConfig.default;
-exports.TableCustomize = TableCustomize.default;
 exports.HTableBody = index.default;
 exports.HTableFooter = index$1.default;
 exports.HTableHeader = index$2.default;

package/lib/modal.d.ts

@@ -30,22 +30,22 @@ 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;
 export type actionFn = (...arg: any[]) => void;
-type FooterRenderFn = (tableInstance: HTableInstance, selectedRowData: RowObj, data?: ResultModal) => React.ReactNode;
-export interface HTableProps extends Omit<ProTableProps<any, any>, "request" | "dataSource"> {
+export interface RowSelectionOuter {
+    allPageCheck?: boolean;
+}
+export type HRowSelection = RowSelectionOuter & ProTableProps<any, any>["rowSelection"];
+export interface HTableProps extends Omit<ProTableProps<any, any>, "request" | "dataSource" | "rowKey" | "rowSelection"> {
     request?: (params: ParamsModal) => Promise<ResultModal>;
     configData: ConfigDataModal;
     searchSpan?: ColProps;
     table?: HTableInstance;
     actionRender?: ActionRenderFn;
-    footerBtnRender?: FooterBtnRenderFn;
     emptyRender?: (tableInstance: HTableInstance) => React.ReactNode;
     errorRender?: (tableInstance: HTableInstance, error: Error) => React.ReactNode;
-    footerRender?: FooterRenderFn | false;
     hideHeader?: boolean;
     action?: Record<string, actionFn>;
     headerStyle?: React.CSSProperties;
     tableStyle?: React.CSSProperties;
-    footerStyle?: React.CSSProperties;
     spaceSize?: number;
     className?: string;
     error?: Error;
@@ -53,6 +53,9 @@ export interface HTableProps extends Omit<ProTableProps<any, any>, "request" | "
     manual?: boolean;
     dataSource?: ResultModal;
     paginationStyle?: React.CSSProperties;
+    rowKey?: string;
+    allPageCheck?: boolean;
+    rowSelection?: HRowSelection;
 }
 export interface TableInstance {
     reload: (params?: ParamsModal) => Promise<any>;

package/package.json

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

package/src/components/HTableBody/AlertMsg.tsx

@@ -0,0 +1,37 @@
+import { Button, Row, Typography } from "antd";
+import React from "react";
+import { useHTableContext } from "../context";
+import type { ActionRenderFn } from "../modal";
+const { Text, Link } = Typography;
+interface IProps {
+  actionRender?: ActionRenderFn;
+}
+export default ({ actionRender }: IProps) => {
+  const { data, selectedRowData, rowOnChange, tableInstance } =
+    useHTableContext();
+  const { total = "0" } = data || {};
+  const { keys = [], selectAll } = selectedRowData;
+  const totalNum = Number.parseInt(total, 10);
+  const showTotalNum = Number.isNaN(totalNum) ? 0 : totalNum;
+  const num = selectAll ? showTotalNum : keys.length;
+
+  return (
+    <Row justify={"space-between"} align={"middle"}>
+      <Text>
+        已选择<Link>{num}</Link>条
+      </Text>
+      <div>
+        {actionRender?.(selectedRowData, tableInstance)}
+        <Button
+          type={"link"}
+          size={"small"}
+          onClick={() => {
+            rowOnChange([], []);
+          }}
+        >
+          取消选择
+        </Button>
+      </div>
+    </Row>
+  );
+};

package/src/components/HTableBody/RowSelection.tsx

@@ -0,0 +1,111 @@
+import { useHTableContext } from "../context";
+import { Checkbox, Dropdown, Menu } from "antd";
+import { useMemo } from "react";
+interface IRowSelectionTitleProps {
+  allPageCheck?: boolean;
+}
+export const RowSelectionTitle = ({
+  allPageCheck = true,
+}: IRowSelectionTitleProps) => {
+  const {
+    data,
+    selectedRowData,
+    rowOnChange,
+    allSelectChange,
+    rowKey = "id",
+  } = useHTableContext();
+  const { records = [] } = data || {};
+  const { keys, selectAll } = selectedRowData;
+  const allCheck = () => {
+    const setKeys = records.map((item) => {
+      return item[rowKey];
+    });
+    rowOnChange(setKeys, records);
+  };
+  const allCancel = () => {
+    rowOnChange([], []);
+  };
+  const checkChange = (e) => {
+    const checked = e.target.checked;
+    if (checked) {
+      allCheck();
+      return;
+    }
+    allCancel();
+  };
+  const change = ({ key }) => {
+    if (key === "check") {
+      allCheck();
+      return;
+    }
+    if (key === "cancel") {
+      allCancel();
+      return;
+    }
+    if (key === "checkAll") {
+      allSelectChange?.(true);
+      return;
+    }
+    allSelectChange?.(false);
+  };
+  const len = keys?.length;
+  const checked = len === records.length && len !== 0;
+  const configItems = useMemo(() => {
+    const fsArray = checked
+      ? {
+          label: "取消此页数据",
+          key: "cancel",
+        }
+      : {
+          label: "选择此页数据",
+          key: "check",
+        };
+    const enArray = selectAll
+      ? {
+          label: "取消全部数据",
+          key: "cancelAll",
+        }
+      : {
+          label: "选择全部数据",
+          key: "checkAll",
+        };
+    return [fsArray, enArray];
+  }, [checked, selectAll]);
+
+  const menu = ()=>{
+    const MenuEle=(Menu as any);
+    return <MenuEle onClick={change} items={configItems}/>;
+  }
+  if (allPageCheck) {
+    return (
+      <Dropdown overlay={menu} arrow placement={"bottom"}>
+        <Checkbox checked={checked} onChange={checkChange} />
+      </Dropdown>
+    );
+  }
+  return <Checkbox checked={checked} onChange={checkChange} />;
+};
+
+interface RowSelectionBoxProps {
+  data: any;
+}
+export const RowSelectionBox = ({ data }: RowSelectionBoxProps) => {
+  const { selectedRowData, rowOnChange, rowKey = "id" } = useHTableContext();
+  const { rowData = [], keys = [] } = selectedRowData;
+  const key = data[rowKey];
+  const check = (e) => {
+    const checked = e.target.checked;
+    const newKeys = [...keys];
+    const newRowData = [...rowData];
+    if (checked) {
+      newKeys.push(key);
+      newRowData.push(data);
+      rowOnChange(newKeys, newRowData);
+      return;
+    }
+    const index = newKeys.indexOf(key);
+    newKeys.splice(index, 1);
+    newRowData.splice(index, 1);
+  };
+  return <Checkbox checked={keys.indexOf(key) !== -1} onChange={check} />;
+};

package/src/components/HTableBody/{hooks.ts → hooks.tsx}

@@ -1,12 +1,27 @@
-import type { ConfigDataModal, HTableInstance } from "../modal";
-import type React from "react";
+import type { HTableInstance, HTableProps } from "../modal";
+import React from "react";
 import { useEffect, useMemo } from "react";
 import { useHTableContext } from "../context";
 import type { GetRowKey } from "rc-table/lib/interface";
-
-export const useCols = (cols: ConfigDataModal, table: HTableInstance) => {
+import { RowSelectionBox, RowSelectionTitle } from "./RowSelection";
+const rowSelectionCol = (allPageCheck?: boolean) => {
+  return {
+    title: <RowSelectionTitle allPageCheck={allPageCheck} />,
+    dataIndex: "rowSelectionTitle",
+    width: 32,
+    render: (dom, data) => {
+      return <RowSelectionBox data={data} />;
+    },
+  };
+};
+export const useCols = ({ configData, rowSelection, table }: HTableProps) => {
   return useMemo(() => {
-    return cols.map((item) => {
+    const colsArray = [...configData];
+    if (rowSelection !== false) {
+      const { allPageCheck } = rowSelection || {};
+      colsArray.splice(0, 0, rowSelectionCol(allPageCheck));
+    }
+    return colsArray.map((item) => {
       const { render } = item;
       return {
         ...item,
@@ -14,11 +29,11 @@ export const useCols = (cols: ConfigDataModal, table: HTableInstance) => {
           if (!render) {
             return dom;
           }
-          return render(dom, data, index, table);
+          return render(dom, data, index, table as HTableInstance);
         },
       };
     });
-  }, [cols, table]);
+  }, [configData, table]);
 };
 interface FilterKeysModal {
   selectedRowKeys?: React.Key[];