Web Components Spreadsheet の概要

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

Web Components Spreadsheet の例

依存関係

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

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

モジュールの要件

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

// Module Manager for registering the modules of the chart
import { ModuleManager } from 'igniteui-webcomponents-core';
// spreadsheet's modules
import { IgcExcelModule } from 'igniteui-webcomponents-excel';
import { IgcSpreadsheetModule } from 'igniteui-webcomponents-spreadsheet';

// register the modules
ModuleManager.register(
    IgcExcelModule,
    IgcSpreadsheetModule
);

使用方法

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

<igc-spreadsheet id="spreadsheet" height="500px" width="100%">
</igc-spreadsheet>

Note

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

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

import { IgcSpreadsheetComponent } from 'igniteui-webcomponents-spreadsheet';
import { Workbook } from 'igniteui-webcomponents-excel';
import { ExcelUtility } from "./ExcelUtility";

// ...

let spreadsheet = (document.getElementById("spreadsheet") as IgcSpreadsheetComponent);

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