typescriptag-gridag-grid-react

How to get AG Grid Column Auto Sizing To Work


The Problem

I am unable to get columns to expand to the size of their content on grid render.

Per the example in the official documentation, and as referenced here, I have tried all three major methods to accomplish this:

I've attempted to get each option working in both onGridReady & onFirstDataRendered (recommended here), and with the column widths defined as flex and then as width. Nothing works.

The Code

I first collect columns from here:

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,

    },
...

I then create my gridOptions (note: I am including all three suggested options in the code block for demo purposes only. In the actual code, I try one 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);

    }
  };

Next, I pass the 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>
  );
}

Then I render.

Both onGridReady & onFirstDataRendered fire, so I know that's working. But no matter which of the options I use to expand the columns, nothing happens.

Other attempts I've tried:


Solution

  • If you want to use one of the tree sizing methods, you will need to remove the flex properties from the column definitions.

    If you have

    flex: 1
    

    defined on a column definition, it will ignore calls like

    api.sizeColumnsToFit()
    

    You can also mix regular columns and flex cloumns.

    https://www.ag-grid.com/angular-data-grid/column-sizing/#column-flex

    The flex config does not work with a width config in the same column.