diff --git a/playground/app/routes/_layout+/_layout.tsx b/playground/app/routes/_layout+/_layout.tsx index 2dc10f4..74d8f0d 100644 --- a/playground/app/routes/_layout+/_layout.tsx +++ b/playground/app/routes/_layout+/_layout.tsx @@ -14,6 +14,10 @@ export default function () { + + + + diff --git a/playground/app/routes/_layout+/row-selection-order/index.tsx b/playground/app/routes/_layout+/row-selection-order/index.tsx new file mode 100644 index 0000000..a46365e --- /dev/null +++ b/playground/app/routes/_layout+/row-selection-order/index.tsx @@ -0,0 +1,131 @@ +import { useMemo, useState } from 'react' +import { Button, Table, type TableColumnsType, Tag } from 'antd' +import { type ResizableColumnsType, useAntdResizableHeader } from 'use-antd-resizable-header' + +interface DataType { + key: string + name: string + age: number + address: string + tags: string[] +} + +type Columns = ResizableColumnsType> + +const data: DataType[] = [ + { + 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: 'Sydney No. 1 Lake Park', + tags: ['cool', 'teacher'], + }, +] + +export function Component() { + const [times, setTimes] = useState(0) + + const columns: Columns = [ + { + title: 'Name', + width: 300, + dataIndex: 'name', + key: 'name', + // 设置拖拽最小宽度 + minConstraints: 20, + render: (text) => {text}, + }, + Table.SELECTION_COLUMN, + { + title: 'Age', + dataIndex: 'age', + key: 'age', + width: 100, + }, + { + title: 'Address', + dataIndex: 'address', + key: 'address', + width: 100, + }, + { + title: 'Tags', + key: 'tags', + dataIndex: 'tags', + render: (_, { tags }) => ( + <> + {tags.map((tag) => { + let color = tag.length > 5 ? 'geekblue' : 'green' + if (tag === 'loser') { + color = 'volcano' + } + return ( + + {tag.toUpperCase()} + + ) + })} + + ), + width: 300, + }, + { + title: 'Action', + key: 'action', + render: (_, record) => ( +
+ {record.name} + { + setTimes((t) => t + 1) + }} + > + Render + + {times} +
+ ), + }, + ] + + const { components, resizableColumns, tableWidth, resetColumns } = useAntdResizableHeader({ + columns: useMemo(() => columns, [times]), + columnsState: { + persistenceKey: 'row-selection-order', + persistenceType: 'sessionStorage', + }, + }) + + return ( +
+ + + + ) +} diff --git a/src/hooks/useLocalColumns.ts b/src/hooks/useLocalColumns.ts index a3295e8..c5b92d4 100644 --- a/src/hooks/useLocalColumns.ts +++ b/src/hooks/useLocalColumns.ts @@ -24,6 +24,10 @@ function mergeColumns(src: T, target: T, mergeK const resDataIndex = Array.isArray(res[i].dataIndex) ? res[i].dataIndex.join('-') : res[i].dataIndex return targetDataIndex === resDataIndex })?.[mergeKey] || res[i][mergeKey] + // {} 有可能修改成 { [mergeKey]: undefined },影响 Table.SELECTION_COLUMN 和 Table.EXPANDABLE_COLUMN 的判断 + if (res[i][mergeKey] === undefined) { + delete res[i][mergeKey] + } } }) }