如何获取react-table过滤/排序数据

Question

我想获取

react-table

的过滤数据，我找到了一些答案无法访问react-table中的已解析数据，访问ReactTable中的过滤数据和访问React Table中的过滤数据时出错。

但他们都使用

<ReactTable ... >

或

<ReactTableComponent ...>

并通过寻址表的

ref

，他们获得的数据为

tableRef.getResolvedState().sortedData

。

我的桌子看起来像这个，但我没有

<ReactTable ...>

。

• tableRef

  返回

  <table class="table table-striped" role="table"> ....

• tableRef.current

  返回

  undefined

• tabelRef.getResolvedState()

  返回

  undefined

Answer 1

您可以使用 rows 作为值的

rows.values

。首先

prepareRow(row)

每行然后返回该行的

values

。

我假设您想将过滤后的数据导出为 CVS。

import { CSVLink, CSVDownload } from "react-csv";
...

<CSVLink
  data={rows.map(row=> {
    prepareRow(row)
    return row.values;
  })}
>

  <button
    type="button"
    className="btn btn-round btn-outline-secondary mr-2"
  >
    <i className="ri-file-4-line" />
  </button>
</CSVLink>

Answer 2

我也有同样的问题。我做的如下：

1. 我向 React Table 功能组件添加了一个参数，其中我将传递一个名为 dataWasFiltered

   function Table({ columns, data, dataWasFiltered })

的回调函数
2. 我在表格组件中创建了一个 useEffect，以便在 rows 属性更新时使用该回调

   useEffect(() => { dataWasFiltered(rows) }, [rows])

3. 我在名为 filtered

   const [filtered, setFiltered] = useState(null)

的父对象中创建了一个状态变量
4. 我在父对象中创建了一个回调函数，使用 setFiltered const dataWasFiltered = x => setFilteredAssigned(x)

    更新 

   filtered
状态变量
5. 在父组件中，我将新的回调函数作为参数添加到表组件中

   <Table columns={columns} data={data} dataWasFiltered = { dataWasFiltered }/>

这一切的目的是使用react-table组件的rows属性的内容更新父组件中的状态变量。 Rows 属性是 React-table 渲染的对象，而不是组件中所有可能的行。

可能 dataWasFiltered 不是我的回调最合适的名称，但我将使用它。

如果有帮助请告诉我。

Answer 3

使用反应表8.9.3：

const reactTable = useReactTable(...)
const rows = reactTable.getRowModel().flatRows