[]
デモ ヘルプ APIリファレンス デザイナ
ダウンロード
(Showing Draft Content)

React

SpreadJSでは、JavaScriptライブラリの1つであるReactがサポートされます。Reactを使用すると、MVCフレームワークのビュー層を処理することで、Webアプリケーションおよびモバイルアプリケーションのユーザーインタフェースを構築できます。

Reactでは、ページをリロードせずにデータを変更できるだけでなく、再利用可能なコンポーネントや大規模なアプリケーションを作成できます。

メモ： SpreadJS は React バージョン16、17 および 18をサポートしています。

Reactを使用するには、次の手順を実行します。

  1. Reactアプリを作成する

    コマンドプロンプトウィンドウを開き、次のコマンドを入力します。コマンドを実行すると、ディレクトリ内の指定の場所にReactプロジェクトが作成されます。Reactプロジェクトの詳しい作成方法については、「Reactプロジェクトを始める」を参照してください。

    npm install -g create-react-app

    create-react-app quick-start

    cd quick-start

    npm start


  2. Spread.Sheetsモジュールをインストールする

    Spread.Sheets Reactモジュール、および日本語リソースを、npmからインストールします。

    npm install @mescius/spread-sheets-react@xx.x.x

    npm install @mescius/spread-sheets-resources-ja@xx.x.x

    type=warning

    'xx.x.x'の部分には製品のバージョンを指定してください。（例：17.1.10）

    バージョンの指定を省略すると最新バージョンがインストールされますが、日本語版での動作保証は日本語版サイトで公開しているバージョンのみとなります。

    製品のバージョンについては、製品購入時またはトライアル版でダウンロードした製品コンテンツに含まれるリリースノートをご確認ください。

  3. スタイルをインポートする

    index.jsファイルで、スタイルファイルをインポートします。

    import'@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css';


  4. ReactアプリでSpread.Sheetsを使用する

    src\App.jsファイルで、次のサンプルコードを使います。

import React from 'react';
import {SpreadSheets, Worksheet, Column} from '@mescius/spread-sheets-react';
import '@mescius/spread-sheets-resources-ja';

function App() {
const spreadBackColor = 'aliceblue';
const sheetName = 'Goods List';
const hostStyle =
{
  width: '800px',
  height: '600px'
};

const 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'}];
const columnWidth = 100;

return (
  <div>
    <SpreadSheets backColor={spreadBackColor}hostStyle= {hostStyle}>
      <Worksheet name={sheetName} dataSource={data}>
        <Column dataField='Name' width={300}></Column>
        <Column dataField='Category' width={columnWidth}></Column>
        <Column dataField='Price' width={columnWidth} formatter="$#.00"></Column>
        <Column dataField='Shopping Place' width={columnWidth}></Column>
      </Worksheet>
    </SpreadSheets>
</div>
);
}

export default App;

SpreadSheets、Worksheet、およびColumnは、タグ階層での基本要素です。他の要素は、それぞれ設定して使用します。主なタグ階層は次のとおりです。

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

以下の各トピックでは、さまざまな要素（ディレクティブ）について説明します。