Skip to content

Commit 559b69c

Browse files
vinoth-Kumar-Svinoth-Kumar-S
authored
Vue Spreadsheet Data Binding sample
Vue Spreadsheet Data Binding sample
1 parent 7288cb9 commit 559b69c

File tree

11 files changed

+379
-1
lines changed

11 files changed

+379
-1
lines changed

‎README.md

+35-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,36 @@
1-
# how-to-bind-data-to-the-vue-spreadsheet-component
1+
# How to Bind Data to the Vue Spreadsheet Component
2+
23
A quick-start project that shows how to bind local and remote data to the Syncfusion Vue spreadsheet component. This project contains simple code to bind data to the individual cells in a sheet and change the data source dynamically with a button click.
4+
5+
The databinding documentation for the Syncfusion Vue Spreadsheet component:
6+
https://ej2.syncfusion.com/vue/documentation/spreadsheet/data-binding
7+
8+
Check out this online example of data binding in the Syncfusion Vue Spreadsheet component:
9+
https://ej2.syncfusion.com/vue/demos/#/bootstrap5/spreadsheet/cell-data-binding.html
10+
11+
The getting started documentation for the Syncfusion Vue Spreadsheet component:
12+
https://ej2.syncfusion.com/vue/documentation/spreadsheet/vue-3-getting-started
13+
14+
Check out this online example of the quick info template in the Syncfusion Vue Spreadsheet component:
15+
https://ej2.syncfusion.com/vue/demos/#/material3/spreadsheet/default.html
16+
17+
The Vue Spreadsheet Getting Started video:
18+
https://www.youtube.com/watch?v=d9ZoSNNinpQ
19+
20+
Tutorial video: https://www.syncfusion.com/tutorial-videos
21+
22+
## Project prerequisites
23+
24+
### Vue 3 + Vite
25+
26+
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
27+
28+
### Recommended IDE Setup
29+
30+
- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
31+
32+
33+
## How to run this application?
34+
35+
To run this application, you need to clone the `how-to-bind-data-to-the-vue-spreadsheet-component` repository and then open it in Visual Studio Code. Now, simply install all the necessary packages into your current project using the `npm install` command and run your project using the `npm run dev` command.
36+

‎index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + Vue</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.js"></script>
12+
</body>
13+
</html>

‎package.json

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"name": "myvueapp",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vite build",
9+
"preview": "vite preview"
10+
},
11+
"dependencies": {
12+
"@syncfusion/ej2-vue-buttons": "^24.2.3",
13+
"@syncfusion/ej2-vue-spreadsheet": "^24.2.4",
14+
"vue": "^3.3.11"
15+
},
16+
"devDependencies": {
17+
"@vitejs/plugin-vue": "^4.5.2",
18+
"vite": "^5.0.8"
19+
}
20+
}

‎public/vite.svg

+1
Loading

‎src/App.vue

+132
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
<script>
2+
import { SpreadsheetComponent, SheetsDirective, SheetDirective,
3+
RangesDirective, RangeDirective, ColumnsDirective,
4+
ColumnDirective, RowsDirective, RowDirective, CellsDirective,
5+
CellDirective, getFormatFromType } from '@syncfusion/ej2-vue-spreadsheet';
6+
import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data'; // Remote data binding
7+
import {defaultData} from './default.json'; // Local data binding
8+
import {ButtonComponent} from '@syncfusion/ej2-vue-buttons';
9+
export default{
10+
components: {
11+
'ejs-spreadsheet': SpreadsheetComponent,
12+
'e-sheets': SheetsDirective,
13+
'e-sheet': SheetDirective,
14+
'e-ranges': RangesDirective,
15+
'e-range': RangeDirective,
16+
'e-columns': ColumnsDirective,
17+
'e-column': ColumnDirective,
18+
'e-rows': RowsDirective,
19+
'e-row': RowDirective,
20+
'e-cells': CellsDirective,
21+
'e-cell': CellDirective,
22+
'ejs-button': ButtonComponent
23+
},
24+
data(){
25+
return{
26+
// data: new DataManager({
27+
// // Remote service url
28+
// url: "https://services.syncfusion.com/vue/production/api/Orders",
29+
// adaptor: new CustomAdaptor(),
30+
// crossDomain: true,
31+
// }),
32+
customWidth: 130,
33+
currencyFormat: getFormatFromType("Currency")
34+
}
35+
},
36+
methods: {
37+
created: function() {
38+
var spreadsheet = this.$refs.spreadsheet;
39+
spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:F1');
40+
},
41+
// btnClk: function(){
42+
// this.$refs.spreadsheet.ej2Instances.sheets[0].ranges[0].dataSource = defaultData;
43+
// }
44+
}
45+
}
46+
</script>
47+
48+
<template>
49+
<div>
50+
<!-- <ejs-button v-on:click="btnClk" style="margin: 5px;">Load Data</ejs-button> -->
51+
<!-- <e-ranges> // Add inside e-sheets to render remote data
52+
<e-range :dataSource="data"></e-range>
53+
</e-ranges> -->
54+
<ejs-spreadsheet ref="spreadsheet" :created="created">
55+
<e-sheets>
56+
<e-sheet name="Monthly Budget">
57+
<e-rows>
58+
<e-row>
59+
<e-cells>
60+
<e-cell value="Category"></e-cell>
61+
<e-cell value="Planned cost"></e-cell>
62+
<e-cell value="Actual cost"></e-cell>
63+
</e-cells>
64+
</e-row>
65+
<e-row>
66+
<e-cells>
67+
<e-cell value="Food"></e-cell>
68+
<e-cell value="$7000"></e-cell>
69+
<e-cell value="$8120"></e-cell>
70+
</e-cells>
71+
</e-row>
72+
<e-row>
73+
<e-cells>
74+
<e-cell value="Loan"></e-cell>
75+
<e-cell value="$1500"></e-cell>
76+
<e-cell value="$1500"></e-cell>
77+
</e-cells>
78+
</e-row>
79+
<e-row>
80+
<e-cells>
81+
<e-cell value="Medical"></e-cell>
82+
<e-cell value="$300"></e-cell>
83+
<e-cell value="$0"></e-cell>
84+
</e-cells>
85+
</e-row>
86+
<e-row>
87+
<e-cells>
88+
<e-cell value="Clothing"></e-cell>
89+
<e-cell value="$400"></e-cell>
90+
<e-cell value="$140"></e-cell>
91+
</e-cells>
92+
</e-row>
93+
<e-row>
94+
<e-cells>
95+
<e-cell value="Education"></e-cell>
96+
<e-cell value="$900"></e-cell>
97+
<e-cell value="$750"></e-cell>
98+
</e-cells>
99+
</e-row>
100+
<e-row>
101+
<e-cells>
102+
<e-cell value="Insurance"></e-cell>
103+
<e-cell value="$30"></e-cell>
104+
<e-cell value="$30"></e-cell>
105+
</e-cells>
106+
</e-row>
107+
</e-rows>
108+
<e-columns>
109+
<e-column :width="customWidth"></e-column>
110+
<e-column :width="customWidth"></e-column>
111+
<e-column :width="customWidth"></e-column>
112+
<e-column :width="customWidth"></e-column>
113+
<e-column :width="customWidth"></e-column>
114+
<e-column :width="customWidth"></e-column>
115+
</e-columns>
116+
</e-sheet>
117+
</e-sheets>
118+
</ejs-spreadsheet>
119+
</div>
120+
</template>
121+
122+
<style>
123+
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
124+
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
125+
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
126+
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
127+
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
128+
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
129+
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
130+
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
131+
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
132+
</style>

‎src/assets/vue.svg

+1
Loading

‎src/components/HelloWorld.vue

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<script setup>
2+
import { ref } from 'vue'
3+
4+
defineProps({
5+
msg: String,
6+
})
7+
8+
const count = ref(0)
9+
</script>
10+
11+
<template>
12+
<h1>{{ msg }}</h1>
13+
14+
<div class="card">
15+
<button type="button" @click="count++">count is {{ count }}</button>
16+
<p>
17+
Edit
18+
<code>components/HelloWorld.vue</code> to test HMR
19+
</p>
20+
</div>
21+
22+
<p>
23+
Check out
24+
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
25+
>create-vue</a
26+
>, the official Vue + Vite starter
27+
</p>
28+
<p>
29+
Install
30+
<a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
31+
in your IDE for a better DX
32+
</p>
33+
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
34+
</template>
35+
36+
<style scoped>
37+
.read-the-docs {
38+
color: #888;
39+
}
40+
</style>

‎src/default.json

+124
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
{
2+
"defaultData": [
3+
{
4+
"Customer Name": "Romona Heaslip",
5+
"Model": "Taurus",
6+
"Color": "Aquamarine",
7+
"Payment Mode": "Debit Card",
8+
"Delivery Date": "07/11/2015",
9+
"Amount": "8529.22"
10+
},
11+
{
12+
"Customer Name": "Clare Batterton",
13+
"Model": "Sparrow",
14+
"Color": "Pink",
15+
"Payment Mode": "Cash On Delivery",
16+
"Delivery Date": "7/13/2016",
17+
"Amount": "17866.19"
18+
},
19+
{
20+
"Customer Name": "Eamon Traise",
21+
"Model": "Grand Cherokee",
22+
"Color": "Blue",
23+
"Payment Mode": "Net Banking",
24+
"Delivery Date": "09/04/2015",
25+
"Amount": "13853.09"
26+
},
27+
{
28+
"Customer Name": "Julius Gorner",
29+
"Model": "GTO",
30+
"Color": "Aquamarine",
31+
"Payment Mode": "Credit Card",
32+
"Delivery Date": "12/15/2017",
33+
"Amount": "2338.74"
34+
},
35+
{
36+
"Customer Name": "Jenna Schoolfield",
37+
"Model": "LX",
38+
"Color": "Yellow",
39+
"Payment Mode": "Credit Card",
40+
"Delivery Date": "10/08/2014",
41+
"Amount": "9578.45"
42+
},
43+
{
44+
"Customer Name": "Marylynne Harring",
45+
"Model": "Catera",
46+
"Color": "Green",
47+
"Payment Mode": "Cash On Delivery",
48+
"Delivery Date": "7/01/2017",
49+
"Amount": "19141.62"
50+
},
51+
{
52+
"Customer Name": "Vilhelmina Leipelt",
53+
"Model": "7 Series",
54+
"Color": "Goldenrod",
55+
"Payment Mode": "Credit Card",
56+
"Delivery Date": "12/20/2015",
57+
"Amount": "6543.30"
58+
},
59+
{
60+
"Customer Name": "Barby Heisler",
61+
"Model": "Corvette",
62+
"Color": "Red",
63+
"Payment Mode": "Credit Card",
64+
"Delivery Date": "11/24/2014",
65+
"Amount": "13035.06"
66+
},
67+
{
68+
"Customer Name": "Karyn Boik",
69+
"Model": "Regal",
70+
"Color": "Indigo",
71+
"Payment Mode": "Debit Card",
72+
"Delivery Date": "05/12/2014",
73+
"Amount": "18488.80"
74+
},
75+
{
76+
"Customer Name": "Jeanette Pamplin",
77+
"Model": "S4",
78+
"Color": "Fuscia",
79+
"Payment Mode": "Net Banking",
80+
"Delivery Date": "12/30/2014",
81+
"Amount": "12317.04"
82+
},
83+
{
84+
"Customer Name": "Cristi Espinos",
85+
"Model": "TL",
86+
"Color": "Aquamarine",
87+
"Payment Mode": "Credit Card",
88+
"Delivery Date": "12/18/2013",
89+
"Amount": "6230.13"
90+
},
91+
{
92+
"Customer Name": "Issy Humm",
93+
"Model": "Club Wagon",
94+
"Color": "Pink",
95+
"Payment Mode": "Cash On Delivery",
96+
"Delivery Date": "02/02/2015",
97+
"Amount": "9709.49"
98+
},
99+
{
100+
"Customer Name": "Tuesday Fautly",
101+
"Model": "V8 Vantage",
102+
"Color": "Crimson",
103+
"Payment Mode": "Debit Card",
104+
"Delivery Date": "11/19/2014",
105+
"Amount": "9766.10"
106+
},
107+
{
108+
"Customer Name": "Rosemaria Thomann",
109+
"Model": "Caravan",
110+
"Color": "Violet",
111+
"Payment Mode": "Net Banking",
112+
"Delivery Date": "02/08/2014",
113+
"Amount": "7685.49"
114+
},
115+
{
116+
"Customer Name": "Lyell Fuentez",
117+
"Model": "Bravada",
118+
"Color": "Violet",
119+
"Payment Mode": "Debit Card",
120+
"Delivery Date": "08/05/2016",
121+
"Amount": "18012.45"
122+
}
123+
]
124+
}

‎src/main.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { createApp } from 'vue'
2+
import './style.css'
3+
import App from './App.vue'
4+
import { registerLicense } from '@syncfusion/ej2-base';
5+
registerLicense("Enter your license");
6+
createApp(App).mount('#app')

‎src/style.css

Whitespace-only changes.

‎vite.config.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { defineConfig } from 'vite'
2+
import vue from '@vitejs/plugin-vue'
3+
4+
// https://vitejs.dev/config/
5+
export default defineConfig({
6+
plugins: [vue()],
7+
})

0 commit comments

Comments
 (0)