The easy way to implement this is to take the index of the row and apply the filter or the splice method to the dataSource. Ideally we are going to create a click on the delete button and then we are going to get the row index. After that and with the row index swe are going to filter the dataSource to exclude the record with the same index as the index that we get from the click event. At this phase our code it will like look like this

this.dataSource.data = this.dataSource.data
  .filter(item, index => index !== selectedIndex );

This works fine in all cases if we don’t have pagination on our material table. So what happens in the case that we want to delete a record that it is on the second or the third page of the table and not in the first page?

###The Problem###

The problem is that, when we have pagination on the material table, the row Index starts from zero in every page. For example, the first element of the first page has index 0 and the first element of the second page has again index 0. Actually, every first element on every page has index equals to 0.

One solution to this is to follow the dataSource index. So the only thing that we need to do is to calculate the index every time that we want to remove an element. So from ngAfterViewInit we have available the table paginator

ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
}

With this we have access in some properties that paginator has. The properties that we want here is the pageIndex and the pageSize. Then we can calculate the rowIndex and will be

rowIndex + (pageIndex * pageSize)

Now we can create a function like below to remove the record from our table

delelteRecord(){
 const { pageIndex, pageSize } = paginator;
 const removeIndex = parentIndex + (pageIndex * pageSize);
 return dataSource.data.filter((i, index) => index !== 
 removeIndex);
}

Now the rowIndex will follow the dataSource index and we are ready to apply the filter method in our dataSource to get the new dataSource and display it to the screen.