Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Create Pagination component

Aperta
  • Qualcosa non va?
#23 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
52/100
Tipo di issue
Funzionalità
Chiarezza
Abbastanza chiara
Stato di attività
Tranquilla
Stack tecnologico
react, typescript
Ambito
frontend, web-dev

Direzione di ricerca

Inizia individuando il componente Table esistente e la struttura components/table suggerita nell’issue, quindi esamina il riferimento Figma e la documentazione di Material UI table-pagination. Implementa l’interfaccia di paginazione riutilizzabile e collegala alle righe visibili della tabella, inclusi i controlli successivo/precedente e l’intervallo visualizzato. Il lavoro è completo quando i criteri di accettazione sono soddisfatti, incluso il comportamento responsive e una corretta integrazione con il componente Table esistente.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Beginner California Tribal GIS Hackathon
Issue created with ChatGPT models' help¹

Description

Create a reusable Pagination component for the conservation projects table so users can navigate between multiple pages conservation project rows dynamically¹. The component should support standard pagination behavior including next page, previous page, current page display, and configurable rows-per-page functionality².

This issue mainly focuses on implementing the frontend pagination UI, pagination state management, reusable component structure, and integration with the existing Table component³. The Pagination component should remain modular enough to support future backend/API-driven pagination workflows⁴.

Pagination icon specs and additional UI details should be obtained from the Figma design file¹.

Image

Goals

  • Create reusable Pagination component for conservation projects table¹
  • Support next/previous page navigation²
  • Display current page range and page count³
  • Support configurable rows per page (optional/stretch goal)⁴
  • Keep pagination component modular and reusable¹
  • Support integration with filtering and future API pagination²
  • Please make pagination responsive and usable on smaller screens³

Implementation Instructions

  • Create reusable Pagination.tsx, TablePagination.tsx, or similar component under components folder¹
  • Use React + TypeScript + Material UI²
  • Add forward and backward pagination controls³
  • Display current visible rows count (example: 1 - 10 of 100)⁴
  • Integrate pagination state with existing Table component¹
  • Support configurable rows-per-page options like 10, 50, 100 functionality² (optional)
  • Contributors may use useState, useMemo, or parent-managed state³
  • Clicking forward icon should navigate to next page⁴
  • Clicking backward icon should navigate to previous page¹
  • Stretch goal: clicking page numbers directly navigates to selected page²
  • Keep implementation modular for future backend/API pagination integration³
  • Use TypeScript types from types folder if available⁴
  • Use MUI icons/components wherever possible¹
  • Please ask maintainers for Figma access and use exact design details from the Figma file²
  • Please make pagination responsive as much as possible for smaller screens³

Expected Functionalities

Pagination Navigation
  • User clicks forward icon⁴
  • Table navigates to next page¹
  • User clicks backward icon²
  • Table navigates to previous page³
Page Information
  • Current visible row range is displayed⁴
  • Example: 1 - 10 of 100¹
  • Table updates visible rows correctly²
Optional Rows Per Page
  • User may optionally select rows-per-page value³
  • Example values: 10, 50, 100⁴
  • Table updates visible rows dynamically¹
Optional Direct Page Navigation
  • User clicks page number²
  • Table navigates directly to selected page³

Figma Layout Specs

footer
  • width: 1114;¹
  • height: 58;²
  • gap: 32px;³
  • angle: 0 deg;⁴
  • opacity: 1;¹
  • padding-right: 8px;²
  • padding-left: 8px;³
pagination text
  • width: 47;⁴
  • height: 14;¹
  • angle: 0 deg;²
  • opacity: 1;³
  • 1 - 2 of 2;⁴
  • font-family: font family/body;¹
  • font-weight: 400;²
  • font-style: Regular;³
  • font-size: size/Body XS;⁴
  • line-height: 100%;¹
  • letter-spacing: 0px;²
  • text-align: right;³
  • vertical-align: middle;⁴
  • background: #000000DE;¹
forward button
  • type="plain";²
  • color="normal";³
  • disabled="no";⁴
  • size="x-small";¹
  • width: 32;²
  • height: 32;³
  • angle: 0 deg;⁴
  • opacity: 1;¹
  • padding-right: 16px;²
  • padding-left: 16px;³
  • border-radius: 32px;⁴

(similar for back page icon)¹

Suggested Technical Structure (Optional)

Possible component structure:¹

components/table/
 ├── Table.tsx
 ├── Pagination.tsx
 ├── PaginationControls.tsx
 ├── PageIndicator.tsx
 └── RowsPerPageSelector.tsx

Possible pagination state structure:²

paginationState/
 ├── currentPage
 ├── rowsPerPage
 ├── totalRows
 ├── totalPages
 └── visibleRows

Notes

  • Contributors may use MUI Pagination components or custom pagination logic³
  • Keep pagination logic reusable for future backend/API integration⁴
  • Avoid tightly coupling pagination logic directly inside UI rendering¹
  • Future server-side pagination may replace local pagination later²
  • Pagination icon styling/details should follow Figma specifications³
  • Rows-per-page selector and direct page navigation are optional/stretch goals⁴

Acceptance Criteria

  • Pagination component renders correctly¹
  • Forward button navigates to next page²
  • Backward button navigates to previous page³
  • Current visible row count displays correctly⁴
  • Table rows update correctly after pagination changes¹
  • Component uses React + TypeScript + MUI²
  • Code structure is modular and reusable³
  • Component integrates cleanly with existing Table component⁴
  • Pagination interactions remain usable on smaller screens¹

Resources

¹ Material UI Pagination Documentation
² React State Documentation
³ React Rendering Lists Documentation
⁴ Material UI Table Pagination Documentation

Reference Figma Design:
https://www.figma.com/proto/e9z8edludVssFYABGEWsoI/OpenNature-Map--Hackathons-?node[…]g=fixed&starting-point-node-id=1%3A896&page-id=0%3A1&hide-ui=1

Lingua principale
HTML
Stelle
2
Fork
11
Nessuna PR unita negli ultimi 30g

Preparare l'ambiente

Apri in Codespaces

Avvia il container di sviluppo del progetto nel browser, con il tuo account GitHub.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di OpenSourceFellows/map_dashboard_hackathon

Tutte le issue di OpenSourceFellows/map_dashboard_hackathon

Issue simili

Altre issue su Web Dev

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.