SpreadJS 14
JavaScript Frameworks / SpreadJS with React
In This Topic
    SpreadJS with React
    In This Topic

    SpreadJS supports React - a JavaScript library that allows developers to build user interfaces for web applications and mobile applications by handling the view layer of the MVC framework.

    With React, you can modify data without reloading the page while creating reusable components and large applications.

    SpreadJS can be used with React in the following two ways:

    1. Using Node Package Manager
    2. Using Traditional HTML

    Using Node Package Manager

    This method involves the following steps:

    1. Create a React Project

      Open the Command Prompt window and type the following commands:

      Command Prompt
      Copy Code
      npm install -g create-react-app
      create-react-app quick-start
      cd quick-start
      npm start

      After you finish, the react project will be created at the specified location in the directory. For more information on how to create a React project, refer to https://reactjs.org/docs/create-a-new-react-app.html

    2. Install SpreadJS React modules in project

      Install SpreadJS React modules in your project using the following command:

      Command Prompt
      Copy Code
      npm install @grapecity/spread-sheets
      npm install @grapecity/spread-sheets-react

    3. Import SpreadJS CSS into index.js file

      Import the SpreadJS CSS in your index.js file using the following code:

      Copy Code
      import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css';

    4. Use SpreadJS in React application

      Modify the App.js file as per your requirements. Changes will be reflected when the browser window is refreshed. As an example, you can use the sample code given below:

      Copy Code
      import React, { Component } from 'react';
      import { SpreadSheets, Worksheet, Column } from '@grapecity/spread-sheets-react';
      import GC from '@grapecity/spread-sheets';
      var SpreadJSKey = "xxx";
      GC.Spread.Sheets.LicenseKey = SpreadJSKey;
      class APP extends Component {
       constructor(props) {
        this.spreadBackColor = 'aliceblue';
        this.sheetName = 'Goods List';
        this.hostStyle =
         width: '800px',
         height: '600px'
        this.data = [{ Name: 'Apple', Category: 'Fruit', Price: 1, 'Shopping Place': 'Wal-Mart' },{ Name: 'Potato', Category: 'Fruit', Price: 2.01,       'Shopping Place': 'Other' },{ Name: 'Tomato', Category: 'Vegetable', Price: 3.21, 'Shopping Place': 'Other' },{ Name:'Sandwich', Category:'Food', Price: 2, 'Shopping Place': 'Wal-Mart' },{ Name: 'Hamburger', Category: 'Food', Price: 2, 'Shopping Place': 'Wal-Mart' },{ Name:'Grape', Category: 'Fruit', Price: 4, 'Shopping Place': 'Sun Store' }
        this.columnWidth = 100;
       render() {
        return (
         <SpreadSheets backColor={this.spreadBackColor} hostStyle={this.hostStyle}>
         <Worksheet name={this.sheetName} dataSource={this.data}>
         <Column dataField='Name' width={300}></Column>
         <Column dataField='Category' width={this.columnWidth}></Column>
         <Column dataField='Price' width={this.columnWidth}
         <Column dataField='Shopping Place' width={this.columnWidth}></Column>
      export default APP

    Using Traditional HTML

    This method involves the following steps:

    1. Download the React HTML template

      You can download the react HTML template using the link https://reactjs.org/docs/getting-started.html

    2. Add SpreadJS and React - SpreadJS to HTML template

      Add references to the gc.spread.sheets.all.*.*.*.min.js,  gc.SpreadJS.*.*.*.css and gc.spread.sheets.react.*.*.*.js files in the HTML template (i.e. your index.html file).

    3. Use SpreadJS in React application

      Now, you can use SpreadJS in your react application. As an example, you can use the sample code given below:

      Copy Code
      <!DOCTYPE html>
              <meta charset="UTF-8" />
              <title>Hello World</title>
              <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
              <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
              <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
              <script src="./lib/gc.spread.sheets.all.*.*.*.min.js"></script>
              <link rel="stylesheet" type="text/css" href="./lib/gc.spread.sheets.excel2013white.*.*.*.min.css">
              <script src="./lib/gc.spread.sheets.react.*.*.*.js"></script>
              <div id="root"></div>
              <script type="text/babel">
                  const {SpreadSheets, Worksheet, Column} = window.SpreadSheetsComponents;
                  class App extends React.Component{
                              <div style={{width: '800px',height: '600px'}}>
                                      <Worksheet name='first'>
                                          <Column dataField="Name"/>

    The SpreadSheets, Worksheet, and Column are the basic elements with tag hierarchy. Other elements work by setting them. The main tag hierarchy is:

    Tag Hierarchy
    Copy Code

    The following topics list the element directives.

    To use the ExcelIO element in SpreadJS with React, you need to import the Excel IO module and license it separately using the same license key, for more information refer to Excel IO Element.