fix(admin-ui): Fix incorrect tracking id on ProductOption's / ProductOption list per page switch (#3368)

packages/admin-ui/src/lib/catalog/src/components/product-options-editor/product-options-editor.component.html

@@ -78,9 +78,11 @@
                         id="edit-options-list"
                         *ngIf="getOptions(optionGroup) as options"
                         [items]="options"
+                        [trackByPath]="'value.id'"
                         [itemsPerPage]="paginationSettings[optionGroup.value.id]?.itemsPerPage"
                         [currentPage]="paginationSettings[optionGroup.value.id]?.currentPage"
                         (pageChange)="paginationSettings[optionGroup.value.id].currentPage = $event"
+                        (itemsPerPageChange)="paginationSettings[optionGroup.value.id].itemsPerPage = $event"
                         [totalItems]="options.length"
                     >
                         <vdr-dt2-column [heading]="'common.id' | translate" id="id" [hiddenByDefault]="true">

packages/admin-ui/src/lib/core/src/shared/components/data-table-2/data-table2.component.html

@@ -106,7 +106,7 @@
                                   totalItems: totalItems
                               };
                     index as i;
-                    trackBy: trackByFn
+                    trackBy: trackByFn.bind(this)
                 "
             >
                 <td *ngIf="selectionManager" class="selection-col" [class.active]="activeIndex === i">

packages/admin-ui/src/lib/core/src/shared/components/data-table-2/data-table2.component.ts

@@ -114,6 +114,7 @@ export class DataTable2Component<T> implements AfterContentInit, OnChanges, OnDe
     @Input() emptyStateLabel: string;
     @Input() filters: DataTableFilterCollection;
     @Input() activeIndex = -1;
+    @Input() trackByPath = 'id';
     @Output() pageChange = new EventEmitter<number>();
     @Output() itemsPerPageChange = new EventEmitter<number>();
     @Output() visibleColumnsChange = new EventEmitter<Array<DataTable2ColumnComponent<T>>>();
@@ -296,11 +297,9 @@ export class DataTable2Component<T> implements AfterContentInit, OnChanges, OnDe
     }
 
     trackByFn(index: number, item: any) {
-        if ((item as any).id != null) {
-            return (item as any).id;
-        } else {
-            return index;
-        }
+        return this.trackByPath.split('.').reduce((accu, val) => {
+            return accu && accu[val];
+        }, item) ?? index;
     }
 
     onToggleAllClick() {