React Spreadsheet Overview

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

    React Spreadsheet Example


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

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

    Required Modules

    The IgrSpreadsheet requires the following modules:

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


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


    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 React spreadsheet

    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;