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: "YTI0NTAwMjNkMjc3MDcyNjk4MzNlOTA4NTE5Yjk2MTlhYWUwOWNlZTc0NDMyMDM3MmQ4NGQzMGUzNWRhOTZjNTU3ZTg2MGM3MzA0YmRhNDJmYWViNzE4YjI5YzFlM2M0NGUxNjEwMmZhODRlZjJiZjRkZmUyOTVkYWU3NzdjYzIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRM01UZzJNRFl5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==",
    };
    return { Options };
  },
};
</script>


<template>
  <div ref="sheetEl"/>
</template>
<script>
  import {ref, onMounted} from "content/docs/v8/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>
let options = {
    data:[[]],
    minDimensions:[8,10],
    license: 'YTI0NTAwMjNkMjc3MDcyNjk4MzNlOTA4NTE5Yjk2MTlhYWUwOWNlZTc0NDMyMDM3MmQ4NGQzMGUzNWRhOTZjNTU3ZTg2MGM3MzA0YmRhNDJmYWViNzE4YjI5YzFlM2M0NGUxNjEwMmZhODRlZjJiZjRkZmUyOTVkYWU3NzdjYzIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpRM01UZzJNRFl5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==',
}

let vm = new Vue({
    el: '#spreadsheet',
    mounted: function() {
        let spreadsheet = jspreadsheet(this.$el, options);
        Object.assign(this, spreadsheet);
    }
}); 
</script>

Edit this page on GitHub