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

Create Filter component

Aperta
  • Qualcosa non va?
#22 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
48/100
Tipo di issue
Funzionalità
Chiarezza
Abbastanza chiara
Stato di attività
Tranquilla
Stack tecnologico
react, typescript
Ambito
frontend

Direzione di ricerca

Individua il componente Table esistente e la cartella components, quindi esamina la cartella types per i tipi di riga del conservation project. Usa il design Figma collegato per i dettagli sull’icona del filtro e sull’interazione, e verifica che l’ordinamento o il filtraggio aggiorni righe complete in modo coerente in tutte le colonne e rimanga utilizzabile sugli schermi più piccoli.

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 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

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.