Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Create Table component (rows + columns)

Abierto
  • ¿Algo no está bien?
#12 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
48/100
Tipo de issue
Nueva funcionalidad
Claridad
Bastante claro
Estado de actividad
Tranquilo
Stack tecnológico
react
Área
design, frontend

Línea de trabajo

Empieza por localizar la carpeta components y comprobar si ya existen Table.tsx o Table.jsx, los tipos compartidos, theme/styles y la página principal. Revisa el diseño de Figma enlazado y las directrices de React para tablas antes de decidir cómo encajan las filas, las columnas, el controlador de navegación, la adaptación responsive y la expansión opcional del texto. Se considera completado cuando la tabla reutilizable cumple los criterios de aceptación indicados y se integra con su página principal.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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

Lenguaje dominante
HTML
Estrellas
2
Forks
11
Sin PR fusionados en 30 d

Preparar el entorno

Abrir en Codespaces

Inicia el contenedor de desarrollo del proyecto en tu navegador, con tu propia cuenta de GitHub.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de OpenSourceFellows/map_dashboard_hackathon

Todos los issues de OpenSourceFellows/map_dashboard_hackathon

Issues similares

Más issues de Design

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.