[Ask for HELP] paginationi18n from UI Kit DynamicTable doesn't work at all

Forge Forge UI Kit and Custom UI
,
1

Hi,

Anyone can help me?
After applying this code, I can’t see any pagination button at the bottom of the Dynamic table. I don’t quite understand if I get 10 records from Server side, then which property controls whether the pagination buttons should show or not?

      <DynamicTable
        caption={caption}
        rowsPerPage={10}
        page={currentPage}
        onSetPage={handlePageChange}
        head={memberHead}
        rows={memberRows}
        isRankable
        isLoading={isLoading}
        emptyView={<Label>No data returned</Label>}
        isFixedSize={true}
        paginationi18n={{
          prev: 'Previous',
          next: 'Next',
          label: `${currentPage}`,
          pageLabel: 'Page',
        }}
      />

The background is that I need to retrieve a large number of users from Jira instance and need to get them through pagination. That is, every time I click Next page, the app will automatically retrieve data from Server side, but not get all the data once from Server side, which is not feasible because of 25 seconds timeout. @ibuchanan @AtlassianDeveloper

Thanks,
YY1

2

@YY1,

I’ll try, but I’m very shallow on Atlaskit. I think the pages are derived from the rows property. To confirm, maybe try (psuedocode, not at all tested):

const empty = {}; // or some object structure that might satisfy the shape
const response = requestItems(); // assuming "standard" pagination, endpoints vary
var memberRows = new Array(response.total).fill(item); // assuming there are more than 10 items in total
memberRows.splice(0, response.items.length, ...response.items);

If that does work to make sure there are enough pages, then we would need to hook into onSetPage to read more data and splice them into the array of items (at the right point). This gets much more tricky if the array needs to be resorted but I think your example would have a fixed order.

Let me know how that works.

3

Thanks for your reply. In fact, I need sort the users by points and then get paginated user arrays to the client side.
I’m not sure about how the pagination works:
Scenario I:
Get all data in batch from Server side and the pagination works fine. However, when the dataset is large, it doens’t work.

Scenario II:
I want to click Next button to get the fixed number of data records from Server side (e.g. 10 each time for a page with 10 rows). However, I can’t see any pagination button for me to search the next 10 records.
I don’t know where the issue is. Please take a look. Maybe the developer who develops the Dynamic Table UI Kit component knows the reason and how to fix it. Thanks.

resolver.define("getMemberPoints", async ({ context, payload }) => {
  const { page = 1, rowsPerPage = 10 } = payload;
  let allActiveUsers = [];

  const allUsers = await getAllUsers();  

  const userPointsPromises = await Promise.all(allUsers.map(async (user) => {
    const userPropertyPoints = await getUserProperties(user.accountId); 
    const points = userPropertyPoints.value;

    return {
      userAccountId: user.accountId,
      userName: user.displayName,
      totalPoints: points,
    };
  }));

  allActiveUsers = await Promise.all(userPointsPromises);
  
  allActiveUsers.sort((a,b) => b.totalPoints - a.totalPoints);

  const totalPages = Math.ceil(allActiveUsers.length / rowsPerPage);

  const validPage = Math.max(1, Math.min(page, totalPages));

  const startIndex = (validPage - 1) * rowsPerPage;
  let endIndex = startIndex + rowsPerPage;

  const paginatedUsers = allActiveUsers.slice(startIndex, endIndex);

  return {
    members: paginatedUsers, 
    total: allActiveUsers.length,
    currentPage: validPage,
    totalPages: totalPages,
  };
});

Regards,
YY1