angularng2-dragula

How to use ng2-dragula in table columns


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


Solution

  • 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