ag-grid custom details don't scroll horizontally

Question

I noticed in my webpage that if I scroll the ag-Grid part of the screen horizontally, then the column header and rows move, but not the expanded details section which seems frozen/pinned in place. See images below, with attention to the bar at the bottom.The ag-Grid section scrolls vertically and moves with the master row like how you'd expect.

GIF of scrolling demonstration

What you see upon loading and without scrolling

After scrolling a bit to the right

What changes should I make, and where can I find the files that affect this? Is there a way to make the custom details cell pinned to the beginning (left) of the ag-Grid box?

I've tried changing the row width to span the whole thing, changing the div's position to align "none none", but it seemed to have no effect.

Answer 1

  detailScrolling() {
    const gridContainer = document.querySelector('.ag-body-horizontal-scroll-viewport') as HTMLDivElement | null;
    const detailContainer = document.querySelector('.ag-full-width-container') as HTMLDivElement | null;

    detailContainer.style.width = '3000px'
    gridContainer.addEventListener('scroll', () => {
      const scrollLeft = gridContainer.scrollLeft; 
      detailContainer.style.transform = "translateX(-" + scrollLeft + "px)";
    })
  }  ```