One interesting feature I have implemented is a TableData type observable that provides me with a collection of table rows and columns. The user has the option to select a set of columns from a dropdown menu (which corresponds to the rows) to be sorted in ascending order by default.
This can be demonstrated by using an example where the user inputs "employee" and "project". In this case, the lines are first sorted by employee, and then each individual project is sorted in ascending order for that particular employee.
The relevant class types are as follows:
export interface TableColumn {
value: string;
label: string;
hidden: boolean;
format: (value: any) => string;
}
export interface TableRow {
[key: string]: any;
}
export interface TableData {
columns: TableColumn[];
rows: TableRow[];
}
export class Activity {
id?: number;
[HOURS_KEY]: number;
[DATE_KEY]: string;
[EMPLOYEE_KEY]: ActivityEmployee;
[TYPE_KEY]: ActivityType;
[PROJECT_KEY]?: ActivityProject;
}
export class ActivityEmployee {
id: number;
lastName: string;
firstName: string;
}
If I were to sort by Employee and Project only (as a static example), how would I go about ordering the observables I receive in a chained manner?
I currently call the observable results in the following way:
tableDataColumns$ = this.activityCollection.groupedEntities$?.pipe(
map((e) => e.columns)
);
tableDataRows$ = this.activityCollection.groupedEntities$?.pipe(
map((e) => e.rows)
);