You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
[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
Create a table.
Add a custom header template with an input component.
Set scrollbarH to true.
Make the table scrollable horizontally.
Focus on the first input in the header.
Press the "TAB" key to change the focus to the next input.
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]
The text was updated successfully, but these errors were encountered:
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
I'm submitting a ... (check one with "x")
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
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:
The text was updated successfully, but these errors were encountered: