web-dev-qa-db-fra.com

Définit dynamiquement la largeur de la colonne

Je stocke les largeurs de colonne de mon ngx-datatable dans une base de données. Je reçois ces valeurs en utilisant un appel AJAX .

Comment définir ces valeurs pour le datatable?

Ce que j'ai essayé:

  1. définition de la propriété [width] sur l'élément <ngx-datatable-column>
  2. injecter le datatable comme @ViewChild(DatatableComponent) table: DatatableComponent; et régler this.table.bodyComponent.columns[0].width = 500;

    J'ai essayé ces méthodes avec et sans this.table.recalculate();, mais rien ne semble fonctionner.


MODIFIER
J'utilise datatable-column avec header-template et cell-template.

javascriptangulartypescriptngx-datatable
2
flow3r

Je l'ai fait fonctionner, même si c'était très trivial: 

Je stocke les valeurs de largeur des colonnes dans une object qui fait office de dictionnaire . Le problème était que la grille avait été rendue avant la fin de mon appel ajax et ne pouvait pas la redessiner.

J'ai donc défini la valeur initiale de mon dictionnaire à null et mis un *ngIf sur la grille: <ngx-datatable *ngIf="colSizes">

De cette façon, le rendu ne se produit que lorsque les valeurs du dictionnaire sont prêtes à être utilisées.

1
flow3r

Si vous utilisez la solution de Hoang Duc Nguyen , vous pouvez également stocker la largeur dans les colonnes:

 columns = [
    { name: 'Name', prop: 'name', width: 250},
    { name: 'Gender', prop: 'gender'},
    { name: 'Company', prop: 'company', sortable: false }
  ];
3
René

Vous devez définir la colonne width avec [columnMode]="force", comme ceci:

app.component.html

<ngx-datatable
  class="material"
  [rows]="rows"
  [loadingIndicator]="loadingIndicator"
  [columns]="columns"
  [columnMode]="force"
  [headerHeight]="50"
  [footerHeight]="50"
  [rowHeight]="'auto'"
  [reorderable]="reorderable">
</ngx-datatable>

app.component.ts

  columns = [
    { name: 'Name', prop: 'name'},
    { name: 'Gender', prop: 'gender'},
    { name: 'Company', prop: 'company', sortable: false }
  ];

  rows = [
    {name: "A", gender: "male", company: "abc"},
    {name: "B", gender: "female", company: "abc"},
    {name: "C", gender: "male", company: "abc"}
  ];

  columnWidths = [
    {column: "name", width: 50},
    {column: "gender", width: 100},
    {column: "company", width: 150}
  ]

  ngOnInit() {
    this.columns.forEach((col: any) => {
      const colWidth = this.columnWidths.find(colWidth => colWidth.column === col.prop);
      if (colWidth) {
        col.width = colWidth.width;
      }
    });
  }
1
Hoang Duc Nguyen

vous pouvez définir la largeur souhaitée pour la colonne dans la définition de colonne de votre tableau . pour exemple:

  providersColumns = [
            { prop: 'id', name: 'ID', sortable: true, width: -100 },
            { prop: 'name', name: 'Name', sortable: true },
            { prop: 'email', name: 'Email', sortable: true ,width:50}

il y a un point ici !!! Définissez une largeur fixe pour chaque colonne si vous souhaitez augmenter cette largeur, vous devez définir un nombre positif que ce nombre ajoutera à la largeur pouvant être datée de Ngx. 50 comme largeur, 50 ajoutera à la largeur fixe datable de Ngx: 50 + x (je ne suis pas sûr mais je pense que c'était 130 PX pour chaque colonne)

La largeur finale de la colonne de courrier électronique sera donc 50 + 130 = 180 PX

ou si vous voulez diminuer cette largeur, vous devez définir un nombre négatif que ce nombre ajoutera à la largeur datable de Ngx. Si vous définissez -100 comme largeur, -100 sera moins la largeur fixe datable de Ngx: -100 + x 

La largeur finale de la colonne id sera de -100 + 130 = 30 PX

0
Hamid