Dynamic Table to the first page on sort

Forge Forge UI Kit and Custom UI
, , , ,
1

Is it possible to use a stateful table that allows me to change the pages if I click on my sort?

For example, I am displaying just 3 rows of my table. I am trying to sort by number and when I am at page 5, upon clicking on the number column, I want to be brought back to the first page of my table.

S/N Name Age
6 Bob 34
5 James 55
4 William 27

Page 2

S/N Name Age
3 Rebecca 30
2 Taylor 45
1 Wilson 62

When I click the S/N column, I want to be brought back to page 1 and the data to be sorted.

S/N Name Age
1 Wilson 62
2 Taylor 45
3 Rebecca 30

Page 2

S/N Name Age
4 William 27
5 James 55
6 Bob 34

I have tried setting the page number but if I do that, I have to click on the table number twice before the page changes…

2

I use state on a table and have a Select option underneath it to set the page directly (partly because the table sometimes has more pages than can be seen otherwise).

<DynamicTable
        rowsPerPage={rowsPerPage}
        head={{ cells: headCells }}
        rows={rows}
        page={tablePage}
        onSetPage={setTablePage}
      />
      <Inline alignBlock="center" alignInline="center" space="space.100">
        <Text>Go to page:</Text>
        <Select
          options={getPageOptions()}
          onChange={(selectedOption: PageOption) => {
            setTablePage(selectedOption.value);
          }}
        />
      </Inline>

tablePage is a state, defaulting to 1.