Insert & Remove

If you want to add and remove rows into the grid, you have two choices. One is to maintain the data yourself, add in the new data, then set it back into the grid. The other is to use the api methods for getting the grid to insert and remove the data. This section looks at the latter option, using the api.

Supported Row Models

This section covers adding and removing rows for the normal RowModel. For pagination and virtual, see the documentation page for each of them. For viewport, the concept of adding and removing rows is no relevant as the viewport datasource has complete control on what rows get displayed, so it can add and removes rows into the viewport at will.

The grid expects the data you provided to be in one straight list. If you provided data to the grid already grouped, then the add / remove features will not work.

API Methods

The api methods for adding and removing are below. When the grid takes in new data, it creates a new list of data with the items wrapped in RowNodes and it maintains the same ordering as the provided list. The methods below work on this list so indexes are with regard the original list. If the grid is doing any filtering, sorting or grouping, then the displayed index of a data item will be different to the index in the original list. If you insert an item at a particular index, the grid will then apply sorting, filtering and grouping, so the index on the screen will not match. If you want the indexes to match, you must remove all sorting, filtering and grouping from the grid.

• API insertItemsAtIndex(index, items, skipRefresh=false)

Inserts the data at the provided index. Provide items as raw data, not rowNodes (ie same as data in original rowData).

• API removeItems(rowNodes, skipRefresh=false)

Removes the provided rowNodes from the grid. The rowNodes are used to identify the rows rather than indexes as this makes the method neutral to any sorting, filtering or grouping that may be active in the grid.

• API addItems(items, skipRefresh=false)

Adds items to the end of the list. If the grid is sorted, then adding to the end of the list is fine, as the sorting will then sort the items anyway.

Skip Refresh

Each of the methods above has an optional parameter skipRefresh. This parameter is only used in the InMemoryRowModel. If it is true, the grid will not refresh the model - that means it will not rework the groups, sorting and filtering. Use this if you have many updates to do and only want to refresh after the last one (set to false for the last call). This will give a performance gain as the grid will only group, sort and filter once when you are finished all the updates.

Getting Data Out

It's all good getting rows added and removed, but in the end, you will want to get the data out. To do this, use the api.forEachNode() to iterate through all the data, and then pull the data out of each node. The grid does not do this for you on purpose as a) it's trivial and b) it allows you to take control and do additional things such as change or filter the data as you go. To just get the selected rows, use api.getSelectedNodes(). To get the filtered rows, or the rows in the order they are in the grid, use api.forEachNodeAfterFilter() or api.forEachNodeAfterFilterAndSort().

Example - Adding & Removing Rows

Below demonstrates the different api methods via the buttons. The example outputs a lot of debugging items to the console because the grid property debug=true is set. The buttons are as follows:

  • Add Row: Adds a row to the end of the list.
  • Insert Row @ 2: Inserts a row at position 2 in the list. This will always work as the grid below doesn't allow sorting, filtering or grouping.
  • Remove Selected: Removes all the selected rows from the list.

Example - Adding & Removing Rows with Groups

If you are displaying groups (either you provided your own groups, or you are using the ag-Grid Enterprise row grouping feature), then it is possible to get the grid to remember the open / closed state of the groups when inserting / removing by setting rememberGroupStateWhenNewData=true.

The example below shows adding items to the start and the end of groups (the start and the end only makes sense if you are not sorting, as otherwise the sort is applied after the update).