Web Components Spreadsheet Overview

    The Web Components Spreadsheet (Excel viewer) component is lightweight, feature-rich and supplied with all the necessary options for operating, visualizing, and editing all types of spreadsheet data – scientific, business, financial, and more. All the information can be presented in a tabular format that feels intuitive and easy to navigate across cells, panes, and worksheets. The IgcSpreadsheetComponent is complemented by flexible Excel-like interface, detailed charts, and features such as activation, cell editing, conditional formatting, styling, selection, clipboard.

    Web Components Spreadsheet Example

    Functionality

    • Características

    Assim como em uma planilha do Excel, você pode aplicar funcionalidades de filtragem, classificação, mover células, personalização em termos de cor das células, atalhos de teclado e até mesmo adicionar a capacidade de calcular fórmulas.

    Spreadsheet Usage

    • Desempenho

    A planilha é compatível com todos os navegadores modernos e otimizada para modelos de planilhas complexos e volumosos, garantindo funcionalidade e simplicidade impecáveis.

    • Layout flexível e fácil personalização

    Você pode facilmente selecionar, adicionar, remover, alternar os recursos que deseja ligar/desligar e configurar as folhas React em um instante para que tudo atenda às necessidades dos usuários finais. Há também bibliotecas configuráveis, alternativas de estilo e formatação, opções de visibilidade, muitos temas para escolher.

    • Interface conveniente semelhante ao Excel

    Assim como dados operacionais no Excel, nosso componente de planilha fornece todas as operações conhecidas da área de transferência do Excel – copiar, colar, recortar. Você não precisará de treinamento extra ou novas habilidades para começar a usá-lo imediatamente. Ele também vem com opções para classificação, navegação completa pelo teclado, valores e fórmulas, arrastar células, edição de colunas e linhas, filtragem, formatação de números, redimensionamento. O mecanismo de cálculo inteligente e rápido potencializa até mesmo as estimativas mais complexas. Sem dependências do Excel.

    • Operações de dados

    Colete e gerencie dados científicos, comerciais, de engenharia, financeiros e educacionais. Prepare e crie análises, grades avançadas, relatórios, formulários de entrada de dados, orçamentos, cenários de previsão, planilhas personalizadas. Tudo isso graças à API abrangente.

    • Processamento de dados rápido e seguro

    Com nossa planilha, o processamento de dados é 100% seguro e protegido…

    • Importação e exportação de Excel e CSV

    Com a funcionalidade de importação/exportação integrada do Excel, você pode carregar e abrir documentos do Excel instantaneamente e visualizá-los sob demanda, adicionar alterações e salvá-los. Além disso, exporte sem esforço suas planilhas Excel .xlsx concluídas.

    Dependencies

    When installing the Web Components spreadsheet component, 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

    Component Modules

    The IgcSpreadsheetComponent requires the following modules:

    // 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
);

    Usage

    Now that the Web Components 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 Web Components spreadsheet

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

    API References