Skip to content

Improve table pagination #1567

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
Open

Improve table pagination #1567

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
18a5656
Switch to polymorphic type declaration for Pagination.
Apr 22, 2025
82120ce
Update the pagination stories.
Apr 22, 2025
8731f17
Export DefaultPaginationProps and TablePaginationProps to clients
Apr 22, 2025
aeccbb1
Check if paginationValues is defined in tablePaginationState().
Apr 22, 2025
bdc082c
Add layout to BasePaginationProps to allow TS to handle it as a
Apr 22, 2025
4af13c0
Use status instead of meter for the table pagination's aria role.
Apr 22, 2025
ad22db7
Handle zero items/improve tests.
Apr 22, 2025
a5451cb
Validate pagination props (currentPage, totalPages, itemsPerPage, and
Apr 22, 2025
85f9d09
Add aria-live="polite" to the table pagination info div
Apr 22, 2025
6c62e90
Add itemsPerPage and totalItems to the table pagination story args.
Apr 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 23 additions & 2 deletions apps/storybook/src/Pagination.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import type { Meta, StoryFn } from "@storybook/react";
import type { PaginationProps } from "flowbite-react";
import { Pagination } from "flowbite-react";
import { DefaultPaginationProps, Pagination, TablePaginationProps } from "flowbite-react";
import { useEffect, useState } from "react";

export default {
Expand All @@ -15,7 +15,9 @@ export default {
],
} as Meta;

const Template: StoryFn<PaginationProps> = ({ currentPage = 1, layout = "pagination", totalPages = 100, ...rest }) => {
const Template: StoryFn<PaginationProps> = (props) => {
const { currentPage = 1, layout = "pagination" } = props;

const [page, setPage] = useState(currentPage);

const onPageChange = (page: number) => {
Expand All @@ -26,6 +28,21 @@ const Template: StoryFn<PaginationProps> = ({ currentPage = 1, layout = "paginat
setPage(currentPage);
}, [currentPage]);

if (layout === "table") {
const { itemsPerPage = 10, totalItems = 100, ...rest } = props as TablePaginationProps;
return (
<Pagination
{...rest}
currentPage={page}
layout={layout}
onPageChange={onPageChange}
itemsPerPage={itemsPerPage}
totalItems={totalItems}
/>
);
}

const { totalPages = 100, ...rest } = props as DefaultPaginationProps;
return (
<Pagination {...rest} currentPage={page} layout={layout} onPageChange={onPageChange} totalPages={totalPages} />
);
Expand Down Expand Up @@ -54,11 +71,15 @@ NavWithIcons.args = {
export const Table = Template.bind({});
Table.args = {
layout: "table",
itemsPerPage: 10,
totalItems: 100,
};

export const TableWithIcons = Template.bind({});
TableWithIcons.storyName = "Table with icons";
TableWithIcons.args = {
layout: "table",
showIcons: true,
itemsPerPage: 10,
totalItems: 100,
};
10 changes: 8 additions & 2 deletions apps/web/examples/pagination/pagination.table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export function Component() {

return (
<div className="flex overflow-x-auto sm:justify-center">
<Pagination layout="table" currentPage={currentPage} totalPages={100} onPageChange={onPageChange} />
<Pagination layout="table" currentPage={currentPage} itemsPerPage={10} totalItems={100} onPageChange={onPageChange} />
</div>
);
}
Expand All @@ -30,7 +30,13 @@ export function Component() {

return (
<div className="flex overflow-x-auto sm:justify-center">
<Pagination layout="table" currentPage={currentPage} totalPages={100} onPageChange={onPageChange} />
<Pagination
layout="table"
currentPage={currentPage}
itemsPerPage={10}
totalItems={100}
onPageChange={onPageChange}
/>
</div>
);
}
Expand Down
11 changes: 9 additions & 2 deletions apps/web/examples/pagination/pagination.tableWithIcons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export function Component() {

return (
<div className="flex overflow-x-auto sm:justify-center">
<Pagination layout="table" currentPage={currentPage} totalPages={100} onPageChange={onPageChange} showIcons />
<Pagination layout="table" currentPage={currentPage} itemsPerPage={10} totalItems={100} onPageChange={onPageChange} showIcons />
</div>
);
}
Expand All @@ -30,7 +30,14 @@ export function Component() {

return (
<div className="flex overflow-x-auto sm:justify-center">
<Pagination layout="table" currentPage={currentPage} totalPages={100} onPageChange={onPageChange} showIcons />
<Pagination
layout="table"
currentPage={currentPage}
itemsPerPage={10}
totalItems={100}
onPageChange={onPageChange}
showIcons
/>
</div>
);
}
Expand Down
Loading
Loading