React & SpreadJS クイックスタート

npm -v

npm install -g create-react-app

create-react-app --version

create-react-app spreadjs-react-app

npm start

npm install @grapecity/spread-sheets-react
npm install @grapecity/spread-sheets-resources-ja

npm install @grapecity/spread-sheets-react@15.0.5
npm install @grapecity/spread-sheets-resources-ja@15.0.5

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css";

// SpreadJS関連モジュールのインポート
import GC from '@grapecity/spread-sheets';
import {SpreadSheets} from '@grapecity/spread-sheets-react';
import '@grapecity/spread-sheets-resources-ja/dist/gc.spread.sheets.resources.ja.min.js'

// Reactモジュールのインポート
import React, {Component} from 'react';

// SpreadJS関連モジュールのインポート
import GC from '@grapecity/spread-sheets';
import {SpreadSheets} from '@grapecity/spread-sheets-react';
import '@grapecity/spread-sheets-resources-ja/dist/gc.spread.sheets.resources.ja.min.js'

// SpreadJS 日本カルチャ設定
GC.Spread.Common.CultureManager.culture("ja-jp");

// SpreadJSのライセンスキーを設定します
GC.Spread.Sheets.LicenseKey = "（ここにSpreadJSのライセンスキーを設定します）";

// Appコンポーネントを定義します
class App extends Component {
  constructor(props)
  {
    super(props);

    // SpreadJSのホストとなるDOM要素のスタイルを設定します。
    // この変数はSpreadSheetsコンポーネントのhostStyle変数に参照されます。
    this.hostStyle =
    {
      width: '800px',
      height: '500px',
      border: '1px solid #ac9a9a',
      margin: '5px'
    };
  }

  render()
  {
    return(
      <div>
        {/* SpreadJSコンポーネントを返します */}
        <SpreadSheets hostStyle= {this.hostStyle}></SpreadSheets>
      </div>
    )
  }
}

export default App;

npm start

{/* SpreadJS本体（ワークブック）*/}
<SpreadSheets>
  {/* ワークシート */}
  <Worksheet>
    {/* 列 */}
    <Column></Column>
  </Worksheet>
</SpreadSheets>

import {SpreadSheets} from '@grapecity/spread-sheets-react';

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

{/* SpreadJSコンポーネントを返します */}
<SpreadSheets hostStyle= {this.hostStyle}>
  <Worksheet name={this.sheetName} dataSource={this.data}>
    <Column dataField='商品名' width={this.columnWidth}></Column>
    <Column dataField='カテゴリ' width={this.columnWidth}></Column>
    <Column dataField='購入店' width={this.columnWidth}></Column>
    <Column dataField='単価' width={this.columnWidth} formatter="¥ #,###"></Column>
  </Worksheet>
</SpreadSheets>

constructor(props) {
  super(props);

  // SpreadJSのホストとなるDOM要素のスタイルを設定します。
  // この変数はSpreadSheetsコンポーネントのhostStyle変数に参照されます。
  this.hostStyle = {
    width: "800px",
    height: "250px",
    border: "1px solid #ac9a9a",
    margin: "5px",
  };

  // シートの名前を設定します
  // この変数はWorksheetタグのname変数に参照されます
  this.sheetName = '商品リスト';

  // シートにバインドするデータを作成します
  // この変数はWorksheetタグのdataSource変数に参照されます
  this.data = [
    { 商品名: 'デスクトップPC', カテゴリ: 'PC本体', 単価: 128000, '購入店': 'PCショップA' },
    { 商品名: 'ラップトップPC', カテゴリ: 'PC本体', 単価: 249000, '購入店': 'PCショップA' },
    { 商品名: 'マウス', カテゴリ: '周辺機器', 単価: 1980, '購入店': 'PCショップA' },
    { 商品名: 'キーボード', カテゴリ: '周辺機器', 単価: 5680, '購入店': '家電量販店B' },
    { 商品名: 'プリンタ', カテゴリ: '周辺機器', 単価: 14480, '購入店': '家電量販店B' },
    { 商品名: 'SSD', カテゴリ: 'PCパーツ', 単価: 7980, '購入店': 'ネットショップC' },
    { 商品名: 'デスクトップPC', カテゴリ: 'PC本体', 単価: 168000, '購入店': 'PCショップA' },
    { 商品名: 'ラップトップPC', カテゴリ: 'PC本体', 単価: 249000, '購入店': 'PCショップA' },
    { 商品名: 'マウス', カテゴリ: '周辺機器', 単価: 4980, '購入店': 'PCショップA' },
    { 商品名: 'キーボード', カテゴリ: '周辺機器', 単価: 4680, '購入店': '家電量販店B' },
  ];

  // 列の幅を設定します
  // この変数はColumnタグのwidth変数に参照されます
  this.columnWidth = 184;
}

npm start