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 our application, it's more likely to have tons of columns and fewer rows.

When the data was about 2300 cells (68 columns and 34 rows), it was fast enough that I could call it "immediate". Nothing I'd worry about.

Increasing it 5x has caused an exponential increase in initial render time. Specifically, the creation of the columns takes forever, within the recursivelyCreateColumns method.

Going to 10x causes it to take a few minutes to complete. Going to 20, it didn't crash but after 5 minutes it was still going and I suspect it was going to take an hour or more.

My question is, even though my code to create the grid column/row/data for AG-Grid to process runs in the 20ms range, is there something I can do to make it easier for AG-Grid to create the columns? Maybe have it only create the columns when necessary?

My grid setup is as follows:

var gridOptions = {
    enableCellExpressions: true,
    columnDefs: data.header,
    rowData: data.body.data,
    floatingTopRowData: data.body.floatingTopData,
    rowHeight: 25,
    headerHeight: 25,
    enableColResize: true,
    enableSorting: true,
    enableFilter: true,
    getNodeChildDetails: function(rowItem) {
        if(rowItem.items) {
            return {
                expanded: scope.gridOptions.rowData[0].something === rowItem.something,
                group: true,
                field: "something",
                key: rowItem.something,
                children: rowItem.items
            };
        }
        return null;
    }
};

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