@hw-component/table 0.0.9-beta-v2 → 0.0.9-beta-v6

package/es/HTableBody/index.js

@@ -14,13 +14,13 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import ProTable from '@ant-design/pro-table';
 import { useSize, useCols, useSynchronousKeys } from './hooks.js';
 import { useHTableContext } from '../context.js';
-import React from 'react';
-import { Row, Alert, ConfigProvider, Empty } from 'antd';
+import { Alert, ConfigProvider, Empty } from 'antd';
 import { useHTableConfigContext } from '../TableConfig.js';
 import HTablePagination from '../HTablePagination/index.js';
 import { useClassName } from '../hooks/index.js';
 import AlertMsg from './AlertMsg.js';
 import Options from './Options/index.js';
+import HeaderTitle from './HeaderTitle/index.js';
 
 var _excluded = ["configData", "pagination", "onPageChange", "rowSelection", "rowKey", "emptyRender", "errorRender", "tableStyle", "paginationStyle", "headerTitle", "options", "actionRender", "affixProps", "goTop", "size", "optionsRender"];
 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; }
@@ -64,11 +64,11 @@ var Body = (function (_ref) {
     tableInstance = _useHTableContext.tableInstance,
     contextConfigData = _useHTableContext.configData,
     data = _useHTableContext.data,
-    selectedRowData = _useHTableContext.selectedRowData,
-    rowOnChange = _useHTableContext.rowOnChange,
-    error = _useHTableContext.error,
-    loading = _useHTableContext.loading,
-    allSelectChange = _useHTableContext.allSelectChange;
+    selectedRowData = _useHTableContext.selectedRowData;
+    _useHTableContext.rowOnChange;
+    var error = _useHTableContext.error,
+    loading = _useHTableContext.loading;
+    _useHTableContext.allSelectChange;
   var _useHTableConfigConte = useHTableConfigContext({
       emptyRender: emptyRender,
       errorRender: errorRender
@@ -108,21 +108,13 @@ var Body = (function (_ref) {
   var _selectedRowData$keys = _keysInstanceProperty(selectedRowData),
     keys = _selectedRowData$keys === void 0 ? [] : _selectedRowData$keys,
     selectAll = selectedRowData.selectAll;
+  var defaultOptionsNode = optionsRender ? optionsRender(optionsNode) : optionsNode;
   var alwaysShowAlert = keys.length > 0 || selectAll || configAlwaysShowAlert;
   var className = useClassName("hw-table-body");
   return jsxs("div", {
     style: tableStyle,
     className: "hw_table_body  ".concat(className),
-    children: [headerTitle && jsx(Row, {
-      gutter: [0, 8],
-      style: contentStyle,
-      children: /*#__PURE__*/React.cloneElement(headerTitle, {
-        selectedRowData: selectedRowData,
-        allSelectChange: allSelectChange,
-        rowOnChange: rowOnChange,
-        tableInstance: tableInstance
-      })
-    }), alwaysShowAlert && jsx("div", {
+    children: [alwaysShowAlert && jsx("div", {
       style: contentStyle,
       children: jsx(Alert, {
         message: jsx(AlertMsg, {
@@ -130,7 +122,11 @@ var Body = (function (_ref) {
         }),
         type: "info"
       })
-    }), optionsRender ? optionsRender(optionsNode) : optionsNode, jsxs(ConfigProvider, {
+    }), jsx(HeaderTitle, {
+      headerTitle: headerTitle,
+      contentStyle: contentStyle,
+      rNode: defaultOptionsNode
+    }), jsxs(ConfigProvider, {
       renderEmpty: function renderEmpty() {
         if (error) {
           return tableErrorRender === null || tableErrorRender === void 0 ? void 0 : tableErrorRender(tableInstance, error);
@@ -141,6 +137,9 @@ var Body = (function (_ref) {
         columns: cols,
         size: cuSize,
         search: false,
+        onChange: function onChange(pagination, filters, sorter) {
+          console.log(filters, sorter);
+        },
         options: false,
         tableStyle: {
           paddingBottom: 0

package/es/HTableHeader/hooks.d.ts

@@ -1,3 +1,3 @@
 import type { IHeaderProps } from "./modal";
 import type { HItemProps } from "@hw-component/form/es/Form/modal";
-export declare const useHideMoreTitle: ({ searchSpan, configData }: IHeaderProps) => HItemProps[];
+export declare const useHideMoreTitle: ({ searchSpan, configData, table }: IHeaderProps) => HItemProps[];

package/es/HTableHeader/hooks.js

@@ -83,7 +83,7 @@ var getCuSpanMaxNum = function getCuSpanMaxNum() {
   var cuSpan = searchSpan[cuKey] || searchSpan.span;
   return 24 / cuSpan;
 };
-var formConfigDataItemProvider = function formConfigDataItemProvider(_ref) {
+var formConfigDataItemProvider = function formConfigDataItemProvider(_ref, table) {
   var _ref$colon = _ref.colon,
     colon = _ref$colon === void 0 ? false : _ref$colon,
     searchType = _ref.searchType,
@@ -108,12 +108,18 @@ var formConfigDataItemProvider = function formConfigDataItemProvider(_ref) {
     colon: colon,
     type: searchType,
     name: name || dataIndex,
-    render: searchRender
+    render: function render(item, node, form) {
+      if (searchRender) {
+        return searchRender(item, node, form, table);
+      }
+      return node;
+    }
   });
 };
 var mkNewConfig = function mkNewConfig(_ref2) {
   var _ref2$configData = _ref2.configData,
-    configData = _ref2$configData === void 0 ? [] : _ref2$configData;
+    configData = _ref2$configData === void 0 ? [] : _ref2$configData,
+    table = _ref2.table;
   var subConfigData;
   var realConfigData = [];
   _forEachInstanceProperty(configData).call(configData, function (value) {
@@ -123,10 +129,10 @@ var mkNewConfig = function mkNewConfig(_ref2) {
       return false;
     }
     if (searchType === "submit") {
-      subConfigData = formConfigDataItemProvider(value);
+      subConfigData = formConfigDataItemProvider(value, table);
       return false;
     }
-    realConfigData.push(formConfigDataItemProvider(value));
+    realConfigData.push(formConfigDataItemProvider(value, table));
   });
   return {
     realConfigData: realConfigData,
@@ -159,7 +165,8 @@ var filterHideFormItem = function filterHideFormItem(configData, className, sear
 var useHideMoreTitle = function useHideMoreTitle(_ref3) {
   var _context2;
   var searchSpan = _ref3.searchSpan,
-    configData = _ref3.configData;
+    configData = _ref3.configData,
+    table = _ref3.table;
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     formConfigData = _useState2[0],
@@ -176,7 +183,8 @@ var useHideMoreTitle = function useHideMoreTitle(_ref3) {
     var _context;
     var _mkNewConfig = mkNewConfig({
         searchSpan: searchSpan,
-        configData: configData
+        configData: configData,
+        table: table
       }),
       realConfigData = _mkNewConfig.realConfigData,
       subConfigData = _mkNewConfig.subConfigData;

package/es/HTableHeader/index.js

@@ -40,7 +40,8 @@ var Header = (function (_ref) {
   var subOnFinish = onFinish || contextOnFinish;
   var nConfigData = useHideMoreTitle({
     searchSpan: searchSpan,
-    configData: headerConfigData
+    configData: headerConfigData,
+    table: tableInstance
   });
   var className = useClassName("hw-table-header");
   return jsx(Card, {

package/es/HTableHeader/modal.d.ts

@@ -1,12 +1,14 @@
 import type { ConfigDataModal, ConfigItemModal } from "../modal";
 import type { ColProps } from "antd";
 import type React from "react";
+import { HTableInstance } from "../modal";
 export interface IHeaderProps {
     configData?: ConfigDataModal;
     onFinish?: (value: Record<string, any>) => Promise<any>;
     searchSpan?: ColProps;
     loading?: boolean;
     headerStyle?: React.CSSProperties;
+    table?: HTableInstance;
 }
 export interface FormConfigDataItemProviderModal extends ConfigItemModal {
     className?: string;

package/es/index.css

@@ -41,9 +41,6 @@
 .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;
 }
@@ -84,3 +81,15 @@
 .ant-hw-table-pointer:hover {
   color: #1890ff;
 }
+.ant-hw-table-header-title-box {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  margin-right: 12px;
+}

package/es/modal.d.ts

@@ -1,7 +1,7 @@
 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 } from "antd";
+import type { ColProps, FormInstance } from "antd";
 import type React from "react";
 import type { ModalProps } from "antd";
 import type { TableProps } from "antd/lib/table";
@@ -25,7 +25,7 @@ interface HColumns extends Omit<ProColumns, "render" | "title"> {
     render?: (dom: React.ReactNode, data: any, index: number, tableInstance: HTableInstance) => React.ReactNode;
     showSearch?: boolean;
     searchType?: HItemProps["type"];
-    searchRender?: HItemProps["render"];
+    searchRender?: (item: HItemProps, node: React.ReactNode, form: FormInstance, tableInstance: HTableInstance) => React.ReactNode;
     rowSelectionTitle?: boolean;
     title?: string | React.ReactNode;
 }

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

@@ -0,0 +1,9 @@
+import { HTableBodyProps } from "../index";
+import React from "react";
+interface IProps {
+    headerTitle: HTableBodyProps["headerTitle"];
+    contentStyle?: React.CSSProperties;
+    rNode?: React.ReactNode;
+}
+declare const _default: ({ headerTitle, contentStyle, rNode }: IProps) => JSX.Element | null;
+export default _default;

package/lib/HTableBody/HeaderTitle/index.js

@@ -0,0 +1,41 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var antd = require('antd');
+var React = require('react');
+var context = require('../../context.js');
+var index = require('../../hooks/index.js');
+
+var HeaderTitle = (function (_ref) {
+  var headerTitle = _ref.headerTitle,
+    contentStyle = _ref.contentStyle,
+    rNode = _ref.rNode;
+  var _useHTableContext = context.useHTableContext(),
+    tableInstance = _useHTableContext.tableInstance,
+    selectedRowData = _useHTableContext.selectedRowData,
+    rowOnChange = _useHTableContext.rowOnChange,
+    allSelectChange = _useHTableContext.allSelectChange;
+  var headerBox = index.useClassName('hw-table-header-title-box');
+  if (!headerTitle && !rNode) {
+    return null;
+  }
+  return jsxRuntime.jsxs(antd.Row, {
+    justify: "space-between",
+    align: "middle",
+    style: contentStyle,
+    children: [jsxRuntime.jsx("div", {
+      className: headerBox,
+      children: headerTitle && /*#__PURE__*/React.cloneElement(headerTitle, {
+        selectedRowData: selectedRowData,
+        allSelectChange: allSelectChange,
+        rowOnChange: rowOnChange,
+        tableInstance: tableInstance
+      })
+    }), rNode && rNode]
+  });
+});
+
+exports.default = HeaderTitle;
+// powered by h

package/lib/HTableBody/Options/index.js

@@ -23,7 +23,6 @@ var Options = (function (_ref) {
     setSizeChange = _ref.setSizeChange,
     columns = _ref.columns,
     onChange = _ref.onChange;
-  var className = index.useClassName("hw-table-body-option");
   var pointer = index.useClassName(["hw-table-pointer", "hw-table-body-option-icon"]);
   var ref = React.useRef(null);
   var _useState = React.useState([]),
@@ -72,7 +71,6 @@ var Options = (function (_ref) {
   };
   return jsxRuntime.jsx(antd.Row, {
     justify: "end",
-    className: className,
     ref: ref,
     children: jsxRuntime.jsxs(antd.Space, {
       size: 20,

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

@@ -55,7 +55,7 @@ export declare const getItemValue: (data: ConfigItemModal) => {
     render?: ((dom: React.ReactNode, data: any, index: number, tableInstance: import("../../modal").HTableInstance) => React.ReactNode) | undefined;
     showSearch?: boolean | undefined;
     searchType?: string | undefined;
-    searchRender?: ((props: import("@hw-component/form/es/Form/modal").HItemProps, node: React.ReactNode, form: import("antd").FormInstance<any>) => React.ReactNode) | undefined;
+    searchRender?: ((item: import("@hw-component/form/es/Form/modal").HItemProps, node: React.ReactNode, form: import("antd").FormInstance<any>, tableInstance: import("../../modal").HTableInstance) => React.ReactNode) | undefined;
     rowSelectionTitle?: boolean | undefined;
     index?: number | undefined;
     filters?: boolean | import("antd/lib/table/interface").ColumnFilterItem[] | undefined;

package/lib/HTableBody/index.js

@@ -17,13 +17,13 @@ var jsxRuntime = require('react/jsx-runtime');
 var ProTable = require('@ant-design/pro-table');
 var hooks = require('./hooks.js');
 var context = require('../context.js');
-var React = require('react');
 var antd = require('antd');
 var TableConfig = require('../TableConfig.js');
-var index$2 = require('../HTablePagination/index.js');
+var index$3 = require('../HTablePagination/index.js');
 var index$1 = require('../hooks/index.js');
 var AlertMsg = require('./AlertMsg.js');
 var index = require('./Options/index.js');
+var index$2 = require('./HeaderTitle/index.js');
 
 var _excluded = ["configData", "pagination", "onPageChange", "rowSelection", "rowKey", "emptyRender", "errorRender", "tableStyle", "paginationStyle", "headerTitle", "options", "actionRender", "affixProps", "goTop", "size", "optionsRender"];
 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; }
@@ -67,11 +67,11 @@ var Body = (function (_ref) {
     tableInstance = _useHTableContext.tableInstance,
     contextConfigData = _useHTableContext.configData,
     data = _useHTableContext.data,
-    selectedRowData = _useHTableContext.selectedRowData,
-    rowOnChange = _useHTableContext.rowOnChange,
-    error = _useHTableContext.error,
-    loading = _useHTableContext.loading,
-    allSelectChange = _useHTableContext.allSelectChange;
+    selectedRowData = _useHTableContext.selectedRowData;
+    _useHTableContext.rowOnChange;
+    var error = _useHTableContext.error,
+    loading = _useHTableContext.loading;
+    _useHTableContext.allSelectChange;
   var _useHTableConfigConte = TableConfig.useHTableConfigContext({
       emptyRender: emptyRender,
       errorRender: errorRender
@@ -111,21 +111,13 @@ var Body = (function (_ref) {
   var _selectedRowData$keys = _keysInstanceProperty(selectedRowData),
     keys = _selectedRowData$keys === void 0 ? [] : _selectedRowData$keys,
     selectAll = selectedRowData.selectAll;
+  var defaultOptionsNode = optionsRender ? optionsRender(optionsNode) : optionsNode;
   var alwaysShowAlert = keys.length > 0 || selectAll || configAlwaysShowAlert;
   var className = index$1.useClassName("hw-table-body");
   return jsxRuntime.jsxs("div", {
     style: tableStyle,
     className: "hw_table_body  ".concat(className),
-    children: [headerTitle && jsxRuntime.jsx(antd.Row, {
-      gutter: [0, 8],
-      style: contentStyle,
-      children: /*#__PURE__*/React.cloneElement(headerTitle, {
-        selectedRowData: selectedRowData,
-        allSelectChange: allSelectChange,
-        rowOnChange: rowOnChange,
-        tableInstance: tableInstance
-      })
-    }), alwaysShowAlert && jsxRuntime.jsx("div", {
+    children: [alwaysShowAlert && jsxRuntime.jsx("div", {
       style: contentStyle,
       children: jsxRuntime.jsx(antd.Alert, {
         message: jsxRuntime.jsx(AlertMsg.default, {
@@ -133,7 +125,11 @@ var Body = (function (_ref) {
         }),
         type: "info"
       })
-    }), optionsRender ? optionsRender(optionsNode) : optionsNode, jsxRuntime.jsxs(antd.ConfigProvider, {
+    }), jsxRuntime.jsx(index$2.default, {
+      headerTitle: headerTitle,
+      contentStyle: contentStyle,
+      rNode: defaultOptionsNode
+    }), jsxRuntime.jsxs(antd.ConfigProvider, {
       renderEmpty: function renderEmpty() {
         if (error) {
           return tableErrorRender === null || tableErrorRender === void 0 ? void 0 : tableErrorRender(tableInstance, error);
@@ -144,6 +140,9 @@ var Body = (function (_ref) {
         columns: cols,
         size: cuSize,
         search: false,
+        onChange: function onChange(pagination, filters, sorter) {
+          console.log(filters, sorter);
+        },
         options: false,
         tableStyle: {
           paddingBottom: 0
@@ -153,7 +152,7 @@ var Body = (function (_ref) {
         rowKey: rowKey,
         dataSource: records,
         pagination: false
-      })), pagination !== false && jsxRuntime.jsx(index$2.default, _objectSpread({
+      })), pagination !== false && jsxRuntime.jsx(index$3.default, _objectSpread({
         onPageChange: onPageChange,
         paginationStyle: paginationStyle,
         affixProps: affixProps,

package/lib/HTableHeader/hooks.d.ts

@@ -1,3 +1,3 @@
 import type { IHeaderProps } from "./modal";
 import type { HItemProps } from "@hw-component/form/es/Form/modal";
-export declare const useHideMoreTitle: ({ searchSpan, configData }: IHeaderProps) => HItemProps[];
+export declare const useHideMoreTitle: ({ searchSpan, configData, table }: IHeaderProps) => HItemProps[];

package/lib/HTableHeader/hooks.js

@@ -84,7 +84,7 @@ var getCuSpanMaxNum = function getCuSpanMaxNum() {
   var cuSpan = searchSpan[cuKey] || searchSpan.span;
   return 24 / cuSpan;
 };
-var formConfigDataItemProvider = function formConfigDataItemProvider(_ref) {
+var formConfigDataItemProvider = function formConfigDataItemProvider(_ref, table) {
   var _ref$colon = _ref.colon,
     colon = _ref$colon === void 0 ? false : _ref$colon,
     searchType = _ref.searchType,
@@ -109,12 +109,18 @@ var formConfigDataItemProvider = function formConfigDataItemProvider(_ref) {
     colon: colon,
     type: searchType,
     name: name || dataIndex,
-    render: searchRender
+    render: function render(item, node, form) {
+      if (searchRender) {
+        return searchRender(item, node, form, table);
+      }
+      return node;
+    }
   });
 };
 var mkNewConfig = function mkNewConfig(_ref2) {
   var _ref2$configData = _ref2.configData,
-    configData = _ref2$configData === void 0 ? [] : _ref2$configData;
+    configData = _ref2$configData === void 0 ? [] : _ref2$configData,
+    table = _ref2.table;
   var subConfigData;
   var realConfigData = [];
   _forEachInstanceProperty(configData).call(configData, function (value) {
@@ -124,10 +130,10 @@ var mkNewConfig = function mkNewConfig(_ref2) {
       return false;
     }
     if (searchType === "submit") {
-      subConfigData = formConfigDataItemProvider(value);
+      subConfigData = formConfigDataItemProvider(value, table);
       return false;
     }
-    realConfigData.push(formConfigDataItemProvider(value));
+    realConfigData.push(formConfigDataItemProvider(value, table));
   });
   return {
     realConfigData: realConfigData,
@@ -160,7 +166,8 @@ var filterHideFormItem = function filterHideFormItem(configData, className, sear
 var useHideMoreTitle = function useHideMoreTitle(_ref3) {
   var _context2;
   var searchSpan = _ref3.searchSpan,
-    configData = _ref3.configData;
+    configData = _ref3.configData,
+    table = _ref3.table;
   var _useState = React.useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     formConfigData = _useState2[0],
@@ -177,7 +184,8 @@ var useHideMoreTitle = function useHideMoreTitle(_ref3) {
     var _context;
     var _mkNewConfig = mkNewConfig({
         searchSpan: searchSpan,
-        configData: configData
+        configData: configData,
+        table: table
       }),
       realConfigData = _mkNewConfig.realConfigData,
       subConfigData = _mkNewConfig.subConfigData;

package/lib/HTableHeader/index.js

@@ -43,7 +43,8 @@ var Header = (function (_ref) {
   var subOnFinish = onFinish || contextOnFinish;
   var nConfigData = hooks.useHideMoreTitle({
     searchSpan: searchSpan,
-    configData: headerConfigData
+    configData: headerConfigData,
+    table: tableInstance
   });
   var className = index.useClassName("hw-table-header");
   return jsxRuntime.jsx(antd.Card, {

package/lib/HTableHeader/modal.d.ts

@@ -1,12 +1,14 @@
 import type { ConfigDataModal, ConfigItemModal } from "../modal";
 import type { ColProps } from "antd";
 import type React from "react";
+import { HTableInstance } from "../modal";
 export interface IHeaderProps {
     configData?: ConfigDataModal;
     onFinish?: (value: Record<string, any>) => Promise<any>;
     searchSpan?: ColProps;
     loading?: boolean;
     headerStyle?: React.CSSProperties;
+    table?: HTableInstance;
 }
 export interface FormConfigDataItemProviderModal extends ConfigItemModal {
     className?: string;

package/lib/index.css

@@ -41,9 +41,6 @@
 .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;
 }
@@ -84,3 +81,15 @@
 .ant-hw-table-pointer:hover {
   color: #1890ff;
 }
+.ant-hw-table-header-title-box {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+      -ms-flex: 1;
+          flex: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  margin-right: 12px;
+}

package/lib/modal.d.ts

@@ -1,7 +1,7 @@
 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 } from "antd";
+import type { ColProps, FormInstance } from "antd";
 import type React from "react";
 import type { ModalProps } from "antd";
 import type { TableProps } from "antd/lib/table";
@@ -25,7 +25,7 @@ interface HColumns extends Omit<ProColumns, "render" | "title"> {
     render?: (dom: React.ReactNode, data: any, index: number, tableInstance: HTableInstance) => React.ReactNode;
     showSearch?: boolean;
     searchType?: HItemProps["type"];
-    searchRender?: HItemProps["render"];
+    searchRender?: (item: HItemProps, node: React.ReactNode, form: FormInstance, tableInstance: HTableInstance) => React.ReactNode;
     rowSelectionTitle?: boolean;
     title?: string | React.ReactNode;
 }

package/package.json

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

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

@@ -0,0 +1,31 @@
+import {Row, Space} from "antd";
+import {HTableBodyProps} from "../index";
+import React, {DetailedReactHTMLElement} from "react";
+import { useHTableContext } from "../../context";
+import {useClassName} from "../../hooks";
+interface IProps {
+    headerTitle:HTableBodyProps["headerTitle"];
+    contentStyle?:React.CSSProperties;
+    rNode?:React.ReactNode;
+}
+export default ({headerTitle,contentStyle,rNode}:IProps)=>{
+    const {
+        tableInstance,
+        selectedRowData,
+        rowOnChange,
+        allSelectChange,
+    } = useHTableContext();
+    const headerBox=useClassName('hw-table-header-title-box');
+    if (!headerTitle&&!rNode){
+        return null
+    }
+    return <Row justify={"space-between"} align={"middle"} style={contentStyle}>
+        <div className={headerBox}>
+            {headerTitle && React.cloneElement(
+                headerTitle as DetailedReactHTMLElement<any, any>,
+                { selectedRowData, allSelectChange, rowOnChange, tableInstance }
+            )}
+        </div>
+        {rNode&&rNode}
+    </Row>
+}

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

@@ -20,7 +20,6 @@ export default ({
   columns,
   onChange,
 }: IProps) => {
-  const className = useClassName("hw-table-body-option");
   const pointer = useClassName([
     "hw-table-pointer",
     "hw-table-body-option-icon",
@@ -59,7 +58,7 @@ export default ({
     );
   };
   return (
-    <Row justify={"end"} className={className} ref={ref}>
+    <Row justify={"end"} ref={ref}>
       <Space size={20}>
         {reload && (
           <Tooltip title="刷新">

package/src/components/HTableBody/index.tsx

@@ -14,6 +14,7 @@ import AlertMsg from "./AlertMsg";
 import type { HRowSelection } from "../modal";
 import type { AffixProps } from "antd/lib/affix";
 import Options from "./Options";
+import HeaderTitle from './HeaderTitle';
 export interface HTableBodyProps
   extends Omit<ProTableProps<any, any>, "dataSource" | "rowSelection"> {
   configData?: ConfigDataModal;
@@ -59,7 +60,8 @@ export default ({
   ...props
 }: HTableBodyProps) => {
   // @ts-ignore
-  const { selectedRowKeys ,alwaysShowAlert:configAlwaysShowAlert} = rowSelection || {};
+  const { selectedRowKeys, alwaysShowAlert: configAlwaysShowAlert } =
+    rowSelection || {};
   const {
     tableInstance,
     configData: contextConfigData,
@@ -96,19 +98,11 @@ export default ({
     />
   );
   const { keys = [], selectAll } = selectedRowData;
-
-  const alwaysShowAlert = keys.length > 0 || selectAll||configAlwaysShowAlert;
+  const defaultOptionsNode=optionsRender ? optionsRender(optionsNode) : optionsNode;
+  const alwaysShowAlert = keys.length > 0 || selectAll || configAlwaysShowAlert;
   const className = useClassName("hw-table-body");
   return (
     <div style={tableStyle} className={`hw_table_body  ${className}`}>
-      {headerTitle && (
-        <Row gutter={[0, 8]} style={contentStyle}>
-          {React.cloneElement(
-            headerTitle as DetailedReactHTMLElement<any, any>,
-            { selectedRowData, allSelectChange, rowOnChange, tableInstance }
-          )}
-        </Row>
-      )}
       {alwaysShowAlert && (
         <div style={contentStyle}>
           <Alert
@@ -117,7 +111,7 @@ export default ({
           />
         </div>
       )}
-      {optionsRender ? optionsRender(optionsNode) : optionsNode}
+      <HeaderTitle headerTitle={headerTitle} contentStyle={contentStyle} rNode={defaultOptionsNode}/>
       <ConfigProvider
         renderEmpty={() => {
           if (error) {
@@ -131,6 +125,9 @@ export default ({
           columns={cols as any}
           size={cuSize}
           search={false}
+          onChange={(pagination, filters, sorter)=>{
+            console.log(filters,sorter)
+          }}
           options={false}
           tableStyle={{
             paddingBottom: 0,