如何使用 Ag Grid 获得占用所有空间的合理列宽？

Question

我正在尝试使用 AgGrid 来显示一个简单的文本信息列表/网格。

使用基本示例：

columnDefs = [
        {headerName: 'Make', field: 'make' },
        {headerName: 'Model', field: 'model' },
        {headerName: 'Price', field: 'price'}
    ];

    rowData = [
        { make: 'Toyota', model: 'Celica', price: 35000 },
        { make: 'Ford', model: 'Mondeo', price: 32000 },
        { make: 'Porsche', model: 'Boxter', price: 72000 }
    ];

<ag-grid-angular 
    class="ag-theme-balham custom"
    [rowData]="rowData" 
    [columnDefs]="columnDefs"
    >
</ag-grid-angular>

还有一个css样式：

{
  .custom{
    height: 100vh;
    width: 100%;
  }
}

我看到网格的容器占用了所有空间，这很酷，但在文档中我没有看到确保单元格对齐并占用所有宽度空间的方法

我怎样才能做到这一点？

Answer 1

你应该执行一次sizeColumnsToFit()方法gread is ready：

sizeColumnsToFit ：获取要调整大小以水平适应网格的列。

作为gridOptions 属性

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

或作为html标签

(gridReady)="onGridReady($event)"