访问ReactTable中的过滤数据

时间:2018-01-05 20:30:51

标签: javascript reactjs react-table

我正在使用ReactTablefilterable设置为true。我需要访问应用过滤器后返回的数据,因此我可以生成已过滤数据的CSV。

关于如何以JSON格式获取已过滤数据的任何想法?在这里弄乱了https://react-table.js.org/#/story/custom-filtering,到目前为止还没有找到一种方法来获取已经过滤掉的数据。

3 个答案:

答案 0 :(得分:6)

我刚刚通过引用此article

找到了答案

参考下表:



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

在你的功能中

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

答案 1 :(得分:0)

如果您使用带有钩子的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);
    }}
/>

答案 2 :(得分:0)

反应表可以将渲染道具作为子对象,您可以从传递给该渲染fn的表状态中挑选数据,

<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>