Angular 2 Material | Datatables - Refresh table data dynamically and getting the index of selected row

Question

I am using Angular 2 material datatable in one of my projects. There are actually 2 parts to my question:

if I click on any one of the rows in the datatable, I need to get the row index so that I can apply an appropriate CSS on the selected row. I have read the documentation but could not find any mention of getting the index of each row.
I also allow the users to edit individual records in a datatable. For this, each row will have an EDIT button, clicking on which will open a modal dialog pre-populated with values. Once the data has been updated, I want to update the datatable with the new values. I can access the updated data model in the window containing the table. I want to understand how I Can dynamically update a row OR insert a new row in the datatable (the best practices).

Would appreciate any inputs here.

Check this answer for your first question.

Nehal
– Nehal

2017-08-25 12:15:55 +00:00
Commented Aug 25, 2017 at 12:15 — Nehal
– Nehal, Commented Aug 25, 2017 at 12:15

Will Howell · Accepted Answer · 2017-08-28 13:44:00Z

2

As @Nehal mentioned you can do this to get the row.id

html:

<md-row *cdkRowDef="let row; columns: displayedColumns; let index=index;"
  (click)="select(row, index)">
</md-row>

ts:

select(row, index) {
  // you can use a row id or just a table index
  this.selectedRowIndex = row.id;
}

The datatable will rerender if you connect() observable emits a new value. That solution will be specific to your application, but all you need to do is update your data model and then emit your data model again.

edited Aug 28, 2017 at 13:44

answered Aug 25, 2017 at 14:09

Will Howell

3,7252 gold badges26 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

va1b4av Over a year ago

Nehal's solution actually talks about using an Id field that is already present in the table. In my case, I may not have a column that uniquely identifies a row. So it may not work in my case. WIll, your solution, gives me the following error. Can you please help? Parser Error: Unexpected token = at column 42 in [let row; columns: displayedColumns; index=index;] in ng

jymdman Over a year ago

It should be: let index=index;

Will Howell Over a year ago

@va1b4av: fixed per @jymdman's suggestion. And as you mentioned, if you don't have a unique ID, then you can use the index. Just keep in mind that index is the index of displayed columns, so it will change if you're doing pagination or filtering.

schitzN · Accepted Answer · 2017-12-14 11:32:14Z

1

after you dynamically changed the elements in your MatTableDataSource

elements.forEach(ele => { this.dataSource.data.push(ele) });

you can force your table to redraw with

this.dataSource._updateChangeSubscription();

answered Dec 14, 2017 at 11:32

schitzN

134 bronze badges

Comments

Preston · Accepted Answer · 2017-11-26 22:31:37Z

Question #2 really wasn't answered so here is a solution with my delete code but the same for update code. Notice that once the result is a success I call a success modal to notify the user then call a function to remove the row from the data table. This way I don't have to download all the data again.

public deleteMember(memberId) {
      // Call the confirm dialog component
      this.confirmService.confirm('Confirm Delete', 'This action is final. Gone forever!')
          .switchMap(res => {if (res === true) {
              return this.appService.deleteItem(this.dbTable, memberId);
          }})
          .subscribe(
              result => {
                this.success();
                // Refresh DataTable to remove row.
                this.updateDataTable (memberId);
              },
              (err: HttpErrorResponse) => {
                  console.log(err.error);
                  console.log(err.message);
                this.messagesService.openDialog('Error', 'Delete did not happen.');
              }
          );
  }

Now lets remove, or update, that deleted, or edited, row.

  // Remove the deleted row from the data table. Need to remove from the downloaded data first.
  private updateDataTable (itemId) {
    this.dsData = this.dataSource.data;
    if (this.dsData.length > 0) {
      for (let i = 0; i < this.dsData.length; i++ ) {
        if (this.dsData[i].member_id === itemId) {
          this.dataSource.data.splice(i, 1);
        }
      }
    }
    this.dataSource.paginator = this.paginator;
  }

Collectives™ on Stack Overflow

Angular 2 Material | Datatables - Refresh table data dynamically and getting the index of selected row

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related