Ag-Grid - How to make two horizontal scrolls in the same grid?

user_7605659 0
Viewed 755

I have 20 columns in the grid. I want the grid to be split in half, where in the left half I can scroll through the first 10 columns, and in the right half I can scroll through the last 10 columns. In other words, I want there to be two horizontal scrolls in the same Grid. Is it possible?

ag-grid-react ag-grid reactjs
1 Answers

The functionality you're trying to implement doesn't natively exist in ag-Grid. One solution would be to use pinned columns where you pin 10 columns to the left. The problem would be that you cannot scroll pinned columns, therefore you'll have the add some extra css in order to modify the grid to your needs.

NB. this is VERY hacky solution:

Add the following to your css in order for the pinned columns to be scrollable (change the width from 200px do your desired width):

.ag-pinned-left-cols-container {
  min-width: 200px !important;
  width: 200px !important;
  overflow: auto !important;
}

.ag-horizontal-left-spacer {
  width: 200px !important;
  max-width: 200px !important;
  min-width: 200px !important;
}

.ag-pinned-left-header{
  width: 200px !important;
  max-width: 200px !important;
  min-width: 200px !important;
  overflow: hidden !important;
}

You'll also need to make sure the pinned column headers scroll along with the pinned columns. For this, you can use an event listener:

document.getElementsByClassName('ag-pinned-left-cols-container')[0].addEventListener("scroll", this.runOnScroll, {passive: true});

runOnScroll =  function(evt) {
  document.getElementsByClassName('ag-pinned-left-header')[0].scrollTo(evt.srcElement.scrollLeft, 0)

Demo.

user_43006080
Related