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

Question

我无法弄清楚我应该如何正确地向表格顶部的 ag-grid 添加一个空行。

现在我的组件/用户生命周期是这样的：

1. 加载页面
2. Render Grid（来自componentDidMount，从reducer请求数据）
3. 从数据库中获取数据（角色列表）
4. 更新我的减速器以获得角色列表（标准化）-> 发送到组件
5. 我的 RolesComponent 现在非规范化它收到的数据
6. 在网格上显示
7. 单击 [添加按钮] -> 调度操作以创建角色 {name: '', description: ''}
8. 发送到 api，api 返回新角色
9. Reducers 向角色列表添加新角色
10. 由于加载了新道具，因此刷新网格组件，新的空角色被添加到表格底部

因为我添加的角色是新的，它的 'id' 是最高的，因此我相信它会出现在表格的末尾。 但是，我可以跳过任何 reducer 逻辑来添加（第 9 步），只需手动执行如下操作：

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

减速器没有“ADD_ROLE”的情况，但这感觉很脏。 我很困惑，不相信这是正确的道路。 非常感谢采用通用或更好的方法。

甚至在此之上，我还纠结于是否应该使用 redux 来给我的桌子补充水分，还是依赖于 ag-grids api。 理想情况下，我觉得使用 ag-grids api 更有效。

Answer 1

您可以使用defaultGroupSortComparator的 grid 属性并提供一个 id it 的比较器来进行网格排序。

// 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 });