close
Examples
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/v4/jsuites.js"></script> <link rel="stylesheet" href="https://jspreadsheet.com/v8/jspreadsheet.css" type="text/css" /> <link rel="stylesheet" href="https://jsuites.net/v4/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: 'MTcxY2I2YTVkYmFlZmRiYmQ4ZTU3NmVhOWRiNjRmZGE2YzFiNWNkZDkyZTcxYzQ5M2M0ZjEzYjRjZTZiNGU0ODcwY2NjNGY3ZTg0MmI0ZmY5YjQ4Y2M5ZWMwOGE1YjFmZmYzZjgzNjBlNzVkYjc0NWQzYTcwYmEwMTM4OWM2MTYsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTNOakF3TURZNE1pd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpJaXdpYzJOdmNHVWlPbHNpZGpjaUxDSjJPQ0lzSW5ZNUlpd2lZMmhoY25Seklpd2labTl5YlhNaUxDSm1iM0p0ZFd4aElpd2ljR0Z5YzJWeUlpd2ljbVZ1WkdWeUlpd2lZMjl0YldWdWRITWlMQ0pwYlhCdmNuUWlMQ0ppWVhJaUxDSjJZV3hwWkdGMGFXOXVjeUlzSW5ObFlYSmphQ0pkTENKa1pXMXZJanAwY25WbGZRPT0=', } var vm = new Vue({ el: '#spreadsheet', mounted: function() { let spreadsheet = jspreadsheet(this.$el, options); Object.assign(this, spreadsheet); } }); </script>