Table

Tables for dynamic data; follow the examples closely, including the #cell ref

Contents

[rowTrackBy]="trackByFn"

The *ngFor directive removes table rows from the DOM and recreates them each time the data source changes. This is an expensive operation for large tables, and can cause performance problems.

Specify a custom trackBy function to let Angular know which rows do not need to be destroyed. The return value of this function will be used as a key to identify each row. Rows which have the same key as the previous data source are reused rather than destroyed.

If not provided, Angular defaults to object identity to track each row, i.e. the object reference itself is the key. Keep in mind that Observables generally produce immutable data structures, which means that object identities will change with each emission.

Name
Age
Job Title
Salary
Name

Alice

Age

24 years of age

Job Title

Software Engineer

Salary

$88,000.00

Name

Bob

Age

23 years of age

Job Title

Product Manager

Salary

Undisclosed Salary

Name

John

Age

22 years of age

Job Title

Data Scientist

Salary

$98,000.00

Inputs in Row track by
rowTrackBy ?: TrackByFunction<T>
Also set in this example
dataSource : readonly T[]
Outputs
pageSelected ?: any = new EventEmitter<number>()
rowExpanded ?: any = new EventEmitter<number | undefined>()

Emits the index of the currently expanded row - undefined if no row is expanded