Add / Remove row(s) in ag-grid

The current version of ag-grid now supports this:

https://www.ag-grid.com/javascript-grid-insert-remove/

The grid does feature change detection but if you want/need to force a refresh, you can pick one of the refresh methods:

https://www.ag-grid.com/javascript-grid-refresh/


Since this answer is a bit old, just noting another update to the grid has emphasized the use of what the grid calls "transactions" for all grid CRUD operations:

https://www.ag-grid.com/javascript-grid-data-update/#gsc.tab=0


This is what worked for me with the ag-grid community version 22.1.1:

add new row

const row = //someNewRowDataHere

this.gridOptions.rowData.push(row)
this.gridApi.setRowData(this.gridOptions.rowData)

remove

const selectedRow = this.gridApi.getFocusedCell()
const id = this.gridOptions.rowData[selectedRow.rowIndex].i

this.gridOptions.rowData.splice(selectedRow.rowIndex, 1)
this.gridApi.setRowData(this.gridOptions.rowData)