search

imballinst / react-bs-datatable

Bootstrap datatable without jQuery. Features include: filter, sort, pagination, checkbox, and control customization.
https://imballinst.github.io/react-bs-datatable
MIT License
60 stars 20 forks source link

how to create custom pagination behavior? #70

Closed russkiy78 closed 2 years ago

russkiy78 commented 4 years ago

I wanna make a custom event for the pagination onChange function and number of pages, to get the data portion dynamically from API. In documentation I see the phrase "We can override Bootstrap's components" but the way to do it not clear to me.

Please show me an example how to change PaginationOptsGroupProps.onChange?

imballinst commented 4 years ago

@russkiy78 hello! sorry for the late reply, this week's is a bit hectic for me. Thanks for using this library!

I think what you're looking for is the controlled table (with the keyword "custom event for pagination"). You can see the example below:

https://github.com/Imballinst/react-bs-datatable/blob/16a571ae2f077759847c9da8d656e769ef586002/src/__stories__/02-advanced/02-AsyncPokemon.stories.js#L49-L71

So, what we are doing is that, we "lift" the states up from the table component to our own component. There, we can control how the filter, sort, and pagination behaves and how they will impact the presented data. In the example above, every time I filter, sort, or change the pagination, I'll hit the Pokèmon API and render the table accordingly.

Let me know if you need further help!