Web Components Spreadsheet

The Web Components Spreadsheet component allows visualizing and editing of spreadsheet data. Features include activation, cell editing, conditional formatting, selection, clipboard.

Demo

Dependencies

When installing the spreadsheet package, the core and excel package must also be installed.

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

Required Modules

The IgcSpreadsheetComponent requires the following modules:

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

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

Usage

Now that the spreadsheet module is imported, next is the basic configuration of the spreadsheet.

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

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

The following demonstrates how to load a workbook into the spreadsheet

import { IgcSpreadsheetComponent } from "igniteui-webcomponents-spreadsheet/ES2015/igc-spreadsheet-component";
import { Workbook } from "igniteui-webcomponents-excel/ES2015/Workbook";
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;
});