React Spreadsheet の概要

    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';
    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;
        });
    }