Ngx-datatable: Min width to the flex coumns mode.

Created on 21 Sep 2017  路  1Comment  路  Source: swimlane/ngx-datatable

[ X ] bug report => search github for a similar issue or PR before submitting
[ X ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior
Today, when I use column flex mode and when I shrink the screen, the columns overlap each other.

Currently I'm using the columns the following way:

let columns = [
            { entity: 'Envolvido', name: 'Nome', prop: path + 'dadosPessoais.nome', minWidth: 30,  },
            { entity: 'Envolvido', name: 'Nome Fantasia', prop: path + 'dadosPessoais.nomeFantasia', minWidth: 30 },
            { entity: 'Envolvido', name: 'CNPJ', prop: path + 'dadosPessoais.documentoIdentificacao.cpfCnpj', minWidth: 300 },
            { entity: 'Envolvido', name: 'UF', prop: path + 'dadosPessoais.endereco.uf.sigla', minWidth: 300 },
            { entity: 'Envolvido', name: 'Munic铆pio', prop: path + 'dadosPessoais.endereco.municipio.nome', minWidth: 300 }
        ];
 <ngx-datatable #table 
      class="material" 
      [rows]="rows" 
      [columns]="columns"
      [selected]="selected"
      [selectionType]="'checkbox'" 
      [columnMode]="'flex'"
      [headerHeight]="50"
      [rowHeight]="45" 
      [footerHeight]="50" 
      [externalPaging]="true" 
      [count]="page.totalElements" 
      [offset]="page.pageNumber"
      [limit]="page.size"
      [scrollbarH]="true"
      (page)='setPage($event)' 
      (select)='onSelect($event)'>

Expected behavior
I'd like to set a minWidth to the columns, for when I resize/shrink the screen, the columns keep with the min width.

Reproduction of the problem
https://swimlane.github.io/ngx-datatable/#fixed

What is the motivation / use case for changing the behavior?
The number of columns of my table will change dynamically, so when the number of columns is wide enough it will be set to the min width.

Please tell us about your environment:

  • Table version: 0.8.x

  • Angular version: 2.0.x

  • 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]

Most helpful comment

@nssantos Why was this closed? I have this same issue and think this is a great suggestion. Did you find another way to solve this problem?

>All comments

@nssantos Why was this closed? I have this same issue and think this is a great suggestion. Did you find another way to solve this problem?

Was this page helpful?
0 / 5 - 0 ratings