Disable rendering of the whole table on input change

In my angular application I am using Material table with over 1700 rows in it. I have noticed, that whenever I even hover input field, it is getting completely updated. Same happens, when I am put some value iniside of the input field: it renders itself completely and THEREFORE performance is getting ridiculously slow. Here on the gif you can see what happens exactly:

Here's how ng-container for the value column looks like:

<ng-container matColumnDef="varValue">
            <th mat-header-cell class="varValue-header" *matHeaderCellDef> Value </th>
            <td mat-cell *matCellDef="let ddsVariable" class="varValue-cell">
                <mat-form-field class="matFormField" appearance="outline">
                    <input type="number" id="quantity" name="quantity" min="0" max="999999" matInput class="input-value"
                        [value]="ddsVariable.value" (input)=" handleEditRow(ddsVariable.id,$any($event).target.value)">
                </mat-form-field>
            </td>
        </ng-container>

The question from my side is: how can I disable that complete update and whether it‘s even possible?

After reading docs I found out, that problem was with using [dataSource] as a traditional method to initialize the table. So, I've changed the table's code according to my needs, i.e. I don't use dataSource, but iterate over available source of data and render it, whenever completely new data is loaded. This allows me to avoid automatical render of the COMPLETE table, but only row's column, whenever it also changes. This is how it looks now:

<div class="left-table">
    <table>
        <!-- Table header -->
        <thead>
            <tr>
                <th class="select-header">
                    <mat-checkbox (change)="$event ? masterToggle() : null"
                        [checked]="selection.hasValue() && isAllSelected()"
                        [indeterminate]="selection.hasValue() && !isAllSelected()">
                    </mat-checkbox>
                </th>
                <th class="varName-header"> Name </th>
                <th class="varType-cell"> Type </th>
                <th class="varValue-header"> Value </th>
            </tr>
        </thead>

        <tbody>
            <ng-container *ngIf="ddsVariablesLeft.length > 0">
              <!-- here i am iterating -->
                <tr *ngFor="let row of ddsVariablesLeft"> 
                    <td class="select-cell">
                        <mat-checkbox (click)="$event.stopPropagation()"
                            (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
                        </mat-checkbox>
                    </td>
                    <td class="varName-cell"> {{row.name}}</td>
                    <td> {{row.type}}</td>
                    <td class="varValue-cell">
                        <mat-form-field class="matFormField" appearance="outline">
                            <input type="number" id="quantity" name="quantity" min="0" max="999999" matInput
                                class="input-value" [value]="row.value"
                                (input)=" handleEditRow(row.id,$any($event).target.value)">
                        </mat-form-field>
                    </td>
                </tr>
            </ng-container>
        </tbody>
    </table>
</div>