Building a React18 based spreadsheet program

background

On March 29, 2022, React officially released 18.0.0. This upgrade includes out-of-the-box improvements such as automatic batching, new APIs such as startTransition, and support for streaming server-side rendering with Suspense. For the new features in this release, please refer to the official documentation .

As a JavaScript library for building user interfaces, React has always been considered a rigorous and excellent front-end framework, and with the release of new versions, the use of React is getting higher and higher. A hot knowledge, in most business systems developed with React, there is basically a need for tables. In most cases, we can use react to integrate antd to complete some general table requirements. But in a common table, if you want to do some formula function calculations, or use some charts and other functions inside the table, this kind of regular row list is difficult to meet your needs.

In addition, although the virtual DOM and DOM DIFF algorithms are used in React, if the data in the table is large and needs to be modified and updated frequently, the browser performance will not be very good.

Therefore, in order to better meet the complex table requirements in the business system, this article will introduce how to build a more powerful front-end spreadsheet system based on React18.

actual combat

First, we need to create a react project, which can be created using create-react-app or Vite . However, since Vite uses esbuild to pre-build dependencies , and esbuild is written in Go, it is 10-100 times faster than the JavaScript-written packager pre-build dependencies, and overall, the usage efficiency is higher than cra. So this article uses Vite to create React projects. It should be noted that the use of Vite requires the version of Node to be higher than 12. If the version of Node is too low, please upgrade Node.

After entering the target folder where you want to create the project, according to the tools you use, execute one of the following commands to create the simplest React project:

 # npm 6.x 
npm create vite@latest vite-react --template react

# npm 7+, extra double-dash is needed:
npm create vite@latest vite-react --template react

# yarn
yarn create vite vite-react --template react

# pnpm
pnpm create vite vite-react -- --template react

In the above command, vite-react represents the name of the created project, --template represents the template used when creating the project, and the react template uses js by default. If you want to use ts, you need to replace --template react with --template react-ts.

After the creation is complete, go to the project directory, execute npm install, and after the installation of dependent resources is complete, execute npm run dev, and the project can be started.

Of course, after these commands are created, the terminal will have a prompt, as shown in the figure above.

Open package.json, you can see that the version of React is the latest version of 18.0.0. When creating a project, the latest version of React will be used by default, as shown in the figure above.

After the project is started, there will be a lot of unnecessary content in app.jsx, you can delete it yourself to build the most concise project. Next, we introduce the front-end table component, add the following code (purple content) to package.json, and then execute npm install to install the new dependency resources:

 "dependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "@grapecity/spread-sheets": "15.0.7",
    "@grapecity/spread-sheets-react": "15.0.7",
    "@grapecity/spread-excelio": "15.0.7",
    "@grapecity/spread-sheets-charts": "15.0.7",
    "@grapecity/spread-sheets-print": "15.0.7",
    "@grapecity/spread-sheets-pdf": "15.0.7",
    "@grapecity/spread-sheets-barcode": "15.0.7",
    "@grapecity/spread-sheets-shapes": "15.0.7",
    "@grapecity/spread-sheets-resources-ko": "15.0.7",
    "@grapecity/spread-sheets-resources-ja": "15.0.7",
    "@grapecity/spread-sheets-resources-zh": "15.0.7",
    "@grapecity/spread-sheets-languagepackages": "15.0.7",
    "@grapecity/spread-sheets-pivot-addon": "15.0.7",
    "@grapecity/spread-sheets-designer": "15.0.7",
    "@grapecity/spread-sheets-designer-resources-cn": "15.0.7",
    "@grapecity/spread-sheets-designer-react": "15.0.7",
    "@grapecity/spread-sheets-tablesheet": "15.0.7"
  },

After the dependencies are installed, we need to create two jsx files to introduce different parts of SpreadJS. OnlineSpread indicates that the current component is a SpreadJS runtime component. The core code to implement this component is as follows:

 import {Component} from 'react'
