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 Table component (rows + columns)

Đang mở
  • Có gì không ổn?
#12 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
Lĩnh vực
design, frontend

Hướng nghiên cứu

Bắt đầu bằng cách xác định thư mục components và kiểm tra xem Table.tsx hoặc Table.jsx, các kiểu dùng chung, theme/styles và trang cha đã tồn tại hay chưa. Xem lại thiết kế Figma được liên kết và hướng dẫn của React về bảng trước khi quyết định các hàng, cột, trình xử lý điều hướng, khả năng responsive và việc mở rộng văn bản tùy chọn sẽ kết hợp với nhau như thế nào. Công việc được xem là hoàn tất khi bảng có thể tái sử dụng đáp ứng các tiêu chí chấp nhận được liệt kê và tích hợp với trang cha.

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 Table component to display saved projects in a structured rows + columns format based on the Figma design¹. This component will primarily focus on implementing the UI layout, spacing, typography, and structure, using either custom styling or libraries like Material UI².

The table should support multiple columns (Project Name, Location, Acreage, Status) and clickable rows that navigate users to the map view³. The component should be built in a modular way using TypeScript types (if available) and should be placed under the components folder for reuse⁴.

Image

Goals

  • Build reusable Table component for conservation projects¹
  • Implement rows and columns as per Figma design²
  • Support clickable project name rows (navigation trigger)³
  • Align UI with exact layout specs and spacing⁴
  • Prepare structure for integration with pagination and filters¹
  • Please make table responsive as much possible for smaller screens
  • Longer text should wrap with see more option to click and stay hidden otherwise. (optional)

Implementation Instructions

  • Create Table.tsx (or .jsx) under components folder¹
  • Define column structure (Project Name, Location, Acreage, Status)²
  • Use TypeScript types from types folder if available³
  • Optionally use Material UI table components or custom implementation⁴
  • Apply styling via theme/styles folder (if available, otherwise inline/basic styles)¹
  • Implement clickable rows for Project Name column²
  • Add placeholder navigation handler (routing can be added later)³
  • Ensure clean separation of header, body, and row components⁴
  • Please make table responsive as much possible for smaller screens
  • Please ask for Figma permissions from maintainer team and use detailed specs from the Figma file.
  • Longer text should wrap with see more option to click and stay hidden otherwise. (optional)

Layout Specs (Figma)

Main Container
  • width: 1146;¹
  • height: 291;²
  • angle: 0 deg;³
  • opacity: 1;⁴
  • padding: 16px;¹
conservation projects
  • width: 1114;¹
  • height: 33;²
  • gap: 10px;³
  • angle: 0 deg;⁴
  • opacity: 1;¹
  • padding-right: 2px;²
  • padding-left: 2px;³
Row, vertical spacer
  • width: 1114;¹
  • height: 24;²
  • angle: 0 deg;³
  • opacity: 1;⁴
Vertical table
  • width: 1114;¹
  • height: 202;²
  • angle: 0 deg;³
  • opacity: 1;⁴
  • border-radius: 16px;¹
  • background: #FFFFFF;²
Vertical body
  • width: 1114;¹
  • height: 144;²
  • angle: 0 deg;³
  • opacity: 1;⁴
  • border-radius: 4px;¹
  • background: #FFFFFF;²
project name column
  • width: 564;¹
  • height: 144;²
  • angle: 0 deg;³
  • opacity: 1;⁴
heading
  • width: 564;¹
  • height: 48;²
  • gap: 10px;³
  • angle: 0 deg;⁴
  • opacity: 1;¹
  • padding-top: 10px;²
  • padding-right: 16px;³
  • padding-bottom: 10px;⁴
  • padding-left: 16px;¹
text in heading
  • width: 510;¹
  • height: 16;²
  • angle: 0 deg;³
  • opacity: 1;⁴
  • font-family: font family/button;¹
  • font-weight: 600;²
  • font-style: SemiBold;³
  • font-size: size/Body SM;⁴
  • line-height: 100%;¹
  • letter-spacing: 0px;²
  • vertical-align: middle;³
  • background: #757575;⁴
