[]
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.
Select React + TypeScript for framework and variant.
npm create vite@latest spreadjs-vite-app
cd spreadjs-vite-app
npm install
npm install @mescius/spread-sheets @mescius/spread-sheets-react
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
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
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.