The Issue
I am experiencing difficulty in getting columns to expand to the size of their content upon grid rendering.
Despite following the guidance provided in the official documentation example, and consulting sources such as Stack Overflow, I have attempted all three recommended methods:
api.sizeColumnsToFit()columnApi.autoSizeColumns([columnIds])columnApi.autoSizeAllColumns()
I have tried implementing each option within both the onGridReady and onFirstDataRendered events (as advised here), setting column widths as flex and then width, but have been unable to achieve the desired outcome.
The Approach
To begin, I gather columns from this section of code:
export const configMsDetailsData = function (msDetails: MilestoneDetails) {
let msRowData: any = [];
let msColDefs = [
{
field: genericRowHeaderTitle,
cellStyle: genericRowHeaderStyle,
headerClass: transparentHeaderClass,
cellClassRules: subMSGrayTextRule,
resizable: false,
flex: 1,
suppressMovable: true,
pinned: "left",
},
{
field: "Forecast",
headerClass: blueHeaderClass,
flex: 1,
resizable: false,
valueFormatter: dateFormatter,
valueGetter: BasicValGetter,
cellClassRules: grayCellRule,
},
...
Subsequently, I construct my gridOptions (note: inclusion of all three suggestions in the code block is purely for demonstration purposes. In practice, one method is tested at a time):
let gridOptions = {
onRowDataUpdated: () => {
if (!ready) {
setReady(true);
}
},
onGridReady: (event: any) => {
event.api.sizeColumnsToFit() //auto-size columns to fit grid
event.columnApi.autoSizeAllColumns(); //auto-size columns to fit grid
let allColIds = event.columnApi.getAllColumns().map((col: any) => col.colId);
event.columnApi.autoSizeColumns(allColIds);
},
onFirstDataRendered: (event: any) => {
event.api.sizeColumnsToFit() //auto-size columns to fit grid
event.columnApi.autoSizeAllColumns(); //auto-size columns to fit grid
let allColIds = event.columnApi.getAllColumns().map((col: any) => col.colId);
event.columnApi.autoSizeColumns(allColIds);
}
};
Following that, I apply these options to my grid:
const msDeetsGrid = getGrid(
msDetailsData,
msDetailsCols,
defaultColDefMSDeets,
gridOptions
);
function getGrid(
rowData: any,
colDefs: any,
defaultColDef: ColDef<any>,
gridOptions?: any
) {
return (
<div className="ag-theme-alpine" style={{ height: "100%", width: "100%" }}>
<AgGridReact<any>
gridOptions={gridOptions}
rowData={rowData}
columnDefs={colDefs}
headerHeight={defaultHeaderHeight}
rowSelection={"single"}
domLayout={"autoHeight"}
rowHeight={defaultRowHeight}
tooltipShowDelay={0}
tooltipHideDelay={20000}
defaultColDef={defaultColDef}
></AgGridReact>
</div>
);
}
Finally, I proceed with the rendering process.
While both onGridReady and onFirstDataRendered are triggered successfully, none of the methods employed to expand the columns produce the intended results.
Additional tactics I have experimented with include:
- This alternative approach, which mirrors the documented steps, without success.
- Setting suppressSizeToFit to false
- Adhering to keeping the container width under 100%