angular - ag-grid 열 너비를 백분율로 지정하는 방법이 있습니까?

아니요, 기본적으로 불가능합니다. 너비, 최소 너비 및 최대 너비는 절대 숫자로만 설정할 수 있습니다. AgGrid에서 동적 너비를 갖는 가장 쉬운 방법은 this.gridOptions.api.sizeColumnsToFit(); 를 사용하는 것입니다. 따라서 셀의 기존 값에 대해 가장 작은 너비 (colDef의 지정된 너비에 따라)를 사용합니다.

width 를 계산해 볼 수 있습니다  창 너비를 기준으로 수동으로 (onInit) 설정 한 다음 AgGrid를 다시 초기화하십시오. 그러나 사용자가 창 크기를 조정할 때 (Window-Resize-HostListener에서) 다시 계산하고 그리드를 다시 초기화해야하기 때문에 권장하지 않습니다. 디 바운스 타임으로 가능할 수 있으므로 (사용자가 브라우저 코너를 끌고있는 동안 밀리 초마다 다시 초기화하지는 않지만) 해킹이되어 결국에는 디버그하기가 매우 어렵습니다. 유지 관리하기 어려운 코드입니다.

@Phil이 제안한 방법을 사용하여 gridReady 를 사용하여 그리드를 사용 가능한 뷰 포트 너비로 가져갈 수 있습니다.  이 방법으로 이벤트 :

구성 요소 템플릿 :

<ag-grid-angular  class="ag-theme-balham" [gridOptions]="gridOptions"
  (gridReady)="onGridReady($event)"> 
</ag-grid-angular>

구성 요소 유형 스크립트 파일 :

onGridReady(params) {
  params.api.sizeColumnsToFit();
}

데모 :

https://stackblitz.com/edit/ag-grid-bss-test-aejozx?file=app%2Fapp.component.html

내 해결 방법은 렘에서 픽셀까지의 숫자 값 :

const remInPixel = parseFloat(getComputedStyle(document.documentElement).fontSize);
const convertRemToPixel = (rem) => rem * remInPixel;

ag-grid 에서의 사용 예  열 정의 :

{
    headerName: "Example",
    field: "exampleField",
    width: convertRemToPixel(3)
}

실제로 여기에 이 함수를 사용할 수 있습니다.

해결 방법은 AG-Grid의 부모 div의 너비를 계산하고 특정 열에 할당 할 백분율로 픽셀을 계산하는 것입니다. jQuery를 사용하는 솔루션은 다음과 같습니다.

 function columnWidth(id, percentage){
    var div = $("#" + id);  // HTML ID of Grid
    var parent = div.parent();
    var width = parent.width() * percentage/100;  // Pixel calculation
    return width;
}
var colDefs = [
       {
         field: "name",
         width: columnWidth("myGridId",25)
       } 
]

이것은 저에게 잘 작동했습니다.