From 8d319aac4655fae622284da44d2ba461f06b262c Mon Sep 17 00:00:00 2001 From: Dhaval Vira Date: Mon, 8 Apr 2024 08:42:44 +0530 Subject: [PATCH 01/10] feat/TablePagination --- .../ui/src/components/Table/Table.stories.tsx | 95 ++++++++++++++++ packages/ui/src/components/Table/Table.tsx | 3 + .../src/components/Table/TablePagination.tsx | 107 ++++++++++++++++++ packages/ui/src/components/Table/index.ts | 2 + packages/ui/src/components/Table/theme.ts | 16 +++ 5 files changed, 223 insertions(+) create mode 100644 packages/ui/src/components/Table/TablePagination.tsx diff --git a/packages/ui/src/components/Table/Table.stories.tsx b/packages/ui/src/components/Table/Table.stories.tsx index 041e4f9a1..6338492b3 100644 --- a/packages/ui/src/components/Table/Table.stories.tsx +++ b/packages/ui/src/components/Table/Table.stories.tsx @@ -1,4 +1,5 @@ import type { Meta, StoryFn } from "@storybook/react"; +import { useState } from "react"; import type { TableProps } from "./Table"; import { Table } from "./Table"; @@ -86,3 +87,97 @@ const Template: StoryFn = (args) => ( export const DefaultTable = Template.bind({}); DefaultTable.storyName = "Default"; + +const TPageTemplate: StoryFn = (args) => { + const [pageNo, setPageNo] = useState(1); + const [rowsPerPage] = useState(10); + + const handlePageChange = (newPage: number) => setPageNo(newPage); + + 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 PaginationTable = TPageTemplate.bind({}); +PaginationTable.storyName = "Pagination"; diff --git a/packages/ui/src/components/Table/Table.tsx b/packages/ui/src/components/Table/Table.tsx index 2bae70bdb..d39025c1d 100644 --- a/packages/ui/src/components/Table/Table.tsx +++ b/packages/ui/src/components/Table/Table.tsx @@ -10,6 +10,7 @@ import { TableCell } from "./TableCell"; import { TableContext } from "./TableContext"; import { TableHead, type FlowbiteTableHeadTheme } from "./TableHead"; import { TableHeadCell } from "./TableHeadCell"; +import { TablePagination, type FlowbiteTablePaginationTheme } from "./TablePagination"; import { TableRow, type FlowbiteTableRowTheme } from "./TableRow"; export interface FlowbiteTableTheme { @@ -17,6 +18,7 @@ export interface FlowbiteTableTheme { head: FlowbiteTableHeadTheme; row: FlowbiteTableRowTheme; body: FlowbiteTableBodyTheme; + pagination: FlowbiteTablePaginationTheme; } export interface FlowbiteTableRootTheme { @@ -56,4 +58,5 @@ export const Table = Object.assign(TableComponent, { Row: TableRow, Cell: TableCell, HeadCell: TableHeadCell, + Pagination: TablePagination, }); diff --git a/packages/ui/src/components/Table/TablePagination.tsx b/packages/ui/src/components/Table/TablePagination.tsx new file mode 100644 index 000000000..c9a3d69a5 --- /dev/null +++ b/packages/ui/src/components/Table/TablePagination.tsx @@ -0,0 +1,107 @@ +"use client"; + +import { forwardRef, type ComponentPropsWithRef } from "react"; +import { twMerge } from "tailwind-merge"; +import { mergeDeep } from "../../helpers/merge-deep"; +import { getTheme } from "../../theme-store"; +import type { DeepPartial } from "../../types"; + +export interface FlowbiteTablePaginationTheme { + base: string; + totalPages: { + base: string; + pageRange: string; + outOf: string; + }; + page: { + base: string; + previous: string; + pageNo: string; + next: string; + }; +} + +export interface TablePaginationProps extends ComponentPropsWithRef<"tfoot"> { + count: number; + onPageChange: (newPage: number) => void; + page: number; + rowsPerPage: number; + theme?: DeepPartial; +} + +export const TablePagination = forwardRef( + ({ count, onPageChange, page, rowsPerPage, className, theme: customTheme = {}, ...props }, ref) => { + const theme = mergeDeep(getTheme().table.pagination, customTheme); + + const nPages = Math.ceil(count / rowsPerPage); + const pageNumbers = [...Array(nPages + 1).keys()].slice(1); + + const goToPrevPage = (): void => { + if (page !== 1) { + onPageChange(page - 1); + } + }; + + const goToNextPage = (): void => { + if (page !== nPages) { + onPageChange(page + 1); + } + }; + + const directPageChange = (customPageNo: number): void => { + if (page !== customPageNo) { + onPageChange(customPageNo); + } + }; + + const getLabelDisplayedRowsTo = (): number => { + if (count === -1) { + return (page + 1) * rowsPerPage; + } + + return rowsPerPage === -1 ? count : Math.min(count, (page + 1) * rowsPerPage); + }; + + return ( +
+ + Showing{" "} + + {`${count === 0 ? 0 : page * rowsPerPage + 1}-${getLabelDisplayedRowsTo()}`} + + of + {count === -1 ? -1 : count} + + +
    + + {pageNumbers.map((pgNumber, index) => { + return ( + + ); + })} + +
+
+ ); + }, +); + +TablePagination.displayName = "Table.Pagination"; diff --git a/packages/ui/src/components/Table/index.ts b/packages/ui/src/components/Table/index.ts index 33fd34fc1..7ca21bb45 100644 --- a/packages/ui/src/components/Table/index.ts +++ b/packages/ui/src/components/Table/index.ts @@ -10,3 +10,5 @@ export { TableHeadCell } from "./TableHeadCell"; export type { FlowbiteTableHeadCellTheme, TableHeadCellProps } from "./TableHeadCell"; export { TableRow } from "./TableRow"; export type { FlowbiteTableRowTheme, TableRowProps } from "./TableRow"; +export { TablePagination } from "./TablePagination"; +export type { FlowbiteTablePaginationTheme, TablePaginationProps } from "./TablePagination"; diff --git a/packages/ui/src/components/Table/theme.ts b/packages/ui/src/components/Table/theme.ts index 2851b7919..51fe935c3 100644 --- a/packages/ui/src/components/Table/theme.ts +++ b/packages/ui/src/components/Table/theme.ts @@ -24,4 +24,20 @@ export const tableTheme: FlowbiteTableTheme = createTheme({ hovered: "hover:bg-gray-50 dark:hover:bg-gray-600", striped: "odd:bg-white even:bg-gray-50 odd:dark:bg-gray-800 even:dark:bg-gray-700", }, + pagination: { + base: "mt-5 flex w-full flex-col flex-wrap items-center justify-between py-4 md:flex-row", + totalPages: { + base: "mb-4 block w-full text-sm font-normal text-gray-500 dark:text-gray-400 md:mb-0 md:inline md:w-auto", + pageRange: "mr-1 font-semibold text-gray-900 dark:text-white", + outOf: "ml-1 font-semibold text-gray-900 dark:text-white", + }, + page: { + base: "inline-flex h-8 -space-x-px text-sm rtl:space-x-reverse", + next: "flex h-8 items-center justify-center rounded-e-lg border border-gray-300 bg-white px-3 leading-tight text-gray-500 hover:bg-gray-100 hover:text-gray-700 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white", + pageNo: + "flex h-8 items-center justify-center border border-gray-300 bg-white px-3 leading-tight text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white", + previous: + "ms-0 flex h-8 items-center justify-center rounded-s-lg border border-gray-300 bg-white px-3 leading-tight text-gray-500 hover:bg-gray-100 hover:text-gray-700 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white", + }, + }, }); From 84246cc3eefe2d01a6fadcc07efcc4fdeffa6236 Mon Sep 17 00:00:00 2001 From: Dhaval Vira Date: Mon, 8 Apr 2024 08:45:19 +0530 Subject: [PATCH 02/10] fix: missed web components --- apps/web/content/docs/components/table.mdx | 6 + apps/web/examples/table/index.ts | 1 + apps/web/examples/table/table.pagination.tsx | 201 +++++++++++++++++++ 3 files changed, 208 insertions(+) create mode 100644 apps/web/examples/table/table.pagination.tsx diff --git a/apps/web/content/docs/components/table.mdx b/apps/web/content/docs/components/table.mdx index ad5482b7c..6832f2e36 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 amount 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..d5abe9c3a --- /dev/null +++ b/apps/web/examples/table/table.pagination.tsx @@ -0,0 +1,201 @@ +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(1); + + const [rowsPerPage] = useState(10); + + const handlePageChange = (newPage: number) => setPageNo(newPage); + + 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 [pageNo, setPageNo] = useState(1); + + const [rowsPerPage] = useState(10); + + const handlePageChange = (newPage: number) => setPageNo(newPage); + + 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.pagination.tsx", + component: , +}; From 12c00f5946f4394f9339388bb73ab200f5052f4b Mon Sep 17 00:00:00 2001 From: Dhaval Vira Date: Mon, 8 Apr 2024 08:48:28 +0530 Subject: [PATCH 03/10] use client forgot to add in example --- apps/web/examples/table/table.pagination.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/apps/web/examples/table/table.pagination.tsx b/apps/web/examples/table/table.pagination.tsx index d5abe9c3a..ea81a621b 100644 --- a/apps/web/examples/table/table.pagination.tsx +++ b/apps/web/examples/table/table.pagination.tsx @@ -1,3 +1,5 @@ +"use client"; + import { Table, TableBody, TableCell, TableHead, TableHeadCell, TablePagination, TableRow } from "flowbite-react"; import { useState } from "react"; import { type CodeData } from "~/components/code-demo"; From 0c076a7c16a11fcd2bd76ff954fc9d17ffa7b791 Mon Sep 17 00:00:00 2001 From: Dhaval Vira Date: Mon, 8 Apr 2024 09:09:04 +0530 Subject: [PATCH 04/10] feat: made Table Pagination with 2 options => Numbers & Prev/Next Button --- apps/web/content/docs/components/table.mdx | 12 +- apps/web/examples/table/index.ts | 3 +- .../examples/table/table.paginationButton.tsx | 209 ++++++++++++++++++ ...ination.tsx => table.paginationNumber.tsx} | 14 +- .../ui/src/components/Table/Table.stories.tsx | 114 +++++++++- .../src/components/Table/TablePagination.tsx | 48 ++-- 6 files changed, 373 insertions(+), 27 deletions(-) create mode 100644 apps/web/examples/table/table.paginationButton.tsx rename apps/web/examples/table/{table.pagination.tsx => table.paginationNumber.tsx} (95%) diff --git a/apps/web/content/docs/components/table.mdx b/apps/web/content/docs/components/table.mdx index 6832f2e36..191f0f2dd 100644 --- a/apps/web/content/docs/components/table.mdx +++ b/apps/web/content/docs/components/table.mdx @@ -31,11 +31,17 @@ Add the `hoverable` prop to the `` React component to show a hover effect -## Table with Pagination +## Table with Pagination (numbers) -Paginate the table data when using larger data sets based on any given amount of results per page. +Paginate the table data when using larger data sets based on any given amount of results per page with Numbers. - + + +## 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. + + ## Table with checkboxes diff --git a/apps/web/examples/table/index.ts b/apps/web/examples/table/index.ts index f7f72a77c..b1749fb65 100644 --- a/apps/web/examples/table/index.ts +++ b/apps/web/examples/table/index.ts @@ -1,5 +1,6 @@ export { hover } from "./table.hover"; -export { pagination } from "./table.pagination"; +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"; diff --git a/apps/web/examples/table/table.paginationButton.tsx b/apps/web/examples/table/table.paginationButton.tsx new file mode 100644 index 000000000..63a5fa856 --- /dev/null +++ b/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(1); + + const [rowsPerPage] = useState(10); + + const handlePageChange = (newPage: number) => setPageNo(newPage); + + 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 [pageNo, setPageNo] = useState(1); + + const [rowsPerPage] = useState(10); + + const handlePageChange = (newPage: number) => setPageNo(newPage); + + 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 paginationButton: CodeData = { + type: "single", + code: [ + { + fileName: "client", + language: "tsx", + code, + }, + ], + githubSlug: "table/table.paginationButton.tsx", + component: , +}; diff --git a/apps/web/examples/table/table.pagination.tsx b/apps/web/examples/table/table.paginationNumber.tsx similarity index 95% rename from apps/web/examples/table/table.pagination.tsx rename to apps/web/examples/table/table.paginationNumber.tsx index ea81a621b..6ee6e2f88 100644 --- a/apps/web/examples/table/table.pagination.tsx +++ b/apps/web/examples/table/table.paginationNumber.tsx @@ -94,7 +94,7 @@ function Component() { - + ); } @@ -184,12 +184,18 @@ function Component() { - + ); } -export const pagination: CodeData = { +export const paginationNumber: CodeData = { type: "single", code: [ { @@ -198,6 +204,6 @@ export const pagination: CodeData = { code, }, ], - githubSlug: "table/table.pagination.tsx", + githubSlug: "table/table.paginationNumber.tsx", component: , }; diff --git a/packages/ui/src/components/Table/Table.stories.tsx b/packages/ui/src/components/Table/Table.stories.tsx index 6338492b3..b79e3f476 100644 --- a/packages/ui/src/components/Table/Table.stories.tsx +++ b/packages/ui/src/components/Table/Table.stories.tsx @@ -88,7 +88,7 @@ const Template: StoryFn = (args) => ( export const DefaultTable = Template.bind({}); DefaultTable.storyName = "Default"; -const TPageTemplate: StoryFn = (args) => { +const TPageNumberTemplate: StoryFn = (args) => { const [pageNo, setPageNo] = useState(1); const [rowsPerPage] = useState(10); @@ -174,10 +174,116 @@ const TPageTemplate: StoryFn = (args) => { - + ); }; -export const PaginationTable = TPageTemplate.bind({}); -PaginationTable.storyName = "Pagination"; +export const PaginationNumberTable = TPageNumberTemplate.bind({}); +PaginationNumberTable.storyName = "Pagination with Numbers"; + +const TPageButtonTemplate: StoryFn = (args) => { + const [pageNo, setPageNo] = useState(1); + const [rowsPerPage] = useState(10); + + const handlePageChange = (newPage: number) => setPageNo(newPage); + + 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 PaginationButtonTable = TPageButtonTemplate.bind({}); +PaginationButtonTable.storyName = "Pagination with Buttons"; diff --git a/packages/ui/src/components/Table/TablePagination.tsx b/packages/ui/src/components/Table/TablePagination.tsx index c9a3d69a5..f5feb0ad6 100644 --- a/packages/ui/src/components/Table/TablePagination.tsx +++ b/packages/ui/src/components/Table/TablePagination.tsx @@ -21,16 +21,29 @@ export interface FlowbiteTablePaginationTheme { }; } -export interface TablePaginationProps extends ComponentPropsWithRef<"tfoot"> { +export interface TablePaginationProps extends ComponentPropsWithRef<"div"> { count: number; onPageChange: (newPage: number) => void; page: number; rowsPerPage: number; + paginationType: "numbers" | "prevNextButton"; theme?: DeepPartial; } export const TablePagination = forwardRef( - ({ count, onPageChange, page, rowsPerPage, className, theme: customTheme = {}, ...props }, ref) => { + ( + { + count, + onPageChange, + page, + rowsPerPage, + paginationType = "numbers", + className, + theme: customTheme = {}, + ...props + }, + ref, + ) => { const theme = mergeDeep(getTheme().table.pagination, customTheme); const nPages = Math.ceil(count / rowsPerPage); @@ -77,19 +90,24 @@ export const TablePagination = forwardRef( - {pageNumbers.map((pgNumber, index) => { - return ( - - ); - })} + {paginationType === "numbers" ? ( + <> + {pageNumbers.map((pgNumber, index) => { + return ( + + ); + })} + + ) : null} + {paginationType === "numbers" ? ( @@ -95,11 +95,9 @@ export const TablePagination = forwardRef( {pageNumbers.map((pgNumber, index) => { return ( From 63774cff56650ccfb43aab906899fcbf91f056eb Mon Sep 17 00:00:00 2001 From: Dhaval Vira Date: Mon, 8 Apr 2024 13:58:22 +0530 Subject: [PATCH 06/10] small fix --- packages/ui/src/components/Table/TablePagination.tsx | 4 +++- packages/ui/src/components/Table/theme.ts | 4 ++++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/ui/src/components/Table/TablePagination.tsx b/packages/ui/src/components/Table/TablePagination.tsx index f84ba1d08..438a985bc 100644 --- a/packages/ui/src/components/Table/TablePagination.tsx +++ b/packages/ui/src/components/Table/TablePagination.tsx @@ -5,6 +5,7 @@ import { twMerge } from "tailwind-merge"; import { mergeDeep } from "../../helpers/merge-deep"; import { getTheme } from "../../theme-store"; import type { DeepPartial } from "../../types"; +import type { FlowbiteBoolean } from "../Flowbite"; export interface FlowbiteTablePaginationTheme { base: string; @@ -18,6 +19,7 @@ export interface FlowbiteTablePaginationTheme { previous: string; pageNo: string; next: string; + active: FlowbiteBoolean; }; } @@ -97,7 +99,7 @@ export const TablePagination = forwardRef( diff --git a/packages/ui/src/components/Table/theme.ts b/packages/ui/src/components/Table/theme.ts index 51fe935c3..5ae6442c0 100644 --- a/packages/ui/src/components/Table/theme.ts +++ b/packages/ui/src/components/Table/theme.ts @@ -38,6 +38,10 @@ export const tableTheme: FlowbiteTableTheme = createTheme({ "flex h-8 items-center justify-center border border-gray-300 bg-white px-3 leading-tight text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white", previous: "ms-0 flex h-8 items-center justify-center rounded-s-lg border border-gray-300 bg-white px-3 leading-tight text-gray-500 hover:bg-gray-100 hover:text-gray-700 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white", + active: { + off: "", + on: "bg-blue-50 text-blue-600 hover:bg-blue-100 hover:text-blue-700 dark:bg-gray-700 dark:text-white", + }, }, }, }); From 2a2af89020c2dde8c9f0549ea4b9348e1fbfba81 Mon Sep 17 00:00:00 2001 From: Dhaval Vira Date: Mon, 8 Apr 2024 14:13:21 +0530 Subject: [PATCH 07/10] fix: removed redundant duplication of Pagination for Table & updated the Docs accordingly --- apps/web/content/docs/components/table.mdx | 12 +- apps/web/examples/table/index.ts | 3 +- ...inationButton.tsx => table.pagination.tsx} | 28 +-- .../examples/table/table.paginationNumber.tsx | 209 ------------------ packages/ui/src/components/Table/Table.tsx | 3 - .../src/components/Table/TablePagination.tsx | 125 ----------- packages/ui/src/components/Table/index.ts | 2 - packages/ui/src/components/Table/theme.ts | 20 -- 8 files changed, 13 insertions(+), 389 deletions(-) rename apps/web/examples/table/{table.paginationButton.tsx => table.pagination.tsx} (89%) delete mode 100644 apps/web/examples/table/table.paginationNumber.tsx delete mode 100644 packages/ui/src/components/Table/TablePagination.tsx diff --git a/apps/web/content/docs/components/table.mdx b/apps/web/content/docs/components/table.mdx index 191f0f2dd..6832f2e36 100644 --- a/apps/web/content/docs/components/table.mdx +++ b/apps/web/content/docs/components/table.mdx @@ -31,17 +31,11 @@ Add the `hoverable` prop to the `` React component to show a hover effect -## Table with Pagination (numbers) +## Table with Pagination -Paginate the table data when using larger data sets based on any given amount of results per page with Numbers. +Paginate the table data when using larger data sets based on any given amount of results per page. - - -## 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. - - + ## Table with checkboxes diff --git a/apps/web/examples/table/index.ts b/apps/web/examples/table/index.ts index b1749fb65..f7f72a77c 100644 --- a/apps/web/examples/table/index.ts +++ b/apps/web/examples/table/index.ts @@ -1,6 +1,5 @@ export { hover } from "./table.hover"; -export { paginationButton } from "./table.paginationButton"; -export { paginationNumber } from "./table.paginationNumber"; +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.paginationButton.tsx b/apps/web/examples/table/table.pagination.tsx similarity index 89% rename from apps/web/examples/table/table.paginationButton.tsx rename to apps/web/examples/table/table.pagination.tsx index 38d3b8f06..c081ec870 100644 --- a/apps/web/examples/table/table.paginationButton.tsx +++ b/apps/web/examples/table/table.pagination.tsx @@ -1,6 +1,6 @@ "use client"; -import { Table, TableBody, TableCell, TableHead, TableHeadCell, TablePagination, TableRow } from "flowbite-react"; +import { Pagination, Table, TableBody, TableCell, TableHead, TableHeadCell, TableRow } from "flowbite-react"; import { useState } from "react"; import { type CodeData } from "~/components/code-demo"; @@ -8,14 +8,12 @@ const code = ` "use client"; import { useState } from "react" -import { Table } from "flowbite-react"; +import { Pagination, Table } from "flowbite-react"; function Component() { - const [pageNo, setPageNo] = useState(0); + const [currentPage, setCurrentPage] = useState(1); - const [rowsPerPage] = useState(10); - - const handlePageChange = (newPage: number) => setPageNo(newPage); + const onPageChange = (page: number) => setCurrentPage(page); return (
@@ -94,18 +92,16 @@ function Component() {
- + ); } `; function Component() { - const [pageNo, setPageNo] = useState(0); - - const [rowsPerPage] = useState(10); + const [currentPage, setCurrentPage] = useState(1); - const handlePageChange = (newPage: number) => setPageNo(newPage); + const onPageChange = (page: number) => setCurrentPage(page); return (
@@ -184,18 +180,12 @@ function Component() { - +
); } -export const paginationButton: CodeData = { +export const pagination: CodeData = { type: "single", code: [ { diff --git a/apps/web/examples/table/table.paginationNumber.tsx b/apps/web/examples/table/table.paginationNumber.tsx deleted file mode 100644 index 1c6fec963..000000000 --- a/apps/web/examples/table/table.paginationNumber.tsx +++ /dev/null @@ -1,209 +0,0 @@ -"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 ( -
- - - 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 [pageNo, setPageNo] = useState(0); - - const [rowsPerPage] = useState(10); - - const handlePageChange = (newPage: number) => setPageNo(newPage); - - 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 paginationNumber: CodeData = { - type: "single", - code: [ - { - fileName: "client", - language: "tsx", - code, - }, - ], - githubSlug: "table/table.paginationNumber.tsx", - component: , -}; diff --git a/packages/ui/src/components/Table/Table.tsx b/packages/ui/src/components/Table/Table.tsx index d39025c1d..2bae70bdb 100644 --- a/packages/ui/src/components/Table/Table.tsx +++ b/packages/ui/src/components/Table/Table.tsx @@ -10,7 +10,6 @@ import { TableCell } from "./TableCell"; import { TableContext } from "./TableContext"; import { TableHead, type FlowbiteTableHeadTheme } from "./TableHead"; import { TableHeadCell } from "./TableHeadCell"; -import { TablePagination, type FlowbiteTablePaginationTheme } from "./TablePagination"; import { TableRow, type FlowbiteTableRowTheme } from "./TableRow"; export interface FlowbiteTableTheme { @@ -18,7 +17,6 @@ export interface FlowbiteTableTheme { head: FlowbiteTableHeadTheme; row: FlowbiteTableRowTheme; body: FlowbiteTableBodyTheme; - pagination: FlowbiteTablePaginationTheme; } export interface FlowbiteTableRootTheme { @@ -58,5 +56,4 @@ export const Table = Object.assign(TableComponent, { Row: TableRow, Cell: TableCell, HeadCell: TableHeadCell, - Pagination: TablePagination, }); diff --git a/packages/ui/src/components/Table/TablePagination.tsx b/packages/ui/src/components/Table/TablePagination.tsx deleted file mode 100644 index 438a985bc..000000000 --- a/packages/ui/src/components/Table/TablePagination.tsx +++ /dev/null @@ -1,125 +0,0 @@ -"use client"; - -import { forwardRef, type ComponentPropsWithRef } from "react"; -import { twMerge } from "tailwind-merge"; -import { mergeDeep } from "../../helpers/merge-deep"; -import { getTheme } from "../../theme-store"; -import type { DeepPartial } from "../../types"; -import type { FlowbiteBoolean } from "../Flowbite"; - -export interface FlowbiteTablePaginationTheme { - base: string; - totalPages: { - base: string; - pageRange: string; - outOf: string; - }; - page: { - base: string; - previous: string; - pageNo: string; - next: string; - active: FlowbiteBoolean; - }; -} - -export interface TablePaginationProps extends ComponentPropsWithRef<"div"> { - count: number; - onPageChange: (newPage: number) => void; - page: number; - rowsPerPage: number; - paginationType: "numbers" | "prevNextButton"; - theme?: DeepPartial; -} - -export const TablePagination = forwardRef( - ( - { - count, - onPageChange, - page, - rowsPerPage, - paginationType = "numbers", - className, - theme: customTheme = {}, - ...props - }, - ref, - ) => { - const theme = mergeDeep(getTheme().table.pagination, customTheme); - - const nPages = Math.ceil(count / rowsPerPage); - const pageNumbers = [...Array(nPages + 1).keys()].slice(1); - - const goToPrevPage = (): void => { - if (page !== 0) { - onPageChange(page - 1); - } - }; - - const goToNextPage = (): void => { - if (page !== nPages) { - onPageChange(page + 1); - } - }; - - const directPageChange = (customPageNo: number): void => { - if (page !== customPageNo) { - onPageChange(customPageNo); - } - }; - - const getLabelDisplayedRowsTo = (): number => { - if (count === -1) { - return (page + 1) * rowsPerPage; - } - - return rowsPerPage === -1 ? count : Math.min(count, (page + 1) * rowsPerPage); - }; - - return ( -
- - Showing{" "} - - {`${count === 0 ? 0 : page * rowsPerPage + 1}-${getLabelDisplayedRowsTo()}`} - - of - {count === -1 ? -1 : count} - - -
    - - {paginationType === "numbers" ? ( - <> - {pageNumbers.map((pgNumber, index) => { - return ( - - ); - })} - - ) : null} - - -
-
- ); - }, -); - -TablePagination.displayName = "Table.Pagination"; diff --git a/packages/ui/src/components/Table/index.ts b/packages/ui/src/components/Table/index.ts index 7ca21bb45..33fd34fc1 100644 --- a/packages/ui/src/components/Table/index.ts +++ b/packages/ui/src/components/Table/index.ts @@ -10,5 +10,3 @@ export { TableHeadCell } from "./TableHeadCell"; export type { FlowbiteTableHeadCellTheme, TableHeadCellProps } from "./TableHeadCell"; export { TableRow } from "./TableRow"; export type { FlowbiteTableRowTheme, TableRowProps } from "./TableRow"; -export { TablePagination } from "./TablePagination"; -export type { FlowbiteTablePaginationTheme, TablePaginationProps } from "./TablePagination"; diff --git a/packages/ui/src/components/Table/theme.ts b/packages/ui/src/components/Table/theme.ts index 5ae6442c0..2851b7919 100644 --- a/packages/ui/src/components/Table/theme.ts +++ b/packages/ui/src/components/Table/theme.ts @@ -24,24 +24,4 @@ export const tableTheme: FlowbiteTableTheme = createTheme({ hovered: "hover:bg-gray-50 dark:hover:bg-gray-600", striped: "odd:bg-white even:bg-gray-50 odd:dark:bg-gray-800 even:dark:bg-gray-700", }, - pagination: { - base: "mt-5 flex w-full flex-col flex-wrap items-center justify-between py-4 md:flex-row", - totalPages: { - base: "mb-4 block w-full text-sm font-normal text-gray-500 dark:text-gray-400 md:mb-0 md:inline md:w-auto", - pageRange: "mr-1 font-semibold text-gray-900 dark:text-white", - outOf: "ml-1 font-semibold text-gray-900 dark:text-white", - }, - page: { - base: "inline-flex h-8 -space-x-px text-sm rtl:space-x-reverse", - next: "flex h-8 items-center justify-center rounded-e-lg border border-gray-300 bg-white px-3 leading-tight text-gray-500 hover:bg-gray-100 hover:text-gray-700 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white", - pageNo: - "flex h-8 items-center justify-center border border-gray-300 bg-white px-3 leading-tight text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white", - previous: - "ms-0 flex h-8 items-center justify-center rounded-s-lg border border-gray-300 bg-white px-3 leading-tight text-gray-500 hover:bg-gray-100 hover:text-gray-700 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white", - active: { - off: "", - on: "bg-blue-50 text-blue-600 hover:bg-blue-100 hover:text-blue-700 dark:bg-gray-700 dark:text-white", - }, - }, - }, }); From c9ec929259c1cecd36323101102b3018908f8b01 Mon Sep 17 00:00:00 2001 From: Dhaval Vira Date: Mon, 8 Apr 2024 14:13:53 +0530 Subject: [PATCH 08/10] fix: removed redundant duplication of Pagination for Table & updated the Docs accordingly --- .../ui/src/components/Table/Table.stories.tsx | 201 ------------------ 1 file changed, 201 deletions(-) diff --git a/packages/ui/src/components/Table/Table.stories.tsx b/packages/ui/src/components/Table/Table.stories.tsx index d18b331b3..041e4f9a1 100644 --- a/packages/ui/src/components/Table/Table.stories.tsx +++ b/packages/ui/src/components/Table/Table.stories.tsx @@ -1,5 +1,4 @@ import type { Meta, StoryFn } from "@storybook/react"; -import { useState } from "react"; import type { TableProps } from "./Table"; import { Table } from "./Table"; @@ -87,203 +86,3 @@ const Template: StoryFn = (args) => ( export const DefaultTable = Template.bind({}); DefaultTable.storyName = "Default"; - -const TPageNumberTemplate: StoryFn = (args) => { - const [pageNo, setPageNo] = useState(0); - const [rowsPerPage] = useState(10); - - const handlePageChange = (newPage: number) => setPageNo(newPage); - - 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 PaginationNumberTable = TPageNumberTemplate.bind({}); -PaginationNumberTable.storyName = "Pagination with Numbers"; - -const TPageButtonTemplate: StoryFn = (args) => { - const [pageNo, setPageNo] = useState(0); - const [rowsPerPage] = useState(10); - - const handlePageChange = (newPage: number) => setPageNo(newPage); - - 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 PaginationButtonTable = TPageButtonTemplate.bind({}); -PaginationButtonTable.storyName = "Pagination with Buttons"; From 915d52cb106d702e6e7e246ec22afe077b4d352d Mon Sep 17 00:00:00 2001 From: Dhaval Vira Date: Mon, 8 Apr 2024 14:18:23 +0530 Subject: [PATCH 09/10] fix: based on AI Review --- apps/web/content/docs/components/table.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/web/content/docs/components/table.mdx b/apps/web/content/docs/components/table.mdx index 6832f2e36..11096b350 100644 --- a/apps/web/content/docs/components/table.mdx +++ b/apps/web/content/docs/components/table.mdx @@ -33,7 +33,7 @@ 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 amount of results per page. +Paginate the table data when using larger data sets based on any given number of results per page. From cecd43a031677be81bbe6ac820adafbffbed628e Mon Sep 17 00:00:00 2001 From: Dhaval Vira Date: Mon, 8 Apr 2024 14:19:33 +0530 Subject: [PATCH 10/10] fix: made the Pagiantion COmponent centered --- apps/web/examples/table/table.pagination.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/apps/web/examples/table/table.pagination.tsx b/apps/web/examples/table/table.pagination.tsx index c081ec870..c461757a2 100644 --- a/apps/web/examples/table/table.pagination.tsx +++ b/apps/web/examples/table/table.pagination.tsx @@ -92,7 +92,9 @@ function Component() {
- +
+ +
); } @@ -180,7 +182,9 @@ function Component() { - +
+ +
); }