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

Create Filter component

Abierto
  • ¿Algo no está bien?
#22 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
48/100
Tipo de issue
Nueva funcionalidad
Claridad
Bastante claro
Estado de actividad
Tranquilo
Stack tecnológico
react, typescript
Área
frontend

Línea de trabajo

Localiza el componente Table existente y la carpeta components; después, revisa la carpeta types en busca de los tipos de fila del conservation project. Usa el diseño de Figma enlazado para consultar los detalles del icono de filtro y de la interacción, y verifica que la ordenación o el filtrado actualicen filas completas de forma coherente en todas las columnas y sigan siendo utilizables en pantallas más pequeñas.

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 Filter component for the conservation projects table so users can sort and filter rows dynamically across all table columns¹. The component should support standard ascending/descending sorting interactions and should update all visible table rows consistently whenever a filter or sort action is applied².

This issue mainly focuses on implementing the frontend filtering UI, sorting logic, state management, and reusable component structure³. The Filter component should integrate cleanly with the existing Table component and support future pagination/API integrations⁴.

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

Image

Goals

  • Create reusable Filter component for conservation projects table¹
  • Support ascending and descending sorting²
  • Add filter functionality to all table columns³
  • Ensure rows update consistently after sorting/filtering⁴
  • Keep component modular and reusable¹
  • Support integration with pagination and future API data²
  • Please make filtering behavior responsive and performant for larger datasets³

Implementation Instructions

  • Create reusable Filter.tsx, TableFilter.tsx, or similar component under components folder¹
  • Use React + TypeScript + Material UI²
  • Integrate filter controls into all table columns³
  • Allow sorting in ascending and descending order⁴
  • Clicking filter icon should reorder rows dynamically¹
  • Ensure changes in one column correctly update values/row ordering in all other columns²
  • Use shared table state or parent-managed state for synchronization³
  • Contributors may use useState, useMemo, or context-based state management⁴
  • Keep implementation modular for future backend/API-driven filtering¹
  • 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 filtering behavior responsive as much as possible for smaller screens¹

Expected Functionalities

Column Filtering
  • User clicks filter icon in a column header²
  • Column values sort ascending or descending³
  • Entire table updates consistently based on selected sort⁴
  • Other columns reorder automatically to match row changes¹
Table Synchronization
  • Sorting one column updates all row alignments correctly²
  • Table should not desynchronize column values³
  • Filtering logic should preserve row relationships⁴
Responsive Interaction
  • Filter interactions should remain usable on smaller screens¹
  • Icons and headers should remain accessible and clickable²

Suggested Technical Structure (Optional)

Possible component structure:¹

components/table/
 ├── Table.tsx
 ├── Filter.tsx
 ├── TableHeader.tsx
 ├── TableRow.tsx
 └── SortIcon.tsx

Possible state structure:²

tableState/
 ├── sortColumn
 ├── sortDirection
 ├── filteredRows
 └── visibleRows

Notes

  • Contributors may use Array.sort(), utility helper functions, or memoized sorting logic³
  • Keep filtering logic reusable for future API integration⁴
  • Avoid tightly coupling filter logic directly inside UI rendering¹
  • Future backend filtering or server-side pagination may replace local filtering later²
  • Filter icon styling/details should follow Figma specifications³

Acceptance Criteria

  • Filter component renders correctly in all table columns¹
  • Clicking filter icon applies ascending sort²
  • Clicking filter icon again applies descending sort³
  • Table rows update consistently across all columns⁴
  • Filtering logic does not break row alignment¹
  • Component uses React + TypeScript + MUI²
  • Code structure is modular and reusable³
  • Component integrates cleanly with existing Table component⁴
  • Filtering interactions remain usable on smaller screens¹

Resources

¹ [React Passing Props Documentation](https://react.dev/learn/passing-props-to-a-component?utm_source=chatgpt.com)
² [React Updating Arrays in State](https://react.dev/learn/updating-arrays-in-state?utm_source=chatgpt.com)
³ [Material UI Table Documentation](https://mui.com/material-ui/react-table/?utm_source=chatgpt.com)
⁴ [MDN Array.sort Documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort?utm_source=chatgpt.com)

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.