import React, { useState } from "react"; import { Plus, Trash2, Edit3, Check } from "lucide-react"; const MAX_ITEMS = 5; const MIN_ITEMS = 2; const MAX_FEATURES = 15; const MIN_FEATURES = 1; export default function App() { const [itemNames, setItemNames] = useState(["", ""]); const [features, setFeatures] = useState([ { name: "", details: Array(2).fill("") }, ]); const [editing, setEditing] = useState(false); // Flash for save animation const [flash, setFlash] = useState(false); // Add new item (column) const addItem = () => { if (itemNames.length < MAX_ITEMS) { setItemNames([...itemNames, ""]); setFeatures(features.map(f => ({ ...f, details: [...f.details, ""] }))); } }; // Remove item (column) const removeItem = idx => { if (itemNames.length > MIN_ITEMS) { setItemNames(itemNames.filter((_, i) => i !== idx)); setFeatures(features.map(f => ({ ...f, details: f.details.filter((_, i) => i !== idx), }))); } }; // Add new feature (row) const addFeature = () => { if (features.length < MAX_FEATURES) { setFeatures([ ...features, { name: "", details: Array(itemNames.length).fill("") }, ]); } }; // Remove feature (row) const removeFeature = idx => { if (features.length > MIN_FEATURES) { setFeatures(features.filter((_, i) => i !== idx)); } }; // Handle change on item names const handleItemChange = (idx, val) => { const arr = itemNames.slice(); arr[idx] = val; setItemNames(arr); }; // Handle change on feature names const handleFeatureName = (idx, val) => { const arr = features.slice(); arr[idx] = { ...arr[idx], name: val }; setFeatures(arr); }; // Handle change on detail const handleDetail = (fIdx, iIdx, val) => { const arr = features.slice(); arr[fIdx] = { ...arr[fIdx], details: arr[fIdx].details.map((d, ix) => (ix === iIdx ? val : d)), }; setFeatures(arr); }; // Toggle editing/saving state const handleSave = () => { setEditing(false); setFlash(true); setTimeout(() => setFlash(false), 1000); }; return (

Comparison Table

{/* Comparison Table */}

{itemNames.map((item, idx) => ( ))} {editing && itemNames.length < MAX_ITEMS && ( )} {features.map((f, fIdx) => ( {/* Feature name cell */} {/* Option detail cells */} {itemNames.map((_, iIdx) => ( ))} {/* Row plus cell (editing only) */} {editing && ))} {editing && features.length < MAX_FEATURES && ( )}

Feature	{editing ? ( handleItemChange(idx, e.target.value)} placeholder={`Option ${idx + 1}`} maxLength={32} /> {itemNames.length > MIN_ITEMS && ( )} ) : ( {item \|\| `Option ${idx + 1}`} )}
{editing ? ( handleFeatureName(fIdx, e.target.value)} className="px-2 py-1 w-[90px] rounded bg-slate-700 text-white text-sm" maxLength={32} placeholder={`Feature ${fIdx + 1}`} /> {features.length > MIN_FEATURES && ( )} ) : ( {f.name \|\| `Feature ${fIdx + 1}`} )}	{editing ? ( handleDetail(fIdx, iIdx, e.target.value)} maxLength={40} placeholder="-" /> ) : ( {f.details[iIdx] \|\| "-"} )}	}

{/* Helper tip */} {!editing && (

💡 Tap to start customizing your table. Use for comparing laptops, apartments, jobs, or anything else!

)} {editing && (

✏️ Edit names and values directly. Tap to save.

)}

); }

Feature	{editing ? ( handleItemChange(idx, e.target.value)} placeholder={`Option ${idx + 1}`} maxLength={32} /> {itemNames.length > MIN_ITEMS && ( )} ) : ( {item \|\| `Option ${idx + 1}`} )}
{editing ? ( handleFeatureName(fIdx, e.target.value)} className="px-2 py-1 w-[90px] rounded bg-slate-700 text-white text-sm" maxLength={32} placeholder={`Feature ${fIdx + 1}`} /> {features.length > MIN_FEATURES && ( )} ) : ( {f.name \|\| `Feature ${fIdx + 1}`} )}	{editing ? ( handleDetail(fIdx, iIdx, e.target.value)} maxLength={40} placeholder="-" /> ) : ( {f.details[iIdx] \|\| "-"} )}	}