Skip to content

Commit 0eb67f6

Browse files
vinoth-Kumar-Svinoth-Kumar-S
authored
Adding Vue Spreadsheet getting started sample
Adding Vue Spreadsheet getting started sample
1 parent 84922da commit 0eb67f6

File tree

11 files changed

+216
-1
lines changed

11 files changed

+216
-1
lines changed

‎README.md

+26-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,27 @@
1-
# getting-started-with-the-vue-spreadsheet-component
1+
# Getting Started with the Vue Spreadsheet Component
2+
23
A quick-start project that helps you create and configure the Syncfusion Vue Spreadsheet component. This project contains code snippets for data binding, as well as importing and exporting Excel files from the Spreadsheet.
4+
5+
The getting started documentation for the Syncfusion Vue Spreadsheet component:
6+
https://ej2.syncfusion.com/vue/documentation/spreadsheet/vue-3-getting-started
7+
8+
Check out this online example of the quick info template in the Syncfusion Vue Spreadsheet component:
9+
https://ej2.syncfusion.com/vue/demos/#/material3/spreadsheet/default.html
10+
11+
Tutorial video: https://www.syncfusion.com/tutorial-videos
12+
13+
## Project prerequisites
14+
15+
### Vue 3 + Vite
16+
17+
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.
18+
19+
### Recommended IDE Setup
20+
21+
- [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).
22+
23+
24+
## How to run this application?
25+
26+
To run this application, you need to clone the `getting-started-with-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.
27+

‎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

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
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-spreadsheet": "^24.1.45",
13+
"vue": "^3.3.11"
14+
},
15+
"devDependencies": {
16+
"@vitejs/plugin-vue": "^4.5.2",
17+
"vite": "^5.0.8"
18+
}
19+
}

‎public/vite.svg

+1
Loading

‎src/App.vue

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<script>
2+
import { SpreadsheetComponent, SheetsDirective, SheetDirective,
3+
RangesDirective, RangeDirective, ColumnsDirective,
4+
ColumnDirective } from '@syncfusion/ej2-vue-spreadsheet';
5+
import datasource from './default.json';
6+
export default{
7+
components: {
8+
'ejs-spreadsheet': SpreadsheetComponent,
9+
'e-sheets': SheetsDirective,
10+
'e-sheet': SheetDirective,
11+
'e-ranges': RangesDirective,
12+
'e-range': RangeDirective,
13+
'e-columns': ColumnsDirective,
14+
'e-column': ColumnDirective
15+
},
16+
data(){
17+
return{
18+
data: datasource.defaultData,
19+
customWidth: 130,
20+
openUrl: 'https://services.syncfusion.com/vue/production/api/spreadsheet/open',
21+
saveUrl: 'https://services.syncfusion.com/vue/production/api/spreadsheet/save'
22+
}
23+
}
24+
}
25+
</script>
26+
27+
<template>
28+
<div>
29+
<ejs-spreadsheet :openUrl="openUrl" :saveUrl="saveUrl">
30+
<e-sheets>
31+
<e-sheet>
32+
<e-columns>
33+
<e-column :width="customWidth"></e-column>
34+
<e-column :width="customWidth"></e-column>
35+
<e-column :width="customWidth"></e-column>
36+
<e-column :width="customWidth"></e-column>
37+
<e-column :width="customWidth"></e-column>
38+
<e-column :width="customWidth"></e-column>
39+
</e-columns>
40+
<e-ranges>
41+
<e-range :dataSource="data"></e-range>
42+
</e-ranges>
43+
</e-sheet>
44+
</e-sheets>
45+
</ejs-spreadsheet>
46+
</div>
47+
</template>
48+
49+
<style>
50+
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
51+
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
52+
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
53+
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
54+
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
55+
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
56+
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
57+
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
58+
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
59+
</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

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
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+
}

‎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 key");
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)