https://github.com/4lessandrodev/ts-paginate
Tool to paginate data using cursor
https://github.com/4lessandrodev/ts-paginate
cursor-pagination pagination paginator
Last synced: 8 months ago
JSON representation
Tool to paginate data using cursor
- Host: GitHub
- URL: https://github.com/4lessandrodev/ts-paginate
- Owner: 4lessandrodev
- Created: 2022-01-04T12:54:06.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2023-10-21T17:32:08.000Z (almost 2 years ago)
- Last Synced: 2024-04-28T07:22:35.094Z (over 1 year ago)
- Topics: cursor-pagination, pagination, paginator
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/ts-paginate
- Size: 957 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# ts-paginate
This lib paginate any data as array of records using id attribute as cursor.
> All record must have id attribute or you must provide a custom cursorKey.
Node
Install
```shell
$ npm install --save ts-paginate
# or
$ yarn add ts-paginate
```
You also may use on browser from bundle
```html
```
Or from skypack
```html
import { Pager } from 'https://cdn.skypack.dev/ts-paginate';
```
Follow link for browser example:
[Click Here](https://4lessandrodev.github.io/ts-paginate/examples/browser.html)
## Custom Configs
Default configs
```ts
{ cursorKey: 'id', pageSize: 25 }
```
```ts
import { Pager } from 'ts-paginate';
// default config
const paginate = new Pager().paginate;
```
Or using a custom config
```ts
import { Pager } from 'ts-paginate';
// custom config
const paginate = new Pager({ cursorKey: '_id', pageSize: 15 }).paginate;
```
## Example Rest
```ts
import { Pager } from 'ts-paginate';
// set pager
const paginate = new Pager().paginate;
// using after cursor
const result = paginate({
data: dbData,
params: {
size: 7,
after: 'cursor_xya'
}
}).toRest();
console.log(result.pageInfo);
`{
hasNextPage: true,
hasPreviousPage: true,
totalCount: 40,
sizePerPage: 7,
currentItem: 1,
page: {
current: 2,
of: 6
},
firstCursor: 'cursor_xyb',
lastCursor: 'cursor_xyh'
}`
// using before cursor
const result = paginate({
data: dbData,
params: {
size: 7,
before: 'cursor_xyz'
}
}).toRest();
```
## Data as GQL node
Transform data payload to graphQL node
```ts
import { Pager } from 'ts-paginate';
// set pager
const paginate = new Pager().paginate;
const result = paginate({
data: usersData,
params: {
size: 50,
after: 'cursor_xyz'
}
}).toGql();
console.log(result.data[0]);
`{
cursor: 'cursor_xyw',
node: {
id: 'cursor_xyw',
name: 'foo',
email: 'foo@mail.com'
}
}`
```
## Generic types
Transform data payload to graphQL node
```ts
import { Pager } from 'ts-paginate';
interface IUser {
id: string;
name: string;
email: string;
}
// set pager
const paginate = new Pager().paginate;
const result = paginate({ data: usersData }).toRest();
// or
const result = paginate({ data: usersData }).toGql();
```
## Change size on nested pages
If the amount of records to be displayed changes, first request an update of the value, passing only the value and then navigate informing the cursor
```ts
import { Pager } from 'ts-paginate';
const { paginate } = new Pager();
// Request first page with 15 items per page.
const page1a = paginate({ data, params:{ size: 15 }});
// Next > Next: I am on page 3
const page3a = paginate({ data, params: { size: 15, after: 'cursor_30' } });
// I want to change size to 5 items per page
const page1b = paginate({ data, params:{ size: 5 }});
// Next > Next: Now you navigate to page 3. Cursor reference is cursor_10
const page3b = paginate({ data, params:{ size: 5, after: 'cursor_10' }});
```