Back to Browse

Ag-grid: aligned grid (vertical scroll synchronization)

3.6K views
Jul 16, 2020
16:16

This video is on aligned grids. The demo is for developer who are interested in understanding ag-grid advanced functionality. Below is a small description of aligned grids. Aligning two or more grids means columns will be kept aligned in all grids. In other words, column changes to one grid (column width, column order, column visibility etc) are reflected in the other grid. This is useful if you have two grids, one above the other such that their columns are vertically aligned, and you want to keep the columns aligned. But by default using the configuration specified in ag-grid document, it doesn't support vertical scroll sync. We will be achieving this using the bodyScroll event and some plain JS code snippet to achieve the functionality. The vertical and horizontal sync is very much useful in comparing data in 2 flat data tables (Data table's without row grouping). stackblitz url: https://stackblitz.com/edit/ag-grid-aligned-grid?embed=1&file=src/app/app.component.ts App url: https://ag-grid-aligned-grid.stackblitz.io/

Download

0 formats

No download links available.

Ag-grid: aligned grid (vertical scroll synchronization) | NatokHD