import GC from '@grapecity/spread-sheets';
import '@grapecity/spread-sheets-resources-zh';
GC.Spread.Common.CultureManager.culture("h-zcn");
import { SpreadSheets, Worksheet, Column } from '@grapecity/spread-sheets-react';


export default class OnlineSpread extends Component {
    constructor(props) {
        super(props);
        this.spread = null;
    }
    initSpread(spread) {
        this.spread = spread;
         //设置当前spread中工作表的数量
        this.spread.setSheetCount(2)
        //获取第一个工作表
        let sheet = spread.getSheet(0)   //or let sheet = spread.getSheetFromName('Sheet1')
        //设置列宽
        sheet.setColumnWidth(0,150)    //第一个参数为列索引，第二个参数为列宽


        //单个单元格设置值
        sheet.setValue(0,0,'Hello Grapecity')   //参数依次表示行索引、列索引、内容


        //设置单元格公式
        sheet.setFormula(0,1,'=SUM(A2:A5)')      //参数依次为行索引、列索引、公式


        //设置区域内容
        //表示从行索引为2，列索引为0的单元格开始,设置2行3列的数据
        sheet.setArray(2,0,[[1,'hello','grapecity'],[2,'hello','javascript']])  


        //设置文字颜色
        sheet.getCell(2,1).foreColor('#f00')
    }


    render(){
        return(
            <SpreadSheets workbookInitialized={spread=>this.initSpread(spread)}>
                <Worksheet>
                </Worksheet>
            </SpreadSheets>
        )
    }
   
}

Introduce OnlineSpread in app.jsx, the page display effect is as follows:

Next, we need to introduce the part containing the toolbar, and create a new OnlineDesigner.jsx. The core code is as follows:

 import { Component, PropsWithChildren, ReactNode } from 'react'
import '@grapecity/spread-sheets-designer-resources-cn';
import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"
import '@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css'
import "@grapecity/spread-sheets-tablesheet";
import "@grapecity/spread-sheets-barcode";
import "@grapecity/spread-sheets-charts";
import "@grapecity/spread-sheets-shapes";
import "@grapecity/spread-sheets-languagepackages";
import "@grapecity/spread-sheets-print";
import "@grapecity/spread-sheets-pdf";
import "@grapecity/spread-sheets-pivot-addon";
import "@grapecity/spread-sheets-resources-zh";
import "@grapecity/spread-sheets-designer-resources-cn";
import * as GCDesigner from '@grapecity/spread-sheets-designer';
import "@grapecity/spread-sheets-resources-zh"
import GC from "@grapecity/spread-sheets"
import { Designer } from '@grapecity/spread-sheets-designer-react';
GC.Spread.Common.CultureManager.culture('zh-cn')




export default class OnlineDesigner extends Component{
  constructor(props){
    super(props)
    this.designer = null
  }


  designerInitialized = (designer) => {
    this.designer = designer
    console.log(designer)
    // 获取与designer相关联的工作簿(Spread)
    let spread = this.designer.getWorkbook()
    let sheet = spread.getActiveSheet()
    //设置数值
    sheet.setValue(0,0,'Hello Grapecity')
    //设置行高
    sheet.setColumnWidth(0,120)
    //设置区域内容
    sheet.setArray(1,0,[[2,3,5]])
    //设置公式
    sheet.setFormula(3,0,'=sum(A2:C2)')


  }


  render(){
      return(
          <Designer
            spreadOptions={{sheetCount: 3}}
            styleInfo={{height: '98vh'}}
            designerInitialized = {this.designerInitialized}
          />
      )
  }
}

Introduce OnlineDesigner in app.jsx, the page displays as follows:

At this point, we have officially completed the pure front-end form based on React18 components. On this form, we can continue to set a large amount of data and formulas, and we can also implement report design. The form of report design operation is similar to Excel.

Demo download address: https://github.com/GrapeCityXA/SpreadJS\_vite\_react18

More demo experience:

https://demo.grapecity.com.cn/spreadjs/gc-sjs-samples/index.html?id=34