在网格顶部向 ag-grid 添加新行答案

【问题标题】：Adding new row to ag-grid at the top of the grid react在网格顶部向 ag-grid 添加新行
【发布时间】：2018-07-23 09:18:51
【问题描述】：

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

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

加载页面
渲染网格（来自 componentDidMount，向 reducer 请求数据）
从数据库中获取数据（角色列表）
更新我的 reducer 以获取角色列表（标准化）-> 发送到组件
我的 RolesComponent 现在对它收到的数据进行非规范化
在网格上显示
点击[Add Button] -> dispatch action 创建角色 {name: '', description: ''}
发送到api，api返回新角色
Reducers 将新角色添加到角色列表中
在加载新道具后刷新网格组件，将新的空角色添加到表格底部

因为我添加的角色是新的，它的 'id' 是最高的，因此我相信它会排到表的末尾。但是我可以跳过任何要添加的减速器逻辑（第 9 步），然后像这样手动执行它：

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

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

除此之外，我还纠结于是否应该使用 redux 来补充我的桌子或依赖 ag-grids api。理想情况下，我觉得使用 ag-grids api 效率更高。

【问题讨论】：

标签： reactjs redux ag-grid ag-grid-react

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：