Skip to content

iCodeCraft/excel-clone-simple

Repository files navigation

Excel Clone Simple

Excel Clone Simple is a lightweight React-based Excel clone that demonstrates key concepts such as virtualizing large tables and basic cell editing without using any third-party libraries.


Overview

  • Virtualization:
    Only renders the visible portion of a huge table to save resources.

  • Cell Editing:
    Double-click a cell to edit its content. Changes are saved on Enter or when focus is lost.

  • Debug Panel:
    A small panel shows the currently visible row and column range and the number of rendered cells.


How to Run

  1. Clone the Repository:

    git https://github.com/iCodeCraft/excel-clone-simple.git
    cd excel-clone-simple
  2. Install Dependencies:

    npm install
  3. Run the Application:

    npm run dev
  4. Open Your Browser:

    Visit http://localhost:5173


Project Structure

excel-clone-simple/
├── public/           # Static assets
├── src/              # Source code
│   ├── components/   # React components (Cell, InfoBox)
│   ├── constants.js  # constants
│   ├── utilities.js  # Helper functions
│   ├── App.jsx       # Main app component
│   └── main.jsx      # App entry point
├── package.json      # Dependencies & scripts
└── README.md         # This documentation

Video Demo

Watch the demo video below:

Excel Clone Simple


Notes

  • Simplicity by Design:
    The project avoids third-party libraries for clarity and ease of understanding.

  • Extensibility:
    It can be enhanced with features like formulas, frozen headers, and advanced styling as needed.

About

This is a simplified clone of Excel built with React.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published