[]
        
(Showing Draft Content)

SpreadJS with React

SpreadJS supports React, allowing developers to build powerful spreadsheet interfaces in React applications. This guide demonstrates how to integrate SpreadJS using functional components and hooks in a Vite-based React application, but you can use SpreadJS with other React-supported frameworks too.

type=note

Note : SpreadJS supports React versions 16, 17, 18, and 19.

Project Setup with Vite

1. Create a Vite React Project

Select React + TypeScript for framework and variant.

npm create vite@latest spreadjs-vite-app
cd spreadjs-vite-app
npm install

2. Install SpreadJS React Modules

npm install @mescius/spread-sheets @mescius/spread-sheets-react

Basic Setup

1. Import SpreadJS CSS

In the src/App.tsx file, import the SpreadJS CSS using the following code.

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

//Enter a valid license key.
// GC.Spread.Sheets.LicensKey = 'YOUR_LICENSE_KEY'; 

function App() {
  let spread: GC.Spread.Sheets.Workbook;
  const [spreadBackColor, setSpreadBackColor] = useState('aliceblue');
  const [sheetName, setSheetName] = useState('My Sheet');
  const [hostStyle, setHostStyle] = useState({
    width: '800px',
    height: '600px'
  });

  const initSpread = function (spreadObj: GC.Spread.Sheets.Workbook) {
    spread = spreadObj;
    const sheet = spread.getActiveSheet();
    sheet.setValue(0, 0, "Hello SpreadJS");
  }
  return (
    <>
      <div className="sample-spreadsheets">
        <SpreadSheets backColor={spreadBackColor} hostStyle={hostStyle} workbookInitialized={spread => initSpread(spread)}>
          <Worksheet name={sheetName}></Worksheet>
        </SpreadSheets>
      </div>
    </>
  )
}

export default App

2. Use SpreadJS in React application and license SpreadJS

Modify the src/App.tsx file as per your requirements. Changes will be reflected when the browser window is refreshed. You can enter a valid SpreadJS license key before initializing the component. As an example, you can use the sample code given below:

npm run dev

3. Run the Project.

image

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

<SpreadSheets>
  <Worksheet>
    <Column></Column>
    ...
  </Worksheet>
  ...
</SpreadSheets>

The following topics list the element directives.

  1. Using SpreadSheets Element

  2. Using Worksheet Element

  3. Using Column Element

  4. Chart Element

  5. Spread-sheets-io Element

  6. Shape Element