feat: Table check header props (#54600)

* feat: add getHeaderCheckboxProps into rowSelection

* feat: Adjust the order of hearderProps

* test: update snap

* feat: add tests and modify getHeaderCheckboxProps ts

* docs: add describe

* feat: deconstruct customCheckboxProps

* test: restore snap

* test: restore snap

* test: test error

* feat: getHeaderCheckboxProps -> getTitleCheckboxProps

* feat: GetTitleCheckboxProps does not pass parameters

* docs: getTitleCheckboxProps

* test: delete one

* test: change tests

---------

Co-authored-by: 刘欢 <lh01217311@antgroup.com>
This commit is contained in:
EmilyyyLiu 2025-08-07 16:57:20 +08:00 committed by GitHub
parent 9a5d620dc5
commit 3e3897e09e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 32 additions and 4 deletions

View file

@ -2093,4 +2093,22 @@ describe('Table.rowSelection', () => {
expect(checkboxOfRowWithKey12).toBeTruthy();
expect(checkboxOfRowWithKey12!.checked).toBeFalsy();
});
it('Table Header Checkbox', () => {
const { container } = render(
<Table
dataSource={[
{ key: '1', name: 'Item 1' },
{ key: '2', name: 'Item 2' },
]}
columns={[{ title: 'Name', dataIndex: 'name', key: 'name' }]}
rowSelection={{
getTitleCheckboxProps: () => ({ disabled: true, 'aria-label': 'Custom label' }),
}}
/>,
);
const checkbox = container.querySelector('.ant-checkbox-input');
expect(checkbox).toBeDisabled();
expect(checkbox).toHaveAttribute('aria-label', 'Custom label');
});
});

View file

@ -81,6 +81,7 @@ const useSelection = <RecordType extends AnyObject = AnyObject>(
selectedRowKeys,
defaultSelectedRowKeys,
getCheckboxProps,
getTitleCheckboxProps,
onChange: onSelectionChange,
onSelect,
onSelectAll,
@ -469,9 +470,12 @@ const useSelection = <RecordType extends AnyObject = AnyObject>(
allDisabled && allDisabledData.every(({ checked }) => checked);
const allDisabledSomeChecked =
allDisabled && allDisabledData.some(({ checked }) => checked);
const customCheckboxProps = getTitleCheckboxProps?.() || {};
const { onChange, disabled } = customCheckboxProps;
columnTitleCheckbox = (
<Checkbox
aria-label={customizeSelections ? 'Custom selection' : 'Select all'}
{...customCheckboxProps}
checked={
!allDisabled ? !!flattedData.length && checkedCurrentAll : allDisabledAndChecked
}
@ -480,9 +484,11 @@ const useSelection = <RecordType extends AnyObject = AnyObject>(
? !checkedCurrentAll && checkedCurrentSome
: !allDisabledAndChecked && allDisabledSomeChecked
}
onChange={onSelectAllChange}
disabled={flattedData.length === 0 || allDisabled}
aria-label={customizeSelections ? 'Custom selection' : 'Select all'}
onChange={(e) => {
onSelectAllChange();
onChange?.(e);
}}
disabled={disabled ?? (flattedData.length === 0 || allDisabled)}
skipGroup
/>
);

View file

@ -273,6 +273,7 @@ Properties for row selection.
| columnWidth | Set the width of the selection column | string \| number | `32px` | |
| fixed | Fixed selection column on the left | boolean | - | |
| getCheckboxProps | Get Checkbox or Radio props | function(record) | - | |
| getTitleCheckboxProps | Get title Checkbox props | function() | - | |
| hideSelectAll | Hide the selectAll checkbox and custom selection | boolean | false | 4.3.0 |
| preserveSelectedRowKeys | Keep selection `key` even when it removed from `dataSource` | boolean | - | 4.4.0 |
| renderCell | Renderer of the table cell. Same as `render` in column | function(checked, record, index, originNode) {} | - | 4.1.0 |

View file

@ -275,6 +275,7 @@ const columns = [
| columnWidth | 自定义列表选择框宽度 | string \| number | `32px` | |
| fixed | 把选择框列固定在左边 | boolean | - | |
| getCheckboxProps | 选择框的默认属性配置 | function(record) | - | |
| getTitleCheckboxProps | 标题选择框的默认属性配置 | function() | - | |
| hideSelectAll | 隐藏全选勾选框与自定义选择项 | boolean | false | 4.3.0 |
| preserveSelectedRowKeys | 当数据被删除时仍然保留选项的 `key` | boolean | - | 4.4.0 |
| renderCell | 渲染勾选框,用法与 Column 的 `render` 相同 | function(checked, record, index, originNode) {} | - | 4.1.0 |

View file

@ -251,6 +251,8 @@ export interface TableRowSelection<T = AnyObject> {
originNode: React.ReactNode,
) => React.ReactNode | RcRenderedCell<T>;
onCell?: GetComponentProps<T>;
getTitleCheckboxProps?: () => Partial<Omit<CheckboxProps, 'checked' | 'defaultChecked'>> &
React.AriaAttributes;
}
export type TransformColumns<RecordType = AnyObject> = (