Create Filter component

[SAUMILDHANKAR]

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:
[OpenNature Map Figma Design](https://www.figma.com/design/eRcnlUKzSsIJv3JcOMddwU/OpenNature-Map?node-id=5771-3944&t=PvHYPjlEBBF151A0-0&utm_source=chatgpt.com)