在 ReactTable 中访问过滤后的数据

Question

我正在使用 ReactTable，并将 filterable 设置为 true。我需要访问应用过滤器后返回的数据，以便生成过滤后数据的 CSV。

关于如何获取过滤后的数据的任何想法，如 JSON？一直在这折腾https://react-table.js.org/#/story/custom-filtering，至今没找到抓取过滤下来的数据的方法

Answer 1

我刚刚通过参考这个article

找到了答案

获得 table 的参考，如下所示：

<ReactTable
  ref={(r) => {
    this.selectTable = r;
  }}
  ...
/>

在你的函数中

const currentRecords = this.selectTable.getResolvedState().sortedData;

Answer 2

如果您使用的是带钩子的 React 16.7-alpha+，您也可以执行以下操作。

import { useState, useRef } from 'react';

const [pageSize, setPageSize] = useState(20);
let reactTable = useRef(null);

<ReactTable
    ref={(r) => (reactTable = r)}
    onFilteredChange={() => {
      setPageSize(reactTable.getResolvedState().sortedData.length);
    }}
/>

Answer 3

React table 可以将渲染道具作为子项，您可以从传递给该渲染 fn 的 table 状态中选取数据，

<ReactTable {...props}>
    {(state, makeTable, instance) => {
        // take data from state, resolvedData, or sortedData, if order matters (for export and similar)
        // you need to call makeTable to render the table
        return (
                <>
                    {makeTable()}
                    {<p>{`Showing ${state.resolvedData.length} entries`}</p>}
                 </>
        );
      }}
</ReactTable>

在 ReactTable 中访问过滤后的数据

Access filtered data in ReactTable

javascript

reactjs

react-table