访问 ReactTable 中的过滤数据

Posted 2023-02-19

【中文标题】访问 ReactTable 中的过滤数据

【英文标题】：Access filtered data in ReactTable

【发布时间】：2018-06-15 16:39:44

【问题描述】：

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

关于如何获取过滤后的数据（如 JSON）的任何想法？一直在https://react-table.js.org/#/story/custom-filtering这里乱七八糟，目前还没有找到方法来抓取被过滤掉的数据。

【参考方案1】：

React table 可以将 render prop 作为子项，您可以从传递给该 render fn 的 table state 中挑选数据，

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

【参考方案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);
    
/>

【参考方案3】：

我刚刚通过引用这个article找到了答案

得到如下表的引用：

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

在你的函数中

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