https://github.com/aaronksaunders/payload-custom-listview-1-2025
custom image gallery with pagination in Payload CMS using React and Next.js! In this tutorial, I walk through creating a custom list view component for a media collection, showcasing how to display images in a grid and manage navigation between pages.
https://github.com/aaronksaunders/payload-custom-listview-1-2025
custom-component payload-cms payloadcms
Last synced: about 1 year ago
JSON representation
custom image gallery with pagination in Payload CMS using React and Next.js! In this tutorial, I walk through creating a custom list view component for a media collection, showcasing how to display images in a grid and manage navigation between pages.
- Host: GitHub
- URL: https://github.com/aaronksaunders/payload-custom-listview-1-2025
- Owner: aaronksaunders
- Created: 2025-02-12T23:00:24.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-12T23:02:38.000Z (over 1 year ago)
- Last Synced: 2025-04-13T04:53:30.178Z (about 1 year ago)
- Topics: custom-component, payload-cms, payloadcms
- Language: TypeScript
- Homepage: https://youtu.be/6avHMMyM8Eg
- Size: 136 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Payload CMS Custom List View Example
See video here - https://youtu.be/6avHMMyM8Eg
## Overview
Learn how to build a custom image gallery with pagination in Payload CMS using React and Next.js! In this tutorial, I walk through creating a custom list view component for a media collection, showcasing how to display images in a grid and manage navigation between pages.
## 🔗 Helpful Links
* uselistquery hook https://payloadcms.com/docs/admin/hooks#uselistquery
* List Component https://github.com/payloadcms/payload/blob/main/packages/ui/src/views/List/index.tsx#L109
* Learn more about Payload CMS: https://payloadcms.com/docs/getting-started/what-is-payload