|  | @@ -1,17 +1,20 @@
 | 
	
		
			
				|  |  |  import React, { useEffect, useRef, useState } from "react";
 | 
	
		
			
				|  |  |  import "antd/dist/antd.css";
 | 
	
		
			
				|  |  |  import "./index.less";
 | 
	
		
			
				|  |  | -import { Table } from "antd";
 | 
	
		
			
				|  |  | +import { Pagination, Space, Table } from "antd";
 | 
	
		
			
				|  |  |  import type { TableProps } from "antd";
 | 
	
		
			
				|  |  |  import classNames from "classnames";
 | 
	
		
			
				|  |  |  import ResizeObserver from "rc-resize-observer";
 | 
	
		
			
				|  |  |  import type { ColumnsType } from "antd/es/table";
 | 
	
		
			
				|  |  |  import { VariableSizeGrid as Grid } from "react-window";
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -const VirtualTable = <RecordType extends object>(
 | 
	
		
			
				|  |  | -    props: TableProps<RecordType>
 | 
	
		
			
				|  |  | -) => {
 | 
	
		
			
				|  |  | -    const { columns, scroll, className } = props;
 | 
	
		
			
				|  |  | +interface Props<RecordType extends object> extends TableProps<RecordType> {
 | 
	
		
			
				|  |  | +    rowHeight: number
 | 
	
		
			
				|  |  | +}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +const VirtualTable = <RecordType extends object>(props: Props<RecordType>) => {
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    const { columns, scroll, className, rowHeight } = props;
 | 
	
		
			
				|  |  |      const [tableWidth, setTableWidth] = useState(0);
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |      //   const widthColumnCount = columns!.filter(({ width }) => !width).length;
 | 
	
	
		
			
				|  | @@ -19,7 +22,6 @@ const VirtualTable = <RecordType extends object>(
 | 
	
		
			
				|  |  |          if (column.width) {
 | 
	
		
			
				|  |  |              return column;
 | 
	
		
			
				|  |  |          }
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  |          return {
 | 
	
		
			
				|  |  |              ...column,
 | 
	
		
			
				|  |  |              //   width: Math.floor(tableWidth / widthColumnCount)
 | 
	
	
		
			
				|  | @@ -76,7 +78,7 @@ const VirtualTable = <RecordType extends object>(
 | 
	
		
			
				|  |  |                  }}
 | 
	
		
			
				|  |  |                  height={scroll!.y as number}
 | 
	
		
			
				|  |  |                  rowCount={rawData.length}
 | 
	
		
			
				|  |  | -                rowHeight={() => 100}
 | 
	
		
			
				|  |  | +                rowHeight={() => rowHeight}
 | 
	
		
			
				|  |  |                  width={tableWidth}
 | 
	
		
			
				|  |  |                  onScroll={({ scrollLeft }: { scrollLeft: number }) => {
 | 
	
		
			
				|  |  |                      onScroll({ scrollLeft });
 | 
	
	
		
			
				|  | @@ -113,24 +115,22 @@ const VirtualTable = <RecordType extends object>(
 | 
	
		
			
				|  |  |          );
 | 
	
		
			
				|  |  |      };
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -    return (
 | 
	
		
			
				|  |  | -        <ResizeObserver
 | 
	
		
			
				|  |  | -            onResize={({ width }) => {
 | 
	
		
			
				|  |  | -                setTableWidth(width);
 | 
	
		
			
				|  |  | +    return <ResizeObserver
 | 
	
		
			
				|  |  | +        onResize={({ width }) => {
 | 
	
		
			
				|  |  | +            setTableWidth(width);
 | 
	
		
			
				|  |  | +        }}
 | 
	
		
			
				|  |  | +    >
 | 
	
		
			
				|  |  | +        <Table
 | 
	
		
			
				|  |  | +            {...props}
 | 
	
		
			
				|  |  | +            bordered
 | 
	
		
			
				|  |  | +            className={`virtual-table ${className ? className : ''}`}
 | 
	
		
			
				|  |  | +            columns={mergedColumns}
 | 
	
		
			
				|  |  | +            pagination={false}
 | 
	
		
			
				|  |  | +            components={{
 | 
	
		
			
				|  |  | +                body: renderVirtualList as any
 | 
	
		
			
				|  |  |              }}
 | 
	
		
			
				|  |  | -        >
 | 
	
		
			
				|  |  | -            <Table
 | 
	
		
			
				|  |  | -                {...props}
 | 
	
		
			
				|  |  | -                bordered
 | 
	
		
			
				|  |  | -                className={`virtual-table all_table ${className ? className : ''}`}
 | 
	
		
			
				|  |  | -                columns={mergedColumns}
 | 
	
		
			
				|  |  | -                pagination={false}
 | 
	
		
			
				|  |  | -                components={{
 | 
	
		
			
				|  |  | -                    body: renderVirtualList as any
 | 
	
		
			
				|  |  | -                }}
 | 
	
		
			
				|  |  | -            />
 | 
	
		
			
				|  |  | -        </ResizeObserver>
 | 
	
		
			
				|  |  | -    );
 | 
	
		
			
				|  |  | +        />
 | 
	
		
			
				|  |  | +    </ResizeObserver>
 | 
	
		
			
				|  |  |  };
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  // Usage
 | 
	
	
		
			
				|  | @@ -139,7 +139,7 @@ const columns: ColumnsType<any> = [
 | 
	
		
			
				|  |  |      { title: "B", dataIndex: "key" },
 | 
	
		
			
				|  |  |      { title: "C", dataIndex: "key" },
 | 
	
		
			
				|  |  |      { title: "D", dataIndex: "key" },
 | 
	
		
			
				|  |  | -    { title: "E", dataIndex: "key", width: 200 },
 | 
	
		
			
				|  |  | +    { title: "E", dataIndex: "key", width: 50 },
 | 
	
		
			
				|  |  |      { title: "F", dataIndex: "key", width: 100 },
 | 
	
		
			
				|  |  |      { title: "F", dataIndex: "key", width: 100 },
 | 
	
		
			
				|  |  |      { title: "F", dataIndex: "key", width: 100 },
 | 
	
	
		
			
				|  | @@ -189,17 +189,22 @@ const columns: ColumnsType<any> = [
 | 
	
		
			
				|  |  |      { title: "F", dataIndex: "dd", width: 100 }
 | 
	
		
			
				|  |  |  ];
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -const data = Array.from({ length: 100000 }, (_, key) => ({
 | 
	
		
			
				|  |  | +const data = Array.from({ length: 100 }, (_, key) => ({
 | 
	
		
			
				|  |  |      key,
 | 
	
		
			
				|  |  |      dd: "啊大大撒旦啊实打实大苏打阿斯顿撒打算阿三打撒"
 | 
	
		
			
				|  |  |  }));
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -const App1: React.FC = () => (
 | 
	
		
			
				|  |  | -    <VirtualTable
 | 
	
		
			
				|  |  | -        columns={columns}
 | 
	
		
			
				|  |  | -        dataSource={data}
 | 
	
		
			
				|  |  | -        scroll={{ y: 600, x: "100vw" }}
 | 
	
		
			
				|  |  | -    />
 | 
	
		
			
				|  |  | -);
 | 
	
		
			
				|  |  | +const App1: React.FC = () => {
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    return <Space >
 | 
	
		
			
				|  |  | +        <VirtualTable
 | 
	
		
			
				|  |  | +            rowHeight={26}
 | 
	
		
			
				|  |  | +            columns={columns}
 | 
	
		
			
				|  |  | +            dataSource={data}
 | 
	
		
			
				|  |  | +            scroll={{ y: 600, x: "100vw" }}
 | 
	
		
			
				|  |  | +        />
 | 
	
		
			
				|  |  | +    </Space>
 | 
	
		
			
				|  |  | +};
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |  export default App1;
 |