Create Table component (rows + columns)

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⁴.

---

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

Start by locating the components folder and checking whether Table.tsx or Table.jsx, shared types, theme/styles, and the parent page already exist. Review the linked Figma design and the React table guidance before deciding how the rows, columns, navigation handler, responsiveness, and optional text expansion fit together. Done means the reusable table meets the listed acceptance criteria and integrates with its parent page.