title: Why is the force column mode not working correctly on my ngx-datatable instance?
body: <p>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.</p>
  
  <p>This is my table HTML:</p>
  
  <pre><code>&lt;ngx-datatable
    [rows]="rows"
    [columns]="columns"
    [columnMode]="'force'"
    [scrollbarV]="true"
    [scrollbarH]="true"
    [rowHeight]="50"
    &gt;
  &lt;/ngx-datatable&gt;
  </code></pre>
  
  <p>And this is my configuration:</p>
  
  <pre><code>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'}
  ];
  </code></pre>
  
  <p>Plunker here showing the problem:
  <a href="https://plnkr.co/edit/KZHb2s0PPAiB7uPtwdIA?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/KZHb2s0PPAiB7uPtwdIA?p=preview</a></p>