diff --git a/components/table/Table.tsx b/components/table/Table.tsx index 1d57c6cbb1..19428a7653 100644 --- a/components/table/Table.tsx +++ b/components/table/Table.tsx @@ -106,6 +106,7 @@ export interface TableProps sorter: SorterResult | SorterResult[], extra: TableCurrentDataSource, ) => void; + onResizeColumn?: (w: number, col: ColumnType) => void; rowSelection?: TableRowSelection; getPopupContainer?: GetPopupContainer; diff --git a/components/table/style/index.ts b/components/table/style/index.ts index 1dd0becd4e..d5ad893ee7 100644 --- a/components/table/style/index.ts +++ b/components/table/style/index.ts @@ -13,6 +13,7 @@ import genRadiusStyle from './radius'; import genRtlStyle from './rtl'; import genSelectionStyle from './selection'; import genSizeStyle from './size'; +import genResizeStyle from './resize'; import genSorterStyle from './sorter'; import genStickyStyle from './sticky'; import genSummaryStyle from './summary'; @@ -404,6 +405,7 @@ export default genComponentStyleHook('Table', token => { genStickyStyle(tableToken), genEllipsisStyle(tableToken), genSizeStyle(tableToken), + genResizeStyle(tableToken), genRtlStyle(tableToken), ]; }); diff --git a/components/table/style/resize.ts b/components/table/style/resize.ts new file mode 100644 index 0000000000..e46dc0debe --- /dev/null +++ b/components/table/style/resize.ts @@ -0,0 +1,52 @@ +// 此样式是vue版本独有样式,react版本没有拖拽改变列宽度功能 +import type { CSSObject } from '../../_util/cssinjs'; +import type { GenerateStyle } from '../../theme/internal'; +import type { TableToken } from './index'; + +const genResizeStyle: GenerateStyle = token => { + const { componentCls } = token; + + return { + [`${componentCls}-wrapper ${componentCls}-resize-handle`]: { + position: 'absolute', + top: 0, + height: '100% !important', + bottom: 0, + left: ' auto !important', + right: ' -8px', + cursor: 'col-resize', + touchAction: 'none', + userSelect: 'auto', + width: '16px', + zIndex: 1, + [`&-line`]: { + display: 'block', + width: '1px', + marginLeft: '7px', + height: '100% !important', + backgroundColor: token.colorPrimary, + opacity: 0, + }, + [`&:hover &-line`]: { + opacity: 1, + }, + }, + [`${componentCls}-wrapper ${componentCls}-resize-handle.dragging`]: { + overflow: 'hidden', + [`${componentCls}-resize-handle-line`]: { + opacity: 1, + }, + [`&:before`]: { + position: 'absolute', + top: 0, + bottom: 0, + content: '" "', + width: '200vw', + transform: 'translateX(-50%)', + opacity: 0, + }, + }, + }; +}; + +export default genResizeStyle;