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

[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} />