Using Spread.Sheets with React

Spread.Sheets 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.

Spread.Sheets can be used with React in the following two ways:

Using Nuget Package Manager
Using Traditional HTML

Using Nuget Package Manager

This method involves the following steps:

Create a React Project

Open the Command Prompt window and type the following commands:

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/add-react-to-a-new-app.html

Import Spread.Sheets React module in project
Next, you need to install @grapecity/spread-sheets-react in your project using the following command:

$ npm install @grapecity/spread-sheets-react

Use Spread.Sheets in React application

Now, you can 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:

JavaScript	Copy Code
import React, {Component} from 'react'; import {SpreadSheets, Worksheet, Column} from '@grapecity/spread-sheets-react'; class APP extends Component { constructor(props) { super(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 ( <div> <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} formatter="$#.00"></Column> <Column dataField='Shopping Place' width={this.columnWidth}></Column> </Worksheet> </SpreadSheets> </div> ) } } export default APP

JavaScript

Copy Code

import React, {Component} from 'react';
import {SpreadSheets, Worksheet, Column} from '@grapecity/spread-sheets-react';

class APP extends Component

{

constructor(props)

{
         super(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

          (
             <div>
             <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}

              formatter="$#.00"></Column>
             <Column dataField='Shopping Place' width={this.columnWidth}></Column>
             </Worksheet>
             </SpreadSheets>
             </div>
         )
     }
}

export default APP

Using Traditional HTML

This method involves the following steps:

Download the React HTML template
You can download the react HTML template using the link https://reactjs.org/docs/try-react.html
Add Spread.Sheets and React - Spread.Sheets to HTML template
Add references to the gc.spread.sheets.all.*.*.*.min.js, gc.spread.sheets.*.*.*.css and gc.spread.sheets.react.*.*.*.js files in the HTML template (i.e. your index.html file).

Use Spread.Sheets in React application

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

JavaScript	Copy Code
<!DOCTYPE html> <html> <head> <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> </head> <body> <div id="root"></div> <script type="text/babel"> const {SpreadSheets, Worksheet, Column} = window.SpreadSheetsComponents; class App extends React.Component{ render(){ return( <div style={{width: '800px',height: '600px'}}> <SpreadSheets> <Worksheet name='first'> <Column dataField="Name"/> </Worksheet> </SpreadSheets> </div> ) } } ReactDOM.render( <App/>, document.getElementById('root') ); </script> </body> </html>

JavaScript

Copy Code

<!DOCTYPE html>
<html>
<head>
     <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>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const {SpreadSheets, Worksheet, Column} = window.SpreadSheetsComponents;
class App extends React.Component{
    render(){
      return(
         <div style={{width: '800px',height: '600px'}}>
           <SpreadSheets>
            <Worksheet name='first'>
            <Column dataField="Name"/>
             </Worksheet>
             </SpreadSheets>
             </div>
             )
         }
     }
     ReactDOM.render(
             <App/>,
         document.getElementById('root')
          );

</script>
</body>
</html>

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

The following topics list the element directives.