1.创建ResizeAbleTable文件夹
1.1 index.js
import { Table } from "antd4";
import React, { useEffect, useState } from "react";
import { Resizable } from "react-resizable";
import { Tooltip } from 'antd';
import styles from './index.less';
const textEllipsis = {
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
overflow: 'hidden',
};
const ResizableTable = (props) => {
const [columns, setColumns] = useState([]);
useEffect(() => {
if (props.columns) {
setColumns(props.columns)
}
}, [props.columns]);
const handleResize = (index) => (_, { size }) => {
const newColumns = [...columns];
newColumns[index] = {
...newColumns[index],
width: size.width,
};
setColumns(newColumns);
};
const mergeColumns = columns.map((col, index) => ({
...col,
render: (text, record, index) => {
if (col.needRender) {
return col.render(text, record, index);
}
return (
<Tooltip title={text} placement='topLeft'>
<div style={{ width: col.width, ...textEllipsis }}>{text}</div>
</Tooltip>
)
},
onHeaderCell: (column) => ({
width: column.width ?? 80,
onResize: handleResize(index),
}),
}));
return (
<div className={styles.resizeTable}>
<Table
{...props}
bordered
components={{
header: {
cell: ResizableTitle
}
}}
scroll={{ x: 900 }}
columns={mergeColumns}
dataSource={props.dataSource}
/>
</div>
)
}
export default ResizableTable
const ResizableTitle = (props) => {
const { onResize, width, ...restProps } = props
if (!width) {
return <th {...restProps} />
}
return (
<Resizable
width={width}
height={0}
handle={
<span
className="react-resizable-handle"
onClick={(e) => {
e.stopPropagation()
}}
/>
}
onResize={onResize}
draggableOpts={{ enableUserSelectHack: false }}
>
<th {...restProps} />
</Resizable>
)
}
1.2 index.less
.resizeTable {
:global {
.react-resizable {
position: relative;
background-clip: padding-box;
}
.react-resizable-handle {
position: absolute;
width: 10px;
height: 100%;
bottom: 0;
right: -5px;
cursor: col-resize;
background-image: none;
z-index: 1;
}
.ant-table-filter-column,
.ant-table-column-sorters {
display: flex;
align-items: center;
justify-content: space-around;
min-width: 70px;
}
.ant-table-thead>tr>th .ant-table-column-sorter {
margin-top: -21px;
display: table-cell;
vertical-align: middle;
}
}
}
2.引入组件进行使用
<ResizableTable columns={ResettlementsColumn} dataSource={data} />
参考链接:
antd table 可伸缩列 react-resizable 多表头实现 - 简书 (jianshu.com)
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
2022-06-16 Select 组件下拉框随页面上下滑动的问题