I'm using onFirstDataRendered to auto-size my AG Grid columns once data has loaded. However, without introducing a delay, the auto-sizing runs based on column headers only.

export default function MyGrid({rowData}) {
  const autoSizeAllColumns = useCallback(() => {
    const allColumnIds = [];
    gridRef.current.api.getColumns().forEach((column) => {
      allColumnIds.push(column.getId());
    });
    gridRef.current.api.autoSizeColumns(allColumnIds);
  }, []);

  const onFirstDataRendered = useCallback(() => {
    // Calling function at this point does not have desired effect
    // autoSizeAllColumns();
    setTimeout(() => {
      // Calling here does the trick, but the delay seems unnecessary
      autoSizeAllColumns();
    }, 1000);
  }, [autoSizeAllColumns]);

  const onRowDataUpdated = useCallback(() => {
    // This also runs too early
    // autoSizeAllColumns();
  }, [autoSizeAllColumns]);

  const autoSizeStrategy = useMemo(() => {
    return {
      type: "fitCellContents",
    };
  }, []);

  return (
    <AgGridReact
      rowData={rowData}
      autoSizeStrategy={autoSizeStrategy}
      onFirstDataRendered={onFirstDataRendered}
      onRowDataUpdated={onRowDataUpdated}
    />
  );
}

I'm using onFirstDataRendered to auto-size my AG Grid columns once data has loaded. However, without introducing a delay, the auto-sizing runs based on column headers only.

export default function MyGrid({rowData}) {
  const autoSizeAllColumns = useCallback(() => {
    const allColumnIds = [];
    gridRef.current.api.getColumns().forEach((column) => {
      allColumnIds.push(column.getId());
    });
    gridRef.current.api.autoSizeColumns(allColumnIds);
  }, []);

  const onFirstDataRendered = useCallback(() => {
    // Calling function at this point does not have desired effect
    // autoSizeAllColumns();
    setTimeout(() => {
      // Calling here does the trick, but the delay seems unnecessary
      autoSizeAllColumns();
    }, 1000);
  }, [autoSizeAllColumns]);

  const onRowDataUpdated = useCallback(() => {
    // This also runs too early
    // autoSizeAllColumns();
  }, [autoSizeAllColumns]);

  const autoSizeStrategy = useMemo(() => {
    return {
      type: "fitCellContents",
    };
  }, []);

  return (
    <AgGridReact
      rowData={rowData}
      autoSizeStrategy={autoSizeStrategy}
      onFirstDataRendered={onFirstDataRendered}
      onRowDataUpdated={onRowDataUpdated}
    />
  );
}

• ag-grid
• ag-grid-react

1 Answer 1

The issue is with the onFirstDataRendered event is: The autoSizeAllColumns function is being called before the data has finished rendering. The onRowDataUpdated event is a better alternative: This event is triggered after the data has been updated, which includes when the data is first rendered.

import { useState, useCallback, useMemo } from 'react';
import { useRef } from 'react';

export default function MyGrid({rowData}) {
  const gridRef = useRef(null);
  const [isDataRendered, setIsDataRendered] = useState(false);

  const autoSizeAllColumns = useCallback(() => {
    const allColumnIds = [];
    gridRef.current.api.getColumns().forEach((column) => {
      allColumnIds.push(column.getId());
    });
    gridRef.current.api.autoSizeColumns(allColumnIds);
  }, [gridRef]);

  const onGridReady = useCallback((params) => {
    gridRef.current = params.api;
  }, []);

  const onRowDataUpdated = useCallback(() => {
    if (!isDataRendered) {
      autoSizeAllColumns();
      setIsDataRendered(true);
    }
  }, [autoSizeAllColumns, isDataRendered]);

  const autoSizeStrategy = useMemo(() => {
    return {
      type: "fitCellContents",
    };
  }, []);

  return (
    <AgGridReact
      rowData={rowData}
      autoSizeStrategy={autoSizeStrategy}
      onGridReady={onGridReady}
      onRowDataUpdated={onRowDataUpdated}
    />
  );
}

Try that, adding the onGridReady mixed with the onRowDataUpdated might get you there!