ngx-datatableインスタンスで強制カラムモードが正しく機能しないのはなぜですか？

Question

私はAngular 4アプリでデータを表示するためにngx-datatableパッケージを使用しようとしています。特に、カラム幅を設定するための「強制」モードに興味があります。私が理解しているように、そのモードでは、セルの内容に基づいて列の幅をインテリジェントに決定し、すべての内容を表示することになっています。しかし、それは私のために働いていません。列は個々のカスタム幅ではなく150pxの幅に設定されています。

これは私のテーブルのHTMLです：私の理解とngx-の利用から https://plnkr.co/edit/KZHb2s0PPAiB7uPtwdIA?p=preview

Answer 1

：

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

そして、これは私の設定です：ここでの問題点を示す

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過去のdatatableでは、forceモードは実際には期待どおりに動作しませんでした。 1つの回避策は、テーブルのHTMLに[rowHeight]="'auto'"を追加する必要があるということです。これにより、段落が複数の行に表示されます。これは編集した冥王星のスクリーンショットに表示されています（ ）。 しかし、[scrollbarV]="true"も存在する場合は、上記を追加することはできません。

だから、基本的に、あなたのデータテーブルのHTMLは次のようになります。

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

は手動でも、あなたのcolumns配列内の列オブジェクトにwidth:'300'を追加することにより、希望の列に幅を設定することができます。