I am currently utilizing angular 9 along with Nebular v6.1.0 in my project. One issue I have encountered is related to filtering and sorting data displayed using the nebular TreeGridComponent. When dealing with basic data types such as strings or numbers, filtering and sorting work seamlessly for every property of the object. However, complications arise when the object contains complex data types like another object. It appears that filtering based on the properties of this nested object is not straightforward, even though displaying them is not a problem. To elaborate further, consider the following example:
import { Component } from '@angular/core';
import { NbGetters, NbTreeGridDataSource, NbTreeGridDataSourceBuilder } from '@nebular/theme';
interface FSEntry {
name: string;
myObject: MyObject;
}
interface MyObject {
myObjectName: string;
}
@Component({
template: `
<nb-card>
<nb-card-body>
<table [nbTreeGrid]="source" nbSort (sort)="changeSort($event)">
<tr nbTreeGridHeaderRow *nbTreeGridHeaderRowDef="allColumns"></tr>
<tr nbTreeGridRow *nbTreeGridRowDef="let row; columns: allColumns"></tr>
<!-- this row is sortable -->
<ng-container nbTreeGridColumnDef="name">
<th nbTreeGridHeaderCell *nbTreeGridHeaderCellDef [nbSortHeader]="getDirection('name')">Name</th>
<td nbTreeGridCell *nbTreeGridCellDef="let row">
row.data.name
</td>
</ng-container>
<!-- this row is NOT sortable -->
<ng-container nbTreeGridColumnDef="myObjectName">
<th nbTreeGridHeaderCell *nbTreeGridHeaderCellDef [nbSortHeader]="getDirection('myObjectName')">MyObjectName</th>
<td nbTreeGridCell *nbTreeGridCellDef="let row">
row.data.myObject.myObjectName
</td>
</ng-container>
</table>
</nb-card-body>
</nb-card>
`,
styleUrls: ['./tree-grid-shared.scss'],
})
export class TreeGridComponent {
defaultColumns = [ 'name', 'myObjectName' ];
allColumns = [ ...this.defaultColumns ];
source: NbTreeGridDataSource<FSEntry>;
constructor(dataSourceBuilder: NbTreeGridDataSourceBuilder<FSEntry>) {
const getters: NbGetters<FSEntry, FSEntry> = {
dataGetter: (node: FSEntry) => node,
childrenGetter: (node: FSEntry) => node.childEntries || undefined,
expandedGetter: (node: FSEntry) => !!node.expanded,
};
this.source = dataSourceBuilder.create(this.data, getters);
}
getDirection(column: string): NbSortDirection {
if (column === this.sortColumn) {
return this.sortDirection;
}
return NbSortDirection.NONE;
}
changeSort(sortRequest: NbSortRequest): void {
this.dataSource.sort(sortRequest);
this.sortColumn = sortRequest.column;
this.sortDirection = sortRequest.direction;
}
private data: FSEntry[] = [
{
name: 'name 1',
myObject: {
myObjectName: 'myObjectName 1'
}
},
{
name: 'name 2',
myObject: {
myObjectName: 'myObjectName 2'
}
}
];
}
This code allows sorting the name row, but not the myObjectName row. Are there any solutions to enable sorting without having to move properties from MyObject to FSEntry?