Skip to content

Commit 2c14a3e

Browse files
segunadebayosegunadebayo
committed
docs: pagination
1 parent 2e0e02c commit 2c14a3e

File tree

21 files changed

+648
-1
lines changed

21 files changed

+648
-1
lines changed

‎packages/react/src/components/pagination/examples/context.tsx

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { Pagination } from '@ark-ui/react/pagination'
2+
3+
export const Context = () => {
4+
return (
5+
<Pagination.Root count={100} pageSize={10}>
6+
<Pagination.Context>
7+
{(pagination) => (
8+
<div>
9+
<button onClick={() => pagination.goToFirstPage()}>First</button>
10+
<button onClick={() => pagination.goToPrevPage()}>Previous</button>
11+
<button onClick={() => pagination.setPage(5)}>Go to Page 5</button>
12+
<button onClick={() => pagination.goToNextPage()}>Next</button>
13+
<button onClick={() => pagination.goToLastPage()}>Last</button>
14+
15+
<p>
16+
Page {pagination.page} of {pagination.totalPages}
17+
</p>
18+
<p>
19+
Items {pagination.pageRange.start + 1}-{pagination.pageRange.end}
20+
</p>
21+
22+
<button onClick={() => pagination.setPageSize(20)}>20 per page</button>
23+
</div>
24+
)}
25+
</Pagination.Context>
26+
</Pagination.Root>
27+
)
28+
}

‎packages/react/src/components/pagination/examples/data-slicing.tsx

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import { Pagination } from '@ark-ui/react/pagination'
2+
3+
const items = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)
4+
5+
export const DataSlicing = () => {
6+
return (
7+
<Pagination.Root count={items.length} pageSize={10}>
8+
<Pagination.Context>
9+
{(pagination) => (
10+
<div>
11+
<div>
12+
<h3>Current Page Items:</h3>
13+
<ul>
14+
{pagination.slice(items).map((item) => (
15+
<li key={item}>{item}</li>
16+
))}
17+
</ul>
18+
</div>
19+
20+
<div>
21+
<Pagination.PrevTrigger>Previous</Pagination.PrevTrigger>
22+
23+
{pagination.pages.map((page, index) =>
24+
page.type === 'page' ? (
25+
<Pagination.Item key={index} {...page}>
26+
{page.value}
27+
</Pagination.Item>
28+
) : (
29+
<Pagination.Ellipsis key={index} index={index}>
30+
&#8230;
31+
</Pagination.Ellipsis>
32+
),
33+
)}
34+
35+
<Pagination.NextTrigger>Next</Pagination.NextTrigger>
36+
</div>
37+
</div>
38+
)}
39+
</Pagination.Context>
40+
</Pagination.Root>
41+
)
42+
}

‎packages/react/src/components/pagination/examples/page-range.tsx

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { Pagination } from '@ark-ui/react/pagination'
2+
3+
export const PageRange = () => {
4+
return (
5+
<Pagination.Root count={100} pageSize={10}>
6+
<Pagination.Context>
7+
{(pagination) => (
8+
<div>
9+
<div>
10+
<Pagination.PrevTrigger>Previous</Pagination.PrevTrigger>
11+
12+
{pagination.pages.map((page, index) =>
13+
page.type === 'page' ? (
14+
<Pagination.Item key={index} {...page}>
15+
{page.value}
16+
</Pagination.Item>
17+
) : (
18+
<Pagination.Ellipsis key={index} index={index}>
19+
&#8230;
20+
</Pagination.Ellipsis>
21+
),
22+
)}
23+
24+
<Pagination.NextTrigger>Next</Pagination.NextTrigger>
25+
</div>
26+
27+
<div>
28+
<p>
29+
Showing {pagination.pageRange.start + 1}-{pagination.pageRange.end} of {pagination.count} results
30+
</p>
31+
<p>
32+
Page {pagination.page} of {pagination.totalPages}
33+
</p>
34+
</div>
35+
</div>
36+
)}
37+
</Pagination.Context>
38+
</Pagination.Root>
39+
)
40+
}

