0

While adding the dynamic columns into the mat table, rows are adding along with columns. But dont want to add the rows into the table while adding the columns.

I have the list of items which needs to add/remove as columns as dynamically to the table. While clicking the item, that item is added as column into the table and at the same time one row is adding. dont want to add the row in to the table.

If 5 items are adding as columns 5 rows are added to the table.

you can check the issue https://stackblitz.com/edit/angular-pg9fie

srikanth
  • 85
  • 4
  • 10
  • 1
    In this SO https://stackoverflow.com/questions/56562871/angular-6-html-table-create-dynamic-columns-and-rows/56664523#56664523 you has how add rows and columns to a data table – Eliseo Feb 09 '20 at 14:43

1 Answers1

1

It looks like you are adding a new row to the data source every time a column is added. From your code:

this.selectedOptions.forEach(element => {
  this.tableDataSource.push(element.name); // this is adding a row
});

Instead, you just want to add the column to the list of displayed columns. There are other problems with your code as well, so I'm just sharing an example of the functionality that I think you are looking for:

https://stackblitz.com/edit/angular-material-table-dynamic-columns?embed=1&file=app/app.html

Matt Nienow
  • 1,168
  • 6
  • 16
  • I have comments that above code, its working as excepted. In the same examle, i have to add some rows as input and some other as drop-down. Which row should be the drop-down by using the column name only. And also here column names will come from service. Could you please help on this? @Matt – srikanth Feb 08 '20 at 19:59