Access filtered data in ReactTable

问题:

I am using ReactTable, and have filterable set to true. I need to access the data that gets returned after applying filters, so I can generate CSV's of the filtered down data.

Any ideas on how I might be able to get the filtered down data, as JSON? Been messing around here https://react-table.js.org/#/story/custom-filtering, so far haven't found a way to grab the data that has been filtered down.

回答1:

I have just found the answer by referencing this article

get refer of table like following:

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

And in your function

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

回答2:

If you are using React 16.7-alpha+ with hooks you can do something like the following too.

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:

React table can take a render prop as a child, and you can pick data off the table state that is passed to that render 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>