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)"

如何使用AgGrid调整占据所有空间的列宽？

1 个答案: