Skip to content
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

Jump to bottom

feat/TablePagination - Table with Pagination #1353

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 5 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
12 changes: 12 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,18 @@ Add the `hoverable` prop to the `<Table>` React component to show a hover effect

<Example name="table.hover" />

## Table with Pagination (numbers)

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

<Example name="table.paginationNumber" />

## 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.

<Example name="table.paginationButton" />

## 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
2 changes: 2 additions & 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,6 @@
export { hover } from "./table.hover";
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";
209 changes: 209 additions & 0 deletions apps/web/examples/table/table.paginationButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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(0);

const [rowsPerPage] = useState(10);

const handlePageChange = (newPage: number) => setPageNo(newPage);

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>

<Table.Pagination count={100} onPageChange={handlePageChange} page={pageNo} rowsPerPage={rowsPerPage} paginationType="prevNextButton" />
</div>
);
}
`;

function Component() {
const [pageNo, setPageNo] = useState(0);

const [rowsPerPage] = useState(10);

const handlePageChange = (newPage: number) => setPageNo(newPage);

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>

<TablePagination
count={100}
onPageChange={handlePageChange}
page={pageNo}
rowsPerPage={rowsPerPage}
paginationType="prevNextButton"
/>
</div>
);
}

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