https://github.com/ppcamp/sveltekit-cursor-pagination

A simple example of how to control and handle with a cursor pagination. This repo uses Tailwind, Sveltekit + TS and Skeleton
https://github.com/ppcamp/sveltekit-cursor-pagination

Last synced: about 1 year ago
JSON representation

A simple example of how to control and handle with a cursor pagination. This repo uses Tailwind, Sveltekit + TS and Skeleton

• Host: GitHub
• URL: https://github.com/ppcamp/sveltekit-cursor-pagination
• Owner: ppcamp
• License: mit
• Archived: true
• Created: 2023-05-14T03:45:37.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2023-05-22T01:27:37.000Z (about 3 years ago)
• Last Synced: 2025-03-03T05:43:42.195Z (over 1 year ago)
• Language: Svelte
• Size: 139 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# sveltekit-cursor-pagination

A simple example of how to control and handle with a cursor pagination. This repo uses Tailwind, Sveltekit + TS and Skeleton

In this repo, I'll create a simple pagination component table that can be used by multiple skip/take

approaches, different from tanstack, wich doesn't support well custom features.

## How to run?

```bash

npm i

npm run dev

```

## ToDOs

- Add pageSize select

- FIXME: createPagination with SSR

- TODO: use actions/forms to add

- TODO: allow to pass parameters to createPagination

  1.  the pageSize (to allow users to store the pageSize in local|session and retrieve it later)

  2.  all (almost) stores, allowing to re-create an old pagination or using pagination from SSR.

**Proposal:**


type PageSizes = Record< string TableKeyName, number>

e.g: { actorsTable: 10, baseTable: 15}


user open →

	on change pageSize →

		[store pageSize into local] →

			close window

user open →

	[load all stores and send them as cookie (cookies can be stringfied) ]→



**For #1:**


[in page.ts, load cookies for this table] →

	[send loadedPageSize to page and use onMount functions]




**For #2:**


[create pagination using pageSize got from cookies] →

	[render table with this paginated data] →

		[ create an action for every pagination event and use it to render elements on server ]