title: Ag-grid editable grid adding new row dynamically
body: <p>I have an editable AgGrid in my functional component as below.
  On the last column, I have buttons to Add/Remove rows.
  Now I want the Add row to be displayed only for the last row. I am using cellRenderer for the last column.</p>
  <p>With the below change, I get the Add button for the last row (i.e. on 2nd row in my case) on initial render. But if I click on Add for this 2nd row, while I get the Add button for the new 3rd row, but it does not get removed for the 2nd row. not sure if I am implementing this in the wrong way.</p>
  <pre><code>const MyCmp = (props) =&gt; {
  
      const getData = () =&gt; {
          return [{
              id: 0,
              firstName: 'F1',
              lastName: 'L1'
          }, {
              id: 1,
              firstName: 'F2',
              lastName: 'L2',
          }];
      }
  
      const [myCols, setMyCols] = useState(null);
      const [gridData, setGridData] = useState(getData());
  
      const [gridApi, setGridApi] = useState('');  
  
      let cellRules = {
          'rag-red': params =&gt; {
              if (params.data.lastName === 'INVALID_VAL') {
                  return true;
              }
          }
      };
  
      const handleGridReady = (params) =&gt; {
          setGridApi(params.api);
          setMyCols([{
              headerName: 'F Name',
              field: 'firstName',
              editable: true
          }, {
              headerName: 'L Name',
              field: 'lastName',
              cellClassRules: cellRules,
              editable: true
          }, {
              headerName: '',
              field: 'buttonCol',
              cellRenderer: 'customColRenderer',
              cellRendererParams: {
                  addItems: addItems
              }
          }]
          );
      };
  
      const createNewRowData = () =&gt; {
          const newData = {
              id: newCount,
              firstName: '',
              lastName: ''
          };
          newCount++;
          return newData;
      }
  
      let newCount = getData().length;
  
      const addItems = (addIndex, props) =&gt; {
          const newItems = [createNewRowData()];
          const res = props.api.applyTransaction({
              add: newItems,
              addIndex: addIndex,
          });
  
          setGridData(...gridData, res.add[0].data); // IS THIS CORRECT ?
  
          if (props.api.getDisplayedRowCount() &gt; props.api.paginationGetPageSize()) {
              props.api.paginationGoToPage(parseInt((props.api.getDisplayedRowCount() / props.api.paginationGetPageSize())) + 1);
          }
      }
  
      const onCellClicked = (e) =&gt; {
      }
  
      const frameworkComponents = () =&gt; {
          return {customColRenderer: customColRenderer}
      }
  
      return (
          &lt;&gt;
              &lt;MyAgGrid
                      id=&quot;myGrid&quot;
                      columnDefs={myCols}
                      rowData={gridData}
                      frameworkComponents={{customColRenderer: customColRenderer}}
                      {...props}
                  /&gt;
          &lt;/&gt;
      )
  }
  </code></pre>
  <p>My customColRenderer is as below;</p>
  <pre><code>export default (props) =&gt; {
          let isLastRow = (props.rowIndex === (props.api.getDisplayedRowCount() -1)) ? true: false;
          const addItems = (addIndex) =&gt; {
              props.addItems(addIndex, props);
          }
  
          return (
              &lt;span&gt;
                  {isLastRow ? &lt;button onClick={() =&gt; addItems()}&gt;Add&lt;/button&gt; : null}
                  &lt;span&gt;&lt;button onClick={() =&gt; props.api.applyTransaction({remove: props.api.getSelectedRows()})}&gt;Remove&lt;/button&gt;
              &lt;/span&gt;
          );
  };
  </code></pre>