‎packages/react/src/components/pagination/examples/page-size-control.tsx

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { Pagination } from '@ark-ui/react/pagination'
2+
3+
export const PageSizeControl = () => {
4+
return (
5+
<Pagination.Root count={100} pageSize={10}>
6+
<Pagination.Context>
7+
{(pagination) => (
8+
<div>
9+
<div>
10+
<label>Items per page: </label>
11+
<select value={pagination.pageSize} onChange={(e) => pagination.setPageSize(Number(e.target.value))}>
12+
<option value={5}>5</option>
13+
<option value={10}>10</option>
14+
<option value={20}>20</option>
15+
<option value={50}>50</option>
16+
</select>
17+
</div>
18+
19+
<div>
20+
<Pagination.PrevTrigger>Previous</Pagination.PrevTrigger>
21+
22+
{pagination.pages.map((page, index) =>
23+
page.type === 'page' ? (
24+
<Pagination.Item key={index} {...page}>
25+
{page.value}
26+
</Pagination.Item>
27+
) : (
28+
<Pagination.Ellipsis key={index} index={index}>
29+
&#8230;
30+
</Pagination.Ellipsis>
31+
),
32+
)}
33+
34+
<Pagination.NextTrigger>Next</Pagination.NextTrigger>
35+
</div>
36+
37+
<p>
38+
Page {pagination.page} of {pagination.totalPages}
39+
</p>
40+
</div>
41+
)}
42+
</Pagination.Context>
43+
</Pagination.Root>
44+
)
45+
}

‎packages/react/src/components/pagination/pagination.stories.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,11 @@ const meta: Meta = {
77
export default meta
88

99
export { Basic } from './examples/basic'
10+
export { Context } from './examples/context'
1011
export { Controlled } from './examples/controlled'
1112
export { Customized } from './examples/customized'
13+
export { DataSlicing } from './examples/data-slicing'
1214
export { Link } from './examples/link'
15+
export { PageRange } from './examples/page-range'
16+
export { PageSizeControl } from './examples/page-size-control'
1317
export { RootProvider } from './examples/root-provider'

‎packages/solid/src/components/pagination/examples/context.tsx

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { Pagination } from '@ark-ui/solid/pagination'
2+
3+
export const Context = () => {
4+
return (
5+
<Pagination.Root count={100} pageSize={10}>
6+
<Pagination.Context>
7+
{(api) => (
8+
<div>
9+
<button onClick={() => api().goToFirstPage()}>First</button>
10+
<button onClick={() => api().goToPrevPage()}>Previous</button>
11+
<button onClick={() => api().setPage(5)}>Go to Page 5</button>
12+
<button onClick={() => api().goToNextPage()}>Next</button>
13+
<button onClick={() => api().goToLastPage()}>Last</button>
14+
15+
<p>
16+
Page {api().page} of {api().totalPages}
17+
</p>
18+
<p>
19+
Items {api().pageRange.start + 1}-{api().pageRange.end}
20+
</p>
21+
22+
<button onClick={() => api().setPageSize(20)}>20 per page</button>
23+
</div>
24+
)}
25+
</Pagination.Context>
26+
</Pagination.Root>
27+
)
28+
}

‎packages/solid/src/components/pagination/examples/data-slicing.tsx

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { Pagination } from '@ark-ui/solid/pagination'
2+
import { For } from 'solid-js'
3+
4+
const items = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)
5+
6+
export const DataSlicing = () => {
7+
return (
8+
<Pagination.Root count={items.length} pageSize={10}>
9+
<Pagination.Context>
10+
{(api) => (
11+
<div>
12+
<div>
13+
<h3>Current Page Items:</h3>
14+
<ul>
15+
<For each={api().slice(items)}>{(item) => <li>{item}</li>}</For>
16+
</ul>
17+
</div>
18+
19+
<div>
20+
<Pagination.PrevTrigger>Previous</Pagination.PrevTrigger>
21+
22+
<For each={api().pages}>
23+
{(page, index) =>
24+
page.type === 'page' ? (
25+
<Pagination.Item {...page}>{page.value}</Pagination.Item>
26+
) : (
27+
<Pagination.Ellipsis index={index()}>&#8230;</Pagination.Ellipsis>
28+
)
29+
}
30+
</For>
31+
32+
<Pagination.NextTrigger>Next</Pagination.NextTrigger>
33+
</div>
34+
</div>
35+
)}
36+
</Pagination.Context>
37+
</Pagination.Root>
38+
)
39+
}

