Skip to content

Commit f972377

Browse files
tanerengiiintanerengiiin
authored
Merge pull request #8237 from primefaces/v11-paginator
New Component Paginator
2 parents 794c401 + b833c7e commit f972377

58 files changed

Lines changed: 1889 additions & 0 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎apps/showcase/demo/paginator/basic-demo.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { Paginator } from 'primereact/paginator';
2+
3+
function BasicDemo() {
4+
return (
5+
<div className="card flex items-center justify-center">
6+
<Paginator total={100} itemsPerPage={5} edges={0}>
7+
<Paginator.Content>
8+
<Paginator.First />
9+
<Paginator.Prev />
10+
<Paginator.Pages />
11+
<Paginator.Next />
12+
<Paginator.Last />
13+
</Paginator.Content>
14+
</Paginator>
15+
</div>
16+
);
17+
}
18+
19+
export default BasicDemo;

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
'use client';
2+
import { usePaginatorChangeEvent } from '@primereact/types/shared/paginator';
3+
import { Paginator } from 'primereact/paginator';
4+
import React from 'react';
5+
6+
function CustomTextDemo() {
7+
const [page, setPage] = React.useState(1);
8+
9+
const total = 100;
10+
const itemsPerPage = 5;
11+
12+
return (
13+
<div className="card flex items-center justify-end">
14+
<Paginator total={total} itemsPerPage={itemsPerPage} page={page} onPageChange={(e: usePaginatorChangeEvent) => 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>
21+
</div>
22+
);
23+
}
24+
25+
export default CustomTextDemo;

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { PaginatorPagesInstance } from '@primereact/types/shared/paginator';
2+
import { Paginator } from 'primereact/paginator';
3+
4+
function CustomizationDemo() {
5+
return (
6+
<div className="card flex items-center justify-center">
7+
<Paginator total={100} itemsPerPage={5}>
8+
<Paginator.Content>
9+
<Paginator.First className="min-w-auto px-3 py-2 rounded-md">First</Paginator.First>
10+
<Paginator.Prev className="rounded-md border border-surface">
11+
<i className="pi pi-arrow-left text-sm" />
12+
</Paginator.Prev>
13+
<Paginator.Pages>
14+
{({ paginator }: PaginatorPagesInstance) =>
15+
paginator?.pages.map((page, index) => (page.type === 'page' ? <Paginator.Page key={index} value={page.value} className="rounded-md border border-surface" /> : <Paginator.Ellipsis key={index} />))
16+
}
17+
</Paginator.Pages>
18+
<Paginator.Next className="rounded-md border border-surface">
19+
<i className="pi pi-arrow-right text-sm" />
20+
</Paginator.Next>
21+
<Paginator.Last className="min-w-auto px-3 py-2 rounded-md">Last</Paginator.Last>
22+
</Paginator.Content>
23+
</Paginator>
24+
</div>
25+
);
26+
}
27+
28+
export default CustomizationDemo;

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { Paginator } from 'primereact/paginator';
2+
3+
function EdgesDemo() {
4+
return (
5+
<div className="card flex items-center justify-center">
6+
<Paginator 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>
15+
</div>
16+
);
17+
}
18+
19+
export default EdgesDemo;

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { Paginator } from 'primereact/paginator';
2+
3+
function ShowEllipsisDemo() {
4+
return (
5+
<div className="card flex items-center justify-center">
6+
<Paginator 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>
15+
</div>
16+
);
17+
}
18+
19+
export default ShowEllipsisDemo;

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { Paginator } from 'primereact/paginator';
2+
3+
function SiblingsDemo() {
4+
return (
5+
<div className="card flex items-center justify-center">
6+
<Paginator 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>
15+
</div>
16+
);
17+
}
18+
19+
export default SiblingsDemo;

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
'use client';
2+
import { usePaginatorChangeEvent } from '@primereact/types/shared/paginator';
3+
import { Paginator } from 'primereact/paginator';
4+
import React from 'react';
5+
6+
function TemplateDemo() {
7+
const [page, setPage] = React.useState(1);
8+
9+
return (
10+
<div className="card flex flex-col gap-6 items-center justify-center">
11+
<Paginator total={12} itemsPerPage={1} page={1} onPageChange={(e: usePaginatorChangeEvent) => 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>
20+
21+
<div className="p-4 text-center">
22+
<img src={`https://primefaces.org/cdn/primevue/images/nature/nature${page}.jpg`} alt={page.toString()} className="rounded-lg w-full sm:w-[30rem]" />
23+
</div>
24+
</div>
25+
);
26+
}
27+
28+
export default TemplateDemo;

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
'use client';
2+
import { usePaginatorChangeEvent } from '@primereact/types/shared/paginator';
3+
import { InputText } from 'primereact/inputtext';
4+
import { Paginator } from 'primereact/paginator';
5+
import React from 'react';
6+
7+
function WithInputDemo() {
8+
const [page, setPage] = React.useState(1);
9+
10+
const total = 100;
11+
const itemsPerPage = 5;
12+
const maxPage = Math.ceil(total / itemsPerPage);
13+
14+
return (
15+
<div className="card flex items-center justify-center">
16+
<Paginator
17+
total={total}
18+
itemsPerPage={itemsPerPage}
19+
page={page}
20+
onPageChange={(e: usePaginatorChangeEvent) => {
21+
setPage(e.value);
22+
}}
23+
>
24+
<Paginator.Content>
25+
<Paginator.First />
26+
<Paginator.Prev />
27+
<div className="flex items-center gap-2">
28+
<InputText className="max-w-14 px-2 py-1" type="number" value={page} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setPage(Number(e.target.value))} />
29+
<span>of {maxPage}</span>
30+
</div>
31+
<Paginator.Next />
32+
<Paginator.Last />
33+
</Paginator.Content>
34+
</Paginator>
35+
</div>
36+
);
37+
}
38+
39+
export default WithInputDemo;

‎apps/showcase/docs/components/paginator/api.mdx‎

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
---
2+
title: Paginator API
3+
description: API documentation for Paginator component
4+
component: paginator
5+
---
6+
7+
## Paginator
8+
9+
### Props
10+
11+
<DocTable name="Paginator" category="api" type="props" />
12+
13+
### State
14+
15+
<DocTable name="Paginator" category="api" type="state" />
16+
17+
### Exposes
18+
19+
<DocTable name="Paginator" category="api" type="exposes" />
20+
21+
### Interfaces
22+
23+
<DocTable name="Paginator" category="api" type="interfaces" />
24+
25+
### Types
26+
27+
<DocTable name="Paginator" category="api" type="types" />
28+
29+
## PaginatorPages
30+
31+
### Props
32+
33+
<DocTable name="PaginatorPages" category="api" type="props" />
34+
35+
### Exposes
36+
37+
<DocTable name="PaginatorPages" category="api" type="exposes" />
38+
39+
### Interfaces
40+
41+
<DocTable name="PaginatorPages" category="api" type="interfaces" />
42+
43+
### Types
44+
45+
<DocTable name="PaginatorPages" category="api" type="types" />
46+
47+
## PaginatorPage
48+
49+
### Props
50+
51+
<DocTable name="PaginatorPage" category="api" type="props" />
52+
53+
### Exposes
54+
55+
<DocTable name="PaginatorPage" category="api" type="exposes" />
56+
57+
### Interfaces
58+
59+
<DocTable name="PaginatorPage" category="api" type="interfaces" />
60+
61+
### Types
62+
63+
<DocTable name="PaginatorPage" category="api" type="types" />
64+
65+
## PaginatorEllipsis
66+
67+
### Props
68+
69+
<DocTable name="PaginatorEllipsis" category="api" type="props" />
70+
71+
### Exposes
72+
73+
<DocTable name="PaginatorEllipsis" category="api" type="exposes" />
74+
75+
### Interfaces
76+
77+
<DocTable name="PaginatorEllipsis" category="api" type="interfaces" />
78+
79+
### Types
80+
81+
<DocTable name="PaginatorEllipsis" category="api" type="types" />
82+
83+
## PaginatorFirst
84+
85+
### Props
86+
87+
<DocTable name="PaginatorFirst" category="api" type="props" />
88+
89+
### Exposes
90+
91+
<DocTable name="PaginatorFirst" category="api" type="exposes" />
92+
93+
### Interfaces
94+
95+
<DocTable name="PaginatorFirst" category="api" type="interfaces" />
96+
97+
### Types
98+
99+
<DocTable name="PaginatorFirst" category="api" type="types" />
100+
101+
## PaginatorLast
102+
103+
### Props
104+
105+
<DocTable name="PaginatorLast" category="api" type="props" />
106+
107+
### Exposes
108+
109+
<DocTable name="PaginatorLast" category="api" type="exposes" />
110+
111+
### Interfaces
112+
113+
<DocTable name="PaginatorLast" category="api" type="interfaces" />
114+
115+
### Types
116+
117+
<DocTable name="PaginatorLast" category="api" type="types" />
118+
119+
## PaginatorNext
120+
121+
### Props
122+
123+
<DocTable name="PaginatorNext" category="api" type="props" />
124+
125+
### Exposes
126+
127+
<DocTable name="PaginatorNext" category="api" type="exposes" />
128+
129+
### Interfaces
130+
131+
<DocTable name="PaginatorNext" category="api" type="interfaces" />
132+
133+
### Types
134+
135+
<DocTable name="PaginatorNext" category="api" type="types" />
136+
137+
## PaginatorPrev
138+
139+
### Props
140+
141+
<DocTable name="PaginatorPrev" category="api" type="props" />
142+
143+
### Exposes
144+
145+
<DocTable name="PaginatorPrev" category="api" type="exposes" />
146+
147+
### Interfaces
148+
149+
<DocTable name="PaginatorPrev" category="api" type="interfaces" />
150+
151+
### Types
152+
153+
<DocTable name="PaginatorPrev" category="api" type="types" />
154+
155+
## usePaginator
156+
157+
### Props
158+
159+
<DocTable name="usePaginator" category="api" type="props" />
160+
161+
### State
162+
163+
<DocTable name="usePaginator" category="api" type="state" />
164+
165+
### Exposes
166+
167+
<DocTable name="usePaginator" category="api" type="exposes" />
168+
169+
### Types
170+
171+
<DocTable name="usePaginator" category="api" type="types" />

0 commit comments

Comments
 (0)