When using [columnMode]="'flex'" table header is not matching columms.

[webmatrixxxl]

I'm submitting a ... (check one with "x")

[x ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here

Current behavior There is no way column width to be as it's content size ?

• When using [columnMode]="'flex'" table header is not matching columms.
• [canAutoResize] - is not working or breaks table width. [canAutoResize]="false" and [maxWidth]="40" breaks header matching oclumns... and so on

Expected behavior

Reproduction of the problem

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

• Table version: 0.6.3

• Angular version: 2.4.8

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

• Language: [all | TypeScript X.X | ES6/7 | ES5]

[kernwig]

Same trouble, in v8.2.1.

[bopm]

It works when flex is mentioned without quotes (') but then it's not passing AoT compiling.

[bopm]

Adding public flex:any; public auto:any; to component solves AoT issue.

[webmatrixxxl]

@amcdnl v 9.3.0 when using [columnMode]="flex'", [maxWidth] is applied only on the header column

[erewok]

I have the same problem on v9.3.1. I see it when resizing columns or when resizing the window: the table content redraws independently of the table headers. Using flex without quotes is the same as not using flex at all: table column content follows the headers, but the columns don't flexGrow in that case and I get horizontal scrollbars.

[advenioinc]

Same issue, I think, using 9.3.1. Using [columnMode]="'force'" and [scrollbarH]="true", with 19 columns, which should scroll once the data is loaded, instead I get column header widths that don't match the column widths. My expectation would be that they columns would match the headers widths and the whole table would just scroll horizontally, but the columns all get forced into the available space initially. Once the headers don't match the columns, resizing doesn't seem to reset them to lining up from that point on.

[erewok]

I had this problem only when resizing columns and playing with recalculate didn't help much. I tried a number of different things, but then I realized the following:

1. It always draws correctly on page-load, and
2. It always resets correctly when I drag to resize a column.

So I just made a show attribute on the component that holds the table and I added a HostListener for (window:resize) that looked like this:

import { throttleable } from '@swimlane/ngx-datatable/src/utils';

  @HostListener('window:resize')
  @throttleable(5)
  resize(event) {
    this.show = false;
    setTimeout(() => {
      console.log("FIRING!");
      if (this.myColumns.length > 0) {
        this.show = true;
      }
    }, 100);
  }

Note: I borrowed that throtteable decorator from this library because it seemed pretty useful.

Anyway, this worked for me: the table gets dropped and recreated when the window is resized.

[mcblum]

We're seeing the same issue in our project as well. When we set a column to [flexGrow]="0" the subsequent column's header does not line up in the correct place.

[DanielCaspers]

This looks very similar to the issues I'm experiencing in my configuration. Link goes to another issue.

[Chintu0518]

How did you resolved this problem? Can you please help me with that