将新行添加到网格顶部的 ag-grid 反应

Question

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.

Right now this is how my component / user lifecycle is:

1. Load page
2. Render Grid (from componentDidMount, asking for data from reducer)
3. fetch data from db (list of roles)
4. update my reducer to have list of roles (normalized) -> send to component
5. My RolesComponent now denormalizes that data it received
6. Display on grid
7. Click on [Add Button] -> dispatches action to create role {name: '', description: ''}
8. Sends to api, api returns new role
9. Reducers adds new role to list of roles
10. Refreshes grid component since new props are loaded, new empty role is added to bottom of the table

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:

this.props.api.addDispatcher({name: '', description: ''}).then((result) => {
  this.props.api.updateRowData({ add: [result] });
});

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.

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.

Answer 1

You can use the grid property of defaultGroupSortComparator and provide a comparator of id it to make grid sorting.

// your comparator
const sortbyId(first, second) => {
    // the logic;
}

render() {
    return( 
        <AgGridReact
         defaultGroupSortComparator={this.sortById}
    />);
}

Answer 2

您可以使用addIndex属性，所以在这种情况下

this.props.api.updateRowData({ add: [result], addIndex: 0 });