|
@@ -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;
|