feat: Table rowSelection support align (#53127)

This commit is contained in:
二货爱吃白萝卜 2025-03-12 11:06:53 +08:00 committed by GitHub
parent fb5c942925
commit 15cf94ff18
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 19 additions and 0 deletions

View File

@ -496,4 +496,18 @@ describe('Table', () => {
fireEvent.mouseEnter(cell); fireEvent.mouseEnter(cell);
expect(container.querySelectorAll('.ant-table-cell-row-hover')).toHaveLength(0); expect(container.querySelectorAll('.ant-table-cell-row-hover')).toHaveLength(0);
}); });
it('rowSelection should support align', () => {
const wrapper = render(
<Table
columns={[{ title: 'Name', dataIndex: 'name' }]}
dataSource={[{ key: 1, name: 'Jack' }]}
rowSelection={{ align: 'right' }}
/>,
);
expect(wrapper.container.querySelector('.ant-table-selection-column')).toHaveStyle({
textAlign: 'right',
});
});
}); });

View File

@ -709,6 +709,7 @@ const useSelection = <RecordType extends AnyObject = AnyObject>(
title: renderColumnTitle(), title: renderColumnTitle(),
render: renderSelectionCell, render: renderSelectionCell,
onCell: rowSelection.onCell, onCell: rowSelection.onCell,
align: rowSelection.align,
[INTERNAL_COL_DEFINE]: { className: columnCls }, [INTERNAL_COL_DEFINE]: { className: columnCls },
}; };

View File

@ -265,6 +265,7 @@ Properties for row selection.
| Property | Description | Type | Default | Version | | Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| align | Set the alignment of selection column | `left` \| `right` \| `center` | `left` | 5.25.0 |
| checkStrictly | Check table row precisely; parent row and children rows are not associated | boolean | true | 4.4.0 | | checkStrictly | Check table row precisely; parent row and children rows are not associated | boolean | true | 4.4.0 |
| columnTitle | Set the title of the selection column | ReactNode \| (originalNode: ReactNode) => ReactNode | - | | | columnTitle | Set the title of the selection column | ReactNode \| (originalNode: ReactNode) => ReactNode | - | |
| columnWidth | Set the width of the selection column | string \| number | `32px` | | | columnWidth | Set the width of the selection column | string \| number | `32px` | |

View File

@ -267,6 +267,7 @@ const columns = [
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| align | 设置选择列的对齐方式 | `left` \| `right` \| `center` | `left` | 5.25.0 |
| checkStrictly | checkable 状态下节点选择完全受控(父子数据选中状态不再关联) | boolean | true | 4.4.0 | | checkStrictly | checkable 状态下节点选择完全受控(父子数据选中状态不再关联) | boolean | true | 4.4.0 |
| columnTitle | 自定义列表选择框标题 | ReactNode \| (originalNode: ReactNode) => ReactNode | - | | | columnTitle | 自定义列表选择框标题 | ReactNode \| (originalNode: ReactNode) => ReactNode | - | |
| columnWidth | 自定义列表选择框宽度 | string \| number | `32px` | | | columnWidth | 自定义列表选择框宽度 | string \| number | `32px` | |

View File

@ -242,6 +242,8 @@ export interface TableRowSelection<T = AnyObject> {
columnWidth?: string | number; columnWidth?: string | number;
columnTitle?: React.ReactNode | ((checkboxNode: React.ReactNode) => React.ReactNode); columnTitle?: React.ReactNode | ((checkboxNode: React.ReactNode) => React.ReactNode);
checkStrictly?: boolean; checkStrictly?: boolean;
/** Set the alignment of the selection column */
align?: 'left' | 'center' | 'right';
renderCell?: ( renderCell?: (
value: boolean, value: boolean,
record: T, record: T,