fix: Table column.title missing filters prop (#37629)

* fix: Table title missing filter data

* test: add test case

components/table/Table.tsx

@@ -269,7 +269,8 @@ function InternalTable<RecordType extends object = any>(
   /**
    * Controlled state in `columns` is not a good idea that makes too many code (1000+ line?) to read
    * state out and then put it back to title render. Move these code into `hooks` but still too
-   * complex. We should provides Table props like `sorter` & `filter` to handle control in next big version.
+   * complex. We should provides Table props like `sorter` & `filter` to handle control in next big
+   * version.
    */
 
   // ============================ Sorter =============================
@@ -317,7 +318,7 @@ function InternalTable<RecordType extends object = any>(
     );
   };
 
-  const [transformFilterColumns, filterStates, getFilters] = useFilter<RecordType>({
+  const [transformFilterColumns, filterStates, filters] = useFilter<RecordType>({
     prefixCls,
     locale: tableLocale,
     dropdownPrefixCls,
@@ -327,16 +328,23 @@ function InternalTable<RecordType extends object = any>(
   });
   const mergedData = getFilterData(sortedData, filterStates);
 
-  changeEventInfo.filters = getFilters();
+  changeEventInfo.filters = filters;
   changeEventInfo.filterStates = filterStates;
 
   // ============================ Column ============================
-  const columnTitleProps = React.useMemo(
-    () => ({
+  const columnTitleProps = React.useMemo(() => {
+    const mergedFilters: Record<string, FilterValue> = {};
+    Object.keys(filters).forEach(filterKey => {
+      if (filters[filterKey] !== null) {
+        mergedFilters[filterKey] = filters[filterKey]!;
+      }
+    });
+    return {
       ...sorterTitleProps,
-    }),
-    [sorterTitleProps],
-  );
+      filters: mergedFilters,
+    };
+  }, [sorterTitleProps, filters]);
+
   const [transformTitleColumns] = useTitleColumns(columnTitleProps);
 
   // ========================== Pagination ==========================

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

@@ -2475,4 +2475,26 @@ describe('Table.filter', () => {
         ?.disabled,
     ).toBeTruthy();
   });
+
+  it('title render function support `filter`', () => {
+    const title = jest.fn(() => 'RenderTitle');
+    const { container } = render(
+      createTable({
+        columns: [
+          {
+            ...column,
+            title,
+            filteredValue: ['boy'],
+          },
+        ],
+      }),
+    );
+
+    expect(container.querySelector('.ant-table-column-title')?.textContent).toEqual('RenderTitle');
+    expect(title).toHaveBeenCalledWith(
+      expect.objectContaining({
+        filters: { name: ['boy'] },
+      }),
+    );
+  });
 });

components/table/hooks/useFilter/index.tsx

@@ -203,7 +203,7 @@ function useFilter<RecordType>({
 }: FilterConfig<RecordType>): [
   TransformColumns<RecordType>,
   FilterState<RecordType>[],
-  () => Record<string, FilterValue | null>,
+  Record<string, FilterValue | null>,
 ] {
   const [filterStates, setFilterStates] = React.useState<FilterState<RecordType>[]>(
     collectFilterStates(mergedColumns, true),
@@ -235,10 +235,7 @@ function useFilter<RecordType>({
     return collectedStates;
   }, [mergedColumns, filterStates]);
 
-  const getFilters = React.useCallback(
-    () => generateFilterInfo(mergedFilterStates),
-    [mergedFilterStates],
-  );
+  const filters = React.useMemo(() => generateFilterInfo(mergedFilterStates), [mergedFilterStates]);
 
   const triggerFilter = (filterState: FilterState<RecordType>) => {
     const newFilterStates = mergedFilterStates.filter(({ key }) => key !== filterState.key);
@@ -258,7 +255,7 @@ function useFilter<RecordType>({
       tableLocale,
     );
 
-  return [transformColumns, mergedFilterStates, getFilters];
+  return [transformColumns, mergedFilterStates, filters];
 }
 
 export default useFilter;

components/table/interface.tsx

@@ -63,7 +63,7 @@ export interface ColumnTitleProps<RecordType> {
   sortColumn?: ColumnType<RecordType>;
   sortColumns?: { column: ColumnType<RecordType>; order: SortOrder }[];
 
-  filters?: Record<string, string[]>;
+  filters?: Record<string, FilterValue>;
 }
 
 export type ColumnTitle<RecordType> =