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 3 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 amount 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";
203 changes: 203 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,203 @@
"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 (
<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} />
</div>
);
}
`;

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

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} />
</div>
);
}

export const pagination: CodeData = {
type: "single",
code: [
{
fileName: "client",
language: "tsx",
code,
},
],
githubSlug: "table/table.pagination.tsx",
component: <Component />,
};
95 changes: 95 additions & 0 deletions packages/ui/src/components/Table/Table.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import type { Meta, StoryFn } from "@storybook/react";
import { useState } from "react";
import type { TableProps } from "./Table";
import { Table } from "./Table";

Expand Down Expand Up @@ -86,3 +87,97 @@ const Template: StoryFn<TableProps> = (args) => (

export const DefaultTable = Template.bind({});
DefaultTable.storyName = "Default";

const TPageTemplate: StoryFn<TableProps> = (args) => {
const [pageNo, setPageNo] = useState(1);
const [rowsPerPage] = useState(10);

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

return (
<>
<Table {...args}>
<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="/tables" 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="/tables" 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="/tables" 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="/tables" 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="/tables" 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} />
</>
);
};

export const PaginationTable = TPageTemplate.bind({});
PaginationTable.storyName = "Pagination";
3 changes: 3 additions & 0 deletions packages/ui/src/components/Table/Table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,15 @@ 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 {
root: FlowbiteTableRootTheme;
head: FlowbiteTableHeadTheme;
row: FlowbiteTableRowTheme;
body: FlowbiteTableBodyTheme;
pagination: FlowbiteTablePaginationTheme;
}

export interface FlowbiteTableRootTheme {
Expand Down Expand Up @@ -56,4 +58,5 @@ export const Table = Object.assign(TableComponent, {
Row: TableRow,
Cell: TableCell,
HeadCell: TableHeadCell,
Pagination: TablePagination,
});
Loading