|
@@ -1,7 +1,7 @@
|
|
|
import React, { useEffect, useRef, useState } from "react";
|
|
|
import "antd/dist/antd.css";
|
|
|
import "./index.less";
|
|
|
-import { Pagination, Space, Table } from "antd";
|
|
|
+import { Pagination, Space, Spin, Table, Tag } from "antd";
|
|
|
import type { TableProps } from "antd";
|
|
|
import classNames from "classnames";
|
|
|
import ResizeObserver from "rc-resize-observer";
|
|
@@ -10,11 +10,18 @@ import { VariableSizeGrid as Grid } from "react-window";
|
|
|
|
|
|
interface Props<RecordType extends object> extends TableProps<RecordType> {
|
|
|
rowHeight: number
|
|
|
+ loading?: boolean,
|
|
|
+ total?: number,
|
|
|
+ current?: number,
|
|
|
+ pageSize?: number,
|
|
|
+ defaultPageSize?: number
|
|
|
+ pageChange?: (page: number, pageSize?: number) => void,
|
|
|
+ sizeChange?: (current: number, size?: number) => void,
|
|
|
}
|
|
|
|
|
|
-const VirtualTable = <RecordType extends object>(props: Props<RecordType>) => {
|
|
|
+const VTable = <RecordType extends object>(props: Props<RecordType>) => {
|
|
|
|
|
|
- const { columns, scroll, className, rowHeight } = props;
|
|
|
+ const { columns, scroll, className, rowHeight, loading = false, total = 0, current, pageSize, defaultPageSize, pageChange, sizeChange } = props;
|
|
|
const [tableWidth, setTableWidth] = useState(0);
|
|
|
|
|
|
// const widthColumnCount = columns!.filter(({ width }) => !width).length;
|
|
@@ -115,22 +122,41 @@ const VirtualTable = <RecordType extends object>(props: Props<RecordType>) => {
|
|
|
);
|
|
|
};
|
|
|
|
|
|
- return <ResizeObserver
|
|
|
- onResize={({ width }) => {
|
|
|
- setTableWidth(width);
|
|
|
- }}
|
|
|
- >
|
|
|
- <Table
|
|
|
- {...props}
|
|
|
- bordered
|
|
|
- className={`virtual-table ${className ? className : ''}`}
|
|
|
- columns={mergedColumns}
|
|
|
- pagination={false}
|
|
|
- components={{
|
|
|
- body: renderVirtualList as any
|
|
|
- }}
|
|
|
- />
|
|
|
- </ResizeObserver>
|
|
|
+ return <Spin style={{ width: '100%' }} spinning={loading}>
|
|
|
+ <div>
|
|
|
+ <ResizeObserver
|
|
|
+ onResize={({ width }) => {
|
|
|
+ setTableWidth(width);
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <Table
|
|
|
+ {...props}
|
|
|
+ bordered
|
|
|
+ className={`virtual-table all_table ${className ? className : ''}`}
|
|
|
+ columns={mergedColumns}
|
|
|
+ pagination={false}
|
|
|
+ components={{
|
|
|
+ body: renderVirtualList as any
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </ResizeObserver>
|
|
|
+ <div style={{ textAlign: 'end', padding: '16px 0', background: '#FFF' }}>
|
|
|
+ <Pagination
|
|
|
+ defaultCurrent={1}
|
|
|
+ total={total || 0}
|
|
|
+ current={current || 1}
|
|
|
+ pageSize={pageSize || 20}
|
|
|
+ defaultPageSize={defaultPageSize || 20}
|
|
|
+ pageSizeOptions={['10', '20', '30', '40', '50', '60', '70', '80', '90', '100']}
|
|
|
+ size="small"
|
|
|
+ showTotal={(total) => <Tag color="cyan">总共{total}数据</Tag>}
|
|
|
+ showSizeChanger={true}
|
|
|
+ onChange={pageChange}
|
|
|
+ onShowSizeChange={sizeChange}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </Spin>
|
|
|
};
|
|
|
|
|
|
// Usage
|
|
@@ -194,17 +220,18 @@ const data = Array.from({ length: 100 }, (_, key) => ({
|
|
|
dd: "啊大大撒旦啊实打实大苏打阿斯顿撒打算阿三打撒"
|
|
|
}));
|
|
|
|
|
|
-const App1: React.FC = () => {
|
|
|
|
|
|
-
|
|
|
- return <Space >
|
|
|
- <VirtualTable
|
|
|
- rowHeight={26}
|
|
|
- columns={columns}
|
|
|
- dataSource={data}
|
|
|
- scroll={{ y: 600, x: "100vw" }}
|
|
|
- />
|
|
|
- </Space>
|
|
|
+interface VirtualTableProps {
|
|
|
+ loading?: boolean,
|
|
|
+}
|
|
|
+const VirtualTable: React.FC<VirtualTableProps> = ({ loading }) => {
|
|
|
+
|
|
|
+ return <VTable
|
|
|
+ rowHeight={26}
|
|
|
+ columns={columns}
|
|
|
+ dataSource={data}
|
|
|
+ scroll={{ y: 600, x: "100vw" }}
|
|
|
+ />
|
|
|
};
|
|
|
|
|
|
-export default App1;
|
|
|
+export default VirtualTable;
|