fix(Table): the onFilter methods of column adds ability to filter chi…

…ldren (#47170)
ant-design · Jan 29, 2024 · 77d7161 · 77d7161
1 parent 55e8092
commit 77d7161
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 8 deletions.
diff --git a/components/table/InternalTable.tsx b/components/table/InternalTable.tsx
@@ -289,6 +289,7 @@ const InternalTable = <RecordType extends AnyObject = AnyObject>(
       currentDataSource: getFilterData(
         getSortData(rawData, changeInfo.sorterStates!, childrenColumnName),
         changeInfo.filterStates!,
+        childrenColumnName,
       ),
       action,
     });
@@ -355,7 +356,7 @@ const InternalTable = <RecordType extends AnyObject = AnyObject>(
     getPopupContainer: getPopupContainer || getContextPopupContainer,
     rootClassName: classNames(rootClassName, rootCls),
   });
-  const mergedData = getFilterData(sortedData, filterStates);
+  const mergedData = getFilterData(sortedData, filterStates, childrenColumnName);
 
   changeEventInfo.filters = filters;
   changeEventInfo.filterStates = filterStates;

diff --git a/components/table/__tests__/Table.filter.test.tsx b/components/table/__tests__/Table.filter.test.tsx
@@ -579,6 +579,47 @@ describe('Table.filter', () => {
     expect(container.querySelectorAll('tbody tr').length).toBe(4);
   });
 
+  it('can filter children by defaultFilteredValue', async () => {
+    const { container } = render(
+      createTable({
+        columns: [
+          {
+            ...column,
+            defaultFilteredValue: ['Jim', 'Tom'],
+            onFilter: (value: string, record) => {
+              if (record.children && record.children.length) {
+                return true;
+              }
+              return record.name.includes(value);
+            },
+          },
+        ],
+        dataSource: [
+          {
+            key: '0',
+            name: 'Jack',
+            children: [
+              { key: '0-1', name: 'Jim' },
+              { key: '0-2', name: 'Tony' },
+            ],
+          },
+          { key: '1', name: 'Lucy' },
+          { key: '2', name: 'Tom' },
+          { key: '3', name: 'Jerry' },
+        ],
+        expandable: {
+          defaultExpandAllRows: true,
+        },
+      }),
+    );
+
+    expect([...container.querySelectorAll('tbody tr')].map((item) => item.textContent)).toEqual([
+      'Jack',
+      'Jim',
+      'Tom',
+    ]);
+  });
+
   //  Warning: An update to Item ran an effect, but was not wrapped in act(...).
   it('fires change event', () => {
     const handleChange = jest.fn();

diff --git a/components/table/hooks/useFilter/index.tsx b/components/table/hooks/useFilter/index.tsx
@@ -157,20 +157,36 @@ function generateFilterInfo<RecordType>(filterStates: FilterState<RecordType>[])
 export function getFilterData<RecordType>(
   data: RecordType[],
   filterStates: FilterState<RecordType>[],
+  childrenColumnName: string,
 ) {
   return filterStates.reduce((currentData, filterState) => {
     const {
       column: { onFilter, filters },
       filteredKeys,
     } = filterState;
     if (onFilter && filteredKeys && filteredKeys.length) {
-      return currentData.filter((record) =>
-        filteredKeys.some((key) => {
-          const keys = flattenKeys(filters);
-          const keyIndex = keys.findIndex((k) => String(k) === String(key));
-          const realKey = keyIndex !== -1 ? keys[keyIndex] : key;
-          return onFilter(realKey, record);
-        }),
+      return (
+        currentData
+          // shallow copy
+          .map((record) => ({ ...record }))
+          .filter((record: any) =>
+            filteredKeys.some((key) => {
+              const keys = flattenKeys(filters);
+              const keyIndex = keys.findIndex((k) => String(k) === String(key));
+              const realKey = keyIndex !== -1 ? keys[keyIndex] : key;
+
+              // filter children
+              if (record[childrenColumnName]) {
+                record[childrenColumnName] = getFilterData(
+                  record[childrenColumnName],
+                  filterStates,
+                  childrenColumnName,
+                );
+              }
+
+              return onFilter(realKey, record);
+            }),
+          )
       );
     }
     return currentData;