Why is the force column mode not working correctly on my ngx-datatable instance?

Question

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: '[email protected]', 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: '[email protected]', role: 'KFC' , a:'b',
      b:'This text should also be completely visible due to the selected display mode of "force"'},
    { displayName: 'Molly', emailAddress: '[email protected]', 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

Answer 1

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: . 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.