React | Getting Started | SpreadJS JavaScript Demos

Getting Started with SpreadJS React Component

Discover how easy it is to incorporate an Excel-like spreadsheet into your React applications by following the steps below to provide a complete spreadsheet experience.

Steps

Create React Application - You can create a new React application is to use Create React App tool. Run the following command from the command prompt or terminal to create a React application with default options. For details, see Getting Started on the Create React App site.
```
npm init react-app sjs-react-app
//or if you are using yarn
yarn create react-app sjs-react-app
cd sjs-react-app
```
Install SpreadJS npm packages - The React SpreadJS Component is distributed via @mescius/spread-sheets-react npm package. The main @mescius/spread-sheets package provides the core functionality. To install the current version of these packages, run the following command from the application's root folder.
```
npm install @mescius/spread-sheets-react @mescius/spread-sheets
//or if you use yarn
yarn add @mescius/spread-sheets-react @mescius/spread-sheets
```

Add SpreadJS React Component to the application/ Initialization - Open the src\App.js file and replace its content with the following code.

import './App.css';
import * as GC from '@mescius/spread-sheets';
import { SpreadSheets, Worksheet } from '@mescius/spread-sheets-react';
import '@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css';

function App() {
  let hostStyle = {
    width: '100%',
    height: '600px',
    border: '1px solid darkgray'
  }

  let initSpread = function (spread) {
    let sheet = spread.getActiveSheet();
    sheet.getCell(0, 0).vAlign(GC.Spread.Sheets.VerticalAlign.center).value('Hello SpreadJS!');
  }

  return (
    <div className="App">
      <SpreadSheets workbookInitialized={spread => initSpread(spread)}  hostStyle={hostStyle}>
        <Worksheet></Worksheet>
      </SpreadSheets>
    </div>
  );
}

export default App;

Setting Values and Formulas

Steps

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

initSpread: 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, "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.

initSpread: 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, "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.

initSpread: 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);
}