Skip to content

Commit 0c076a7

Browse files
dhavalveeradhavalveera
committed
feat: made Table Pagination with 2 options => Numbers & Prev/Next Button
1 parent 12c00f5 commit 0c076a7

File tree

6 files changed

+373
-27
lines changed

6 files changed

+373
-27
lines changed

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

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,11 +31,17 @@ Add the `hoverable` prop to the `<Table>` React component to show a hover effect
3131

3232
<Example name="table.hover" />
3333

34-
## Table with Pagination
34+
## Table with Pagination (numbers)
3535

36-
Paginate the table data when using larger data sets based on any given amount of results per page.
36+
Paginate the table data when using larger data sets based on any given amount of results per page with Numbers.
3737

38-
<Example name="table.pagination" />
38+
<Example name="table.paginationNumber" />
39+
40+
## Table with Pagination (Prev/Next Button)
41+
42+
Paginate the table data when using larger data sets based on any given amount of results per page with Prev/Next Button only.
43+
44+
<Example name="table.paginationButton" />
3945

4046
## Table with checkboxes
4147

‎apps/web/examples/table/index.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
export { hover } from "./table.hover";
2-
export { pagination } from "./table.pagination";
2+
export { paginationButton } from "./table.paginationButton";
3+
export { paginationNumber } from "./table.paginationNumber";
34
export { root } from "./table.root";
45
export { striped } from "./table.striped";
56
export { withCheckboxes } from "./table.withCheckboxes";

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

Lines changed: 209 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
"use client";
2+
3+
import { Table, TableBody, TableCell, TableHead, TableHeadCell, TablePagination, TableRow } from "flowbite-react";
4+
import { useState } from "react";
5+
import { type CodeData } from "~/components/code-demo";
6+
7+
const code = `
8+
"use client";
9+
10+
import { useState } from "react"
11+
import { Table } from "flowbite-react";
12+
13+
function Component() {
14+
const [pageNo, setPageNo] = useState(1);
15+
16+
const [rowsPerPage] = useState(10);
17+
18+
const handlePageChange = (newPage: number) => setPageNo(newPage);
19+
20+
return (
21+
<div className="overflow-x-auto">
22+
<Table striped>
23+
<Table.Head>
24+
<Table.HeadCell>Product name</Table.HeadCell>
25+
<Table.HeadCell>Color</Table.HeadCell>
26+
<Table.HeadCell>Category</Table.HeadCell>
27+
<Table.HeadCell>Price</Table.HeadCell>
28+
<Table.HeadCell>
29+
<span className="sr-only">Edit</span>
30+
</Table.HeadCell>
31+
</Table.Head>
32+
<Table.Body className="divide-y">
33+
<Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800">
34+
<Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
35+
{'Apple MacBook Pro 17"'}
36+
</Table.Cell>
37+
<Table.Cell>Sliver</Table.Cell>
38+
<Table.Cell>Laptop</Table.Cell>
39+
<Table.Cell>$2999</Table.Cell>
40+
<Table.Cell>
41+
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
42+
Edit
43+
</a>
44+
</Table.Cell>
45+
</Table.Row>
46+
<Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800">
47+
<Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
48+
Microsoft Surface Pro
49+
</Table.Cell>
50+
<Table.Cell>White</Table.Cell>
51+
<Table.Cell>Laptop PC</Table.Cell>
52+
<Table.Cell>$1999</Table.Cell>
53+
<Table.Cell>
54+
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
55+
Edit
56+
</a>
57+
</Table.Cell>
58+
</Table.Row>
59+
<Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800">
60+
<Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">Magic Mouse 2</Table.Cell>
61+
<Table.Cell>Black</Table.Cell>
62+
<Table.Cell>Accessories</Table.Cell>
63+
<Table.Cell>$99</Table.Cell>
64+
<Table.Cell>
65+
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
66+
Edit
67+
</a>
68+
</Table.Cell>
69+
</Table.Row>
70+
<Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800">
71+
<Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
72+
Google Pixel Phone
73+
</Table.Cell>
74+
<Table.Cell>Gray</Table.Cell>
75+
<Table.Cell>Phone</Table.Cell>
76+
<Table.Cell>$799</Table.Cell>
77+
<Table.Cell>
78+
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
79+
Edit
80+
</a>
81+
</Table.Cell>
82+
</Table.Row>
83+
<Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800">
84+
<Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">Apple Watch 5</Table.Cell>
85+
<Table.Cell>Red</Table.Cell>
86+
<Table.Cell>Wearables</Table.Cell>
87+
<Table.Cell>$999</Table.Cell>
88+
<Table.Cell>
89+
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
90+
Edit
91+
</a>
92+
</Table.Cell>
93+
</Table.Row>
94+
</Table.Body>
95+
</Table>
96+
97+
<Table.Pagination count={100} onPageChange={handlePageChange} page={pageNo} rowsPerPage={rowsPerPage} paginationType="prevNextButton" />
98+
</div>
99+
);
100+
}
101+
`;
102+
103+
function Component() {
104+
const [pageNo, setPageNo] = useState(1);
105+
106+
const [rowsPerPage] = useState(10);
107+
108+
const handlePageChange = (newPage: number) => setPageNo(newPage);
109+
110+
return (
111+
<div className="overflow-x-auto">
112+
<Table striped>
113+
<TableHead>
114+
<TableHeadCell>Product name</TableHeadCell>
115+
<TableHeadCell>Color</TableHeadCell>
116+
<TableHeadCell>Category</TableHeadCell>
117+
<TableHeadCell>Price</TableHeadCell>
118+
<TableHeadCell>
119+
<span className="sr-only">Edit</span>
120+
</TableHeadCell>
121+
</TableHead>
122+
<TableBody className="divide-y">
123+
<TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
124+
<TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
125+
{'Apple MacBook Pro 17"'}
126+
</TableCell>
127+
<TableCell>Sliver</TableCell>
128+
<TableCell>Laptop</TableCell>
129+
<TableCell>$2999</TableCell>
130+
<TableCell>
131+
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
132+
Edit
133+
</a>
134+
</TableCell>
135+
</TableRow>
136+
<TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
137+
<TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
138+
Microsoft Surface Pro
139+
</TableCell>
140+
<TableCell>White</TableCell>
141+
<TableCell>Laptop PC</TableCell>
142+
<TableCell>$1999</TableCell>
143+
<TableCell>
144+
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
145+
Edit
146+
</a>
147+
</TableCell>
148+
</TableRow>
149+
<TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
150+
<TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">Magic Mouse 2</TableCell>
151+
<TableCell>Black</TableCell>
152+
<TableCell>Accessories</TableCell>
153+
<TableCell>$99</TableCell>
154+
<TableCell>
155+
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
156+
Edit
157+
</a>
158+
</TableCell>
159+
</TableRow>
160+
<TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
161+
<TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">
162+
Google Pixel Phone
163+
</TableCell>
164+
<TableCell>Gray</TableCell>
165+
<TableCell>Phone</TableCell>
166+
<TableCell>$799</TableCell>
167+
<TableCell>
168+
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
169+
Edit
170+
</a>
171+
</TableCell>
172+
</TableRow>
173+
<TableRow className="bg-white dark:border-gray-700 dark:bg-gray-800">
174+
<TableCell className="whitespace-nowrap font-medium text-gray-900 dark:text-white">Apple Watch 5</TableCell>
175+
<TableCell>Red</TableCell>
176+
<TableCell>Wearables</TableCell>
177+
<TableCell>$999</TableCell>
178+
<TableCell>
179+
<a href="#" className="font-medium text-cyan-600 hover:underline dark:text-cyan-500">
180+
Edit
181+
</a>
182+
</TableCell>
183+
</TableRow>
184+
</TableBody>
185+
</Table>
186+
187+
<TablePagination
188+
count={100}
189+
onPageChange={handlePageChange}
190+
page={pageNo}
191+
rowsPerPage={rowsPerPage}
192+
paginationType="prevNextButton"
193+
/>
194+
</div>
195+
);
196+
}
197+
198+
export const paginationButton: CodeData = {
199+
type: "single",
200+
code: [
201+
{
202+
fileName: "client",
203+
language: "tsx",
204+
code,
205+
},
206+
],
207+
githubSlug: "table/table.paginationButton.tsx",
208+
component: <Component />,
209+
};

