ngx-datatable: columnMode flex resize not working

@mishkolesnikov thank you so much for the workaround! Here’s actual code how to do it:

import { DatatableComponent, ColumnMode } from '@swimlane/ngx-datatable';
...
@ViewChild(DatatableComponent) ngxDatatable: DatatableComponent;

ngAfterViewInit() {
  this.ngxDatatable.columnMode = ColumnMode.force;
}

I just noticed this. I think the flex column distribution alog is kinda buggy. I’m wondering how many ppl actually use it, might be worth removing.

Thanks for your job, cool table. Of course, I can’t speak for all the community, but for me it’s really important to define column width in some relative units. And for initial column rendering and column toggling flex mode works perfect, while there are some bugs with column toggling in force mode. IMHO flex mode is OK, except resizing, when flex recalculation not expected, and column should behave like in force mode.

Other solution:

@ViewChild('table') set datatable(table:DatatableComponent) {
                  table.columnMode=ColumnMode.force;
 }

or

@Directive({
  selector: '[ngxColumnMode]'
})
export class ColumnMode implements AfterViewInit {
  constructor(@Host() private datatable: DatatableComponent) {
    this.datatable.columnMode = ColumnMode.flex;
  }
  ngAfterViewInit(): void {
    this.datatable.columnMode = ColumnMode.force;
  }
}

@HackPoint this is what I’ve being working with (Not very beautiful but does the job)

@HostListener('window:resize')
  resize($event) {
    setTimeout(() => {
      this.table.columnMode = ColumnMode.flex;
    });
    this.resizeEvent.next($event);
  }

  // extra event to be able to apply debounceTime in order to execute specific actions like setting
  // the columnMode AFTER the actual resize happened.
  resizeEvent: Subject<MouseEvent> = new Subject<MouseEvent>();

  ngAfterViewInit() {
    this.resizeEvent.debounceTime(this.refreshForceColumnModeDelay).subscribe(() => {
      this.onResize();
    });
  }

onResize() - method is checking whats the current ColumnMode of the wrapped table and does the switch to force if not yet set.

@amcdnl don’t remove it, it’s very useful

I have faced the same problem, there are a lot of issues allredy opened about this bug, #681 for instance. When ‘resize’ event is fired column width in flex mode recalculate pro rata with flexGrow values but exactly the same as initially. Resized column and its flexGrow is taking into account when the table width destributed to columns what leads to the permanently the same columns widht. Simle workaround here is inject ngx-datatable to parent component via @ViewChild for example, and set columnMode ‘force’ manually in AfterViewInit hook. As result columns will behave as in ‘force’ mode, but only for resizing.