Create Filter component

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

---

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

Locate the existing Table component and the components folder, then review the types folder for the conservation project row types. Use the linked Figma design for the filter icon and interaction details, and verify that sorting or filtering updates complete rows consistently across every column and remains usable on smaller screens.