filter icon in heading
  • width: 12;¹
  • height: 18;²
  • angle: 0 deg;³
  • opacity: 1;⁴
  • font-family: Font Awesome 5 Pro;¹
  • font-weight: 400;²
  • font-style: Solid;³
  • font-size: 18px;⁴
  • line-height: 100%;¹
  • letter-spacing: 0%;²
  • vertical-align: middle;³
  • background: #00000042;⁴
values in project name column
  • width: 564;¹
  • height: 48;²
  • gap: 10px;³
  • angle: 0 deg;⁴
  • opacity: 1;¹
  • padding-top: 14px;²
  • padding-right: 16px;³
  • padding-bottom: 14px;⁴
  • padding-left: 16px;¹
  • background: #FFFFFF;²
  • box-shadow: 0px -1px 0px 0px #0000001F inset;³

👉 On click:

  • Navigate to: "Ecosystem Map > Bluff > Info";¹
  • Animate: Instant;²
  • animation-duration: 0ms;³
value which is a link
  • width: 532;¹
  • height: 20;²
  • angle: 0 deg;³
  • opacity: 1;⁴
  • Chinle Creek;¹
  • font-family: font family/body;²
  • font-weight: 300;³
  • font-style: Light;⁴
  • font-size: size/Body MD (base);¹
  • line-height: 20px;²
  • letter-spacing: 0px;³
  • vertical-align: middle;⁴
  • background: var(--Link-Text-default, #01579B);¹
location column
  • width: 250;¹
  • height: 144;²
  • angle: 0 deg;³
  • opacity: 1;⁴
Acreage column
  • width: 150;¹
  • height: 144;²
  • angle: 0 deg;³
  • opacity: 1;⁴
Status column
  • width: 150;¹
  • height: 144;²
  • angle: 0 deg;³
  • opacity: 1;⁴
footer
  • width: 1114;¹
  • height: 58;²
  • gap: 32px;³
  • angle: 0 deg;⁴
  • opacity: 1;¹
  • padding-right: 8px;²
  • padding-left: 8px;³
pagination text
  • width: 47;¹
  • height: 14;²
  • angle: 0 deg;³
  • opacity: 1;⁴
  • 1 - 2 of 2;¹
  • font-family: font family/body;²
  • font-weight: 400;³
  • font-style: Regular;⁴
  • font-size: size/Body XS;¹
  • line-height: 100%;²
  • letter-spacing: 0px;³
  • text-align: right;⁴
  • vertical-align: middle;¹
  • background: #000000DE;²
forward button
  • type="plain";¹
  • color="normal";²
  • disabled="no";³
  • size="x-small";⁴
  • width: 32;¹
  • height: 32;²
  • angle: 0 deg;³
  • opacity: 1;⁴
  • padding-right: 16px;¹
  • padding-left: 16px;²
  • border-radius: 32px;³

(similar for back page icon)¹

Acceptance Criteria

  • Table component renders with correct rows and columns¹
  • Layout matches Figma specifications exactly²
  • Project name rows are clickable³
  • Code is modular and reusable⁴
  • Component integrates cleanly with parent page¹
  • Please make table responsive as much possible for smaller screens
  • Longer text should wrap with see more option to click and stay hidden otherwise. (optional)

Resources

¹ https://react.dev/learn/passing-props-to-a-component
² https://react.dev/learn/rendering-lists
³ https://developer.mozilla.org/en-US/docs/Web/CSS/flex
⁴ https://mui.com/material-ui/react-table/

Figma Design (Refer for full details): https://www.figma.com/proto/e9z8edludVssFYABGEWsoI/OpenNature-Map--Hackathons-?node-id=1-1465&viewport=787%2C545%2C0.11&t=Xwc2asfn9Qksi99P-8&scaling=scale-down&content-scaling=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

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ề Design

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.