mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-19 06:43:16 +08:00
Code Issues Actions 26 Packages Projects Releases Wiki Activity

fix: Table filter does not work if column has grouped header #40203 (#40463)

Browse Source 
* fix: Table filter does not work if column has grouped header #40203

* fix: Table filter does not work if column has grouped header #40203

* fix: Add test case

* fix: Fix test 18

* fix: Fix tests
This commit is contained in:
Roman Soroka 2023-02-02 14:52:10 +03:00 committed by GitHub
parent def02d74dc
commit 619814c005
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 52 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
components/table/__tests__/Table.filter.test.tsx
View File

@ -2738,4 +2738,43 @@ describe('Table.filter', () => {
expect(onFilterDropdownOpenChange).toHaveBeenCalledTimes(2);
expect(onFilter).toHaveBeenCalledTimes(0);
});
it('works with grouping columns correctly', () => {
const columns = [
{
title: 'group',
key: 'group',
children: [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
filters: [
{ text: 'Jack', value: 'Jack' },
{ text: 'Lucy', value: 'Lucy' },
],
onFilter: filterFn,
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
],
},
];
const testData = [
{ key: 0, name: 'Jack', age: 11 },
{ key: 1, name: 'Lucy', age: 20 },
{ key: 2, name: 'Tom', age: 21 },
{ key: 3, name: 'Jerry', age: 22 },
];
const { container } = render(<Table columns={columns} dataSource={testData} />);
fireEvent.click(container.querySelector('.ant-dropdown-trigger')!);
fireEvent.click(container.querySelectorAll('.ant-dropdown-menu-item')[0]);
fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary')!);
expect(renderedNames(container)).toEqual(['Jack']);
});
});

14
components/table/hooks/useFilter/index.tsx
View File

@ -193,10 +193,20 @@ interface FilterConfig<RecordType> {
getPopupContainer?: GetPopupContainer;
}
const getMergedColumns = <RecordType extends unknown>(
rawMergedColumns: ColumnsType<RecordType>,
): ColumnsType<RecordType> =>
rawMergedColumns.flatMap((column) => {
if ('children' in column) {
return [column, ...getMergedColumns(column.children || [])];
}
return [column];
});
function useFilter<RecordType>({
prefixCls,
dropdownPrefixCls,
mergedColumns,
mergedColumns: rawMergedColumns,
onFilterChange,
getPopupContainer,
locale: tableLocale,
@ -205,6 +215,8 @@ function useFilter<RecordType>({
FilterState<RecordType>[],
Record<string, FilterValue | null>,
] {
const mergedColumns = getMergedColumns(rawMergedColumns || []);
const [filterStates, setFilterStates] = React.useState<FilterState<RecordType>[]>(() =>
collectFilterStates(mergedColumns, true),
);