Trackby for the bill table. This should prevent rerendering and it jumping up.

bookie/src/app/sales/bills/bills.component.html

@@ -1,6 +1,6 @@
 <h2>Bill</h2>
 
-<table mat-table #table [dataSource]="dataSource" aria-label="Elements" class="mat-elevation-z8">
+<table mat-table #table [dataSource]="dataSource" class="mat-elevation-z8" [trackBy]="trackByKotProductId">
   <ng-container matColumnDef="bill-no-title">
     <mat-header-cell *matHeaderCellDef class="deep-purple-200 bold">Bill / KOT number</mat-header-cell>
   </ng-container>

bookie/src/app/sales/bills/bills.component.ts

@@ -37,7 +37,6 @@ import { VoucherType } from './voucher-type';
     AsyncPipe,
     CurrencyPipe,
     MatButtonModule,
-
     MatCheckboxModule,
     MatIconModule,
     MatTableModule,
@@ -64,7 +63,6 @@ export class BillsComponent implements OnInit {
       this.bs.loadData(data.item, data.updateTable);
     });
     this.getPax();
-    this.dataSource = new BillsDataSource(this.bs.dataObs);
   }
 
   getPax(): void {
@@ -188,6 +186,13 @@ export class BillsComponent implements OnInit {
     }
   }
 
+  trackByKotProductId(index: number, row: BillViewItem): string {
+    // Fallbacks in case fields are undefined/null
+    const kotId = row.kotId ?? '';
+    const productId = row.productId ?? '';
+    return `${kotId}_${productId}`;
+  }
+
   addOne(item: BillViewItem): void {
     this.bs.addOne(item);
   }