ngx-datatable 인스턴스에서 강제 열 모드가 올바르게 작동하지 않는 이유는 무엇입니까?

Question

Angular 4 앱에서 일부 데이터를 표시하기 위해 ngx-datatable 패키지를 사용하려고하는데 특히 열 너비를 설정하는 "강제"모드에 관심이 있습니다. 내가 이해하는 바와 같이, 그 모드는 셀 내용을 기반으로 모든 내용을 볼 수 있도록 열 폭을 지능적으로 결정해야합니다. 그러나 그것은 나를 위해 일하지 않습니다. 열이 개별 맞춤 너비가 아닌 너비 150px로 설정됩니다.

이 내 테이블 HTML입니다 :

<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 여기에 문제가 보여주는

: 나의 이해에서 https://plnkr.co/edit/KZHb2s0PPAiB7uPtwdIA?p=preview

Answer 1

및 ngx-의 사용을 과거에 datatable, 힘 모드 dosen't는 실제로 예상대로 정확하게 작동합니다. 한 가지 해결 방법은 테이블 HTML에 [rowHeight]="'auto'"을 추가해야한다는 것입니다. 이렇게하면 편집 된 플 런크의 스크린 샷에서 볼 수 있듯이 단락이 여러 줄로 표시됩니다 : . 그러나 위의 내용을 추가하면 [scrollbarV]="true"도있을 경우 작동하지 않습니다.

그러니까 기본적으로, 당신의 데이터 테이블 HTML은 다음과 같아야합니다

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

당신은 수동으로 당신이 당신의 열 배열의 열 개체에 width:'300'를 추가하여 원하는 컬럼의 폭을 설정할 수 있습니다.