Feature Description

It will specify the column which is filterable by dataSource.filter. It could be used mat-filter-header like mat-sort-header in the Template side.

Use Case

For the below case, we need to filter only for the visible columns, not real data.
If we set dataSource.filter = 1234, the first element is shown even though Users only see two columns "name" & "value" and there is no matching values. This makes users too confused.
So if we set up filterable columns, we can prevent this issue.

const displayedColumns = ['name', 'value'];
const dataSource = [
 {id: 1234, name: 'AA', value: 65},
 {id: 12345, name: 'BB', value: 67}
];