Hacktoberfest 2026：维护者为十月标记出来的 issue，仍然开放、适合新手。 浏览 Hacktoberfest issue

Create Filter component

未关闭
  • 哪里不对？
#22 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

评估

难度
4/5
预计耗时
3-5 天
新手友好度
48/100
Issue 类型
功能
描述清晰度
基本清楚
活跃度
冷清
技术栈
react, typescript
领域
frontend

调研方向

找到现有的 Table 组件和 components 文件夹，然后检查 types 文件夹中的 conservation project 行类型。使用链接的 Figma 设计了解筛选图标和交互细节，并验证排序或筛选是否会在所有列中一致地更新完整行，以及在较小屏幕上是否仍然易用。

由索引模型根据 Issue 内容生成。

描述

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

主要语言
HTML
星标
2
派生
11
30 天内没有已合并 PR

环境准备

在 Codespaces 中打开

在浏览器里用你自己的 GitHub 账号启动这个项目的开发容器。

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

OpenSourceFellows/map_dashboard_hackathon 的其他 Issue

查看 OpenSourceFellows/map_dashboard_hackathon 的全部 Issue

相似的 Issue

更多 Web Dev Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。