feat/TablePagination - Table with Pagination

apps/web/content/docs/components/table.mdx

@@ -31,6 +31,18 @@ Add the `hoverable` prop to the `<Table>` React component to show a hover effect
 
 <Example name="table.hover" />
 
+## Table with Pagination (numbers)
+
+Paginate the table data when using larger data sets based on any given amount of results per page with Numbers.
+
+<Example name="table.paginationNumber" />
+
+## Table with Pagination (Prev/Next Button)
+
+Paginate the table data when using larger data sets based on any given amount of results per page with Prev/Next Button only.
+
+<Example name="table.paginationButton" />
+
 ## Table with checkboxes
 
 Use this example to show multiple checkbox form elements for each table row that you can use when performing bulk actions.

apps/web/examples/table/index.ts

@@ -1,4 +1,6 @@
 export { hover } from "./table.hover";
+export { paginationButton } from "./table.paginationButton";
+export { paginationNumber } from "./table.paginationNumber";
 export { root } from "./table.root";
 export { striped } from "./table.striped";
 export { withCheckboxes } from "./table.withCheckboxes";

apps/web/examples/table/table.paginationButton.tsx

@@ -0,0 +1,209 @@
+"use client";
+
+import { Table, TableBody, TableCell, TableHead, TableHeadCell, TablePagination, TableRow } from "flowbite-react";
+import { useState } from "react";
+import { type CodeData } from "~/components/code-demo";
+
+const code = `
+"use client";
+
+import { useState } from "react"
+import { Table } from "flowbite-react";
+
+function Component() {
+  const [pageNo, setPageNo] = useState(0);
+
+  const [rowsPerPage] = useState(10);
+
+  const handlePageChange = (newPage: number) => setPageNo(newPage);
+
+  return (
+    <div className="overflow-x-auto">
+      <Table striped>
+        <Table.Head>
+          <Table.HeadCell>Product name</Table.HeadCell>
+          <Table.HeadCell>Color</Table.HeadCell>
+          <Table.HeadCell>Category</Table.HeadCell>
+          <Table.HeadCell>Price</Table.HeadCell>
+          <Table.HeadCell>
+            <span className="sr-only">Edit</span>
+          </Table.HeadCell>
+        </Table.Head>
+        <Table.Body className="divide-y">
+          <Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800">
+            <Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
+              {'Apple MacBook Pro 17"'}
+            </Table.Cell>
+            <Table.Cell>Sliver</Table.Cell>
+            <Table.Cell>Laptop</Table.Cell>
+            <Table.Cell>$2999</Table.Cell>
+            <Table.Cell>
+              <a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
+                Edit
+              </a>
+            </Table.Cell>
+          </Table.Row>
+          <Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800">
+            <Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
+              Microsoft Surface Pro
+            </Table.Cell>
+            <Table.Cell>White</Table.Cell>
+            <Table.Cell>Laptop PC</Table.Cell>
+            <Table.Cell>$1999</Table.Cell>
+            <Table.Cell>
+              <a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
+                Edit
+              </a>
+            </Table.Cell>
+          </Table.Row>
+          <Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800">
+            <Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">Magic Mouse 2</Table.Cell>
+            <Table.Cell>Black</Table.Cell>
+            <Table.Cell>Accessories</Table.Cell>
+            <Table.Cell>$99</Table.Cell>
+            <Table.Cell>
+              <a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
+                Edit
+              </a>
+            </Table.Cell>
+          </Table.Row>
+          <Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800">
+            <Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
+              Google Pixel Phone
+            </Table.Cell>
+            <Table.Cell>Gray</Table.Cell>
+            <Table.Cell>Phone</Table.Cell>
+            <Table.Cell>$799</Table.Cell>
+            <Table.Cell>
+              <a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
+                Edit
+              </a>
+            </Table.Cell>
+          </Table.Row>
+          <Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800">
+            <Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">Apple Watch 5</Table.Cell>
+            <Table.Cell>Red</Table.Cell>
+            <Table.Cell>Wearables</Table.Cell>
+            <Table.Cell>$999</Table.Cell>
+            <Table.Cell>
+              <a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
+                Edit
+              </a>
+            </Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table>
+
+      <Table.Pagination count={100} onPageChange={handlePageChange} page={pageNo} rowsPerPage={rowsPerPage} paginationType="prevNextButton" />
+    </div>
+  );
+}
+`;
+
+function Component() {
+  const [pageNo, setPageNo] = useState(0);
+
+  const [rowsPerPage] = useState(10);
+
+  const handlePageChange = (newPage: number) => setPageNo(newPage);
+
+  return (
+    <div className="overflow-x-auto">
+      <Table striped>
+        <TableHead>
+          <TableHeadCell>Product name</TableHeadCell>
+          <TableHeadCell>Color</TableHeadCell>
+          <TableHeadCell>Category</TableHeadCell>
+          <TableHeadCell>Price</TableHeadCell>
+          <TableHeadCell>
+            <span className="sr-only">Edit</span>
+          </TableHeadCell>
+        </TableHead>
+        <TableBody className="divide-y">
+          <TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
+            <TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
+              {'Apple MacBook Pro 17"'}
+            </TableCell>
+            <TableCell>Sliver</TableCell>
+            <TableCell>Laptop</TableCell>
+            <TableCell>$2999</TableCell>
+            <TableCell>
+              <a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
+                Edit
+              </a>
+            </TableCell>
+          </TableRow>
+          <TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
+            <TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
+              Microsoft Surface Pro
+            </TableCell>
+            <TableCell>White</TableCell>
+            <TableCell>Laptop PC</TableCell>
+            <TableCell>$1999</TableCell>
+            <TableCell>
+              <a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
+                Edit
+              </a>
+            </TableCell>
+          </TableRow>
+          <TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
+            <TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">Magic Mouse 2</TableCell>
+            <TableCell>Black</TableCell>
+            <TableCell>Accessories</TableCell>
+            <TableCell>$99</TableCell>
+            <TableCell>
+              <a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
+                Edit
+              </a>
+            </TableCell>
+          </TableRow>
+          <TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
+            <TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
+              Google Pixel Phone
+            </TableCell>
+            <TableCell>Gray</TableCell>
+            <TableCell>Phone</TableCell>
+            <TableCell>$799</TableCell>
+            <TableCell>
+              <a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
+                Edit
+              </a>
+            </TableCell>
+          </TableRow>
+          <TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
+            <TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">Apple Watch 5</TableCell>
+            <TableCell>Red</TableCell>
+            <TableCell>Wearables</TableCell>
+            <TableCell>$999</TableCell>
+            <TableCell>
+              <a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
+                Edit
+              </a>
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+
+      <TablePagination
+        count={100}
+        onPageChange={handlePageChange}
+        page={pageNo}
+        rowsPerPage={rowsPerPage}
+        paginationType="prevNextButton"
+      />
+    </div>
+  );
+}
+
+export const paginationButton: CodeData = {
+  type: "single",
+  code: [
+    {
+      fileName: "client",
+      language: "tsx",
+      code,
+    },
+  ],
+  githubSlug: "table/table.paginationButton.tsx",
+  component: <Component />,
+};