Add header table (#1074)

* feat: add header table

* feat: add header table

* feat: test

* feat: add createTable

* feat: add data

* feat: test

* feat: 精简代码

Author: crazyair

docs/demo/components.md

@@ -0,0 +1,8 @@
+---
+title: components
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/components.tsx"></code>

docs/examples/components.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import Table from 'rc-table';
+
+const data = [];
+for (let i = 0; i < 100; i += 1) {
+  data.push({
+    key: i,
+    a: `a${i}`,
+    b: `b${i}`,
+    c: `c${i}`,
+  });
+}
+
+const table = (props: any) => {
+  return (
+    <>
+      <div style={{ background: '#fff' }}>header table</div>
+      <table className={props.className}>{props.children}</table>
+    </>
+  );
+};
+
+const Demo = () => {
+  return (
+    <div>
+      <Table
+        components={{ header: { table } }}
+        sticky
+        columns={[
+          { title: 'title1', dataIndex: 'a', key: 'a', width: 100 },
+          { title: 'title2', dataIndex: 'b', key: 'b', width: 100 },
+          { title: 'title3', dataIndex: 'c', key: 'c', width: 200 },
+        ]}
+        data={data}
+      />
+    </div>
+  );
+};
+
+export default Demo;

src/FixedHolder/index.tsx

@@ -63,11 +63,13 @@ const FixedHolder = React.forwardRef<HTMLDivElement, FixedHeaderProps<unknown>>(
     ...restProps
   } = props;
 
-  const { prefixCls, scrollbarSize, isSticky } = useContext(TableContext, [
+  const { prefixCls, scrollbarSize, isSticky, getComponent } = useContext(TableContext, [
     'prefixCls',
     'scrollbarSize',
     'isSticky',
+    'getComponent',
   ]);
+  const TableComponent = getComponent(['header', 'table'], 'table');
 
   const combinationScrollBarSize = isSticky && !fixHeader ? 0 : scrollbarSize;
 
@@ -146,7 +148,7 @@ const FixedHolder = React.forwardRef<HTMLDivElement, FixedHeaderProps<unknown>>(
         [stickyClassName]: !!stickyClassName,
       })}
     >
-      <table
+      <TableComponent
         style={{
           tableLayout: 'fixed',
           visibility: noData || mergedColumnWidth ? null : 'hidden',
@@ -165,7 +167,7 @@ const FixedHolder = React.forwardRef<HTMLDivElement, FixedHeaderProps<unknown>>(
           columns: columnsWithScrollbar,
           flattenColumns: flattenColumnsWithScrollbar,
         })}
-      </table>
+      </TableComponent>
     </div>
   );
 });

src/interface.ts

@@ -155,6 +155,7 @@ export type CustomizeScrollBody<RecordType> = (
 export interface TableComponents<RecordType> {
   table?: CustomizeComponent;
   header?: {
+    table?: CustomizeComponent;
     wrapper?: CustomizeComponent;
     row?: CustomizeComponent;
     cell?: CustomizeComponent;

tests/FixedColumn.spec.tsx

@@ -284,4 +284,18 @@ describe('Table.FixedColumn', () => {
       });
     });
   });
+  describe('components.table by sticky', () => {
+    it('render', async () => {
+      const table = props => {
+        return (
+          <>
+            <div className="healer-table">header table</div>
+            <table className={props.className}>{props.children}</table>
+          </>
+        );
+      };
+      const { container } = render(<Table sticky components={{ header: { table } }} />);
+      expect(container.querySelector('.healer-table')).toBeTruthy();
+    });
+  });
 });