Vue Spreadsheet
Vue3 Examples
How to create an online spreadsheet with Vue3. Vue3 spreadsheet with actions Vue3 spreadsheet
Source
<template>
<Jspreadsheet :options="Options" />
</template>
<script>
import Jspreadsheet from "./components/Jspreadsheet";
export default {
components: {
Jspreadsheet,
},
setup() {
const Options = {
worksheets: [
{
search: true,
data: [
[42, 42, 42, 42],
[42, 42, 42, 42],
],
columns: [
{ title: "First Column", width: 100 },
{ title: "Second Column", width: 150 },
{ title: "Third Column", width: 200 },
{ title: "Fourth Column", width: 250 },
],
},
],
license: "OThlMjJkYjFhNDljZjhjYWEzZTQ1ZWQwYWY4MjczYmQxMGZkMzZkYTlkNmYwMmI5MzZmOGJiZmI2YjE0OWFhMDdjYmNkZGUxZWQzMWI4YTIwZDA3NzJmMjI2YWI3Y2M3NzIxNmE4OTM1N2QxNzUwZjBlZjk0YmQ5MTNmZGNiNWYsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNd09EYzNPRE0zTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==",
};
return { Options };
},
};
</script>
<template>
<div ref="sheetEl" />
</template>
<script>
import { ref, onMounted } from "vue";
import jspreadsheet from "jspreadsheet";
import "jspreadsheet/dist/jspreadsheet.css";
import "jsuites/dist/jsuites.css";
export default {
name: "Jspreadsheet",
props: {
options: {
type: Object,
require: true,
},
},
setup(props) {
const options = props.options ? { ...props.options } : {};
const sheetEl = ref(null);
onMounted(() => {
jspreadsheet(sheetEl.value, options);
});
return { sheetEl };
},
};
</script>
How to create an online spreadsheet
Create a web-based spreadsheet using Vue and Jspreadsheet.
See a full example on codesandbox
Get a source code of a sample Vue project
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://jspreadsheet.com/v9/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v9/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
<div id="spreadsheet"></div>
<br>
<input type="button" value="Add new row" onclick="vm.insertRow()" />
<script>
let options = {
data:[[]],
minDimensions:[8,10],
license: 'OThlMjJkYjFhNDljZjhjYWEzZTQ1ZWQwYWY4MjczYmQxMGZkMzZkYTlkNmYwMmI5MzZmOGJiZmI2YjE0OWFhMDdjYmNkZGUxZWQzMWI4YTIwZDA3NzJmMjI2YWI3Y2M3NzIxNmE4OTM1N2QxNzUwZjBlZjk0YmQ5MTNmZGNiNWYsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNd09EYzNPRE0zTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==',
}
let vm = new Vue({
el: '#spreadsheet',
mounted: function() {
let spreadsheet = jspreadsheet(this.$el, options);
Object.assign(this, spreadsheet);
}
});
</script>