feat: 🎸 support custome table header/footer

Author: charlzyx

src/pro-array-table/pro.tsx

@@ -62,6 +62,46 @@ import {
 } from "./mixin.pro";
 import { IChangeData, ProArrayTableProps } from "./types";
 
+export const DefaultHeaderRender = (props: {
+  title?: React.ReactNode;
+  selection?: React.ReactNode;
+  toolbars?: React.ReactNode;
+  addition?: React.ReactNode;
+  settings?: React.ReactNode;
+  extra?: React.ReactNode;
+}) => {
+  return (
+    <Flex marginBottom={"8px"} marginTop={"8px"}>
+      {props.title || props.selection ? (
+        <Flex start>
+          {props.title}
+          {props.selection}
+        </Flex>
+      ) : null}
+      {props.toolbars ? <Flex center>{props.toolbars}</Flex> : null}
+      {props.addition || props.extra || props.settings ? (
+        <Flex end>
+          {props.addition}
+          {props.extra}
+          {props.settings}
+        </Flex>
+      ) : null}
+    </Flex>
+  );
+};
+
+export const DefaultFooterRender = (props: {
+  footer?: React.ReactNode;
+  pagination?: React.ReactNode;
+}) => {
+  return (
+    <Flex between marginTop={`${8}px`}>
+      {props.footer}
+      {props.pagination}
+    </Flex>
+  );
+};
+
 const ArrayTableProInside: ReactFC<ProArrayTableProps> = observer(
   ({ onAdd, onRemove, onCopy, onMoveDown, onMoveUp, onSortEnd, ...props }) => {
     const wrapperRef = useRef<HTMLDivElement>(null);
@@ -177,63 +217,58 @@ const ArrayTableProInside: ReactFC<ProArrayTableProps> = observer(
       </div>
     ) : null;
 
-    const showHeader =
-      props.title ||
-      props.rowSelection ||
-      toolbar ||
-      addition ||
-      props.settings !== false;
+    // const showHeader =
+    //   props.title ||
+    //   props.rowSelection ||
+    //   toolbar ||
+    //   addition ||
+    //   props.settings !== false;
 
-    const _header = !showHeader ? null : (
-      <Flex {...props.headerFlex} marginBottom={"8px"} marginTop={"8px"}>
-          {props.title ? (
+    const HeaderRender = props.headerRender || DefaultHeaderRender;
+    const _header = (
+      <HeaderRender
+        title={
+          props.title ? (
             typeof props.title === "function" ? (
               props.title(dataSource)
             ) : (
               <Typography.Title level={5} style={{ flex: 1 }}>
                 {props.title}
               </Typography.Title>
             )
-          ) : null}
-          {rowSelection?.showPro === "top" ? (
+          ) : null
+        }
+        selection={
+          rowSelection?.showPro ? (
             <RowSelectionPro ds={dataSlice} rowKey={rowKey}></RowSelectionPro>
-          ) : null}
-          {toolbar}
-          {addition}
-          {!props.extra && props.settings === false ? null : (
-            <Space size="small">
-              {props.extra}
-              {props.settings !== false ? (
-                <ProSettings columns={proColumns}></ProSettings>
-              ) : null}
-            </Space>
-          )}
-      </Flex>
+          ) : null
+        }
+        toolbars={toolbar}
+        addition={addition}
+        extra={props.extra}
+        settings={
+          props.settings !== false ? (
+            <ProSettings columns={proColumns}></ProSettings>
+          ) : null
+        }
+      ></HeaderRender>
     );
 
-    const showFooter = props.footer || footer || pagination;
-    const _footer = !showFooter ? null : (
-      <Flex between marginTop={`${6}px`}>
-        <Flex
-          start
-          hidden={!props.footer && rowSelection?.showPro !== "bottom"}
-        >
-          {props.footer ? (
+    const FooterRender = props.footerRender || DefaultFooterRender;
+
+    const _footer = (
+      <FooterRender
+        footer={
+          props.footer ? (
             typeof props.footer === "function" ? (
               props.footer(dataSource)
             ) : (
               <Typography.Title level={5}>{props.footer}</Typography.Title>
             )
-          ) : null}
-          {rowSelection?.showPro === "bottom" ? (
-            <RowSelectionPro ds={dataSlice} rowKey={rowKey}></RowSelectionPro>
-          ) : null}
-        </Flex>
-        <Flex end>
-          {footer}
-          {pagination}
-        </Flex>
-      </Flex>
+          ) : null
+        }
+        pagination={pagination}
+      ></FooterRender>
     );
 
     const header = useResizeHeader({
@@ -349,8 +384,7 @@ const ArrayTableProInside: ReactFC<ProArrayTableProps> = observer(
   },
 );
 
-const useTableExpandable = () => {
-};
+const useTableExpandable = () => {};
 
 const useTableRowSelection = () => {
   return useContext(TableRowSelectionContext);

src/pro-array-table/types.tsx

@@ -4,7 +4,8 @@ import type { Table } from "../adaptor";
 
 type TableProps<T> = React.ComponentProps<typeof Table>;
 
-import { Flex } from './mixin.pro'
+import { Flex } from "./mixin.pro";
+import { DefaultFooterRender, DefaultHeaderRender } from "./pro";
 export type TableChangeParams = Parameters<
   Required<TableProps<any>>["onChange"]
 >;
@@ -56,14 +57,46 @@ export interface IProArrayTableBaseMixins {
   onMoveDown?: (index: number, arrayField: ArrayField) => void | Promise<void>;
 }
 
+{
+  /* <Flex {...props.headerFlex} marginBottom={"8px"} marginTop={"8px"}>
+          {props.title ? (
+            typeof props.title === "function" ? (
+              props.title(dataSource)
+            ) : (
+              <Typography.Title level={5} style={{ flex: 1 }}>
+                {props.title}
+              </Typography.Title>
+            )
+          ) : null}
+          {rowSelection?.showPro === "top" ? (
+            <RowSelectionPro ds={dataSlice} rowKey={rowKey}></RowSelectionPro>
+          ) : null}
+          {toolbar}
+          {addition}
+          {!props.extra && props.settings === false ? null : (
+            <Space size="small">
+              {props.extra}
+              {props.settings !== false ? (
+                <ProSettings columns={proColumns}></ProSettings>
+              ) : null}
+            </Space>
+          )}
+      </Flex>
+type HeaderRender = (props: {
+
+}) => React.ReactNode */
+}
+
 export type ProArrayTableProps = Omit<TableProps<any>, "title"> &
   IProArrayTableBaseMixins & {
-    headerFlex?: React.ComponentProps<typeof Flex>,
+    headerRender?: typeof DefaultHeaderRender;
+    footerRender?: typeof DefaultFooterRender;
+    // headerFlex?: React.ComponentProps<typeof Flex>;
     title: string | TableProps<any>["title"];
     footer: string | TableProps<any>["footer"];
     rowSelection?:
       | (Exclude<RequiredTableProps["rowSelection"], undefined> & {
-          showPro?: "top" | "bottom" | false;
+          showPro?: boolean;
         })
       | true;
     /** 列表配置齿轮, 默认 true */