Ngx-datatable: When columnMode is 'flex' column width cannot be adjusted.

[spazworm]

I'm submitting a ...

[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
When setting a ngx-datatable to [columnMode]="'flex'" the table headers are still draggable (for resizing columns) however the table itself does not change in size.

Expected behavior
I'd expect either the column headers to not be draggable when columnMode is flex or I'd expect the columns to re-adjust in size when column headers are dragged.

Reproduction of the problem
The demo for Column>Flex at http://swimlane.github.io/ngx-datatable/ reproduces this issue.

What is the motivation / use case for changing the behavior?
I'd say the current way it works is not expected behaviour.

Please tell us about your environment:
OSX 10.11.6

• Table version:
  6.3.0

• Angular version:
  2.4.6

• Browser:
  Chrome Version 56.0.2924.87, Safari Version 10.0.2

• Language:
  Typescript 2.1.0

[danaERadwin]

Anything new about that?

[danaERadwin]

Try using [columnMode]="flex" (without the extrat '')
Worked for me.

[amcdnl]

Closing due to latest comments and age.

[spazworm]

ok, this is still broken though.

[bluecaret]

Yes I still see this issue as well. This is still very much broken.

[bluecaret]

I have tried various ways to get this to work, all without success:
[columnMode]="'flex'"
[columnMode]="flex"
columnMode="flex"

[BearandYoon]

I have tried with [columnMode]="flex" then flex feature is not working (same width header).
any solution?
I also need fixed width header but I can't find the solution.

[daviddutch]

It seems like you need to define flexGrow for it to work. See the demo: https://github.com/swimlane/ngx-datatable/blob/master/demo/columns/column-flex.component.ts

[hawzie197]

@daviddutch, that worked for me, thank you!

[bobbyg603]

Defining flexGrow on columns did not work for us...

[jhenrryalvaro]

I have the same problem like @spazworm, the columns' width is working

But when I resize the columns' headers just the headers change

This is my code:

<ngx-datatable
    class="material"
    [rows]="enviados"
    [externalPaging]="true"
    [headerHeight]="50"
    [footerHeight]="50"
    [rowHeight]="'auto'"

    [externalPaging]="true"
    [count]="page.count"
    [offset]="page.offset"
    [limit]="page.limit"
    (page)='setPage($event)'

    [externalSorting]="true"
    [loadingIndicator]="loading"
    (sort)="onSort($event)"
    [columnMode]="'flex'"
    >
    <ngx-datatable-column name="Entidad" [sortable]="false" prop="identidad" [flexGrow]="0.5"></ngx-datatable-column>
    <ngx-datatable-column name="Periodo" [sortable]="false" prop="periodo" [flexGrow]="0.5"></ngx-datatable-column>
    <ngx-datatable-column name="FechaEnvio" [sortable]="true" prop="fechahoraenvio" [flexGrow]="1">
        <ng-template let-value="value" ngx-datatable-cell-template>
            {{value | date: 'dd/MM/yyyy hh:mm:ss'}}
        </ng-template>
    </ngx-datatable-column>
    <ngx-datatable-column name="Usuario" [sortable]="true" prop="usuarioenvio" [flexGrow]="1"></ngx-datatable-column>
    <ngx-datatable-column name="Estado" [sortable]="true" prop="descripcion" [flexGrow]="2"></ngx-datatable-column>
    <ngx-datatable-column name="Acciones" [sortable]="false" prop="id" [flexGrow]="0.5">
        <ng-template let-row="row" let-id="value" ngx-datatable-cell-template>
            <button mat-mini-fab matTooltip="Ver" color="primery" (click)="abrir(id, '')">
                <mat-icon>open_in_new</mat-icon>
            </button>
        </ng-template>
    </ngx-datatable-column>
</ngx-datatable>

[r-havelka]

resizing a flex column is still broken. only the header resizes, but the rest of the table does not

http://swimlane.github.io/ngx-datatable/#flex

[westito]

Set [canAutoResize]="false" on column solves the problem.

[ghost]

Working

[columnMode]="'flex'" to <ngx-datatable> tag
and
[flexGrow]="0/1/2/3/4/..." with [minWidth]="number" or [maxWidth]="number"

[piyushK52]

adding on to @westito , I was initially putting this in the table...