How do I add a custom column to angular material table?

Question

Currently, I have 4 columns in my data source. I want to perform some operations from the data I receive from one of the columns, and then add that data to a new column in the table. Is there any way to do that?

You can modify the data with map. This is more of a typescript action than angular. — Nabel, Feb 26 '20 at 12:43
You might need to modify your datasource and re render the table — Amit, Feb 26 '20 at 12:45
@Amit, how do I do that? I modified the data source, but I cannot see the new column data in my angular table. — shasha0607, Feb 26 '20 at 13:09
I haven't used angular material. but there is refresh() method which you can trigger to update you grid — Amit, Feb 26 '20 at 13:13

score 1 · Accepted Answer · answered Feb 26 '20 at 13:29

You could make changes in data before setting it to dataSource. For example, if you get some http data as observable, you could do:

this.data$ = this.certificateService.certificates$.pipe(
        map(data => {
          data.column5 = data.column4 // and make all other calculations
          return data;
       })
);

Then you could subscribe on data and set it in datasource

 this.data$.subscribe(data => {
   this.dataSource = new MatTableDataSource(data)
 })

How do I add a custom column to angular material table?

1 Answers1

Linked