React Spreadsheet の概要

React Spreadsheet は、スプレッドシート データの視覚化と編集を可能にします。機能には、アクティブ化、セル編集、条件付き書式設定、選択、クリップボードなどがあります。

React Spreadsheet の例

Edit on CodeSandbox

依存関係

React スプレッドシート コンポーネントをインストールするときは、core パッケージと excel パッケージもインストールする必要があります。

npm install --save igniteui-react-core
npm install --save igniteui-react-excel
npm install --save igniteui-react-spreadsheet

モジュールの要件

IgrSpreadsheet を作成するには、以下のモジュールが必要です。

import { IgrExcelModule } from 'igniteui-react-excel';
import { IgrSpreadsheetModule } from 'igniteui-react-spreadsheet';

IgrExcelModule.register();
IgrSpreadsheetModule.register();

使用方法

React スプレッドシート モジュールがインポートされたので、次にスプレッドシートの基本設定です。

Note

次のコード スニペットでは、外部の ExcelUtility クラスを使用して workbook を保存およびロードしています。

以下は、ワークブックを React スプレッドシートにロードする方法を示しています。

import { IgrSpreadsheet } from 'igniteui-react-spreadsheet';
import { ExcelUtility } from 'ExcelUtility';

// ...

public spreadsheet : IgrSpreadsheet = new IgrSpreadsheet({})

ngOnInit() {
    const excelFile = '../../assets/Sample1.xlsx';
    ExcelUtility.loadFromUrl(excelFile).then((w) => {
      this.spreadsheet.workbook = w;
    });
}