title: Adding new row to ag-grid at the top of the grid react
body: <p>I'm having trouble figuring out how i should properly go about adding a empty row to my ag-grid at the top of the table.</p>
  
  <p>Right now this is how my component / user lifecycle is:</p>
  
  <ol>
  <li>Load page</li>
  <li>Render Grid (from componentDidMount, asking for data from reducer)</li>
  <li>fetch data from db (list of roles)</li>
  <li>update my reducer to have list of roles (normalized) -> send to component</li>
  <li>My RolesComponent now denormalizes that data it received</li>
  <li>Display on grid</li>
  <li>Click on [Add Button] -> dispatches action to create role {name: '', description: ''}</li>
  <li>Sends to api, api returns new role</li>
  <li>Reducers adds new role to list of roles</li>
  <li>Refreshes grid component since new props are loaded, new empty role is added to bottom of the table</li>
  </ol>
  
  <p>Because the role I add is new, its 'id' is the highest, hence I believe it goes to the end of the table. However i could skip any reducer logic to add (step 9) and just manually do it like this: </p>
  
  <pre><code>this.props.api.addDispatcher({name: '', description: ''}).then((result) =&gt; {
    this.props.api.updateRowData({ add: [result] });
  });
  </code></pre>
  
  <p>Where the reducer does not have a case for 'ADD_ROLE', however this feels dirty. I'm pretty stuck and don't believe this is the right path to take. A general or better approach to take is very much appreciated.</p>
  
  <p>Even ontop of that i'm stuck on whether I should be utilizing redux to rehydrate my table or be depending on ag-grids api. Ideally, I feel like using ag-grids api is more efficient.</p>