5

I am trying to use the ngx-datatable package to display some data in my Angular 4 app and I am particularly interested in the "force" mode for setting column widths. As I understand it, that mode is supposed to intelligently determine column widths based on the cell contents such that all contents will be visible. It is not working for me, however. The columns are getting set to a width of 150px rather than their individual custom widths.

This is my table HTML:

<ngx-datatable
  [rows]="rows"
  [columns]="columns"
  [columnMode]="'force'"
  [scrollbarV]="true"
  [scrollbarH]="true"
  [rowHeight]="50"
  >
</ngx-datatable>

And this is my configuration:

rows = [
    { displayName: 'Austin', emailAddress: 'a@a.aa', role: 'Swimlane',
      a: 'This should all be visible and none of this should be cut off because the table is in force mode and it should keep it all visible' },
    { displayName: 'Dany', emailAddress: 'b@b.bb', role: 'KFC' , a:'b',
      b:'This text should also be completely visible due to the selected display mode of "force"'},
    { displayName: 'Molly', emailAddress: 'c@c.cc', role: 'Burger King', a:'test', b: '3',
      c: 'Aaaaaaaaaabbbbbbbbbbbbbbbbcccccccccccccccccccccc' },
  ];

columns = [
  { name: 'Name', prop: 'displayName' },
  { name: 'Email', prop: 'emailAddress' },
  { name: 'Role', prop: 'role'},
  { name: 'A', prop: 'a'},
  { name: 'B', prop: 'b'},
  { name: 'C', prop: 'c'}
];

Plunker here showing the problem: https://plnkr.co/edit/KZHb2s0PPAiB7uPtwdIA?p=preview

Stewart
  • 1,659
  • 4
  • 23
  • 35

1 Answers1

4

From my understanding and usage of ngx-datatable in the past, the force mode dosen't really work exactly as expected. One workaround is that you need to add [rowHeight]="'auto'" in your table HTML. This will make paragraphs display in multiple lines, as you can see in the screenshot of your edited plunkr: enter image description here. However, I found that adding the above wont work if [scrollbarV]="true" is also present.

So basically, your datatable html should look like this:

<ngx-datatable
    [rows]="rows"
    [columns]="columns"
    [columnMode]="'force'"
    [rowHeight]="'auto'"
    [scrollbarH]="true"
    >
</ngx-datatable>

You could also manually set the width on the columns that you want by adding width:'300' to the column object in your columns array.

Sunny Gohil
  • 319
  • 1
  • 11