diff --git a/.changeset/cyan-ads-sparkle.md b/.changeset/cyan-ads-sparkle.md new file mode 100644 index 000000000..eaa209cfe --- /dev/null +++ b/.changeset/cyan-ads-sparkle.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/hiui": patch +--- + +feat(table): Add onResize api diff --git a/.changeset/sharp-days-repeat.md b/.changeset/sharp-days-repeat.md new file mode 100644 index 000000000..6759021fe --- /dev/null +++ b/.changeset/sharp-days-repeat.md @@ -0,0 +1,5 @@ +--- +"@hi-ui/table": minor +--- + +feat: Add onResize api diff --git a/packages/ui/table/src/BaseTable.tsx b/packages/ui/table/src/BaseTable.tsx index e0fd9845c..2b24bf434 100644 --- a/packages/ui/table/src/BaseTable.tsx +++ b/packages/ui/table/src/BaseTable.tsx @@ -17,7 +17,7 @@ import { useEmbedExpand, UseEmbedExpandProps } from './hooks/use-embed-expand' import { TheadContent } from './TheadContent' import { ColGroupContent } from './ColGroupContent' import { TbodyContent } from './TbodyContent' -import { SELECTION_DATA_KEY } from './Table'; +import { SELECTION_DATA_KEY } from './Table' const _role = 'table' const _prefix = getPrefixCls('table') @@ -151,7 +151,7 @@ export const BaseTable = forwardRef( let hasSumColumn = false columns.forEach((column, index) => { - if (index === 0 || (index === 1 && columns[0].dataKey === SELECTION_DATA_KEY)) { + if (index === 0 || (index === 1 && columns[0].dataKey === SELECTION_DATA_KEY)) { // @ts-ignore sumRow.raw[column.dataKey] = i18n.get('table.total') } diff --git a/packages/ui/table/src/hooks/use-col-width.ts b/packages/ui/table/src/hooks/use-col-width.ts index 2b7562bda..2af0033c1 100644 --- a/packages/ui/table/src/hooks/use-col-width.ts +++ b/packages/ui/table/src/hooks/use-col-width.ts @@ -2,17 +2,25 @@ import React, { useCallback } from 'react' import { FlattedTableColumnItemData, TableColumnItem, TableRowRecord } from '../types' import { getGroupItemWidth } from '../utils' import { useUpdateEffect } from '@hi-ui/use-update-effect' +import { ResizeCallbackData } from 'react-resizable' export const useColWidth = ({ resizable, data, columns, virtual, + onResize, }: { resizable: boolean data: TableRowRecord[] columns: TableColumnItem[] virtual?: boolean + onResize?: ( + e: React.SyntheticEvent, + data: ResizeCallbackData, + index: number, + columnsWidth: number[] + ) => void }) => { const measureRowElementRef = React.useRef(null) // 是否重新设置过表格每列宽度 @@ -221,7 +229,7 @@ export const useColWidth = ({ * 列宽拖拽 resize,只处理拖拽线两边的列宽度 */ const onColumnResizable = React.useCallback( - (_, { size }, index: number) => { + (evt, { size }, index: number) => { const minWidth = minColWidth[index] const anotherMinWidth = minColWidth[index + 1] let nextWidth = size.width > minWidth ? size.width : minWidth @@ -237,10 +245,13 @@ export const useColWidth = ({ nextColWidths[index] = nextWidth nextColWidths[index + 1] = anotherWidth + + onResize?.(evt, size, index, nextColWidths) + return nextColWidths }) }, - [minColWidth] + [minColWidth, onResize] ) const getColgroupProps = React.useCallback( diff --git a/packages/ui/table/src/use-table.ts b/packages/ui/table/src/use-table.ts index 24cbd7f6a..91bd01f7f 100644 --- a/packages/ui/table/src/use-table.ts +++ b/packages/ui/table/src/use-table.ts @@ -33,6 +33,7 @@ import { FlattedTableRowData, } from './types' import { SELECTION_DATA_KEY } from './Table' +import { ResizeCallbackData } from 'react-resizable' const DEFAULT_COLUMNS = [] as [] const DEFAULT_DATA = [] as [] @@ -84,6 +85,7 @@ export const useTable = ({ scrollbar, rowClassName, cellClassName, + onResize, ...rootProps }: UseTableProps) => { /** @@ -193,6 +195,7 @@ export const useTable = ({ columns, resizable, virtual: virtual, + onResize, }) // ************************ 列冻结 ************************ // @@ -866,6 +869,15 @@ export interface UseTableProps { column: Record, index: number ) => string + /** + * resizable 模式下,设置列宽变化时触发的回调 + */ + onResize?: ( + e: React.SyntheticEvent, + data: ResizeCallbackData, + index: number, + columnsWidth: number[] + ) => void } export type UseTableReturn = ReturnType diff --git a/packages/ui/table/stories/resizable.stories.tsx b/packages/ui/table/stories/resizable.stories.tsx index a9be2c14f..46f6f1e94 100644 --- a/packages/ui/table/stories/resizable.stories.tsx +++ b/packages/ui/table/stories/resizable.stories.tsx @@ -13,6 +13,9 @@ export const Resizable = () => { { + console.log('onResize', e, data, index, columnsWidth) + }} columns={[ { title: '商品名',