update pageSize value with javascript API

glin / reactable

Interactive data tables for R

https://glin.github.io/reactable

Other

627 stars 80 forks source link

update pageSize value with javascript API #322

Closed ghost closed 1 year ago

ghost commented 1 year ago

I was messing with the Reactable.getState() function from the javascript API documentation and couldn't find a resource on updating the pageSize state property. ie. how to use the API to change the number of displayed rows (pageSize) from x to y.

I have read the rest of the documentation which updates other things like hidden columns, filters, etc... and came across the R function updateReactable() but neither seems to answer my question...

Thanks.

ghost commented 1 year ago

Figured it out. The answer, along with many other functionalities, is in .getInstance.

const newPageSize = 50;
Reactable.getInstance('table').setPageSize(newPageSize);

edit: trying to use a number from the virtualSelectInput value messes with the prev/next pagination actions - fixed this by using the parseFloat() function on the input.value (newPageSize).

glin commented 1 year ago

Yep, there's no support for updating the page size through the JavaScript API at the moment. You can definitely do it using getInstance().setPageSize(), but that's undocumented/internal so use at your own risk and double check that it still works on version upgrades.

This should be really simple to add to the JavaScript API though, and I could see it as a useful way to create your own pagination controls (along with prev/next page, go to page N).

ghost commented 1 year ago

Ah, I have a few other uses from getInstance() that would be great to see supported eventually as well:

Case: I want a table that can save filters to be applied later. It would save selected rows, which columns are being sorted, which columns are visible, and any other value that was being filtered with the filterMethod. I used the documented functions for all except these:

Functions:
- Reactable.getInstance('tbl').setRowsSelected() I am using this to select rows from the saved filter
- Reactable.getInstance('tbl').setSortBy() I am using this to apply the column sort from the saved filter

Thanks.

glin commented 1 year ago

This is now in the development version:

New Reactable.gotoPage() and Reactable.setPageSize() methods in the JavaScript API to change the current page or set the current page size. (#322)

setSortBy() is already on the roadmap (https://github.com/glin/reactable/issues/316) and will probably be done soon-ish. setRowsSelected() would probably be another straightforward addition - can add that as well.