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

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

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 12
Comments: 17 (1 by maintainers)

Most upvoted comments

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

+17

daviddutch on Nov 3, 2017

ok, this is still broken though.

+10

brewdium on Aug 21, 2017

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

westito on Sep 4, 2019

I have tried various ways to get this to work, all without success: [columnMode]=“‘flex’” [columnMode]=“flex” columnMode=“flex”

bluecaret on Sep 12, 2017

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>

jhenrryalvaro on Sep 25, 2018

adding on to @westito , I was initially putting this in the table… <ngx-datatable-column [canAutoResize]=“false” ></ngx-datatable-column>

piyushK52 on Mar 6, 2020

Working

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

ghost on Dec 23, 2019

Closing due to latest comments and age.

amcdnl on Aug 20, 2017