如何解决反应表中的分页重置问题？

Question

I am working for a feature where i have to apply a filter outside the component which is using react-table, but the current page number doesn't get reset after the filter is being applied. The result being fetched (have applied server-side pagination) shows the first page's data.

I have tried to use the callback onFetchData to change the current page number but it does'nt get triggered when the filter from outside the component is applied.

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 starts from 0

            onUpdate({
              page: adjustedPage,
              filtered,
              pageSize,
              sorted,
            });
          }}
        />
      </div>
    );
  }

The Page number should be reset to 1 eg current display is Page 2 of 3, after the filter from outside the table is applied, the result is fetched and shown but the Page 2 of 3 doesn't change while the result in the table is of page 1.

Answer 1

I am working for a feature where i have to apply a filter outside the component which is using react-table, but the current page number doesn't get reset after the filter is being applied. The result being fetched (have applied server-side pagination) shows the first page's data.

I have tried to use the callback onFetchData to change the current page number but it does'nt get triggered when the filter from outside the component is applied.

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 starts from 0

            onUpdate({
              page: adjustedPage,
              filtered,
              pageSize,
              sorted,
            });
          }}
        />
      </div>
    );
  }

The Page number should be reset to 1 eg current display is Page 2 of 3, after the filter from outside the table is applied, the result is fetched and shown but the Page 2 of 3 doesn't change while the result in the table is of page 1.

Answer 2

I am working for a feature where i have to apply a filter outside the component which is using react-table, but the current page number doesn't get reset after the filter is being applied. The result being fetched (have applied server-side pagination) shows the first page's data.

I have tried to use the callback onFetchData to change the current page number but it does'nt get triggered when the filter from outside the component is applied.

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 starts from 0

            onUpdate({
              page: adjustedPage,
              filtered,
              pageSize,
              sorted,
            });
          }}
        />
      </div>
    );
  }

The Page number should be reset to 1 eg current display is Page 2 of 3, after the filter from outside the table is applied, the result is fetched and shown but the Page 2 of 3 doesn't change while the result in the table is of page 1.

Answer 3

I am working for a feature where i have to apply a filter outside the component which is using react-table, but the current page number doesn't get reset after the filter is being applied. The result being fetched (have applied server-side pagination) shows the first page's data.

I have tried to use the callback onFetchData to change the current page number but it does'nt get triggered when the filter from outside the component is applied.

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 starts from 0

            onUpdate({
              page: adjustedPage,
              filtered,
              pageSize,
              sorted,
            });
          }}
        />
      </div>
    );
  }

The Page number should be reset to 1 eg current display is Page 2 of 3, after the filter from outside the table is applied, the result is fetched and shown but the Page 2 of 3 doesn't change while the result in the table is of page 1.

Answer 4

I am working for a feature where i have to apply a filter outside the component which is using react-table, but the current page number doesn't get reset after the filter is being applied. The result being fetched (have applied server-side pagination) shows the first page's data.

I have tried to use the callback onFetchData to change the current page number but it does'nt get triggered when the filter from outside the component is applied.

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 starts from 0

            onUpdate({
              page: adjustedPage,
              filtered,
              pageSize,
              sorted,
            });
          }}
        />
      </div>
    );
  }

The Page number should be reset to 1 eg current display is Page 2 of 3, after the filter from outside the table is applied, the result is fetched and shown but the Page 2 of 3 doesn't change while the result in the table is of page 1.

Answer 5

I am using react table's out of the box pagination and the issue I had was how to extract the current pageIndex from react table. Because every time there was an action on the row of React table, that did not alter the no. of rows, the React table would go back to page 0.

Following worked for me, hacky but works -

On parent component calling React table - signalTableData is where I have my data for columns and datarows. this could be your data.

const [pageIndex, setPageIndex] = useState(0);

<ReactTable
     columns={signalTableData ? signalTableData.headerRow : <div>Loading...</div>}
                  data={signalTableData.dataRows ? signalTableData.dataRows : <div>Loading...</div>}
                  sortbyCollumn='originDate'
                  desc={true}
                  pageIndex = {pageIndex}
                  setPageIndex = {setPageIndex}
              />

One React Table js -

function Table({ columns, data, sortbyCollumn, desc, pageIndex, setPageIndex }) {...

and

useTable(
    {
      columns,
      data,
      defaultColumn, // Be sure to pass the defaultColumn option
      filterTypes,
      autoResetPage: false,
      initialState: {
        pageSize: 5,
        pageIndex: pageIndex,
        sortBy: [
          {
            id: sortbyCollumn,
            desc: desc
          }
        ] },
    },