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
– Nabel, Commented Feb 26, 2020 at 12:43
You might need to modify your datasource and re render the table — Amit
– Amit, Commented Feb 26, 2020 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
– shasha0607, Commented Feb 26, 2020 at 13:09
I haven't used angular material. but there is refresh() method which you can trigger to update you grid — Amit
– Amit, Commented Feb 26, 2020 at 13:13

akushylun · Accepted Answer · 2020-02-26 13:29:23Z

1

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)
 })

answered Feb 26, 2020 at 13:29

akushylun

1511 silver badge5 bronze badges

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related