React Spreadsheet

React Spreadsheet は、スプレッドシート データの視覚化と編集を可能にする 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/ES5/igr-excel-module";
import { IgrSpreadsheetModule } from "igniteui-react-spreadsheet/ES5/igr-spreadsheet-module";

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

使用方法

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

Note

In the following code snippet, an external ExcelUtility class is used to save and load a workbook.

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

import { IgrSpreadsheet } from "igniteui-react-spreadsheet/ES5/igr-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;
    });
}