ag grid autoresize

useGridAutoresize.ts

import { useLayoutEffect } from 'react';
import { debounce } from 'lodash';
import { GridApi } from 'ag-grid-community';

const events = [
  'firstDataRendered',
  'gridSizeChanged',
  'modelUpdated',
  'viewportChanged',
];

const resizeRows = debounce(() => {
  if (!document) {
    return;
  }

  const bodyViewportEl = document
    .getElementsByClassName('ag-body-viewport')
    .item(0);

  const centerColContainerEl = document
    .getElementsByClassName('ag-center-cols-container')
    .item(0);

  if (!bodyViewportEl || !centerColContainerEl) {
    return;
  }

  const { width: centerColWidth } =
    centerColContainerEl.getBoundingClientRect();
  const { width: bodyColWidth } = bodyViewportEl.getBoundingClientRect();
  const width = Math.max(centerColWidth, bodyColWidth);

  Array.from(document.getElementsByClassName('ag-row')).forEach(element => {
    const currentStyles = element.getAttribute('style')!;
    const currentStylesArray = currentStyles
      .split(';')
      .map(style => style.trim())
      .filter(style => style !== '');

    const updatedStylesArray = currentStylesArray.some(style =>
      style.includes('width'),
    )
      ? currentStylesArray.map(style => {
          const [property] = style.split(':');
          if (property === 'width') {
            return `width: ${width}px`;
          }
          return style;
        })
      : [...currentStylesArray, `width: ${width}px`];

    const updatedStyles = updatedStylesArray.map(style => `${style};`).join('');

    element.setAttribute('style', updatedStyles);
  });
}, 100);

/**
 * Hack dealing with bug in ag grid resizing
 */
export const useGridRowsAutoResize = (gridApi?: GridApi) => {
  useLayoutEffect(() => {
    if (gridApi) {
      events.forEach(event => {
        gridApi.addEventListener(event, resizeRows);
      });
      resizeRows();
    }

    return () => {
      resizeRows.cancel();

      if (gridApi) {
        events.forEach(event => {
          gridApi.removeEventListener(event, resizeRows);
        });
      }
    };
  }, [gridApi]);
};