Web Components Grid Export to Excel Service

    The Ignite UI for Web Components Export to Excel Service in Web Components Grid can export data to excel. The data export functionality is encapsulated in the ExcelExporterService class and the data is exported in MS Excel table format. This format allows features like filtering, sorting, etc. To do this you need to invoke the Export method of ExcelExporterService and pass the IgcGridComponent component as first argument to export grid easily.

    Web Components Excel Exporter Example

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

    Export Grouped Data

    To export grouped data you just need to group the IgcGridComponent by one or more columns. The browser will download a file named "ExportedDataFile.xlsx" which contains the data from the IgcGridComponent component in MS Excel format grouped by the selected column. You can find example in the beggining of the topic.

    Ignite UI for Web Components | CTA Banner

    Export Multi Column Headers Grid

    It is now possible to export IgcGridComponent with defined multi-column headers. All headers will be reflected in the exported excel file as they are displayed in the IgcGridComponent. If you want to exclude the defined multi-column headers from the exported data you can set the ExporterOption IgnoreMultiColumnHeaders to true.

    The exported IgcGridComponent will not be formatted as a table, since Excel tables do not support multiple column headers.

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    Export Grid with Frozen Column Headers

    By default Excel Exporter service exports the grid with scrollable (unfrozen) column headers. There are scenarios in which you may want to freeze all headers on top of the exported excel file so they always stay in view as the user scrolls through the records. To achieve this you could set the ExporterOption FreezeHeaders to true.

    constructor() {
  var gridToolbarExporter1 = document.getElementById('gridToolbarExporter1') as IgcGridToolbarExporterComponent;
  gridToolbarExporter1.addEventListener("exportStarted", this.webGridExportEventFreezeHeaders);
}

public webGridExportEventFreezeHeaders(args: any): void {
  args.detail.options.freezeHeaders = true;
}
ts

    Known Limitations

    Limitation Description
    Max worksheet size The maximum worksheet size supported by Excel is 1,048,576 rows by 16,384 columns.
    Cell Styling The excel exporter service does not support exporting a custom style applied to a cell component. In such scenarios we recommend using the Excel Library.

    API References

    Additional Resources

    Our community is active and always welcoming to new ideas.