How to add a horizontal scrollbar on top of the ag-grid - ag-grid

Question

I have an ag-grid set up with a series of components in place for cell rendering. When my dataset loads the vertical scroll works well but the horizontal scroll isn't obvious unless using a trackpad or horizontal scroll enabled mouse.
I would like to be able to add a scroll bar to the top of the grid as well as the automatically generated one at the bottom?
Has anyone encountered this, come up with as solution?
Thanks in advance

Answer 1

This question is old but I struggled with the same issue and came up with something working.
💡 The Idea
The main idea behind my solution is to...
clone AgGrid scrollbar when grid is ready
insert the cloned scrollbar on top of the grid
add event listeners on both scrollbars to keep the scroll position synchronized
use MutationObserver to observe style attribute changes on original AgGrid scrollbar element (and child) to keep the size of the cloned scrollbar synchronized
⚡ The Code
The following code is for Angular but the concept is the same for Vanilla JS, React or Vue.
First, get a hook on gridReady event:
<ag-grid-angular
...
(gridReady)="onGridReady()">
</ag-grid-angular>
In the function associated to the event use the following code to clone the AgGrid scrollbar and keep the scrollbars synchronized:
// hold the `MutationObserver` to be disconnected when component is destroyed
private mutationObserver: MutationObserver;
onGridReady() {
// css class selectors
const headerSelector = '.ag-header';
const scrollSelector = '.ag-body-horizontal-scroll';
const scrollViewportSelector = '.ag-body-horizontal-scroll-viewport';
const scrollContainerSelector = '.ag-body-horizontal-scroll-container';
// get scrollbar elements
const scrollElement = document.querySelector(scrollSelector);
const scrollViewportElement = document.querySelector(scrollViewportSelector);
const scrollContainerElement = document.querySelector(scrollContainerSelector);
// create scrollbar clones
const cloneElement = scrollElement.cloneNode(true) as Element;
const cloneViewportElement = cloneElement.querySelector(scrollViewportSelector);
const cloneContainerElement = cloneElement.querySelector(scrollContainerSelector);
// insert scrollbar clone
const headerElement = document.querySelector(headerSelector);
headerElement.insertAdjacentElement('afterend', cloneElement);
// add event listeners to keep scroll position synchronized
scrollViewportElement.addEventListener('scroll', () => cloneViewportElement.scrollTo({ left: scrollViewportElement.scrollLeft }));
cloneViewportElement.addEventListener('scroll', () => scrollViewportElement.scrollTo({ left: cloneViewportElement.scrollLeft }));
// create a mutation observer to keep scroll size synchronized
this.mutationObserver = new MutationObserver(mutationList => {
for (const mutation of mutationList) {
switch (mutation.target) {
case scrollElement:
cloneElement.setAttribute('style', scrollElement.getAttribute('style'));
break;
case scrollViewportElement:
cloneViewportElement.setAttribute('style', scrollViewportElement.getAttribute('style'));
break;
case scrollContainerElement:
cloneContainerElement.setAttribute('style', scrollContainerElement.getAttribute('style'));
break;
}
}
});
// start observing the scroll elements for `style` attribute changes
this.mutationObserver.observe(scrollElement, { attributeFilter: ['style'], subtree: true });
}
When destroying the component, disconnect the MutationObserver to avoid memory leaks.
ngOnDestroy() {
// stop observing
this.mutationObserver.disconnect();
}
It's tricky and all based on keeping the cloned scrollbar synchronized with the original scrollbar but so far it works great for my use cases.
Good luck 😎

Answer 2

Update 2022
::ng-deep{
.ag-root-wrapper{
.ag-root-wrapper-body{
.ag-root{
.ag-body-horizontal-scroll{
order: 1;
}
.ag-header{
order: 2;
}
.ag-floating-top{
order: 3;
}
.ag-body-viewport{
order: 4;
}
.ag-floating-bottom{
order: 5;
}
.ag-overlay{
order: 6;
}
}
}
}
}