0

I am making a datatable in which I would like to dynamically reorder the columns.

    export class myTableComponent {
    @Input() 
    data: any[]; 
    @ContentChildren(Column) myColumn: QueryList<Column>;  
}

I have initially a queryList of columns.

on mouseMove I would like to delete one column at a specific index of the queryList. For example, a table with tree columns if i delete on index 2, the table should then display a table with two columns.

How can I modify the queryList? I thought i would just need to splice the querylist but I can't

I have a shadow dom like that

  <g-table *ngIf="projects" [data]="projects" (reorder)="reorder($event);">
    <g-column draggable>
        <template let-row let-index="index"> {{row.cdeProjet}} (<b>{{row.nom}}</b>)   {{index}}</template>
    </g-column>
    <g-column field="nom"></g-column>
        <g-column field="title">    <template let-row let-index="index">test</template></g-column>
</g-table>

So I want to dynamically make the 3rd column to be the first. I know :
- The query list of g-column via contentchildren
- the index of the column I would like to drag.
- the index of the column I would like to replace with.

What is the proper way to do the reorder function? Thanks

user3409988
  • 427
  • 2
  • 7
  • 16
  • The preferred way is to update the data and let Angular update the DOM – Günter Zöchbauer Nov 27 '16 at 12:25
  • If you already have some code you could create a [codepen](http://codepen.io) or a [plunkr](http://plnkr.co/). This makes it easier to help. – surfmuggle Nov 27 '16 at 12:39
  • My table has a shadow dom like that So I access to the column children with querylist. how can i reorder so that column title appears as the first column dynamically? – user3409988 Nov 27 '16 at 13:18
  • 1
    solved it. My mistake is that i do ngfor on the querylist (to display every column) I should bind the querylist result to another array then i do ngfor on this. Then to change the order i change the array but not the query list. – user3409988 Nov 27 '16 at 13:57
  • @user3409988 Sorry for leaving this comment here, I'll delete it soon. You had a very nice question about the D3 key function, and I was about to answer it. I don't know why you deleted it. – Gerardo Furtado Sep 30 '17 at 11:53
  • I think I found the reason. d3 is using the key in an object. And we can't put a reference as key. – user3409988 Sep 30 '17 at 12:00

0 Answers0