Ngx-Datatable Set Column Width Dynamically

Ngx-datatable set column width dynamically

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.

Angular ngx-datatable fixed column width is not working

As mentioned in the documentation, default value of the minWidth property is 100. IMHO, if we try to define a width value smaller than 100, then we need to define the minWidth property too.

minWidth: number

Minimum width of the column in pixels. Default value: 100

How to set columnMode/... of a ngx-datatable without binding to ViewModel?

You can apply columnMode="force" for your <ngx-datatable> element.

<ngx-datatable 
  columnMode="force"
  ...
>
</ngx-datatable>

Sample Demo on StackBlitz

---

1.0 According to ngx-datatable DataTableComponent (Line 186):

@Input() columnMode: ColumnMode | keyof typeof ColumnMode = ColumnMode.standard;

It is acceptable to pass columnMode with a string value.

For the detailed explanation for the keyof typeof on a enum, you may refer to @Yogesh's answer on What does "keyof typeof" mean in TypeScript?

---

2.0 According to Angular - Property Binding docs,

The brackets, [], cause Angular to evaluate the right-hand side of the assignment as a dynamic expression. Without the brackets, Angular treats the right-hand side as a string literal and sets the property to that static value.

how change a style of ngx datatable column on scroll?

You can use condition in the ngClass and apply the class based on it:

<div [ngClass]="flag ? 'applyStyle' : 'noStyle'"> </div>

If this doesn't work, there might be an issue with view encapsulation. You need to remove it. You should check this thread, it explains how to do that in simple steps.

Also, make sure your change detection strategy is set to default or make change detection if it is OnPush which will update the view properties.

---

Related Topics