2

Rows disappear from mat-table when the search bar is put on focus and then the table is grouped.filtereddata property of datasource becomes empty when i group it. When filtered or put focus on search bar, the table gets filtered but then if I group or ungroup it, the rows of mat table disappear.

Here is the stackblitz example https://stackblitz.com/edit/%2Fapp.component.ts

Zoro
  • 23
  • 4

1 Answers1

0

The reason why your rows "disappear" is because you change your filter predicate when you focus the search field:

(focus)="setupFilter()"

Then, when you group rows (i.e. in your groupBy(event, column) method), you apply a new filter value:

this.dataSource.filter = performance.now().toString();

Then, your predicate returns false for all the rows, which means they get filtered out.

Honestly not sure what you're trying to achieve here with all that filter re-applying and predicate swapping, but that's the reason why your rows are not rendered.

TotallyNewb
  • 3,884
  • 1
  • 11
  • 16
  • is there any way to make it work.filter in groupby is used to expand and collapse the groupheader – Zoro Mar 25 '21 at 09:36
  • That's not the scope of the question you asked - I'd say look at one of the multiple tutorials that are out there. My two cents - filtering and grouping should be different logic, i.e. grouping should NOT apply changes to the filtering. Easiest way would probably be marking all rows from the groups as "collapsed" and adding proper logic to the `*matRowDef`'s `when:` selector for non-header rows. – TotallyNewb Mar 25 '21 at 10:10