React Ag-Grid

If you're working with large data sets in Ag-Grid, there are several tips and tricks that can help improve rendering performance:

Use the rowBuffer property to increase the number of rows that are pre-rendered. This can significantly reduce the time it takes for the grid to render large data sets.


<AgGridReact
  rowData={data}
  rowBuffer={100}
/>

Use the immutableData property if your data set is not going to change. This can improve the overall performance of the grid by reducing the amount of time it takes to render each row.


<AgGridReact
  rowData={data}
  immutableData={true}
/>

Use suppressAnimationFrame to disable animation frames when rendering. This can improve the overall performance of the grid, especially when there are a large number of rows.


<AgGridReact
  rowData={data}
  suppressAnimationFrame={true}
/>

Use maxConcurrentDatasourceRequests to control the number of concurrent requests made to the server when using server-side pagination. This can help prevent the grid from becoming unresponsive when working with large data sets.


<AgGridReact
  rowData={data}
  maxConcurrentDatasourceRequests={2}
/>

By implementing these tips and tricks, you can significantly improve the rendering performance of Ag-Grid when working with large data sets.

Get all rows


export const getAllNodes = (gridApi: ObjectWithKey): ObjectWithKey[] => {
    const rowData: ObjectWithKey[] = [];
    gridApi.forEachNode((node: ObjectWithKey) => rowData.push(node.data));
    return rowData;
};

Get rows count


const totalRows = gridAPI.getDisplayedRowCount();

Flash any cell


/** Get RowNode model */
const rowNode = gridAPI.getRowNode(insertedItem.id);

      if (rowNode) {
         /** Flash row to indicate inserted item */
         gridAPI.flashCells({
            rowNodes: [rowNode],
            flashDelay: 3000
         });
}

Edit and go to next cell in Row


gridRef.current!.api.tabToNextCell();

Autocomplete Editor


https://stackblitz.com/edit/react-hooks-complex-editor-pgrlz2?file=src%2FComponents%2FEditors%2FAutoCompleteEditor.jsx

Clear All the filter


gridRef.current!.api.setFilterModel()

const clearFilters = useCallback(() => {
    gridRef.current!.api.setFilterModel(null);
  }, []);

Set background color to editable Cell


cellStyle: (params: any) => {
                                if (
                                    !!hasPermission &&
                                    GridViewType.GROUP === gridView &&
                                    colName.name !== 'address'
                                ) {
                                    return {
                                        backgroundColor: '#fbfbfb'
                                    };
                                }
                            },

Automating Ag-Grid


window.findReactComponent = function(el){
  for(const key in el) {
      console.log(key);
      if(key.startsWith('__reactEventHandlers$')){
          const fiberNode = el[key];
          return fiberNode;
      }
  }
}
ƒ (el){
  for(const key in el) {
      console.log(key);
      if(key.startsWith('__reactEventHandlers$')){
          const fiberNode = el[key];
          return fiberNode;
      }
  }
}

var grid = document.getElementById("myGrid");
undefined

var reactGrid = findReactComponent(grid)
VM355:3 __reactInternalInstance$lh7grwvvmkq
VM355:3 __reactEventHandlers$lh7grwvvmkq
undefined


var props = reactGrid.children.props
undefined

var columnCount = props.gridOptions.columnDefs.length
undefined

columnCount
6

props.gridOptions.api.selectAll()
undefined

const rowData = [];
undefined

props.gridOptions.api.forEachNode(function (node) {
    rowData.push(node.data);
});
undefined

props.gridOptions.api.applyTransaction({
    remove: rowData
});