Skip to content

feat/TablePagination - Table with Pagination #1353

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
Open

feat/TablePagination - Table with Pagination #1353

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
8d319aa
feat/TablePagination
dhavalveera Apr 8, 2024
84246cc
fix: missed web components
dhavalveera Apr 8, 2024
12c00f5
use client forgot to add in example
dhavalveera Apr 8, 2024
0c076a7
feat: made Table Pagination with 2 options => Numbers & Prev/Next Button
dhavalveera Apr 8, 2024
708b363
fix: small pagination part issue fix
dhavalveera Apr 8, 2024
63774cf
small fix
dhavalveera Apr 8, 2024
2a2af89
fix: removed redundant duplication of Pagination for Table & updated …
dhavalveera Apr 8, 2024
c9ec929
fix: removed redundant duplication of Pagination for Table & updated …
dhavalveera Apr 8, 2024
915d52c
fix: based on AI Review
dhavalveera Apr 8, 2024
cecd43a
fix: made the Pagiantion COmponent centered
dhavalveera Apr 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions apps/web/content/docs/components/table.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,12 @@ Add the `hoverable` prop to the `<Table>` React component to show a hover effect

<Example name="table.hover" />

## Table with Pagination

Paginate the table data when using larger data sets based on any given number of results per page.

<Example name="table.pagination" />

## Table with checkboxes

Use this example to show multiple checkbox form elements for each table row that you can use when performing bulk actions.
Expand Down
1 change: 1 addition & 0 deletions apps/web/examples/table/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
199 changes: 199 additions & 0 deletions apps/web/examples/table/table.pagination.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,199 @@
"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 (
<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>

<Pagination layout="table" currentPage={currentPage} totalPages={100} onPageChange={onPageChange} />
</div>
);
}
`;

function Component() {
const [currentPage, setCurrentPage] = useState(1);

const onPageChange = (page: number) => setCurrentPage(page);

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>

<Pagination layout="table" currentPage={currentPage} totalPages={100} onPageChange={onPageChange} />
</div>
);
}

export const pagination: CodeData = {
type: "single",
code: [
{
fileName: "client",
language: "tsx",
code,
},
],
githubSlug: "table/table.paginationButton.tsx",
component: <Component />,
};