title: AG-Grid large dataset render time (slow)
body: <p>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.  </p>
  
  <p>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.</p>
  
  <p><a href="https://i.stack.imgur.com/2xOci.png" rel="noreferrer"><img src="https://i.stack.imgur.com/2xOci.png" alt="enter image description here"></a></p>
  
  <p>Increasing it 5x has caused an exponential increase in initial render time.  Specifically, the creation of the columns takes forever, within the <code>recursivelyCreateColumns</code> method.</p>
  
  <p><a href="https://i.stack.imgur.com/PMBos.png" rel="noreferrer"><img src="https://i.stack.imgur.com/PMBos.png" alt="enter image description here"></a></p>
  
  <p>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.</p>
  
  <p>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?</p>
  
  <p>My grid setup is as follows:</p>
  
  <pre><code>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;
      }
  };
  </code></pre>