Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

Create Filter component

Đang mở
  • Có gì không ổn?
#22 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
48/100
Loại issue
Tính năng
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Ít trao đổi
Công nghệ
react, typescript
Lĩnh vực
frontend

Hướng nghiên cứu

Xác định component Table hiện có và thư mục components, sau đó xem xét thư mục types để tìm các kiểu hàng của conservation project. Sử dụng thiết kế Figma được liên kết cho biểu tượng bộ lọc và các chi tiết tương tác, đồng thời xác minh rằng việc sắp xếp hoặc lọc cập nhật các hàng đầy đủ một cách nhất quán trên mọi cột và vẫn có thể sử dụng được trên các màn hình nhỏ hơn.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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

Ngôn ngữ chính
HTML
Star
2
Fork
11
Không có pull request nào được merge trong 30 ngày

Chuẩn bị môi trường

Mở trong Codespaces

Khởi chạy dev container của dự án ngay trên trình duyệt, bằng tài khoản GitHub của bạn.

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của OpenSourceFellows/map_dashboard_hackathon

Tất cả issue của OpenSourceFellows/map_dashboard_hackathon

Issue tương tự

Thêm issue về Web Dev

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.