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

  1. Create a Vue Application - Create a new Vue application using Vue CLI. Run the following command from the command prompt or terminal to create a Vue 2 application using the default preset. For details, see presets on the Vue CLI site.
    vue create -p default sjs-vue-app
    cd sjs-vue-app
  2. Install SpreadJS npm packages - We distribute the Vue SpreadJS Component via @grapecity/spread-sheets-vue npm package. The main @grapecity/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 @grapecity/spread-sheets-vue @grapecity/spread-sheets
    //or if you are using yarn
    yarn add @grapecity/spread-sheets-vue @grapecity/spread-sheets
  3. Add SpreadJS Vue Component to the application/ Initialization - Open the src\App.vue file and replace the default content with the following code.
    <template>
      <div>
        <gc-spread-sheets
          :hostClass="hostClass"
          @workbookInitialized="initWorkbook"
        >
        </gc-spread-sheets>
      </div>
    </template>
    
    <script>
    import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";
    import * as GC from "@grapecity/spread-sheets";
    import "@grapecity/spread-sheets-vue";
    
    export default {
      name: "App",
      data() {
        return {
          hostClass: "spread-host",
        };
      },
      methods: {
        initWorkbook: function (spread) {
          //initializing
          let worksheet = spread.getActiveSheet();
        },
      },
    };
    </script>
    
    <style>
    .spread-host {
      width: 100%;
      height: 600px;
    }
    </style>

Setting Values and Formulas

Steps

  1. Use the setValue method to set the value of the cell and setFormula to make your calculations .
    initWorkbook: function (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, "GrapeCity");
      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

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

    initWorkbook: function (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, "GrapeCity")
       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

  1. 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 setBindPath 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.
    initWorkbook: function (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);
    }