React-toolbox: Pagination for Table

Created on 17 Feb 2016  路  4Comments  路  Source: react-toolbox/react-toolbox

Could you please add pagination for Table.

Most helpful comment

I found this cool react library which basically paginates your data.

https://github.com/AdeleD/react-paginate

All 4 comments

Pagination can be implemented as a higher order component. I think it's not table reponsibility

Hi @javivelasco , how you will build an HOC for pagination ?

For example, you will merge the existing source with a new one ? In this way, the Table component will re-render the entire dataset... no ?

The visua effect is a full re-load of the table, right ?

A pagination can be implemented with PREV - NEXT button (and for this, HOC is not needed).

But for example, a Facebook pagination stile (with a Load more...) should be concat row ad the end without re-load the existing.

In Table, we havent access to the row :)

Well, I did not wrote an example but I think that if you're willing to use a table providing a source, mutating that source should be enough to get a pagination. You can create a component that renders the Table and gets some props to render also buttons with prev and next. Tracking the current segment of the source you want to render would be the hoc responsibility. The visual effect depends on how you implement the source too.

If you use something like immutablejs each I think each row would compare the ref and would not get re-rendered. It all depends on what do you pass down to the Table. Maybe the terms I used were not correct, I was referring to a wrapper component that renders the table along with some controls, not exactly an hoc.

I found this cool react library which basically paginates your data.

https://github.com/AdeleD/react-paginate

Was this page helpful?
0 / 5 - 0 ratings

Related issues

claudiuapetrei picture claudiuapetrei  路  4Comments

delacruz-dev picture delacruz-dev  路  4Comments

dbrrt picture dbrrt  路  3Comments

margaretmoser picture margaretmoser  路  3Comments

wtgtybhertgeghgtwtg picture wtgtybhertgeghgtwtg  路  3Comments