How to use ng2-dragula in table columns

Question

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

Answer 1

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