Ngx-datatable set column width dynamically

问题

I'm storing the column widths of my ngx-datatable inside a database. I get these values using an AJAX call.

How can I set these values for the datatable?

What I've tried:

setting the [width] property on the <ngx-datatable-column> element
injecting the datatable as @ViewChild(DatatableComponent) table: DatatableComponent; and setting this.table.bodyComponent.columns[0].width = 500;

I've tried these methods with and without this.table.recalculate();, but nothing seems to work.

EDIT
I'm using datatable-column with header-template and cell-template.

回答1:

If you use the solution of Hoang Duc Nguyen, you can also store the width in the columns:

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

回答2:

I got it working, though it was very trivial:

I store the width values of the columns in an object which acts as a dictionary. The problem was that the grid was rendered before my ajax call has finished and could not make the grid to redraw itself.

So I set the initial value of my dictionary object to null and put an *ngIf on the grid: <ngx-datatable *ngIf="colSizes">

This way the rendering happens only after the values of the dictionary are ready to be used.

回答3:

You need to set column width along with [columnMode]="force", like this:

app.component.html

<ngx-datatable
  class="material"
  [rows]="rows"
  [loadingIndicator]="loadingIndicator"
  [columns]="columns"
  [headerHeight]="50"
  [footerHeight]="50"
  [rowHeight]="'auto'"
  [reorderable]="reorderable"
  columnMode="force">
</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;
      }
    });
  }

回答4:

you can set your desired width for column in your table column definition. for exmaple:

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

there is a point here !!! Ngx-datatable set a fixed width for every column if you want to increase that width you should set a positive number that this number will add to the Ngx-datatable width i mean if you set 50 as width ,50 will add to Ngx-datatable fixed width : 50 + x ( Im not sure but i think it was 130 PX for every column)

so final width for email column will be 50+130 =180 PX

or if you want to decrease that width you should set a negative number that this number will add to the Ngx-datatable width i mean if you set -100 as width ,-100 will minus Ngx-datatable fixed width : -100 + x

final width for id column will be -100+130 =30 PX

来源：https://stackoverflow.com/questions/48228412/ngx-datatable-set-column-width-dynamically

标签

javascript

angular

typescript

ngx-datatable