使用当前过滤器和排序实现 CSV 下载答案

【问题标题】：Implement CSV download using current filters and sort使用当前过滤器和排序实现 CSV 下载
【发布时间】：2019-06-04 22:42:06
【问题描述】：

我需要实现一个下载功能。它将读取 react-data-grid (adazzle) 中的数据，尊重当前列、过滤器和排序，并创建一个数组 json（或逗号分隔的字符串），然后我可以将其传递给 react-csv 模块。

我有一个从后端填充的数据结构，但它没有被过滤或排序。我需要能够逐行向网格询问它的数据。谁能指出我正确的方向？

【问题讨论】：

标签： csv react-data-grid

【解决方案1】：

没有代码或某些上下文，我无法确定地回答...
您提供带有要显示的集合的 rowGetter 道具，或者提供要显示的行的方法...我在想如果您进行过滤，那么很可能您有某种机制支持...无论哪种方式，您可以以某种方式使用此属性的值来准确获取您在网格中看到的内容。
如果你真的想询问网格，你可以尝试添加对网格的引用，然后看看你是否可以向它询问行数据。我无法确定我在网格中通过 ref 看到了可用道具中的 rows 道具，但我想你应该能够 (**,)

...

handleExport = async => {
  const exportRows = rows;
  // const exportRows = getRows(initialRows, filters);
  // const exportRows = this.state.gridref.CurrentRows   DISCLAIMER:CurrentRows is just for giving the idea... check out the ref yourself to see if it's possible to get the rows via the grid refs props. 
 downloadCSV( exportRows )
}
...
<ReactDataGrid
      ref={input => {this.state.gridref = input}}
      columns={columns}
      rowGetter={i => rows[i]} // or maybe rowGetter={i => getRows(initialRows, filters)[i]}
      rowsCount={rows.length}
      onGridSort={(sortColumn, sortDirection) =>
        setRows(sortRows(initialRows, sortColumn, sortDirection))
      }
    />

我只在constructor 中[设置/初始化] this.state.gridRef 属性，但我想您也可以在componentDidMount 中[设置/初始化] 它...
像这样初始化：
this.state.gridRef = React.createRef()

【讨论】：