diff --git a/.changeset/beige-icons-visit.md b/.changeset/beige-icons-visit.md
new file mode 100644
index 000000000..7fe353936
--- /dev/null
+++ b/.changeset/beige-icons-visit.md
@@ -0,0 +1,5 @@
+---
+"@solid-primitives/pagination": minor
+---
+
+new segmentation primitive, jump pages, fix set page to non-existent page, fix demo
diff --git a/README.md b/README.md
index 913478134..5cef66d27 100644
--- a/README.md
+++ b/README.md
@@ -103,7 +103,7 @@ The goal of Solid Primitives is to wrap client and server side functionality to
|
|
|[presence](https://github.com/solidjs-community/solid-primitives/tree/main/packages/presence#readme)|[](https://github.com/solidjs-community/solid-primitives/blob/main/CONTRIBUTING.md#contribution-process)|[createPresence](https://github.com/solidjs-community/solid-primitives/tree/main/packages/presence#createpresence)|[](https://bundlephobia.com/package/@solid-primitives/presence)|[](https://www.npmjs.com/package/@solid-primitives/presence)|
diff --git a/packages/pagination/README.md b/packages/pagination/README.md
index e4c0f546a..856e0ada8 100644
--- a/packages/pagination/README.md
+++ b/packages/pagination/README.md
@@ -11,6 +11,7 @@
A primitive that creates all the reactive data to manage your pagination:
- [`createPagination`](#createpagination) - Provides an array with the properties to fill your pagination with and a page setter/getter.
+- [`createSegment`](#createSegment) - Provides a reactive segment of an array (e.g. a page of a number of items).
- [`createInfiniteScroll`](#createinfinitescroll) - Provides an easy way to implement infinite scrolling.
## Installation
@@ -53,6 +54,8 @@ type PaginationOptions = {
nextContent?: JSX.Element;
/** content for the last page element, e.g. an SVG icon, default is ">|" */
lastContent?: JSX.Element;
+ /** number of pages a large jump, if it should exist, should skip */
+ jumpPages?: number;
};
// Returns a tuple of props, page and setPage.
@@ -109,11 +112,29 @@ return (
- options for aria-labels
- optional: touch controls
+## `createSegment`
+
+It is a common requirement to put multiple items on a single page, which exactly is what `createSegment` is for.
+
+```tsx
+const segment = createSegment(items, limit, page);
+
+return (
+ {(item) => }
+)
+```
+
+* `items` can be any array of items or an accessor with an array of items; even if the array increases in size, the segment will only change if the growth brings an actual change
+* `limit` is the limit for the number of items within a segment; this can be a number or an accessor containing a number
+* `page` is an accessor with the number or the segment page, starting with 1
+
+
### Demo
You may view a working example here:
https://primitives.solidjs.community/playground/pagination/
+
## `createInfiniteScroll`
Combines [`createResource`](https://www.solidjs.com/docs/latest/api#createresource) with [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) to provide an easy way to implement infinite scrolling.
diff --git a/packages/pagination/dev/index.tsx b/packages/pagination/dev/index.tsx
index 0e19394db..c533962f5 100644
--- a/packages/pagination/dev/index.tsx
+++ b/packages/pagination/dev/index.tsx
@@ -1,6 +1,6 @@
-import { type Component, For, Show } from "solid-js";
+import { type Component, For, Show, createSignal } from "solid-js";
-import { createInfiniteScroll, createPagination } from "../src/index.js";
+import { createInfiniteScroll, createSegment, createPagination } from "../src/index.js";
async function fetcher(page: number) {
let elements: string[] = [];
@@ -14,37 +14,45 @@ async function fetcher(page: number) {
return elements;
}
-const PaginationDemo: Component = () => {
- const [paginationProps, page, setPage] = createPagination({ pages: 100 });
+const PaginationSegmentationDemo: Component = () => {
+ const items = Array.from({ length: 1000 }, (_, i) => i + 1);
+ const [limit, setLimit] = createSignal(10);
+ const [paginationProps, page, setPage] = createPagination(() => ({
+ pages: Math.ceil(items.length / limit()),
+ maxPages: 8,
+ jumpPages: 10,
+ }));
+ const segment = createSegment(items, limit, page);
return (
-