Cacher une colonne avec ngx-datatable

Bonjour à tous,

Je suis nouveau sur angular et je cherche à manipuler des tableaux de données pouvant être modifiable.
Notamment, je cherche à créer une colonne ID qui ne serait jamais affichée sur ma page mais serait disponible sur mon code pour me permettre de manipuler plus facilement mes données.
J'ai essayé ce code qui permet en sélectionnant une checkbox de dissimuler une colonne comme sur cet exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
import { Component } from '@angular/core';
 
@Component({
  selector: 'column-hidden',
  template: `
      <div style='float:left;width:75%'>
        <ngx-datatable
          class='material'
          [rows]='rows'
          [columnMode]="'force'"
          [headerHeight]="50"
          [footerHeight]="50"
          [rowHeight]="'auto'">
          <ngx-datatable-column 
            *ngFor="let col of columns" 
            [name]="col.name">
          </ngx-datatable-column>
        </ngx-datatable>
      </div>
      <div class='selected-column'>
        <h4>Available Columns</h4>
        <ul>
          <li *ngFor='let col of allColumns'>
            <input
              type='checkbox'
              [id]="col.name"
              (click)='toggle(col)'
              [checked]='isChecked(col)'
            />
            <label [attr.for]="col.name">{{col.name}}</label>
          </li>
        </ul>
      </div>
  `
})
export class ColumnToggleComponent {
 
  rows = [
    {
      name: 'Claudine Neal',
      gender: 'female',
      company: 'Sealoud'
    },
    {
      name: 'Beryl Rice',
      gender: 'female',
      company: 'Velity'
    }
  ];
 
  columns = [
    { name: 'Name' },
    { name: 'Gender' },
    { name: 'Company' }
  ];
 
  allColumns = [
    { name: 'Name' },
    { name: 'Gender' },
    { name: 'Company' }
  ];
 
  toggle(col) {
    const isChecked = this.isChecked(col);
 
    if(isChecked) {
      this.columns = this.columns.filter(c => { 
        return c.name !== col.name; 
      });
    } else {
      this.columns = [...this.columns, col];
    }
  }
 
  isChecked(col) {
    return this.columns.find(c => {
      return c.name === col.name;
    });
  }
 
}

Mais je n'arrive pas à modifier ce code pour par exemple laisser cacher la colonne name tout le temps sans faire apparaître la checkbox...