Closed hendrikschafer closed 1 week ago
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} />
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
TO
Code of Conduct