React SpreadJS Excel Spreadsheet Javascript proof of concept that supports
- Reference excel data into app
- Reference excel data into app with custom mapping
- Reference app data into excel
As a proof of concept, it contains only the main pieces to accomplish the functionality.
- Land on a view, split it in two vertical sections
- on the LHS have a list of input rows with two fields: "name" and "value"
- on the RHS the user can upload an excel file, which gets rendered in the RHS of the view, preserving the formatting as displayed if the file was opened with excel
- the user can navigate cells of the excel file with arrow keys
- the user can select cell ranges with the fill handle
- the selected values populate the input fields on the LHS
- as the user selects a cell range or updates the selection, the values appear / update live on the LHS of the view, populating the fields
- show as many input rows as needed based on the dynamic size of the cell range
- e.g. if the user selects the range C3:D10, create 8 rows
- via a dropdown for each column, allow the user to decide which excel column maps to what LHS field
- e.g. if the user selects the range C3:D10, let them decide whether column C will map to the "name" field or the "value" field and similarly for column D
- have a new, seperate input on the top of the LHS called "variable"
- the user can input a number in the variable field
- in the RHS spreadsheet, the user can reference the value with a formula e.g. =VARIABLE
- the user can use this value to make calculations over a range of cells
- e.g. cell D3 has the following formula: =C3 * VARIABLE and C3 is a percentage e.g. 10%
- and D3 is dragged all the way to D10 so that the formulae follow the pattern D[N] = C[N] * VARIABLE
- by selecting the range (e.g. C3:D10), the calculated values can be referenced back into the LHS similarly to step 1. and 2.
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.
What things you need to install the software and how to install them
https://nodejs.org/en/
A step by step series of examples that tell you how to get a development env running
Download the NodeJS Project
https://github.com/angelospillos/excel-spreadsheet-javascript
Then install the dependencies
npm i
Then use the following command to run it
npm run start
Load the example excel file provided in the repository spreadsheet-example.xlsx
Do to time constrains there are no automated tests for this system but you can use the APP for manual testing.
- Load an excel file through the import.
- Select a range of the celss
- The selected cells will be shown on the left hand side with their columns.
- Once you select something on the excel file you can see the values into the app
- Updating the value of a selection on the app, it will update the value in the excel file
- Updating the variable on the left view it will create a custom variable in the excel file.
- The value can be referenced in the excel file by typing =VARIABLE()
To Deploy this on a live system follow https://www.netlify.com/blog/2016/07/22/deploy-react-apps-in-less-than-30-seconds/
- Node.js - Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
- SpreadJS - Deliver true Excel-like spreadsheet experiences, fast - with zero dependencies on Exce.
- React - A JavaScript library for building user interfaces.
- Recoil - A state management library for React.
For the versions available, see the tags on this repository.
- Angelos Pillos - (https://www.angelospillos.com)
See also the list of contributors who participated in this project.
This project is licensed under the MIT License - see the LICENSE.md file for details
- Special thanks for the inspiration to Pactio (https://www.pactio.io/)