Expand All

  Getting Started



  Row Models





Github stars make projects look great. Please help, donate a star, it's free.
Read about ag-Grid's Partnership with webpack.
Get informed on releases and other ag-Grid news only - never spam.
Follow on Twitter

In Memory Row Model

The simplest row model to use is the In Memory Row Model. This row model takes all of the data to be displayed and provides the following features inside the grid:

  • Filtering
  • Sorting
  • Grouping*
  • Aggregation*
  • Pivoting*
* Grouping, Aggregation and Pivoting are available in ag-Grid Enterprise only.

The in memory row model is the default row model for ag-Grid and used in all the examples (unless the example is explicitly demonstrating another row model). As such, the usage of the in memory row model is not explained in detail here. Please refer to the main parts of the grid documentation in how the features work with the in memory row model.

How It Works

You do not need to know how the in memory row model works, however it can be helpful for those who are interested.

The in memory row model is responsible for working out how to display the rows inside the grid. It has a complex data structure, representing the data in difference states. The states are as follows:

  • State 1: Row Data: Row data the application provides.
  • State 2: All Rows: Each data item the application provides wrapped in a rowNode object.
  • State 3: Rows after Group: After grouping applied to the rowNodes.
  • State 4: Rows after Filter: After filtering applied to the rowNodes.
  • State 5: Rows after Sort: After sort applied to the rowNodes.
  • State 6: Rows after Map: After mapping applied to the rowNodes.

The following is an example to help explain each of these steps.

State 1: Row Data

The data as provided by the application. The grid never modifies this array. It just takes the rowData items from it. The examples is of three data items.

Example Row Data

API: There is no API to get this data. However it was provided by the application so you should already have it.

State 2: All Rows

allRows is similar to rowData except a new array is created which contains rowNodes, each rowNode pointing to exactly one data item. The length of the allRows array is the same as the rowData array.

Example All Rows

API: There is no API to get this data. However there is no benefit over the rowsAfterGroup data.

State 3: Rows After Group

rowsAfterGroup takes the allRows, and if grouping, groups the data. If no grouping is done, then rowsAfterGroup will be identical to allRows. The example shows grouping on the color field, creating two groups.

Example Rows After Group

API: Use api.forEachNode() to access this structure.

State 4: Rows After Filter

rowsAfterFilter goes through rowsAfterGroup and filters the data. The example shows filtering on the color black (thus removing the second group).

Example Rows After Filter

API: Use api.forEachNodeAfterFilter() to access this structure.

State 5: Rows After Sort

rowsAfterSort goes through rowsAfterFilter and sorts the data. The example shows sorting on car make.

Example Rows After Sort

API: Use api.forEachNodeAfterFilterAndSort() to access this structure.

State 6: Rows After Map

rowsAfterMap maps the data to what should be drawn inside the grid, taking into account what groups are open and closed. This list is what is iterated through when the grid draws the rows. Two examples are provided below. The first when open (so three rows in the grid, the group row plus two children),the second when closed (so one row in the grid, the closed group).

Example Rows After Map - Open Group

Example Rows After Map - Closed Group

API: Use api.getModel() and then model.getVirtualRowCount() and getVirtualRow() to get the nodes.