Vue Spreadsheet
How to create an online spreadsheet with Vue3.Online 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: "ZmQ4NWYyYjVmYTBjMDQwMDA3NjUwZjUwNTA4MDkwYWYzNWQ4OWE3MjQyZjJiZDU1YzM1MjA4OTI5OTEwZDlkMTNiMThkNzQ3YzNjZWI2ZGNjM2MyZGIwNDBmMzZmYzQwYWU1Y2EwOTEyMGE4MzU2M2Q2MjMzMTQ2MTUwNWEzOTIsZXlKdVlXMWxJam9pY0dGMWJDNW9iMlJsYkNJc0ltUmhkR1VpT2pFMk5qQTFNVGd3TURBc0ltUnZiV0ZwYmlJNld5SnFjMmhsYkd3dWJtVjBJaXdpYW5Od2NtVmhaSE5vWldWMExtTnZiU0lzSW1OellpNWhjSEFpTENKMVpTNWpiMjB1WW5JaUxDSjFibWwwWldRdVpXUjFZMkYwYVc5dUlpd2liRzlqWVd4b2IzTjBJbDBzSW5Cc1lXNGlPaUl6SWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luQmhjbk5sY2lJc0luTm9aV1YwY3lJc0ltWnZjbTF6SWl3aWNtVnVaR1Z5SWl3aVptOXliWFZzWVNKZGZRPT0=", }; 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
Source code
<html> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script> <script src="https://jspreadsheet.com/v8/jspreadsheet.js"></script> <script src="https://jsuites.net/v5/jsuites.js"></script> <link rel="stylesheet" href="https://jspreadsheet.com/v8/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> var options = { data:[[]], minDimensions:[8,10], license: 'MjQzZGQ1NmRiOGI2ZmVhNDQ0ZTI3ZjVmZDkzNDcyYjQyOThjZWE0YzIwYTUzZjM1MWU2ZWRmMDg1OWJiMmE0OTMwN2MxNTc1YWE5MTZkZWU1MjZmZGJhMjQxOGI5ZjE5MjM0ZTk2OTE3MmVmMDYxZjBiNWYxYzBiNjMzODk3YTMsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UY3dNak0zTnprNU9Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owWlhJaUxDSmlZWElpTENKMllXeHBaR0YwYVc5dWN5SXNJbk5sWVhKamFDSXNJbkJ5YVc1MElpd2ljMmhsWlhSeklsMHNJbVJsYlc4aU9uUnlkV1Y5', } var vm = new Vue({ el: '#spreadsheet', mounted: function() { let spreadsheet = jspreadsheet(this.$el, options); Object.assign(this, spreadsheet); } }); </script>