question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Not re-render table after changing pagination

See original GitHub issue

Is this a general question about implementation, support, API, or anything else?

I want to change the table content after changing the pagination, and sort functionalities should be works as well by client not server. And I have been written the following code for doing this:

<Table
	page={page - 1}
	data={tableData}
	pages={totalPages}
	loading={!isLoaded}
	minRows={tableData.length}
	columns={this.getColumns()}
	defaultPageSize={sizePerPage}
	onPageChange={this.onPageChange}
	onPageSizeChange={this.onPageSizeChange}
/>

But while I click on Next button, I could receive data, but I couldn’t see my data in the table, But it just works as ok on the first page. I if use the onFetchData hook, it will be working as ok, but the sort feature is not working after using this hook.

What version of React-Table are you using?

6.8.5 Your bug may already be fixed in the latest release. Run yarn upgrade react-table! 6.8.5

What bug are you experiencing, or what feature are you proposing?

I can not see my data in the table after changing the pagination by that hooks(My data has from server and client just should handle the sort feature.).

What are the steps to reproduce the issue?

  1. Try to get data from the server with this params 1.1: page = 1 1.2: pageSize = 25 I will receive the number of total pages and data.

  2. I try to render the table with the above config.

  3. I have used the pagination hooks for handling the data by pagination from the server.

  4. If I go to page 2, then I can not see the rendered data in the table and table is empty. But it works on the first page.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:7

github_iconTop GitHub Comments

1reaction
Jaujoncommented, Jul 30, 2018

Hi Ali, have you read this page of the documentation about server-side pagination & sorting: https://react-table.js.org/#/story/server-side-data The ReactTable component needs a manual property for example. Let me know if you have any trouble with the implementation.

0reactions
tannerlinsleycommented, Oct 4, 2018

If you use server-side data and the manual prop, your server is responsible for handling all of the pagination, sorting, and filtering on your table. Trying to combine server-side data with client side filtering etc. is very messy and probably a bad idea.

This feature/issue has been tagged as one that will likely be fixed or improved in the next major release of React-Table. This release is expected to be completed in the next 6 - 8 months. Please see #1143 for more detail. If you believe this feature can be easily fixed, we invite you to fork the project, attempt the fix, and use it until the latest version is available. If the fix is simple enough, we will also consider it as a PR to the current version.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Not re-render table after changing pagination #1065 - GitHub
I can not see my data in the table after changing the pagination by that hooks(My data has from server and client just...
Read more >
antd Table is not automatically rerendered when datasource ...
If you want a Table to re-render automatically, filteredData should be state. onSourceChange = (something) => { this.
Read more >
Navigation\Pagination doe not refresh after query refresh
i use a "fetch data from other source" to fill a table. Technically its end up in a server side action and SQL...
Read more >
Implementing React table pagination handling one million ...
Once we have pagination hooks, replace the rows prop with page prop inside the useTable hooks because every data inside the table will...
Read more >
react-data-table-component - npm
React Data Table Component requires the following be installed in your ... paginationServer, bool, no, false, changes the default pagination ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found