Open a page in a table programmatically

[cfranklyn]

I'm working on a Table implementation for my app with paging included. What I would like to do is to programmatically select a certain item in the table and, if that item appears beyond the first page, open the correct page and scroll directly to the item. I think I have figured out how to select the item programmatically. But if it is not on the first page, I have to manually select the correct page in the paginator below the table in order to see the selected item.

Is it possible to somehow open that page programmatically?

[mayank99]

Hi Chris 👋 Thanks for the question.

Assuming this programmatic selection is only on initial load, you can use the initialState prop where you can pass pageIndex.

<Table
  ...
  initialState={{ pageIndex: 2 }}
/>

If you need to do it after initial load, then you have two options:

• you can use manual paginator: https://itwin.github.io/iTwinUI-react/?path=/story/core-table--with-manual-paginator
• you can use full manual state: https://itwin.github.io/iTwinUI-react/?path=/story/core-table--controlled-state

Hope that helps.

[cfranklyn]

Thanks Mayank. The manual paginator seems to work for me.