‎packages/solid/src/components/pagination/examples/page-range.tsx

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { Pagination } from '@ark-ui/solid/pagination'
2+
import { For } from 'solid-js'
3+
4+
export const PageRange = () => {
5+
return (
6+
<Pagination.Root count={100} pageSize={10}>
7+
<Pagination.Context>
8+
{(api) => (
9+
<div>
10+
<div>
11+
<Pagination.PrevTrigger>Previous</Pagination.PrevTrigger>
12+
13+
<For each={api().pages}>
14+
{(page, index) =>
15+
page.type === 'page' ? (
16+
<Pagination.Item {...page}>{page.value}</Pagination.Item>
17+
) : (
18+
<Pagination.Ellipsis index={index()}>&#8230;</Pagination.Ellipsis>
19+
)
20+
}
21+
</For>
22+
23+
<Pagination.NextTrigger>Next</Pagination.NextTrigger>
24+
</div>
25+
26+
<div>
27+
<p>
28+
Showing {api().pageRange.start + 1}-{api().pageRange.end} of {api().count} results
29+
</p>
30+
<p>
31+
Page {api().page} of {api().totalPages}
32+
</p>
33+
</div>
34+
</div>
35+
)}
36+
</Pagination.Context>
37+
</Pagination.Root>
38+
)
39+
}

‎packages/solid/src/components/pagination/examples/page-size-control.tsx

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { Pagination } from '@ark-ui/solid/pagination'
2+
import { For } from 'solid-js'
3+
4+
export const PageSizeControl = () => {
5+
return (
6+
<Pagination.Root count={100} pageSize={10}>
7+
<Pagination.Context>
8+
{(api) => (
9+
<div>
10+
<div>
11+
<label>Items per page: </label>
12+
<select value={api().pageSize} onChange={(e) => api().setPageSize(Number(e.target.value))}>
13+
<option value={5}>5</option>
14+
<option value={10}>10</option>
15+
<option value={20}>20</option>
16+
<option value={50}>50</option>
17+
</select>
18+
</div>
19+
20+
<div>
21+
<Pagination.PrevTrigger>Previous</Pagination.PrevTrigger>
22+
23+
<For each={api().pages}>
24+
{(page, index) =>
25+
page.type === 'page' ? (
26+
<Pagination.Item {...page}>{page.value}</Pagination.Item>
27+
) : (
28+
<Pagination.Ellipsis index={index()}>&#8230;</Pagination.Ellipsis>
29+
)
30+
}
31+
</For>
32+
33+
<Pagination.NextTrigger>Next</Pagination.NextTrigger>
34+
</div>
35+
36+
<p>
37+
Page {api().page} of {api().totalPages}
38+
</p>
39+
</div>
40+
)}
41+
</Pagination.Context>
42+
</Pagination.Root>
43+
)
44+
}

‎packages/solid/src/components/pagination/pagination.stories.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@ const meta: Meta = {
77
export default meta
88

99
export { Basic } from './examples/basic'
10+
export { Context } from './examples/context'
1011
export { Controlled } from './examples/controlled'
1112
export { Customized } from './examples/customized'
13+
export { DataSlicing } from './examples/data-slicing'
14+
export { PageRange } from './examples/page-range'
15+
export { PageSizeControl } from './examples/page-size-control'
1216
export { RootProvider } from './examples/root-provider'

0 commit comments

Comments
 (0)