Create Table component (rows + columns)

[SAUMILDHANKAR]

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, Date Created, Date Updated) 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 saved 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

---

Implementation Instructions

• Create Table.tsx (or .jsx) under components folder¹
• Define column structure (Project Name, Location, Date Created, Date Updated)²
• 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

---

Layout Specs (Figma)

Main Container

• width: 1146;¹
• height: 291;²
• angle: 0 deg;³
• opacity: 1;⁴
• padding: 16px;¹

---

saved 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;⁴

---

date created column

• width: 150;¹
• height: 144;²
• angle: 0 deg;³
• opacity: 1;⁴

---

date updated 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

---

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/design/eRcnlUKzSsIJv3JcOMddwU/OpenNature-Map?node-id=5771-3944&t=PvHYPjlEBBF151A0-0

---