title: Angular Mat-table DataSource value changed while updating the status
body: <p>table -&gt; Action -&gt; InActive</p>
  <p><strong>When we have changed the row status value, the mat-table data source value is also updated.</strong></p>
  <p>Our requirement is to change the status value after being updated to the database but now the mat-table immediately changes the status value.</p>
  <p>How do we stop the mat-table Datasource update?</p>
  <p>I have given the example. <strong>please see the stackblitz</strong></p>
  <p>HTML</p>
  <pre><code>&lt;table mat-table [dataSource]=&quot;dataSource&quot; class=&quot;mat-elevation-z8&quot;&gt;
    &lt;!--- Note that these columns can be defined in any order.
          The actual rendered columns are set as a property on the row definition&quot; --&gt;
  
    &lt;!-- Position Column --&gt;
    &lt;ng-container matColumnDef=&quot;position&quot;&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt;No.&lt;/th&gt;
      &lt;td mat-cell *matCellDef=&quot;let element&quot;&gt;{{element.position}}&lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;!-- Name Column --&gt;
    &lt;ng-container matColumnDef=&quot;name&quot;&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt;Name&lt;/th&gt;
      &lt;td mat-cell *matCellDef=&quot;let element&quot;&gt;{{element.name}}&lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;!-- Weight Column --&gt;
    &lt;ng-container matColumnDef=&quot;weight&quot;&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt;Weight&lt;/th&gt;
      &lt;td mat-cell *matCellDef=&quot;let element&quot;&gt;{{element.weight}}&lt;/td&gt;
    &lt;/ng-container&gt;
  
    &lt;!-- Symbol Column --&gt;
    &lt;ng-container matColumnDef=&quot;symbol&quot;&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt;Symbol&lt;/th&gt;
      &lt;td mat-cell *matCellDef=&quot;let element&quot;&gt;{{element.symbol}}&lt;/td&gt;
    &lt;/ng-container&gt;
    &lt;ng-container matColumnDef=&quot;status&quot;&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt;status&lt;/th&gt;
      &lt;td mat-cell *matCellDef=&quot;let element&quot;&gt;{{element.status}}&lt;/td&gt;
    &lt;/ng-container&gt;
    &lt;ng-container matColumnDef=&quot;actions&quot;&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt;Actions&lt;/th&gt;
      &lt;td mat-cell *matCellDef=&quot;let element&quot;&gt;
        &lt;button
          mat-button
          [matMenuTriggerFor]=&quot;menu&quot;
          class=&quot;nav-link dropdown-toggle mobile-data&quot;
        &gt;
          Acción
        &lt;/button&gt;
        &lt;mat-menu #menu=&quot;matMenu&quot;&gt;
          &lt;button
            mat-menu-item
            class=&quot;dropdown-item&quot;
            (click)=&quot;updateStatus('inActive',element)&quot;
          &gt;
            &lt;span&gt;InActive&lt;/span&gt;
          &lt;/button&gt;
        &lt;/mat-menu&gt;
      &lt;/td&gt;
    &lt;/ng-container&gt;
    &lt;tr mat-header-row *matHeaderRowDef=&quot;displayedColumns&quot;&gt;&lt;/tr&gt;
    &lt;tr mat-row *matRowDef=&quot;let row; columns: displayedColumns;&quot;&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  <p>ts</p>
  <pre><code>import { Component } from '@angular/core';
  
  /**
   * @title Basic use of `&lt;table mat-table&gt;`
   */
  @Component({
    selector: 'table-basic-example',
    styleUrls: ['table-basic-example.css'],
    templateUrl: 'table-basic-example.html',
  })
  export class TableBasicExample {
    displayedColumns = [
      'position',
      'name',
      'weight',
      'symbol',
      'status',
      'actions',
    ];
    dataSource = ELEMENT_DATA;
    updateStatus(status, item) {
      console.log('before set status', this.dataSource);
      item.status = status;
      console.log('After set status', this.dataSource);
    }
  }
  
  export interface PeriodicElement {
    name: string;
    position: number;
    weight: number;
    symbol: string;
    status: string;
  }
  
  const ELEMENT_DATA: PeriodicElement[] = [
    {
      position: 1,
      name: 'Hydrogen',
      weight: 1.0079,
      symbol: 'H',
      status: 'Active',
    },
    {
      position: 2,
      name: 'Helium',
      weight: 4.0026,
      symbol: 'He',
      status: 'Active',
    },
    {
      position: 3,
      name: 'Lithium',
      weight: 6.941,
      symbol: 'Li',
      status: 'Active',
    },
  ];
  </code></pre>
  <p>stackblitz demo: <a href="https://stackblitz.com/edit/angular-keucik?file=app/table-basic-example.ts" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-keucik?file=app/table-basic-example.ts</a></p>