Skip to content

Commit 84246cc

Browse files
dhavalveeradhavalveera
committed
fix: missed web components
1 parent 8d319aa commit 84246cc

File tree

3 files changed

+208
-0
lines changed

3 files changed

+208
-0
lines changed

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

+6
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,12 @@ 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
35+
36+
Paginate the table data when using larger data sets based on any given amount of results per page.
37+
38+
<Example name="table.pagination" />
39+
3440
## Table with checkboxes
3541

3642
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
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export { hover } from "./table.hover";
2+
export { pagination } from "./table.pagination";
23
export { root } from "./table.root";
34
export { striped } from "./table.striped";
45
export { withCheckboxes } from "./table.withCheckboxes";

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

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

0 commit comments

Comments
 (0)