📊 GridFlow - React Spreadsheet App

GridFlow is a modern, Excel-like spreadsheet application built with React, TypeScript, and TanStack Table v8. It supports real-time editing, dynamic column filtering, sorting, and a clean, responsive UI tailored for data-heavy tasks.

This project is ideal for showcasing frontend design patterns, performance optimizations, and component-based architecture—perfect for FAANG internship resumes or professional portfolios.

---

🧰 Tech Stack & Tools

---

🚀 Features

• ✏️ Live Cell Editing: Click any cell to edit inline, with auto-formatting for smart fields like status and priority
• 📊 Multi-Column Sorting: Custom sorting logic including support for strings, numbers, dates, and priorities
• 👁️ Column Management: Toggle column visibility via dialog interface
• 🔎 Smart Filtering: Quick filters for status using intuitive badges
• 📱 Responsive UI: Optimized for desktop and tablets
• 📌 Sticky Headers: Table headers remain visible while scrolling

---

⚙️ Quick Setup

# 1. Install dependencies
npm install

# 2. Start development server
npm run dev

# 3. Build for production
npm run build

---

📁 Project Structure

src/
├── components/
│   ├── data.ts              # Sample data and types
│   ├── Columns.tsx          # Column definitions
│   ├── EditableCell.tsx     # Cell component
│   ├── SpreadsheetGrid.tsx  # Main spreadsheet logic
│   └── dialogs/             # Sort & visibility dialogs
└── App.tsx                  # App root

---

🧠 Design Decisions

🔧 Performance

• Custom sorting logic for full control over empty rows
• Ref-based cell navigation using Map
• Removed type-casting in favor of TypeScript generics

🪄 UX

• Sticky headers for always-visible context
• Empty rows stick to bottom even after sort
• Value smartifying: "complete" ➝ "Complete", "high" ➝ "High"
• Status shown via visual badge components

⚙️ Technical

• Uses React state (no Redux or Zustand)
• Tailwind for design speed, with slightly larger bundles
• TypeScript in strict mode for early error detection

---

🧪 Common Issues

• ❗ Build fails? Run npm run build to surface TS errors
• 🐢 Slow on big data? For >1000 rows, consider virtualized rendering
• 📱 Mobile view? Not optimized for phones (yet)

---

🌐 Browser Support

Chrome	Firefox	Safari	Edge
✅ 90+	✅ 88+	✅ 14+	✅ 90+

---

🤝 Contributing

1. Fork this repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

✅ Don’t forget to npm run build before submitting to check for type errors.

---

📬 Contact

• 📧 Email: [email protected]
• 🌐 GitHub: CodeCenturian

---

"Built with ❤️ using React, TypeScript, Tailwind CSS, and TanStack Table v8"

---