Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Create Pagination component

Abierto
  • ¿Algo no está bien?
#23 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
52/100
Tipo de issue
Nueva funcionalidad
Claridad
Bastante claro
Estado de actividad
Tranquilo
Stack tecnológico
react, typescript
Área
frontend, web-dev

Línea de trabajo

Comienza localizando el componente Table existente y la estructura components/table sugerida en la issue; después, revisa la referencia de Figma y la documentación de Material UI table-pagination. Implementa la UI de paginación reutilizable y conéctala con las filas visibles de la tabla, incluidos los controles siguiente/anterior y el rango mostrado. El trabajo estará terminado cuando se cumplan los criterios de aceptación, incluido el comportamiento responsive y una integración limpia con el componente Table existente.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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

Lenguaje dominante
HTML
Estrellas
2
Forks
11
Sin PR fusionados en 30 d

Preparar el entorno

Abrir en Codespaces

Inicia el contenedor de desarrollo del proyecto en tu navegador, con tu propia cuenta de GitHub.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de OpenSourceFellows/map_dashboard_hackathon

Todos los issues de OpenSourceFellows/map_dashboard_hackathon

Issues similares

Más issues de Web Dev

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.