Limit number of pagination pages shown when having large amount of items.

[hendrikschafer]

Description

At the moment, 7 pages will be shown before indicating that there are more pages and finishing off with the last page eg. < 1 2 3 4 5 6 7 ... 30 >

This wastes excessive space and should be reduced or at least allow the user to pick the amount.

Personally I would like it to be 3 eg. < 1 2 3 ... 30 >, < 1 ... 4 5 6 ... 30 > this clearly indicates what the next and previous pages will be (event hough this is obvious) without giving unnecessary amounts of information. if i know the pages start at 1 and end at 30 i will be able to clearly know what will come in between anyways.

https://github.com/cloudscape-design/components/blob/main/src/pagination/utils.ts line 15 change:
FROM

// Total number of elements handled here
  const numberOfControls = 7;

TO

// Total number of elements handled here
  const numberOfControls = 3;

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate requests

[hendrikschafer]

OK, I now understand why that number was 7. I built a custom cloudscape component that avoids such a limitation while taking up minimal screen space.

It looks like this:

Code:

import { SpaceBetween, Button, Box } from "@amzn/awsui-components-react";

export default function ElegantPagination({ currentPageIndex, pagesCount, onChange }) {
    return (
        <SpaceBetween size="xxs" direction="horizontal">
            <Button
                iconName="angle-left"
                variant="icon"
                disabled={currentPageIndex === 1}
                onClick={() => onChange({ detail: { currentPageIndex: currentPageIndex - 1 } })}
            >
                Previous
            </Button>
            <div style={{ marginTop: "3px" }}>
                <Box color="text-body-secondary">
                    {pagesCount === 0 ? "" : `${currentPageIndex} of ${pagesCount}`}
                </Box>
            </div>
            <Button
                iconName="angle-right"
                variant="icon"
                disabled={currentPageIndex === pagesCount || pagesCount === 0}
                onClick={() => onChange({ detail: { currentPageIndex: currentPageIndex + 1 } })}
            >
                Next
            </Button>
        </SpaceBetween>
    );
};

Usage (same as the cloudscape Pagination component):

<ElegantPagination {...paginationProps} />