I am working with a material table that has expandable rows. Inside these expanded rows, there is another table with the same columns as the main table. Additionally, I have implemented filters in a form so that when the filter values change, I can update the dataSource accordingly.
Upon page initialization, I retrieve data for the table and store the results in a global variable. In the ngOnInit function, I subscribe to the valueChanges event of the form. However, I am encountering some challenges in this process. When I declare a variable based on the allData variable and attempt to filter on subRows within the dataSource, it inadvertently changes the data in the allData variable. Filtering at the first level does not pose any issues.
public allData;
public dataSource;
public ngOnInit(): void {
this.allData = this.service.getData(someProperties);
this.filterForm.valueChanges.subscribe((filters) => {
this.filterDataSource(filters);
});
}
public filterDataSource(filters) {
let filteredData = this.allData;
// Applying filters at the main level works fine
// No change observed in this.allData
filteredData = filteredData.filter((x) => {
return x.property.includes(filters.search);
});
// Sublevel filtering encounters issues
// Changes detected in this.allData
// The subRow in this.allData becomes empty after clearing the search
// If the filter did not find anything during application
for(let index = 0; index < filteredData.length; index++) {
filteredData[index].subRows = filteredData[index].subRows.filter((x) => {
x.property.includes(filters.search);
});
}
this.dataSource.data = filteredData;
}
The outcome of a search action and subsequent removal of the search term are as follows:
// Before applying the filter
allData = [
{
property: 'present',
subRow: [{
property: 'I'm here'
}]
},
{
// Additional entries
}
]
// After clearing the filter
allData = [
{
property: 'present',
subrow: []
},
{
// Additional entries
}
]