1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
import React, { useContext, useState, useEffect } from 'react';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import { Table, ConfigProvider } from 'antd';
import { Resizable } from 'react-resizable';
import 'react-resizable/css/styles.css';
import './index.less';
// 调整table表头
const ResizeableTitle = (props) => {
const { onResize, width, resize, ...restProps } = props;
if (!width || !resize) {
return <th {...restProps} />;
}
return (
<Resizable
width={width}
height={0}
onResize={onResize}
draggableOpts={{ enableUserSelectHack: false }}
>
<th {...restProps} />
</Resizable>
);
};
const BasicTable = (props) => {
const [cols, setCols] = useState(props.columns);
const [columns, setColumns] = useState(props.columns);
const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
const prefixCls = getPrefixCls('basic-table');
const pagination = typeof props.pagination !== 'undefined' ? props.pagination : {};
const showTotal = (total) => {
return `共 ${Math.ceil(
total / (props.pagination ? props.pagination.pageSize || 10 : 10),
)} 页 / 共 ${total} 条记录`;
};
// 定义头部组件
const components = {
header: {
cell: ResizeableTitle,
},
};
// 处理拖拽
const handleResize =
(index) =>
(e, { size }) => {
const nextColumns = [...cols];
const { minWidth, maxWidth } = nextColumns[index];
if (minWidth && size.width <= minWidth) return false;
if (maxWidth && size.width >= maxWidth) return false;
// 拖拽是调整宽度
nextColumns[index] = {
...nextColumns[index],
width: size.width,
};
setCols(nextColumns);
};
useEffect(() => {
setColumns(
(cols || []).map((col, index) => ({
...col,
onHeaderCell: (column) => ({
width: column.width,
resize: column.resize || false,
onResize: handleResize(index),
}),
})),
);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [cols]);
useEffect(() => {
setCols(props.columns);
}, [props.columns]);
return (
<Table
className={classNames(prefixCls)}
scroll={{ y: 'calc(100% - 40px)' }}
components={components}
{...props}
columns={columns}
pagination={pagination ? { showTotal, ...pagination } : pagination}
/>
);
};
BasicTable.defaultProps = {
columns: [],
dataSource: [],
};
BasicTable.propTypes = {
columns: PropTypes.array,
dataSource: PropTypes.array,
};
export default BasicTable;