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

* 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

components/table/__tests__/Table.filter.test.tsx

@@ -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']);
+  });
 });

components/table/hooks/useFilter/index.tsx

@@ -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),
   );