Vue Make Table

This Project is a modified Project from GhitaB

Demo code here is uploaded on Heroku. Click here

Additional Functions On Top of GhitaB’s code

1. change result table’s format (color, background, etc *still developing)
   
2. major change in main.js and app.vue
   
3. able to convert the result table to json
   
4. additional features are designed by me. welcome to modified and change!
5. At the end, i implemented a simple feature that will convert the table to json.

Installation Instruction

1. Git Clone This Repo to Local
   
2. Cd to that directory from terminal
   
3. Ensure vue is downloaded globally
   

npm install -g @vue/cli-init

1. Ensure all dependencies are built
   

npm install

Sample JSON input to alter table

{“headerColor”:”yellow”,”headerBg”:”black”,”cellColor”:”red”}

Inserting input, changing table data, then click enter.

Design

1. Main.js —> App.Vue —> Table-Preview.vue & Editable.vue
   
2. App.vue takes user json input and table input
   
3. Table-Preview.vue generates a table from parent
   
4. Editable.vue keeps table editable before made
   
5. Within App.vue, updateStyleObject is what changed the table setting
   

Deploying on Heroku

1. Read This
   
2. And read This
   
3. I had to combine knowledge from both of these webs to upload this to project on heroku.