小编Jav*_*ria的帖子

如何解决react-table中的分页重置问题?

我正在开发一个功能,我必须在使用react-table的组件外部应用过滤器,但应用过滤器后当前页码不会重置。获取的结果(已应用服务器端分页)显示第一页的数据。

我尝试使用回调 onFetchData 来更改当前页码,但当应用组件外部的过滤器时,它不会被触发。

render() {
    const { orders, onUpdate } = this.props;
    const defaultPageSize = 50;

    return (
      <div className="admin-report-table">
        <ReactTable
          data={orders.ordersData}
          columns={this.columns}
          pages={Math.ceil(orders.count / defaultPageSize)}
          defaultPageSize={defaultPageSize}
          multiSort={false}
          showPageSizeOptions={false}
          showPaginationTop
          className="-striped -highlight"
          noDataText="No orders found. Please check your connection or change your filters."
          filterable
          manual // informs React Table that you'll be handling sorting and pagination server-side
          onFetchData={(state) => {
            const { page, pageSize, filtered, sorted } = state;
            const adjustedPage = page + 1; // since library page …
Run Code Online (Sandbox Code Playgroud)

reactjs react-redux react-table

8
推荐指数
2
解决办法
2万
查看次数

标签 统计

react-redux ×1

react-table ×1

reactjs ×1