Vue | Getting Started | SpreadJS JavaScript Demos

Getting Started with SpreadJS Vue Component

Embed an Excel-like spreadsheet into your Vue Application by following these simple steps. Once added, you can completely customize it per your business needs.

Steps

Create a Vue Application - Open the command prompt window and type the following commands to create a simple Vue project. After you finish, the Vue project will be created at the specified location in the directory. For more information on how to create a Vue project, refer to Vue Quick Start site.
```
npm init vue@latest //Giving the project name: sjs-vue-app, choose the different project option.
cd sjs-vue-app
```
Install SpreadJS npm packages - We distribute the Vue SpreadJS Component via @mescius/spread-sheets-vue npm package. The main @mescius/spread-sheets package provides the core functionality. To install the most current version of these packages, run the following command from the application's root folder.
```
npm install @mescius/spread-sheets-vue
npm install @mescius/spread-sheets
```

Use SpreadJS in Vue application
Modify the main.ts file by using the sample code given below:

import { createApp } from 'vue'
import App from './App.vue'
import { GcSpreadSheets, GcWorksheet, GcColumn } from '@mescius/spread-sheets-vue'
import './assets/main.css'

let app = createApp(App);
app.component('gc-spread-sheets', GcSpreadSheets);
app.component('gc-worksheet', GcWorksheet);
app.component('gc-column', GcColumn);
app.mount("#app");

Modify the App.vue file by using the sample code given below:

<template>
  <div id="spread-host">
    <gc-spread-sheets hostClass="spreadHost" @workbookInitialized="initWorkbook">
    </gc-spread-sheets>
  </div>
</template>

<script setup>
import "@mescius/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";
import * as GC from "@mescius/spread-sheets";
function initWorkbook(spread) {
  let sheet = spread.getActiveSheet();
  sheet
    .getCell(0, 0)
    .vAlign(GC.Spread.Sheets.VerticalAlign.center)
    .value("Hello SpreadJS");
}
</script>

<style>
.spreadHost {
  width: 800px;
  height: 800px;
}
</style>

Setting Values and Formulas

Steps

Use the setValue method to set the value of the cell and setFormula to make your calculations .

function initWorkbook(spread) {
  let sheet = spread.getActiveSheet();
  //Setting Values - Text
  sheet.setValue(1, 1, "Setting Values");
  //Setting Values - Number
  sheet.setValue(2, 1, "Number");
  sheet.setValue(2, 2, 23);
  sheet.setValue(3, 1, "Text");
  sheet.setValue(3, 2, "SpreadJS");
  sheet.setValue(4, 1, "Datetime");
  //Setting Values - DateTime
  sheet.getCell(4, 2).value(new Date(2020, 10, 7)).formatter("mm-dd-yyyy");
}

Setting Style

Give your data a more valuable and appealing look by using the functions below.

Steps

In this step, set the style for the sheet to make it more attractive and engaging.

function initWorkbook(spread) {
   /initialize the spread
   let sheet = spread.getActiveSheet();
   //Setting Values - Text
   sheet.setValue(1, 1, "Setting Values");
   //Setting Values - Number 
   sheet.setValue(2, 1, "Number");
   sheet.setValue(2, 2, 23)
   sheet.setValue(3, 1, "Text");
   sheet.setValue(3, 2, "SpreadJS")
   sheet.setValue(4, 1, "Datetime");
   //Setting Values - DateTime
   sheet.getCell(4, 2).value(new Date(2020, 10, 7)).formatter("mm-dd-yyyy");
   //Setting style
   sheet.setColumnWidth(1, 200);
   sheet.setColumnWidth(2, 200);
   sheet.getRange(1, 1, 1, 2).backColor("rgb(130, 188, 0)").foreColor("rgb(255, 255, 255)");
   sheet.getRange(3, 1, 1, 2).backColor("rgb(211, 211, 211)");
   sheet.addSpan(1, 1, 1, 2);
   sheet.getRange(1, 1, 4, 2).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.thin), {
     all: true
   });
   sheet.getRange(1, 1, 4, 2).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.dotted), {
     inside: true
   });
   sheet.getRange(1, 1, 1, 2).hAlign(GC.Spread.Sheets.HorizontalAlign.center);
}

Binding Data

Discover how you can bind your data with effortless efficiency.

Steps

Use the getSheet method to get the sheet you are working with. Set the cell binding source with "new GC.Spread.Sheets.Bindings.CellBindingSource(person);". Then use the setBindingPath method to set the binding path for the specified cell in the specified sheet area. Then set the data source for the sheet using the setDataSource method.

function initWorkbook(spread) {
   var sheet = spread.getSheet(0);
   var person = { name: 'Peter Winston', age: 25, gender: 'Male', address: { postcode: '10001' } };
   var source = new GC.Spread.Sheets.Bindings.CellBindingSource(person);
   sheet.setBindingPath(2, 2, 'name');
   sheet.setBindingPath(3, 2, 'age');
   sheet.setBindingPath(4, 2, 'gender');
   sheet.setBindingPath(5, 2, 'address.postcode');
   sheet.setDataSource(source);
}