Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Create Table component (rows + columns)

Aperta
  • Qualcosa non va?
#12 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
48/100
Tipo di issue
Funzionalità
Chiarezza
Abbastanza chiara
Stato di attività
Tranquilla
Stack tecnologico
react
Ambito
design, frontend

Direzione di ricerca

Inizia individuando la cartella components e verificando se esistono già Table.tsx o Table.jsx, i tipi condivisi, theme/styles e la pagina padre. Esamina il design Figma collegato e le linee guida di React per le tabelle prima di decidere come si integrano righe, colonne, gestore della navigazione, responsività ed espansione opzionale del testo. Il lavoro è completato quando la tabella riutilizzabile soddisfa i criteri di accettazione elencati e si integra con la relativa pagina padre.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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

Lingua principale
HTML
Stelle
2
Fork
11
Nessuna PR unita negli ultimi 30g

Preparare l'ambiente

Apri in Codespaces

Avvia il container di sviluppo del progetto nel browser, con il tuo account GitHub.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di OpenSourceFellows/map_dashboard_hackathon

Tutte le issue di OpenSourceFellows/map_dashboard_hackathon

Issue simili

Altre issue su Design

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.