Average AG-Grid Dataset Time (Slow)

Question

I have a grid with a large but reasonable amount of data (about 12,000 cells ... 340 columns and 34 rows). I know this looks like a side table, but it just happens that for our application, most likely there will be a number of columns and fewer rows.

When the data was about 2,300 cells (68 columns and 34 rows), it was fast enough for me to call it “immediate”. Not worried about anything.

A magnification of 5x caused an exponential increase in the initial rendering time. In particular, the creation of columns takes forever as part of the recursivelyCreateColumns method.

Switching to 10x takes a few minutes. The transition to 20 years, this did not happen, but after 5 minutes it still continued, and I suspect that it will take an hour or more.

My question is that although my code for creating a column / row / grid data for an AG-Grid is to handle runs in the 20 ms range, is there anything I can do to simplify the creation of AG-Grid columns? Maybe he only creates 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

String Virtualization

Line virtualization means that we only render lines 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 display 40 rows (each row is represented by a DIV element). When the user scrolls up and down, the grid will create new DIV elements for newly visible lines on the fly.

If the grid displayed 10,000 rows, this would probably lead to a browser crash, as too many DOM elements were created. Line virtualization allows you to display a very large number of lines, displaying only what is currently visible to the user.

The image below shows row virtualization - note that only 5 or 6 rows are displayed in the DOM, corresponding to the number of rows that the user actually sees.

Performance Hacks For Javascript

AG-Grid Row Models