use-antd-resizable-header
antd 表格头拖拽 Hook，兼容 Table ProTable
预览
在线地址
安装
pnpm add @minko-fe/use-antd-resizable-headerAPI
Properties
| Name | Type | Default | Description |
|---|---|---|---|
| columns | ColumnType[] | undefined | antd table 的 columns |
| defaultWidth | number | 120 | 某一列不能拖动，设置该列的最小展示宽度，默认 120 |
| minConstraints | number | 60 | 拖动最小宽度 默认 60 |
| maxConstraints | number | Infinity | 拖动最大宽度 默认无穷 |
| cache | boolean | true | 是否缓存宽度，避免渲染重置拖拽宽度 |
| columnsState | ColumnsStateType | undefined | 列状态的配置，可以用来操作列拖拽宽度 |
| onResizeStart | Function | undefined | 开始拖拽时触发 |
| onResizeEnd | Function | undefined | 结束拖拽时触发 |
Return
| Name | Description |
|---|---|
| resizableColumns | 拖拽 columns，用在 Table columns |
| components | 拖拽 components， 用在 Table components |
| tableWidth | 表格宽度，用在 Table width |
| resetColumns | 重置宽度方法 |
注意事项
- 默认拖动颜色为
#000，可通过global或设置 css 变量--arh-color设置颜色 - 至少一列不能拖动（width 不设置即可），请保持至少一列的自适应
- 若 column 未传入
dataIndex，请传入一个唯一的key，否则按照将按照 column 的序号 index 计算唯一 key - 若 column 有副作用，请把依赖项传入 useMemo deps 中
- remember import style
Example
import { Button, Table } from 'antd'
import ProTable from '@ant-design/pro-table'
import { useAntdResizableHeader } from '@minko-fe/use-antd-resizable-header'
import '@minko-fe/use-antd-resizable-header/dist/style.css'
function App() {
const columns = []
const { components, resizableColumns, tableWidth, resetColumns } = useAntdResizableHeader({
columns: useMemo(() => columns, []),
// 保存拖拽宽度至本地localStorage
columnsState: {
persistenceKey: 'localKey',
persistenceType: 'localStorage',
},
})
return (
<>
<Table columns={resizableColumns} components={components} dataSource={data} scroll={{ x: tableWidth }}></Table>
<ProTable
columns={resizableColumns}
components={components}
dataSource={data}
scroll={{ x: tableWidth }}
></ProTable>
<Button onClick={() => resetColumns()}>重置宽度</Button>
</>
)
}基本用例
/* index.css */
--arh-color: red;import React, { useReducer } from 'react'
import { Space, Table, Tag } from 'antd'
import { useAntdResizableHeader } from '@minko-fe/use-antd-resizable-header'
import 'antd/dist/antd.css'
import '@minko-fe/use-antd-resizable-header/dist/style.css'
const data = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
tags: ['nice', 'developer'],
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
tags: ['loser'],
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
tags: ['cool', 'teacher'],
},
]
const Hello: React.FC = () => {
const [, forceRender] = useReducer((s) => s + 1, 0)
const [deps, setDeps] = useState(0)
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
width: 300,
ellipsis: true,
render: (text) => (
<a onClick={() => setDeps((t) => t + 1)}>
{text}
{deps}
</a>
),
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
ellipsis: true,
width: 200,
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
ellipsis: true,
width: 200,
},
{
title: 'Tags',
key: 'tags',
dataIndex: 'tags',
width: 200,
ellipsis: true,
render: (tags) => (
<>
{tags.map((tag) => {
let color = tag.length > 5 ? 'geekblue' : 'green'
if (tag === 'loser') {
color = 'volcano'
}
return (
<Tag color={color} key={tag}>
{tag.toUpperCase()}
</Tag>
)
})}
</>
),
},
{
title: 'render',
key: 'action',
render: (text, record) => (
<Space size='middle'>
<a>Invite {record.name}</a>
<a
onClick={() => {
forceRender()
alert('render')
}}
>
render
</a>
</Space>
),
},
]
const { components, resizableColumns, tableWidth } = useAntdResizableHeader({
columns: useMemo(() => columns, [deps]),
minConstraints: 50,
})
return <Table columns={resizableColumns} components={components} dataSource={data} scroll={{ x: tableWidth }} />
}基本用例 - 搭配 Typography 实现 title 溢出时 tooltip
/* index.css */
--arh-color: red;import { Typography } from 'antd'
// utils.tsx
export const genEllipsis = (text: string, copyable?: boolean, stopPropagation?: boolean) => {
let _text = isNil(text) ? '' : String(text)
if ([null, undefined, ''].includes(text)) _text = '-'
return (
<Typography.Text
style={{
width: '100%',
margin: 0,
padding: 0,
color: 'inherit',
}}
onClick={(e) => (stopPropagation ? e?.stopPropagation() : null)}
title=' '
copyable={
copyable && text
? {
text,
tooltips: ['', ''],
}
: undefined
}
ellipsis={text ? { tooltip: text } : false}
>
{_text}
</Typography.Text>
)
}// index.tsx
import ProTable from '@ant-design/pro-table' // or import { Table } from 'antd'
import { useAntdResizableHeader } from '@minko-fe/use-antd-resizable-header'
import { genEllipsis } from './utils.tsx'
import '@minko-fe/use-antd-resizable-header/dist/style.css'
import './index.css'
const columns: ProColumns[] = [
{
title: 'id',
dataIndex: 'id',
width: 300,
ellipsis: true,
},
{
title: 'name',
dataIndex: 'name',
ellipsis: true,
},
]
const dataSource = [
{
id: 1,
name: 'zhangsan',
},
{
id: 2,
name: 'lisi',
},
]
function App() {
const { resizableColumns, components, tableWidth } = useAntdResizableHeader({
columns: useMemo(() => columns, []),
})
let cols = [...resizableColumns]
cols = columns.map((item) => ({
...item,
title: genEllipsis(item.title as string, false, true),
}))
return <ProTable columns={cols} components={components} scroll={{ x: tableWidth }} dataSource={dataSource}></ProTable>
}为什么需要 React.useMemo ?
如果不使用 useMemo
组件 render => columns 引用变化 => use-antd-resiable-header render => 组件 render => columns 引用变化···
不使用 useMemo
可以采用其他阻止 render 的方案，如: columns 是 prop 或 组件外常量