Skip to content

Commit 62f57aa

Browse files
tanerengiiintanerengiiin
committed
feat(tailwind): add Paginator component
1 parent bdb6b9d commit 62f57aa

14 files changed

Lines changed: 159 additions & 126 deletions

File tree

‎apps/showcase/__store__/index.tsx‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2817,10 +2817,6 @@ export const Store: Record<string, Record<string, Record<string, { component: Re
28172817
'component': React.lazy(() => import('demo/tailwind/paginator/custom-text-demo')),
28182818
'filePath': 'demo/tailwind/paginator/custom-text-demo.tsx',
28192819
},
2820-
'customization-demo': {
2821-
'component': React.lazy(() => import('demo/tailwind/paginator/customization-demo')),
2822-
'filePath': 'demo/tailwind/paginator/customization-demo.tsx',
2823-
},
28242820
'edges-demo': {
28252821
'component': React.lazy(() => import('demo/tailwind/paginator/edges-demo')),
28262822
'filePath': 'demo/tailwind/paginator/edges-demo.tsx',

‎apps/showcase/demo/tailwind/paginator/custom-text-demo.tsx‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use client';
2+
import { Paginator, PaginatorNext, PaginatorPrev } from '@/components/ui/paginator';
23
import type { PaginatorRootChangeEvent } from '@primereact/types/shared/paginator';
3-
import { Paginator } from 'primereact/paginator';
44
import React from 'react';
55

66
function CustomTextDemo() {
@@ -11,13 +11,11 @@ function CustomTextDemo() {
1111

1212
return (
1313
<div className="flex items-center justify-end">
14-
<Paginator.Root total={total} itemsPerPage={itemsPerPage} page={page} onPageChange={(e: PaginatorRootChangeEvent) => setPage(e.value)}>
15-
<Paginator.Content>
16-
Showing {itemsPerPage * (page - 1) + 1} – {Math.min(total, itemsPerPage * page)} of {total}
17-
<Paginator.Prev />
18-
<Paginator.Next />
19-
</Paginator.Content>
20-
</Paginator.Root>
14+
<Paginator total={total} itemsPerPage={itemsPerPage} page={page} onPageChange={(e: PaginatorRootChangeEvent) => setPage(e.value)}>
15+
Showing {itemsPerPage * (page - 1) + 1} – {Math.min(total, itemsPerPage * page)} of {total}
16+
<PaginatorPrev />
17+
<PaginatorNext />
18+
</Paginator>
2119
</div>
2220
);
2321
}

‎apps/showcase/demo/tailwind/paginator/customization-demo.tsx‎

Lines changed: 0 additions & 37 deletions
This file was deleted.

‎apps/showcase/demo/tailwind/paginator/edges-demo.tsx‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,15 @@
1-
import { Paginator } from 'primereact/paginator';
1+
import { Paginator, PaginatorFirst, PaginatorLast, PaginatorNext, PaginatorPages, PaginatorPrev } from '@/components/ui/paginator';
22

33
function EdgesDemo() {
44
return (
55
<div className="flex items-center justify-center">
6-
<Paginator.Root total={100} itemsPerPage={5} page={6} edges={2}>
7-
<Paginator.Content>
8-
<Paginator.First />
9-
<Paginator.Prev />
10-
<Paginator.Pages />
11-
<Paginator.Next />
12-
<Paginator.Last />
13-
</Paginator.Content>
14-
</Paginator.Root>
6+
<Paginator total={100} itemsPerPage={5} page={6} edges={2}>
7+
<PaginatorFirst />
8+
<PaginatorPrev />
9+
<PaginatorPages />
10+
<PaginatorNext />
11+
<PaginatorLast />
12+
</Paginator>
1513
</div>
1614
);
1715
}

‎apps/showcase/demo/tailwind/paginator/show-ellipsis-demo.tsx‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,15 @@
1-
import { Paginator } from 'primereact/paginator';
1+
import { Paginator, PaginatorFirst, PaginatorLast, PaginatorNext, PaginatorPages, PaginatorPrev } from '@/components/ui/paginator';
22

33
function ShowEllipsisDemo() {
44
return (
55
<div className="flex items-center justify-center">
6-
<Paginator.Root total={100} itemsPerPage={5} showEllipsis={false} siblings={3}>
7-
<Paginator.Content>
8-
<Paginator.First />
9-
<Paginator.Prev />
10-
<Paginator.Pages />
11-
<Paginator.Next />
12-
<Paginator.Last />
13-
</Paginator.Content>
14-
</Paginator.Root>
6+
<Paginator total={100} itemsPerPage={5} showEllipsis={false} siblings={3}>
7+
<PaginatorFirst />
8+
<PaginatorPrev />
9+
<PaginatorPages />
10+
<PaginatorNext />
11+
<PaginatorLast />
12+
</Paginator>
1513
</div>
1614
);
1715
}

‎apps/showcase/demo/tailwind/paginator/siblings-demo.tsx‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,15 @@
1-
import { Paginator } from 'primereact/paginator';
1+
import { Paginator, PaginatorFirst, PaginatorLast, PaginatorNext, PaginatorPages, PaginatorPrev } from '@/components/ui/paginator';
22

33
function SiblingsDemo() {
44
return (
55
<div className="flex items-center justify-center">
6-
<Paginator.Root total={100} itemsPerPage={5} page={6} siblings={2}>
7-
<Paginator.Content>
8-
<Paginator.First />
9-
<Paginator.Prev />
10-
<Paginator.Pages />
11-
<Paginator.Next />
12-
<Paginator.Last />
13-
</Paginator.Content>
14-
</Paginator.Root>
6+
<Paginator total={100} itemsPerPage={5} page={6} siblings={2}>
7+
<PaginatorFirst />
8+
<PaginatorPrev />
9+
<PaginatorPages />
10+
<PaginatorNext />
11+
<PaginatorLast />
12+
</Paginator>
1513
</div>
1614
);
1715
}

‎apps/showcase/demo/tailwind/paginator/template-demo.tsx‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,20 @@
11
'use client';
2+
import { Paginator, PaginatorFirst, PaginatorLast, PaginatorNext, PaginatorPrev } from '@/components/ui/paginator';
23
import type { PaginatorRootChangeEvent } from '@primereact/types/shared/paginator';
3-
import { Paginator } from 'primereact/paginator';
44
import React from 'react';
55

66
function TemplateDemo() {
77
const [page, setPage] = React.useState(1);
88

99
return (
1010
<div className="flex flex-col gap-6 items-center justify-center">
11-
<Paginator.Root total={12} itemsPerPage={1} page={1} onPageChange={(e: PaginatorRootChangeEvent) => setPage(e.value)}>
12-
<Paginator.Content>
13-
<Paginator.First />
14-
<Paginator.Prev />
15-
<div className="text-surface-500">({page} of 12)</div>
16-
<Paginator.Next />
17-
<Paginator.Last />
18-
</Paginator.Content>
19-
</Paginator.Root>
11+
<Paginator total={12} itemsPerPage={1} page={1} onPageChange={(e: PaginatorRootChangeEvent) => setPage(e.value)}>
12+
<PaginatorFirst />
13+
<PaginatorPrev />
14+
<div className="text-surface-500">({page} of 12)</div>
15+
<PaginatorNext />
16+
<PaginatorLast />
17+
</Paginator>
2018

2119
<div className="p-4 text-center">
2220
<img

‎apps/showcase/demo/tailwind/paginator/with-input-demo.tsx‎

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
'use client';
2+
import { Paginator, PaginatorFirst, PaginatorLast, PaginatorNext, PaginatorPrev } from '@/components/ui/paginator';
3+
import { InputText } from '@/components/ui/inputtext';
24
import type { PaginatorRootChangeEvent } from '@primereact/types/shared/paginator';
3-
import { InputText } from 'primereact/inputtext';
4-
import { Paginator } from 'primereact/paginator';
55
import React from 'react';
66

77
function WithInputDemo() {
@@ -13,30 +13,28 @@ function WithInputDemo() {
1313

1414
return (
1515
<div className="flex items-center justify-center">
16-
<Paginator.Root
16+
<Paginator
1717
total={total}
1818
itemsPerPage={itemsPerPage}
1919
page={page}
2020
onPageChange={(e: PaginatorRootChangeEvent) => {
2121
setPage(e.value);
2222
}}
2323
>
24-
<Paginator.Content>
25-
<Paginator.First />
26-
<Paginator.Prev />
27-
<div className="flex items-center gap-2">
28-
<InputText
29-
className="max-w-14 px-2 py-1"
30-
type="number"
31-
value={page}
32-
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setPage(Number(e.target.value))}
33-
/>
34-
<span>of {maxPage}</span>
35-
</div>
36-
<Paginator.Next />
37-
<Paginator.Last />
38-
</Paginator.Content>
39-
</Paginator.Root>
24+
<PaginatorFirst />
25+
<PaginatorPrev />
26+
<div className="flex items-center gap-2">
27+
<InputText
28+
className="max-w-14 px-2 py-1"
29+
type="number"
30+
value={page}
31+
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setPage(Number(e.target.value))}
32+
/>
33+
<span>of {maxPage}</span>
34+
</div>
35+
<PaginatorNext />
36+
<PaginatorLast />
37+
</Paginator>
4038
</div>
4139
);
4240
}

‎apps/showcase/docs/tailwind/components/paginator/features.mdx‎

Lines changed: 60 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,35 @@ component: paginator
66

77
<DocDemoViewer name="paginator:basic-demo" mode="collapsible" />
88

9+
## Installation
10+
11+
<DocTabs value="CLI">
12+
<DocTabsList>
13+
<DocTabsTab value="CLI">Shadcn CLI</DocTabsTab>
14+
<DocTabsTab value="Manual">Manual</DocTabsTab>
15+
</DocTabsList>
16+
<DocTabsPanel value="CLI">
17+
```bash
18+
npx shadcn@latest add @primereact/ui/paginator
19+
```
20+
</DocTabsPanel>
21+
<DocTabsPanel value="Manual">
22+
<DocStepper>
23+
<DocStep>
24+
Copy and paste the following code into your project
25+
<DocSourceViewer name="components/ui/paginator" />
26+
</DocStep>
27+
<DocStep>
28+
Update the import paths to match your project setup.
29+
</DocStep>
30+
</DocStepper>
31+
</DocTabsPanel>
32+
</DocTabs>
33+
934
## Usage
1035

1136
```tsx
12-
import { Paginator } from '@primereact/ui/paginator';
37+
import { Paginator } from '@/components/ui/paginator';
1338
```
1439

1540
```tsx
@@ -26,7 +51,40 @@ import { Paginator } from '@primereact/ui/paginator';
2651

2752
## Examples
2853

29-
### Basic
54+
### Siblings
55+
56+
Use `siblings` prop to define the number of siblings to display. Siblings is the number of pages to display before and after the current page.
57+
58+
<DocDemoViewer name="paginator:siblings-demo" />
59+
60+
### Edges
61+
62+
Use `edges` prop to define the number of edges to display. Edges is the number of pages to display first and last of the paginator.
63+
64+
<DocDemoViewer name="paginator:edges-demo" />
65+
66+
### Show Ellipsis
67+
68+
Use `showEllipsis` prop to define whether to show ellipsis. If `showEllipsis` is `false`, `edges` prop is ignored.
69+
70+
<DocDemoViewer name="paginator:show-ellipsis-demo" />
71+
72+
### Template
73+
74+
Here are the available elements that can be placed inside a paginator in any order.
75+
76+
<DocDemoViewer name="paginator:template-demo" />
77+
78+
### Custom Text
79+
80+
Use `onPageChange` event to define the custom text to display.
81+
82+
<DocDemoViewer name="paginator:custom-text-demo" />
83+
84+
### With Input
85+
86+
<DocDemoViewer name="paginator:with-input-demo" />
87+
## Accessibility
3088

3189
### Screen Reader
3290

‎apps/showcase/public/r/accordion.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"name": "accordion",
44
"type": "registry:ui",
55
"dependencies": [
6-
"@primeicons/react@^8.0.0-alpha.7"
6+
"@primeicons/react"
77
],
88
"registryDependencies": [
99
"https://v11.primereact.org/public/r/utils.json"

0 commit comments

Comments
 (0)