🔍 1. Search Functionality Flow ✅ Controlled Search Input (Topbar.tsx) Topbar component contains a element.

When user types in the search box, onSearchChange is triggered.

The updated value is sent to the parent (SpreadSheet.tsx) using setSearchQuery.

Code (Topbar.tsx)

type TopbarProps = { onSearchChange: (query: string) => void; };

export default function Topbar({ onSearchChange }: TopbarProps) { return ( <input type="text" placeholder="Search within sheet" onChange={(e) => onSearchChange(e.target.value)} /> ); }

🧠 Search State Handling (SpreadSheet.tsx) Holds searchQuery in its state.

Passes it to Table component as a prop.

const [searchQuery, setSearchQuery] = useState("");

🔽 Table Filters by Search Term (Table.tsx) Filters rows by row.job (case-insensitive).

Also applies status filter (In-process, Complete, etc.).

const filteredRows = rows .filter(row => filter === "" || row.status === mappedStatus) .filter(row => row.job.toLowerCase().includes(searchQuery.toLowerCase()));

🟨 2. Status Filter Functionality Flow ✅ Buttons for Filtering (Table.tsx) Buttons like “Pending”, “Reviewed”, etc., call setFilter with custom string.

Internally, filterRows() converts label to matching row.status.

<button onClick={() => setFilter("Pending")}>Pending

Helper: filterRows.ts (utils)

export function filterRows(rows, filter) { const statusMap = { Pending: "In-process", Reviewed: "Complete", Arrived: "Need to Start", };

const status = statusMap[filter]; return filter ? rows.filter(row => row.status === status) : rows; }

📦 Data Format: rows.ts Each row looks like:

{ job: "Update press kit", submitted: "28-10-2024", status: "Need to Start", submitter: { name: "Irfan Khan" }, url: "www.irfankhanportfolio.com", ... }