Improve table pagination

apps/storybook/src/Pagination.stories.tsx

@@ -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 {
@@ -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) => {
@@ -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} />
   );

apps/web/examples/pagination/pagination.table.tsx

@@ -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>
   );
 }
@@ -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>
   );
 }

apps/web/examples/pagination/pagination.tableWithIcons.tsx

@@ -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>
   );
 }
@@ -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>
   );
 }

packages/ui/src/components/Pagination/Pagination.test.tsx

@@ -97,6 +97,79 @@ describe("Pagination", () => {
     expect(pages()).toEqual([3, 4, 5, 6, 7]);
   });
 
+  describe("Table Layout", () => {
+    it("should show the first visible item, the last visible item, and the total items", () => {
+      render(<PaginationTestTable />);
+      const { firstItem, lastItem, totalItems } = tablePaginationState();
+      expect(firstItem).toEqual(1);
+      expect(lastItem).toEqual(10);
+      expect(totalItems).toEqual(95);
+    });
+
+    it("should increment the page offset by 1 when clicking next", async () => {
+      const user = userEvent.setup();
+      render(<PaginationTestTable />);
+      await user.click(nextButton());
+      const { firstItem, lastItem, totalItems } = tablePaginationState();
+      expect(firstItem).toEqual(11);
+      expect(lastItem).toEqual(20);
+      expect(totalItems).toEqual(95);
+    });
+
+    it("should disable previous button when on 1st page", () => {
+      render(<PaginationTestTable />);
+      const firstButton = buttons()[0];
+      expect(firstButton).toBeDisabled();
+    });
+
+    it("should enable previous button on subsequent pages", async () => {
+      const user = userEvent.setup();
+      render(<PaginationTestTable />);
+      await user.click(nextButton());
+      await user.click(nextButton());
+      expect(tablePaginationState().firstItem).toEqual(21);
+      await user.click(previousButton());
+      expect(tablePaginationState().firstItem).toEqual(11);
+      await user.click(previousButton());
+      expect(tablePaginationState().firstItem).toEqual(1);
+    });
+
+    it("should disable next button when on last page", async () => {
+      const user = userEvent.setup();
+      render(<PaginationTestTable />);
+      for (let i = 0; i < 9; ++i) {
+        await user.click(nextButton());
+      }
+
+      const { firstItem, lastItem, totalItems } = tablePaginationState();
+      expect(firstItem).toEqual(91);
+      expect(lastItem).toEqual(95);
+      expect(totalItems).toEqual(95);
+      const lastButton = buttons()[buttons().length - 1];
+      expect(lastButton).toBeDisabled();
+    });
+
+    it("should show an empty page if totalItems is 0.", () => {
+      render(<PaginationTestEmptyTable />);
+      const { firstItem, lastItem, totalItems } = tablePaginationState();
+      expect(firstItem).toEqual(0);
+      expect(lastItem).toEqual(0);
+      expect(totalItems).toEqual(0);
+    });
+
+    it("should show one page if totalItems is less than itemsPerPage.", () => {
+      render(<PaginationTestOnePageTable />);
+      const { firstItem, lastItem, totalItems } = tablePaginationState();
+      expect(firstItem).toEqual(1);
+      expect(lastItem).toEqual(5);
+      expect(totalItems).toEqual(5);
+      const firstButton = buttons()[0];
+      expect(firstButton).toBeDisabled();
+      const lastButton = buttons()[buttons().length - 1];
+      expect(lastButton).toBeDisabled();
+    });
+  });
+
   describe("Props", () => {
     it('should not display numbered buttons when `layout="navigation"`', () => {
       render(<Pagination currentPage={1} layout="navigation" onPageChange={() => undefined} totalPages={5} />);
@@ -105,7 +178,7 @@ describe("Pagination", () => {
     });
 
     it('should display numbered buttons when `layout="table"`', () => {
-      render(<Pagination currentPage={1} layout="table" onPageChange={() => undefined} totalPages={5} />);
+      render(<PaginationTestTable />);
 
       expect(pages()).toHaveLength(0);
     });
@@ -156,6 +229,75 @@ function PaginationTestTenElements() {
   return <Pagination currentPage={page} onPageChange={onPageChange} showIcons totalPages={10} />;
 }
 
+function PaginationTestTable() {
+  const [page, setPage] = useState(1);
+
+  const onPageChange = (page: number) => {
+    setPage(page);
+  };
+
+  useEffect(() => {
+    setPage(page);
+  }, [page]);
+
+  return (
+    <Pagination
+      layout="table"
+      currentPage={page}
+      onPageChange={onPageChange}
+      showIcons
+      itemsPerPage={10}
+      totalItems={95}
+    />
+  );
+}
+
+function PaginationTestOnePageTable() {
+  const [page, setPage] = useState(1);
+
+  const onPageChange = (page: number) => {
+    setPage(page);
+  };
+
+  useEffect(() => {
+    setPage(page);
+  }, [page]);
+
+  return (
+    <Pagination
+      layout="table"
+      currentPage={page}
+      onPageChange={onPageChange}
+      showIcons
+      itemsPerPage={10}
+      totalItems={5}
+    />
+  );
+}
+
+function PaginationTestEmptyTable() {
+  const [page, setPage] = useState(1);
+
+  const onPageChange = (page: number) => {
+    setPage(page);
+  };
+
+  useEffect(() => {
+    setPage(page);
+  }, [page]);
+
+  return (
+    <Pagination
+      layout="table"
+      currentPage={page}
+      onPageChange={onPageChange}
+      showIcons
+      itemsPerPage={10}
+      totalItems={0}
+    />
+  );
+}
+
 const buttons = () => screen.getAllByRole("button");
 
 const pages = () => {
@@ -175,6 +317,19 @@ const currentPage = () => {
   return Number.parseInt(currentPageElement?.textContent ?? "0");
 };
 
+const tablePaginationState = () => {
+  const firstItemElement = screen
+    .getAllByRole("status")
+    .find((elem) => elem.getAttribute("aria-label") === "Table Pagination");
+  const paginationValues = firstItemElement?.textContent?.match(/\d+/g);
+  if (!paginationValues || paginationValues?.length !== 3) return { firstItem: null, lastItem: null, totalItems: null };
+  return {
+    firstItem: parseInt(paginationValues[0]),
+    lastItem: parseInt(paginationValues[1]),
+    totalItems: parseInt(paginationValues[2]),
+  };
+};
+
 const nextButton = () => buttons()[buttons().length - 1];
 
 const previousButton = () => buttons()[0];