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: "NTgwZGE5MWRjZGM0YzBkZGE3MTAxMzViYThlY2UwMjZmZGI4YmU2ODc3Yjc0OGYyNjk1MjY4ZmQ2ZmUyYTE0ODAyYTdlYzk0OWE4YWUxYTE5ZmM1YjQ2ZmIxYWU5YjE2OWZhNzFmOTZiZDJhZGJhYjYzMzcyY2QwNDM1OTEwMzIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVMk56a3lPVEEzTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5",
};
return { Options };
},
};
</script>
<template>
<div ref="sheetEl"/>
</template>
<script>
import {ref, onMounted} from "content/docs/v9/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: 'NTgwZGE5MWRjZGM0YzBkZGE3MTAxMzViYThlY2UwMjZmZGI4YmU2ODc3Yjc0OGYyNjk1MjY4ZmQ2ZmUyYTE0ODAyYTdlYzk0OWE4YWUxYTE5ZmM1YjQ2ZmIxYWU5YjE2OWZhNzFmOTZiZDJhZGJhYjYzMzcyY2QwNDM1OTEwMzIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpVMk56a3lPVEEzTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0p6ZEdGamEySnNhWFI2TG1sdklpd2lkMlZpWTI5dWRHRnBibVZ5TG1sdklpd2lkMlZpSWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpOQ0lzSW5OamIzQmxJanBiSW5ZM0lpd2lkamdpTENKMk9TSXNJbll4TUNJc0luWXhNU0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklpd2lZMnhwWlc1MElpd2ljMlZ5ZG1WeUlpd2ljMmhoY0dWeklpd2labTl5YldGMElsMHNJbVJsYlc4aU9uUnlkV1Y5',
}
let vm = new Vue({
el: '#spreadsheet',
mounted: function() {
let spreadsheet = jspreadsheet(this.$el, options);
Object.assign(this, spreadsheet);
}
});
</script>