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.
-
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.
-
Clone the Repository:
git https://github.com/iCodeCraft/excel-clone-simple.git cd excel-clone-simple
-
Install Dependencies:
npm install
-
Run the Application:
npm run dev
-
Open Your Browser:
Visit http://localhost:5173
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
Watch the demo video below:
-
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.