Vue Spreadsheet
Introducing the new Vue wrapper for Jspreadsheet. The advanced data grid solution with intuitive spreadsheet-like controls. The Vue wrapper provides streamlined integration with easy implementation and customization options.
Updates
From version 11, please import the CSS files as below.
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";
Documentation
Using the Vue Data Grid Wrapper
First install the JSS data grid vue wrapper
$ npm install @jspreadsheet/vue
Create your first JSS vue data grid
How to create a web-based spreadsheet using the Jspreadsheet Vue Wrapper.
<template>
<Spreadsheet ref="spreadsheet" :license="license">
<Worksheet :data="data" :columns="columns" />
</Spreadsheet>
<input type="button" value="getData" @click="getData()" />
</template>
<script>
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";
import "jsuites/dist/jsuites.css";
import "jspreadsheet/dist/jspreadsheet.css";
const license = 'MjBjNDJiZjY4NDgyMWVhMmI1ZTM4NWE2MTdkNzZkMzNlMDg0NDkzNmE1Y2NjY2Y2ODE4MDVmNDNiYWEzMDQxY2FmNzk3ZDBjZmI5ZmRmYTdkYmMxNGUwNzNlN2IyYTAwNTEzOGI1ZDEwMDNhYjg0MmQ2NjljZWI1NDJiZWUwOGUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpFek5qa3pOalExTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
export default {
components: {
Spreadsheet,
Worksheet,
},
methods: {
getData() {
console.log(this.$refs.spreadsheet.current[0].getData());
}
},
data() {
// Worksheet data
const data = [
["US", "Cheese", "2019-02-12"],
["CA", "Apples", "2019-03-01"],
["CA", "Carrots", "2018-11-10"],
["BR", "Oranges", "2019-01-12"],
]
// Columns
const columns = [
{ width: "300px" },
{ width: "200px" },
{ width: "200px" }
]
return {
data,
columns,
license,
}
}
}
</script>
Using the library
The example below show an example of Jspreadsheet without a dedicated wrapper. Developers can use the library directly for more flexibility and customization in their implementation.
Integration with Vue 3
<template>
<Jspreadsheet :options="Options" />
</template>
<script>
import Jspreadsheet from "./components/Jspreadsheet";
const license = 'MjBjNDJiZjY4NDgyMWVhMmI1ZTM4NWE2MTdkNzZkMzNlMDg0NDkzNmE1Y2NjY2Y2ODE4MDVmNDNiYWEzMDQxY2FmNzk3ZDBjZmI5ZmRmYTdkYmMxNGUwNzNlN2IyYTAwNTEzOGI1ZDEwMDNhYjg0MmQ2NjljZWI1NDJiZWUwOGUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpFek5qa3pOalExTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';
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
};
return { Options };
},
};
</script>
Integration with Vue2
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://jspreadsheet.com/v11/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v11/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>
jspreadsheet.setLicense('MjBjNDJiZjY4NDgyMWVhMmI1ZTM4NWE2MTdkNzZkMzNlMDg0NDkzNmE1Y2NjY2Y2ODE4MDVmNDNiYWEzMDQxY2FmNzk3ZDBjZmI5ZmRmYTdkYmMxNGUwNzNlN2IyYTAwNTEzOGI1ZDEwMDNhYjg0MmQ2NjljZWI1NDJiZWUwOGUsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpFek5qa3pOalExTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');
let options = {
worksheets: [{
data:[[]],
minDimensions:[8,10],
}],
}
let vm = new Vue({
el: '#spreadsheet',
mounted: function() {
let spreadsheet = jspreadsheet(this.$el, options);
Object.assign(this, spreadsheet);
}
});
</script>