如何根据行数据使ag-grid的列宽响应？

Question

农业网格中的列：

columnsDefs = [
   {
    headerName: 'Name',
    field: 'name'
   },
   {
    headerName: 'Age',
    field: 'age'
   },
   {
    headerName: 'Description',
    field: 'description'
   } 
];

描述中的字符长度可能会有所不同。例如，某些行可能只有 10 个字符，而某些行可能有 50 个字符。如果我设置列宽，如果描述的字符长度更长，那么一些字符将不会显示。

api.sizeColumnsToFit() 将缩放列以适应屏幕的可用宽度。我想实现列 'Description' 宽度以根据其行数据进行响应。

Answer 1

您可以使用 columnApi 方法：autoSizeColumns

autoSizeColumn(colKey) Auto-sizes a column based on its contents.

Answer 2

要将所有列的大小调整为内容宽度，请使用： columnApi.autoSizeAllColumns()。但是，在 firstDataRendered() 事件上调用此方法。如果你有很多列，你也可以设置 suppressColumnVirtualisation=true。

解释： columnApi.autoSizeAllColumns() 方法调整列的大小以换行每列的内容宽度。但是，为了让网格知道内容的宽度是多少，它首先必须渲染数据。因此，应该在 firstDataRendered() 事件上调用此方法。如果列数更多，则由于 ag-grid 中的延迟加载，水平滚动条后面的列不会立即呈现。因此，autoSizeAllColumns() 无法调整这些列的大小。为此，需要使用网格的 suppressColumnVirtualisation=true 属性禁用延迟加载。

Answer 3

如果您要参加此讨论，希望根据浏览器的当前宽度自适应地增加或减少 table 的宽度，请按以下方式进行反应：

let width = 100

const onFirstDataRendered = (params) => {
    params.api.sizeColumnsToFit();
};

const onGridSizeChanged = (params) => {
    let columnCount = params.columnApi.columnModel.gridColumns.length
    width = params.clientWidth / columnCount
    params.api.sizeColumnsToFit();
};


return (

    <div style={{ width: '100%', height: '100%' }}>
        <div id="grid-wrapper" style={{ width: '100%', height: '263px' }}>
            <div
                id="myGrid"
                style={{
                    height: '100%',
                    width: '100%',
                }}
                className="ag-theme-alpine-dark"
            >
                <AgGridReact
                    defaultColDef={{ resizable: true }}
                    onFirstDataRendered={onFirstDataRendered}
                    onGridSizeChanged={onGridSizeChanged}
                    rowData={rowData}
                >
                    <AgGridColumn field="data" width={width}></AgGridColumn>
                    <AgGridColumn field={columnData[1].field} width={width}></AgGridColumn>
                    <AgGridColumn field={columnData[2].field} width={width}></AgGridColumn>
                </AgGridReact>
            </div>
        </div>
    </div>
);

};

如何根据行数据使ag-grid的列宽响应？

How to make the column width of ag-grid responsive based on row data?

typescript

ag-grid

angular