title: Ag grid delete row and update table
body: <p>I created a separate component with delete functionality for ag grid. On clicking the delete button, the delete method received that single row data and I was able to make a the delete call. Now how can I update the table after deleting? I was thinking instead of making an api call again to backend to fetch data again if I can just filter out the deleted row from table and send it back to table. But how can I do that since I am in a separate component where I do not have the whole table data but just one row data?</p>
  <p>HTML</p>
  <pre><code>&lt;ag-grid-angular
      #agGrid
      style=&quot;width: 100%; height: 500px;&quot;
      class=&quot;ag-theme-alpine&quot;
      domLayout='autoHeight'
      [rowData]=&quot;rowData&quot;
      [gridOptions]=&quot;gridOptions&quot;
      [frameworkComponents]=&quot;frameworkComponents&quot;
  &gt;
  &lt;/ag-grid-angular&gt;
  </code></pre>
  <p>Code for buttonRenderer Component</p>
  <pre><code>public onDelete = async ($event) =&gt; {
    if ((await this.teamService.deleteTeamMember(this.params.node.data._id)) === false) 
  {
    return;
  }
    this.notification.success('Team member deleted successfully.');
  //this.team = this.team.filter((item) =&gt; item._id !== customer._id);
  };
  </code></pre>
  <p>Grid Component</p>
  <pre><code>this.gridOptions = {
          suppressMenuHide: false,
          columnDefs: [
          { headerName: 'Name', field: 'fullName', width: 150, sortable: true, filter: true },
          { headerName: 'Email', field: 'email', width: 170, sortable: true, filter: true, tooltipField: 'email'},
          {
            suppressMovable: true,
            headerName: 'Status',
            width: 100,
            field: 'disabled', cellRenderer: (params) =&gt; 
            params.data.disabled === false ? `&lt;img src=&quot;assets/images/check.svg&quot;&gt;` : `&lt;img src=&quot;assets/images/minus.svg&quot;&gt;`
          },
          { 
            headerName: 'Last Login', 
            field: 'lastLoginDate', 
            sortable: true, 
            filter: true,
            cellRenderer: (params) =&gt; params.data.lastLoginDate ? 
            new Date(params.data.lastLoginDate).toISOString().split('T')[0] + 
            `&lt;img src=&quot;assets/images/clock.svg&quot;&gt;` +
            new Date(params.data.lastLoginDate).toISOString().split('T')[1] : ``
          },
          {
            headerName: 'Created',
            width: 130,
            field: 'dateCreated',
            cellRenderer: (params) =&gt; new Date(params.data.dateCreated).toISOString().split('T')[0],
            sortable: true, 
            filter: true
          },
          {
            cellRenderer: 'buttonRenderer',
            cellRendererParams: {
              onClick: this.onBtnClick1.bind(this),
              label: 'Click 1'
            }
          },
         ],
        }
  </code></pre>