AG-Grid large dataset render time (slow)

Question

I have a grid with a large but reasonable amount of data (approx 12,000 cells... 340 columns and 34 rows). I know that seems like a sideways table but it just happens that for

Answer 1

Row Virtualisation

Row virtualization means that we only render rows that are visible on the screen. For example, if the grid has 10,000 rows but only 40 can fit inside the screen, the grid will only render 40 rows (each row represented by a DIV element). As the user scrolls up and down, the grid will create new DIV elements for the newly visible rows on the fly.

If the grid was to render 10,000 rows, it would probably crash the browser as too many DOM elements are getting created. Row virtualization allows the display of a very large number of rows by only rendering what is currently visible to the user.

The image below shows row virtualization - notice how the DOM only has 5 or 6 rows rendered, matching the number of rows the user actually sees.

Column Virtualisation

Column virtualization does for columns what row virtualization does for rows. In other words, column virtualization only renders the columns that are currently visible and the grid will render more columns as the user scrolls horizontally.

Column virtualization allows the grid to display large numbers of columns without degrading the performance of the grid.

Performance Hacks For Javascript

AG-Grid Row Models