diff --git a/apps/web/content/docs/components/table.mdx b/apps/web/content/docs/components/table.mdx index ad5482b7c..11096b350 100644 --- a/apps/web/content/docs/components/table.mdx +++ b/apps/web/content/docs/components/table.mdx @@ -31,6 +31,12 @@ Add the `hoverable` prop to the `` React component to show a hover effect +## Table with Pagination + +Paginate the table data when using larger data sets based on any given number of results per page. + + + ## Table with checkboxes Use this example to show multiple checkbox form elements for each table row that you can use when performing bulk actions. diff --git a/apps/web/examples/table/index.ts b/apps/web/examples/table/index.ts index f6d38c795..f7f72a77c 100644 --- a/apps/web/examples/table/index.ts +++ b/apps/web/examples/table/index.ts @@ -1,4 +1,5 @@ export { hover } from "./table.hover"; +export { pagination } from "./table.pagination"; export { root } from "./table.root"; export { striped } from "./table.striped"; export { withCheckboxes } from "./table.withCheckboxes"; diff --git a/apps/web/examples/table/table.pagination.tsx b/apps/web/examples/table/table.pagination.tsx new file mode 100644 index 000000000..c461757a2 --- /dev/null +++ b/apps/web/examples/table/table.pagination.tsx @@ -0,0 +1,203 @@ +"use client"; + +import { Pagination, Table, TableBody, TableCell, TableHead, TableHeadCell, TableRow } from "flowbite-react"; +import { useState } from "react"; +import { type CodeData } from "~/components/code-demo"; + +const code = ` +"use client"; + +import { useState } from "react" +import { Pagination, Table } from "flowbite-react"; + +function Component() { + const [currentPage, setCurrentPage] = useState(1); + + const onPageChange = (page: number) => setCurrentPage(page); + + return ( +
+
+ + Product name + Color + Category + Price + + Edit + + + + + + {'Apple MacBook Pro 17"'} + + Sliver + Laptop + $2999 + + + Edit + + + + + + Microsoft Surface Pro + + White + Laptop PC + $1999 + + + Edit + + + + + Magic Mouse 2 + Black + Accessories + $99 + + + Edit + + + + + + Google Pixel Phone + + Gray + Phone + $799 + + + Edit + + + + + Apple Watch 5 + Red + Wearables + $999 + + + Edit + + + + +
+ +
+ +
+ + ); +} +`; + +function Component() { + const [currentPage, setCurrentPage] = useState(1); + + const onPageChange = (page: number) => setCurrentPage(page); + + return ( +
+ + + Product name + Color + Category + Price + + Edit + + + + + + {'Apple MacBook Pro 17"'} + + Sliver + Laptop + $2999 + + + Edit + + + + + + Microsoft Surface Pro + + White + Laptop PC + $1999 + + + Edit + + + + + Magic Mouse 2 + Black + Accessories + $99 + + + Edit + + + + + + Google Pixel Phone + + Gray + Phone + $799 + + + Edit + + + + + Apple Watch 5 + Red + Wearables + $999 + + + Edit + + + + +
+ +
+ +
+
+ ); +} + +export const pagination: CodeData = { + type: "single", + code: [ + { + fileName: "client", + language: "tsx", + code, + }, + ], + githubSlug: "table/table.paginationButton.tsx", + component: , +};