角2 NGグリッド流体カラム

Question

明らかにピクセルベースではない幅を持つグリッドを持つことは可能ですか？これは、sizeColumnsToFit()と組み合わせて使用​​すると特に便利です。

たとえば、ビジュアルデザインでは、IDフィールドと名前フィールドがコンテンツに適合するように呼び出すことができますが、その説明に含まれている要素の幅の残りを塗りつぶすことがあります。

| ID | Name | Description | 
|----|-------|----------------| 
| 1 | Foo | Something foo | 
| 2 | Bar | Something bar | 

現在、sizeColumnsToFit()を使用すると、それらすべて同じ幅（もののようtableWidth/3一種）を行います。

Answer 1

私の提案にはまだ幅を指定する必要がありますが、より「動的な」ものを受け入れることができます。

まず、あなたが小さい/固定することにするカラムの幅を設定します。

var columnDefs = [ 
    { 
     headerName: "Column 1", 
     field: "col1", 
     width:20 
    }, 

フックをgridReadyイベントに（文句を言わない幅のセットを持っている）残りの列のサイズを変更する：

$scope.gridOptions = { 
    columnDefs: columnDefs, 
    rowData: rowData, 
    onGridReady:() => { 
     $scope.gridOptions.api.sizeColumnsToFit(); 
    } 
    ...other properties 

Answer 2

列定義のグリッドのwidthプロパティを使用して、幅をパーセントで返す関数にバインドできます。

width: this.columnWidth(windowWidth, 10) 

private columnWidth(windowWidth:number, columnSize:number) { 
    return Math.floor((windowWidth * columnSize)/100); 
}