I am trying to implement a way to change the table header.
Changing only the Thead
is possible but changing the contents of the table together was not successful.
app.component.ts
vamps = [
{ name: "Bad Vamp", age: 342, country: "USA" },
{ name: "Petrovitch the Slain", age: 187, country: "BR" },
{ name: "Bob of the Everglades", age: 225, country: "UK" },
{ name: "The Optimistic Reaper", age: 257, country: "JP" }
];
app.component.html
<table>
<thead>
<tr dragula="VAMPIRES">
<td>Name</td>
<td>Age</td>
<td>Coutry</td>
</tr>
</thead>
<tbody>
<tr *ngFor="let vamp of vamps">
<td>
{{vamp.name}}
</td>
<td>
{{vamp.age}}
</td>
<td>
{{vamp.country}}
</td>
</tr>
</tbody>
</table>
stackblitz: https://stackblitz.com/edit/ng2-dragula-base-ftxn1s?file=src%2Fapp%2Fapp.component.html
There is no connection between your header columns and your vamps.
<table>
<thead>
<tr dragula="VAMPIRES" [(dragulaModel)]="columns" >
<th *ngFor="let column of columns" >
{{column}}
</th >
</tr >
</thead>
<tbody>
<tr *ngFor="let vamp of vamps" >
<td *ngFor="let column of columns" >
{{vamp[column]}}
</td >
</tr >
</tbody>
</table>
https://stackblitz.com/edit/ng2-dragula-base-7viccg?file=src%2Fapp%2Fapp.component.html