‎apps/web/examples/table/table.pagination.tsx renamed to ‎apps/web/examples/table/table.paginationNumber.tsx

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ function Component() {
9494
</Table.Body>
9595
</Table>
9696
97-
<Table.Pagination count={100} onPageChange={handlePageChange} page={pageNo} rowsPerPage={rowsPerPage} />
97+
<Table.Pagination count={100} onPageChange={handlePageChange} page={pageNo} rowsPerPage={rowsPerPage} paginationType="numbers" />
9898
</div>
9999
);
100100
}
@@ -184,12 +184,18 @@ function Component() {
184184
</TableBody>
185185
</Table>
186186

187-
<TablePagination count={100} onPageChange={handlePageChange} page={pageNo} rowsPerPage={rowsPerPage} />
187+
<TablePagination
188+
count={100}
189+
onPageChange={handlePageChange}
190+
page={pageNo}
191+
rowsPerPage={rowsPerPage}
192+
paginationType="numbers"
193+
/>
188194
</div>
189195
);
190196
}
191197

192-
export const pagination: CodeData = {
198+
export const paginationNumber: CodeData = {
193199
type: "single",
194200
code: [
195201
{
@@ -198,6 +204,6 @@ export const pagination: CodeData = {
198204
code,
199205
},
200206
],
201-
githubSlug: "table/table.pagination.tsx",
207+
githubSlug: "table/table.paginationNumber.tsx",
202208
component: <Component />,
203209
};

0 commit comments

Comments
 (0)