Skip to content

Commit

Permalink
fix(Table): the onFilter methods of column adds ability to filter chi…
Browse files Browse the repository at this point in the history 
…ldren
  • Loading branch information
@Mumujianguang
Mumujianguang committed Jan 26, 2024
1 parent 984f855 commit 8478481
Show file tree
Hide file tree
Showing 5 changed files with 176 additions and 17 deletions.
3 changes: 2 additions & 1 deletion components/table/InternalTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -289,6 +289,7 @@ const InternalTable = <RecordType extends AnyObject = AnyObject>(
currentDataSource: getFilterData(
getSortData(rawData, changeInfo.sorterStates!, childrenColumnName),
changeInfo.filterStates!,
childrenColumnName,
),
action,
});
Expand Down Expand Up @@ -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;
Expand Down
78 changes: 74 additions & 4 deletions components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9622,6 +9622,36 @@ exports[`renders components/table/demo/filter-in-tree.tsx extend context correct
</span>
</span>
</div>
<div
aria-grabbed="false"
class="ant-tree-treenode ant-tree-treenode-switcher-open"
draggable="false"
>
<span
aria-hidden="true"
class="ant-tree-indent"
/>
<span
class="ant-tree-switcher ant-tree-switcher-noop"
/>
<span
class="ant-tree-checkbox"
>
<span
class="ant-tree-checkbox-inner"
/>
</span>
<span
class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-normal"
title="Jim"
>
<span
class="ant-tree-title"
>
Jim
</span>
</span>
</div>
<div
aria-grabbed="false"
class="ant-tree-treenode ant-tree-treenode-switcher-open"
Expand Down Expand Up @@ -10226,8 +10256,18 @@ exports[`renders components/table/demo/filter-in-tree.tsx extend context correct
data-row-key="1"
>
<td
class="ant-table-cell"
class="ant-table-cell ant-table-cell-with-append"
>
<span
class="ant-table-row-indent indent-level-0"
style="padding-left: 0px;"
/>
<button
aria-expanded="false"
aria-label="Expand row"
class="ant-table-row-expand-icon ant-table-row-expand-icon-collapsed"
type="button"
/>
John Brown
</td>
<td
Expand All @@ -10246,8 +10286,18 @@ exports[`renders components/table/demo/filter-in-tree.tsx extend context correct
data-row-key="2"
>
<td
class="ant-table-cell"
class="ant-table-cell ant-table-cell-with-append"
>
<span
class="ant-table-row-indent indent-level-0"
style="padding-left: 0px;"
/>
<button
aria-expanded="false"
aria-label="Expand row"
class="ant-table-row-expand-icon ant-table-row-expand-icon-spaced"
type="button"
/>
Jim Green
</td>
<td
Expand All @@ -10266,8 +10316,18 @@ exports[`renders components/table/demo/filter-in-tree.tsx extend context correct
data-row-key="3"
>
<td
class="ant-table-cell"
class="ant-table-cell ant-table-cell-with-append"
>
<span
class="ant-table-row-indent indent-level-0"
style="padding-left: 0px;"
/>
<button
aria-expanded="false"
aria-label="Expand row"
class="ant-table-row-expand-icon ant-table-row-expand-icon-spaced"
type="button"
/>
Joe Black
</td>
<td
Expand All @@ -10286,8 +10346,18 @@ exports[`renders components/table/demo/filter-in-tree.tsx extend context correct
data-row-key="4"
>
<td
class="ant-table-cell"
class="ant-table-cell ant-table-cell-with-append"
>
<span
class="ant-table-row-indent indent-level-0"
style="padding-left: 0px;"
/>
<button
aria-expanded="false"
aria-label="Expand row"
class="ant-table-row-expand-icon ant-table-row-expand-icon-collapsed"
type="button"
/>
Jim Red
</td>
<td
Expand Down
48 changes: 44 additions & 4 deletions components/table/__tests__/__snapshots__/demo.test.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8328,8 +8328,18 @@ exports[`renders components/table/demo/filter-in-tree.tsx correctly 1`] = `
data-row-key="1"
>
<td
class="ant-table-cell"
class="ant-table-cell ant-table-cell-with-append"
>
<span
class="ant-table-row-indent indent-level-0"
style="padding-left:0px"
/>
<button
aria-expanded="false"
aria-label="Expand row"
class="ant-table-row-expand-icon ant-table-row-expand-icon-collapsed"
type="button"
/>
John Brown
</td>
<td
Expand All @@ -8348,8 +8358,18 @@ exports[`renders components/table/demo/filter-in-tree.tsx correctly 1`] = `
data-row-key="2"
>
<td
class="ant-table-cell"
class="ant-table-cell ant-table-cell-with-append"
>
<span
class="ant-table-row-indent indent-level-0"
style="padding-left:0px"
/>
<button
aria-expanded="false"
aria-label="Expand row"
class="ant-table-row-expand-icon ant-table-row-expand-icon-spaced"
type="button"
/>
Jim Green
</td>
<td
Expand All @@ -8368,8 +8388,18 @@ exports[`renders components/table/demo/filter-in-tree.tsx correctly 1`] = `
data-row-key="3"
>
<td
class="ant-table-cell"
class="ant-table-cell ant-table-cell-with-append"
>
<span
class="ant-table-row-indent indent-level-0"
style="padding-left:0px"
/>
<button
aria-expanded="false"
aria-label="Expand row"
class="ant-table-row-expand-icon ant-table-row-expand-icon-spaced"
type="button"
/>
Joe Black
</td>
<td
Expand All @@ -8388,8 +8418,18 @@ exports[`renders components/table/demo/filter-in-tree.tsx correctly 1`] = `
data-row-key="4"
>
<td
class="ant-table-cell"
class="ant-table-cell ant-table-cell-with-append"
>
<span
class="ant-table-row-indent indent-level-0"
style="padding-left:0px"
/>
<button
aria-expanded="false"
aria-label="Expand row"
class="ant-table-row-expand-icon ant-table-row-expand-icon-collapsed"
type="button"
/>
Jim Red
</td>
<td
Expand Down
34 changes: 33 additions & 1 deletion components/table/demo/filter-in-tree.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ interface DataType {
name: string;
age: number;
address: string;
children?: DataType[];
}

const columns: TableColumnsType<DataType> = [
Expand All @@ -18,6 +19,10 @@ const columns: TableColumnsType<DataType> = [
text: 'Joe',
value: 'Joe',
},
{
text: 'Jim',
value: 'Jim',
},
{
text: 'Category 1',
value: 'Category 1',
Expand Down Expand Up @@ -49,7 +54,12 @@ const columns: TableColumnsType<DataType> = [
],
filterMode: 'tree',
filterSearch: true,
onFilter: (value: string, record) => record.name.includes(value),
onFilter: (value: string, record) => {
if (record.children && record.children.length) {
return true;
}
return record.name.includes(value);
},
width: '30%',
},
{
Expand Down Expand Up @@ -82,6 +92,20 @@ const data: DataType[] = [
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
children: [
{
key: '1-1',
name: 'John Yellow',
age: 33,
address: 'New York No. 1 Lake Park',
},
{
key: '1-2',
name: 'John Pink',
age: 34,
address: 'New York No. 1 Lake Park',
},
],
},
{
key: '2',
Expand All @@ -100,6 +124,14 @@ const data: DataType[] = [
name: 'Jim Red',
age: 32,
address: 'London No. 2 Lake Park',
children: [
{
key: '4-1',
name: 'Jim Yellow',
age: 33,
address: 'London No. 2 Lake Park',
},
],
},
];

Expand Down
30 changes: 23 additions & 7 deletions components/table/hooks/useFilter/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,20 +157,36 @@ function generateFilterInfo<RecordType>(filterStates: FilterState<RecordType>[])
export function getFilterData<RecordType>(
data: RecordType[],
filterStates: FilterState<RecordType>[],
childrenColumnName = 'children',

Check warning on line 160 in components/table/hooks/useFilter/index.tsx

View check run for this annotation

Codecov / codecov/patch

components/table/hooks/useFilter/index.tsx#L160 

Added line #L160 was not covered by tests
) {
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(

Check warning on line 180 in components/table/hooks/useFilter/index.tsx

View check run for this annotation

Codecov / codecov/patch

components/table/hooks/useFilter/index.tsx#L180 

Added line #L180 was not covered by tests
record[childrenColumnName],
filterStates,
childrenColumnName,
);
}

return onFilter(realKey, record);
}),
)
);
}
return currentData;
Expand Down

0 comments on commit 8478481

Please sign in to comment.