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

    Dependencies

    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';
    
    IgrExcelModule.register();
    IgrSpreadsheetModule.register();
    

    Usage

    Now that the React spreadsheet module is imported, next is the basic configuration of the 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 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;
        });
    }