Header scrolls horizontally but body doesn't follow with header scroll

[mmfKupl]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior

The entire header row scrolls horizontally, but the body scroll does not change.

Expected behavior

The entire header row and body should scroll horizontally together.

Reproduction of the problem

1. Create a table.
2. Add a custom header template with an input component.
3. Set scrollbarH to true.
4. Make the table scrollable horizontally.
5. Focus on the first input in the header.
6. Press the "TAB" key to change the focus to the next input.

See example in stackblitz editor or app

I have examined the source code of ngx-datatable and found that there is no header-to-body scrolling synchronization, only body-to-header scrolling. I attempted to listen to the header scroll event and recalculate the table dimensions but was not successful.

What is the motivation / use case for changing the behavior?

The motivation for changing the behavior is to allow for the addition of inputs and other elements to the header for expanding table functionality.

Please tell us about your environment:

• Table version: 20.1.0

• Angular version: 15.1.0

• Browser: [all]

• Language: [TypeScript 4.7]

[mmfKupl]

I have found a solution that works for me:

I listen to a scroll event on the header element and reset the scroll position to the beginning. Additionally, I listen to a focus event from the header element and scroll the table body to it.

  ngOnInit() {
      const headerElement: HTMLElement = this.hostElementRef.nativeElement.querySelector('.datatable-header');
      // prevent horizontal scroll on header element and table element
      headerElement.addEventListener('scroll', this.scrollEventListener.bind(this));
      // on each focus event we have to scroll the body to this element
      headerElement.addEventListener('focus', this.focusEventListener.bind(this), true);
  }

  private scrollEventListener(scrollEvent: Event): void {
    if (this.skipScroll) {
      this.skipScroll = false;
      return;
    }
    this.skipScroll = true;
    (scrollEvent.target as HTMLElement).scrollTo({ left: 0 });
  }
  
    private focusEventListener(event: FocusEvent): void {
    const ngxDatatableBodyElement: HTMLElement = this.hostElementRef.nativeElement.querySelector(
      'ngx-datatable .datatable-body',
    );
    const bodyClientRect: DOMRect = ngxDatatableBodyElement.getBoundingClientRect();
    const targetClientRect: DOMRect = (event.target as HTMLElement).getBoundingClientRect();

    const gap: number = 8;
    const isLeftOut: boolean = targetClientRect.left < bodyClientRect.left + gap;
    const isRightOut: boolean = targetClientRect.right > bodyClientRect.right - gap;
    if (isLeftOut || isRightOut) {
      let scrollLeft: number;
      if (isLeftOut) {
        scrollLeft = ngxDatatableBodyElement.scrollLeft - bodyClientRect.left + targetClientRect.left - gap;
      } else {
        scrollLeft = ngxDatatableBodyElement.scrollLeft - bodyClientRect.right + targetClientRect.right + gap;
      }

      ngxDatatableBodyElement.scrollTo({ left: scrollLeft });
    }
  }

I have added a fixed example to StackBlitz, but it is not working well, and I don't have time to figure out why at the moment