Create Filter component
まだ誰も着手していません。
評価
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 初心者へのやさしさ
- 48/100
- issue の種類
- 機能追加
- 明瞭さ
- おおむね明確
- 活発さ
- 静か
- 技術スタック
- react, typescript
- 領域
- frontend
調査の方向性
既存の Table コンポーネントと components フォルダーを特定し、次に types フォルダーを確認して conservation project の行の型を調べます。フィルターアイコンとインタラクションの詳細については、リンクされた Figma デザインを使用し、ソートまたはフィルタリングによってすべての列で完全な行が一貫して更新され、小さい画面でも引き続き使いやすいことを確認します。
索引モデルが issue の本文から書いたものです。
説明
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
- 主要言語
- HTML
- スター
- 2
- フォーク
- 11
- PR マージ指標
- 30日以内にマージされた PR はありません
環境構築
このプロジェクトの開発コンテナを、あなたの GitHub アカウントでブラウザ上に起動します。
- Dockerfile・Docker Compose ファイルなし
- プルリクエストのテンプレートあり
- コントリビューションガイドを読む
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
OpenSourceFellows/map_dashboard_hackathon のほかの issue
-
California Tribal GIS Hackathon Intermediate
難易度 2/5 半日 初心者へのやさしさ 68/100
-
California Tribal GIS Hackathon Intermediate
難易度 3/5 1〜2日 初心者へのやさしさ 68/100
-
Advanced California Tribal GIS Hackathon
難易度 4/5 3〜5日 初心者へのやさしさ 45/100
-
Advanced California Tribal GIS Hackathon
難易度 3/5 1〜2日 初心者へのやさしさ 48/100
-
Advanced California Tribal GIS Hackathon
難易度 4/5 3〜5日 初心者へのやさしさ 45/100
OpenSourceFellows/map_dashboard_hackathon の issue をすべて見る
似ている issue
-
bug DUP Reservations
難易度 2/5 1〜3時間 初心者へのやさしさ 62/100
bcgov/reserve-rec-public#952 ·
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 68/100
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 68/100
daufderheide/racecoordinator_ai#948 ·
メンテナーはふだん 1 日以内に返信
-
chore good first issue low small Tech debt
難易度 2/5 1〜3時間 初心者へのやさしさ 82/100
メンテナーはふだん 1 日以内に返信
-
bug documentation
難易度 2/5 1〜3時間 初心者へのやさしさ 88/100
MetricsHub/winrm-java#202 ·
メンテナーはふだん 1 日以内に返信