Excel export options in Angular Grid component

17 Sep 202524 minutes to read

The Syncfusion Angular Grid component provides comprehensive options for customizing Excel and CSV export functionality. This flexibility allows precise control over the exported content and layout to fit your reporting needs.

The excelExportProperties property lets you control which columns to export, include or exclude hidden columns, use a custom data source, enable filters, define file names, add headers and footers, export multiple grids, customize exported data, configure CSV delimiters, and apply specific themes.

Export current page records

Exporting the current page exports just the visible records to an Excel or CSV file. Choose between exporting the CurrentPage (only current grid page) or AllPages (all records) using the exportType property.

Example of exporting the current page when a toolbar item is clicked:

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, ToolbarService, ExcelExportService, PageService, FilterService,GridComponent,ToolbarItems,ExcelExportProperties,ExportType } from '@syncfusion/ej2-angular-grids'
import { DropDownListAllModule,DropDownListComponent } from '@syncfusion/ej2-angular-dropdowns'
import { Component, OnInit, ViewChild } from '@angular/core';
import { employeeData } from './datasource';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';

@Component({
  imports: [GridModule,DropDownListAllModule],
  providers: [ExcelExportService,PageService, ToolbarService, FilterService],
  standalone: true,
  selector: 'app-root',
  template: `
        <div style="display: flex">
            <label style="padding: 10px 10px 26px 0"> Change export type: </label>
            <ejs-dropdownlist
            style="margin-top:5px"
            #dropDownList
            index="0"
            width="150"
            [dataSource]="dropDownData"></ejs-dropdownlist>
          </div>
          <div style="padding: 0px 0 20px 0">
            <ejs-grid #grid id='Grid' [dataSource]='data' allowPaging='true' [pageSettings]='initialPage'[toolbar]='toolbarOptions' 
            height='220px' [allowExcelExport]='true' (toolbarClick)='toolbarClick($event)'>
                <e-columns>
                    <e-column field='EmployeeID' headerText='Employee ID' textAlign='Right' width=90></e-column>
                    <e-column field='FirstName' headerText='FirstName' width=100></e-column>
                    <e-column field='LastName' headerText='Last Name' width=100></e-column>
                    <e-column field='City' headerText='City' width=100></e-column>
                </e-columns>
            </ejs-grid>
          </div>`
})
export class AppComponent implements OnInit {
  public data?: object[];
  public toolbarOptions?: ToolbarItems[];
  @ViewChild('grid') public grid?: GridComponent;
  @ViewChild('dropDownList')
  public dropDownList?: DropDownListComponent;
  public dropDownData: object[] = [
    { text: 'CurrentPage', value: 'CurrentPage' },
    { text: 'AllPages', value: 'AllPages' },
  ];
  public initialPage?: object;
  
  ngOnInit(): void {
    this.data = employeeData;
    this.toolbarOptions = ['ExcelExport'];
    this.initialPage = { pageSize: 6};
  }
  toolbarClick(args: ClickEventArgs): void {
    if (args.item.id === 'Grid_excelexport') {
      // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
      const exportProperties: ExcelExportProperties = {
        exportType: ((this.dropDownList as DropDownListComponent).value as ExportType),
      };
      (this.grid as GridComponent).excelExport(exportProperties);
    }
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Export selected records

Export selected records to Excel or CSV for a focused set of data. Assign the selected records to exportProperties.dataSource in the toolbarClick event.

Steps:

  1. Handle the toolbarClick event.
  2. Retrieve selected records using getSelectedRecords.
  3. Assign selected data to exportProperties.dataSource.
  4. Trigger export with excelExport or csvExport.

Example:

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, FreezeService, SelectionService } from '@syncfusion/ej2-angular-grids'

import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import {
    GridComponent, ToolbarItems, ToolbarService,
    PageService, FilterService, ExcelExportService, SelectionSettingsModel
} from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';

@Component({
imports: [
        
        GridModule
    ],
standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #grid id='Grid' [dataSource]='data' [toolbar]='toolbarOptions'
               [allowPaging]='true' [allowPdfExport]='true' 
               [allowExcelExport]='true' (toolbarClick)='toolbarClick($event)' 
               [selectionSettings]='selectionSettings'>
              <e-columns>
                  <e-column field='OrderID' headerText='Order ID' textAlign='Right' 
                  width=120></e-column>
                  <e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
                  <e-column field='ShipCity' headerText='Ship City' width=150></e-column>
              </e-columns>
              </ejs-grid>`,
    providers: [ToolbarService, PageService, FilterService, ExcelExportService,FreezeService, SelectionService]
})
export class AppComponent implements OnInit {

    public data?: object[];
    public toolbarOptions?: ToolbarItems[];
    public selectionSettings?: SelectionSettingsModel;
    public initialPage?: object;
    @ViewChild('grid') public grid?: GridComponent;
    ngOnInit(): void {
        this.data = data;
        this.toolbarOptions = ['ExcelExport'];
        this.selectionSettings = { type: 'Multiple', enableSimpleMultiRowSelection: true };
    }
    toolbarClick(args: ClickEventArgs) {
        if (args.item.id === 'Grid_excelexport') {
            const selectedRecords = (this.grid as GridComponent).getSelectedRecords();
            const exportProperties = {
                dataSource: selectedRecords
            };
            (this.grid as GridComponent).excelExport(exportProperties);
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Exporting grouped records

The Grid can export grouped records with outline support, hiding detail data by default in the export. Enable grouping with allowGrouping and configure group columns with groupSettings.columns.

Example for exporting grouped records:

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, ToolbarService, ExcelExportService, FilterService } from '@syncfusion/ej2-angular-grids'
import { GridComponent, ToolbarItems, GroupService, PageService, GroupSettingsModel } from '@syncfusion/ej2-angular-grids';
import { Component, ViewChild } from '@angular/core';
import { data } from './datasource';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';

@Component({
imports: [GridModule],
standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #grid id='Grid' [dataSource]='data' [toolbar]='toolbarOptions' 
               height='220px' [allowGrouping]='true' [groupSettings]='groupOptions' 
               [allowPaging]='true' [allowExcelExport]='true' 
               (toolbarClick)='toolbarClick($event)'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' 
                    width=120></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=150>
                    </e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=150></e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=150></e-column>
                </e-columns>
                </ejs-grid>`,
    providers: [PageService, GroupService,ExcelExportService, ToolbarService, FilterService]
})
export class AppComponent {

    public data?: object[];
    public toolbarOptions?: ToolbarItems[];
    @ViewChild('grid') public grid?: GridComponent;
    public groupOptions?: GroupSettingsModel;

    public ngOnInit(): void  {
        this.data = data;
        this.toolbarOptions = ['ExcelExport'];
        this.groupOptions = { columns: ['CustomerID', 'ShipCity'] };
    }
    toolbarClick(args: ClickEventArgs): void {
        if (args.item.id === 'Grid_excelexport') {
             // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
            (this.grid as GridComponent).excelExport();
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Export with hidden columns

To include hidden columns in your export, set includeHiddenColumn to true in excelExportProperties.

Example: Export the ShipCity column (hidden in UI) to Excel. This can be toggled using the checked property of the EJ2 Toggle Switch Button.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, ToolbarService, ExcelExportService,PageService,GridComponent, ToolbarItems, ExcelExportProperties } from '@syncfusion/ej2-angular-grids'
import { SwitchModule,SwitchComponent } from '@syncfusion/ej2-angular-buttons'
import { Component, ViewChild } from '@angular/core';
import { data } from './datasource';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';

@Component({
imports: [GridModule,SwitchModule],
providers: [ExcelExportService, ToolbarService,PageService],
standalone: true,
    selector: 'app-root',
    template: `
            <div>
            <label style="padding: 10px 10px">
             Include or exclude hidden columns
            </label>
            <ejs-switch #switch id="switch"></ejs-switch>
            </div>
            <ejs-grid #grid id='Grid' [dataSource]='data' [allowPaging]='true' 
            [toolbar]='toolbarOptions' height='272px' [allowExcelExport]='true' 
            (toolbarClick)='toolbarClick($event)'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' 
                    width=90></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=100>
                    </e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=130>
                    </e-column>
                    <e-column field='ShipCity' headerText='Ship City' [visible]='false'  
                    width=120></e-column>
                    <e-column field='ShipCountry' headerText='ShipCountry' width=100>
                    </e-column>
                </e-columns>
            </ejs-grid>`
})
export class AppComponent {

    public data?: object[];
    public toolbarOptions?: ToolbarItems[];
    @ViewChild('grid') public grid?: GridComponent;
    @ViewChild('switch')
    public switch?: SwitchComponent;

    public ngOnInit(): void {
        this.data = data;
        this.toolbarOptions = ['ExcelExport'];
    }
    toolbarClick(args: ClickEventArgs): void {
        if (args.item.id === 'Grid_excelexport') {
            // 'Grid_pdfexport' -> Grid component id + _ + toolbar item name
            const excelExportProperties: ExcelExportProperties = {
                includeHiddenColumn: (this.switch as SwitchComponent).checked,
            };
            (this.grid as GridComponent).excelExport(excelExportProperties);
        }
        
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Show or hide columns while exporting

Show or hide columns dynamically during export by adjusting the visible property in the toolbarClick event, then restoring them in excelExportComplete.

Example: The CustomerID column is hidden in the grid but shown in the export; ShipCity is hidden in export.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, ToolbarService, ExcelExportService, FilterService } from '@syncfusion/ej2-angular-grids'

import { Component, ViewChild } from '@angular/core';
import { data } from './datasource';
import { GridComponent, ToolbarItems, Column } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';

@Component({
imports: [
        
        GridModule
    ],

providers: [ExcelExportService, ToolbarService, FilterService],
standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #grid id='Grid' [dataSource]='data' [toolbar]='toolbarOptions' 
               height='272px' [allowExcelExport]='true' (excelExportComplete)='excelExportComplete()' 
               (toolbarClick)='toolbarClick($event)'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' 
                    width=120></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' [visible]='false' 
                    width=150></e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=150>
                    </e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=150>
                    </e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent {

    public data?: object[];
    public toolbarOptions?: ToolbarItems[];
    @ViewChild('grid') public grid?: GridComponent;

    public ngOnInit(): void  {
        this.data = data;
        this.toolbarOptions = ['ExcelExport'];
    }
    toolbarClick(args: ClickEventArgs): void {
        if (args.item.id === 'Grid_excelexport') { 
            // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
            ((this.grid as GridComponent).columns[1] as Column).visible = true;
            ((this.grid as GridComponent).columns[3] as Column).visible = false;
            (this.grid as GridComponent).excelExport();
        }
    }
    excelExportComplete(): void {
        ((this.grid as GridComponent).columns[1] as Column).visible = false;
        ((this.grid as GridComponent).columns[3] as Column).visible = true;
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Show or hide columns while exporting with stacked header

The Syncfusion Angular Grid allows you to control the visibility of columns during export operations. This feature is particularly useful when customizing the data presented in exported files while using stacked headers.

To implement the show or hide columns feature during Excel export in the Syncfusion Angular Grid, follow these steps:

  1. Handle the toolbarClick event of the Syncfusion Angular Grid.

  2. Update the visibility of the desired columns by setting the visible property of the column to true or false.

  3. Export the Syncfusion Angular Grid to Excel document using the excelExport or csvExport method.

  4. Handle the excelExportComplete event to restore the column visibility to its original state.

In the following example, the ShipName is initially a hidden column in the Syncfusion Angular Grid. However, during the Excel export process, the ShipName column is made visible, while the OrderDate column is hidden:

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, ToolbarService, ExcelExportService, ColumnModel } from '@syncfusion/ej2-angular-grids'
import { Component, ViewChild } from '@angular/core';
import { data } from './datasource';
import { GridComponent, ToolbarItems, Column } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';

@Component({
    imports: [ GridModule],
    providers: [ExcelExportService, ToolbarService],
    standalone: true,
    selector: 'app-root',
    template: `
      <ejs-grid #grid id='Grid' [dataSource]='data' [toolbar]='toolbarOptions' height='272px' [allowExcelExport]='true' (excelExportComplete)='excelExportComplete()' (toolbarClick)='toolbarClick($event)'>
        <e-columns>
          <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
          <e-column field='CustomerID' headerText='Customer ID' [visible]='false' width=100></e-column>
          <e-column headerText="Order Details" [columns]="orderColumns" textAlign='Center'></e-column>
          <e-column headerText="Ship Details" [columns]="shipColumns" textAlign='Center'></e-column>
        </e-columns>
      </ejs-grid>`
})
export class AppComponent {
  @ViewChild('grid') public grid?: GridComponent;
  public data?: object[];
  public toolbarOptions?: ToolbarItems[];
  public orderColumns?: ColumnModel[];
  public shipColumns?: ColumnModel[];
    
  ngOnInit(): void  {
    this.data = data;
    this.toolbarOptions = ['ExcelExport'];
    this.orderColumns = [
      {
        field: 'OrderDate',
        headerText: 'Order Date',
        format: 'yMd',
        width: 130,
        textAlign: 'Right',
        minWidth: 10,
      },
      {
        field: 'Freight',
        headerText: 'Freight ($)',
        width: 120,
        format: 'C1',
        textAlign: 'Right',
        minWidth: 10,
      },
    ];
    this.shipColumns = [
      {
        field: 'ShippedDate',
        headerText: 'Shipped Date',
        format: 'yMd',
        textAlign: 'Right',
        width: 150,
        minWidth: 10,
      },
      {
        field: 'ShipCountry',
        headerText: 'Ship Country',
        width: 150,
        minWidth: 10,
      },
      {
        field: 'ShipName',
        headerText: 'Ship Name',
        width: 150,
        minWidth: 10,
        visible:false
      },
    ];
  }
  public toolbarClick(args: ClickEventArgs): void {
    if (args.item.id === 'Grid_excelexport') { 
      (((this.grid as GridComponent).columns[2] as ColumnModel).columns![0] as Column).visible = false;
      (((this.grid as GridComponent).columns[3] as ColumnModel).columns![2] as Column).visible = true;
      (this.grid as GridComponent).excelExport();
    }
  }
  public excelExportComplete(): void {
    (((this.grid as GridComponent).columns[2] as ColumnModel).columns![0] as Column).visible = true;
    (((this.grid as GridComponent).columns[3] as ColumnModel).columns![2] as Column).visible = false;
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Enable filtering in the exported Excel file

Enable filters in exported Excel or CSV files by setting enableFilter to true in excelExportProperties. Grid filtering must also be enabled with allowFiltering.

Example for exporting data with filter options:

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, ToolbarService, ExcelExportService, FilterService } from '@syncfusion/ej2-angular-grids'

import { Component, ViewChild } from '@angular/core';
import { data } from './datasource';
import { GridComponent, ToolbarItems, ExcelExportProperties } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';

@Component({
imports: [
        
        GridModule
    ],

providers: [ExcelExportService, ToolbarService, FilterService],
standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #grid id='Grid' [dataSource]='data' [allowFiltering]='true' 
               [toolbar]='toolbarOptions' height='272px'
               [allowExcelExport]='true' (toolbarClick)='toolbarClick($event)'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' 
                    width=120></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=150>
                    </e-column>
                    <e-column field='ShipCountry' headerText='Ship Country' 
                    width=150 [visible]='false'></e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=150>
                    </e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=150>
                    </e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent {

    public data?: object[];
    public toolbarOptions?: ToolbarItems[];
    @ViewChild('grid') public grid?: GridComponent;

    public ngOnInit(): void {
        this.data = data;
        this.toolbarOptions = ['ExcelExport'];
    }
    toolbarClick(args: ClickEventArgs): void {
        if (args.item.id === 'Grid_excelexport') { 
            // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
            const excelExportProperties: ExcelExportProperties = {
                enableFilter: true
            };
            (this.grid as GridComponent).excelExport(excelExportProperties);
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Define file name

The Syncfusion Angular Grid component allows you to specify a custom file name for the exported Excel or CSV document. This feature enables you to provide a meaningful and descriptive name for the exported file, making it easier to identify and manage the exported data.

To assign a custom file name for the exported document, you can set the fileName property of the excelExportProperties property to the desired file name.

The following example demonstrates how to define a file name using ExcelExportProperties.fileName property when exporting to Excel, based on the entered value as the file name.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, ToolbarService, ExcelExportService,GridComponent, ToolbarItems, ExcelExportProperties,PageService } from '@syncfusion/ej2-angular-grids'
import { TextBoxModule,TextBoxComponent } from '@syncfusion/ej2-angular-inputs'
import { Component,  ViewChild } from '@angular/core';
import { data } from './datasource';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';

@Component({
    imports: [GridModule,TextBoxModule],
    providers: [ExcelExportService, ToolbarService,PageService],
    standalone: true,
    selector: 'app-root',
    template: `
            <div style="padding: 0px 0 20px 0">
            <label style="padding: 30px 17px 0 0">Enter file name: </label>
            <ejs-textbox #textbox placeholder="Enter file name" width="120">
            </ejs-textbox>
            </div>
            <ejs-grid #grid id='Grid' [dataSource]='data' [allowPaging]='true' 
            [toolbar]='toolbarOptions' height='220px' [allowPaging]='true' 
            [allowExcelExport]='true' (toolbarClick)='toolbarClick($event)'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' 
                    width=90></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=100>
                    </e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=100>
                    </e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=120>
                    </e-column>
                </e-columns>
            </ejs-grid>`
})
export class AppComponent {

    public data?: object[];
    public toolbarOptions?: ToolbarItems[];
    @ViewChild('grid') public grid?: GridComponent;
    @ViewChild('textbox') public textbox?: TextBoxComponent;

    public ngOnInit(): void  {
        this.data = data;
        this.toolbarOptions = ['ExcelExport'];
    }
    toolbarClick(args: ClickEventArgs): void {
        if (args.item.id === 'Grid_excelexport') {
            const excelExportProperties: ExcelExportProperties = {
                fileName: (this.textbox as TextBoxComponent).value !== "" ? (this.textbox as TextBoxComponent).value + '.xlsx' : 'new.xlsx'
            };
            (this.grid as GridComponent).excelExport(excelExportProperties);
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Export the master detail grid

Export both master and detail grids to a single worksheet with multipleExport.type set to AppendToSheet. Set multipleExport.blankRows for spacing between grids.

The following example demonstrates how to export master detail grid to the same page in a Excel file when a toolbar item is clicked. The rowSelected event dynamically updates the detail grid based on the selected master record:

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { Component, OnInit, ViewChild } from '@angular/core';
import { data, customerData } from './datasource';
import { GridComponent, ToolbarItems, ExcelExportProperties, RowSelectEventArgs,GridModule, ToolbarService, ExcelExportService} from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';

type carType = { CustomerID: string, CustomerName: string, ContactName: string };

@Component({
  imports: [ GridModule],
  providers: [ToolbarService, ExcelExportService],
  standalone: true,
  selector: 'app-root',
  template: `<ejs-grid #mastergrid id="mastergrid" [dataSource]='masterdata' 
             [selectedRowIndex]="1" [toolbar]='toolbarOptions' 
             [allowExcelExport]="true" (rowSelected)="onRowSelected($event)" 
             (toolbarClick)="toolbarClick($event)" [exportGrids]='exportGrids'>
                <e-columns>
                    <e-column field='ContactName' headerText='Customer Name' 
                    width='150'></e-column>
                    <e-column field='CompanyName' headerText='Company Name' 
                    width='150'></e-column>
                    <e-column field='Address' headerText='Address' width='150'></e-column>
                    <e-column field='Country' headerText='Country' width='130'></e-column>
                </e-columns>
            </ejs-grid>
            <div class='e-statustext'>Showing orders of Customer: <b id="key"></b></div>
            <ejs-grid #detailgrid id="detailgrid" [allowExcelExport]='true' 
            [dataSource]='data' [allowSelection]='false'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width='100'></e-column>
                    <e-column field='Freight' headerText='Freight' format='C2' width='100' 
                    textAlign='Right' type='number'></e-column>
                    <e-column field='ShipName' headerText="Ship Name" width='150'></e-column>
                    <e-column field='ShipCountry' headerText="Ship Country" width='150'></e-column>
                    <e-column field='ShipAddress' headerText="Ship Address" width='150'></e-column>
                </e-columns>
            </ejs-grid>
                `
})
export class AppComponent implements OnInit {

    public masterdata?: object[];
    public data?: object[];
    public toolbarOptions?: ToolbarItems[];
    public exportGrids?: string[];
    @ViewChild('mastergrid') public mastergrid?: GridComponent;
    @ViewChild('detailgrid') public detailgrid?: GridComponent;
    public names?: string[] = ['AROUT', 'BERGS', 'BLONP', 'CHOPS', 'ERNSH'];

    ngOnInit(): void {
        this.masterdata = customerData.filter((e: carType | any) => (this.names as string[]).indexOf(e.CustomerID) !== -1);
        this.toolbarOptions = ['ExcelExport'];
        this.exportGrids = ['mastergrid', 'detailgrid'];
    }
    public onRowSelected(args: RowSelectEventArgs): void {
        let selectedRecord: carType = args.data as carType;
        (this.detailgrid as GridComponent).dataSource = data.filter((record: carType | any) => record.CustomerName === selectedRecord.ContactName).slice(0, 5);
       (document.getElementById('key') as HTMLElement).innerHTML = selectedRecord.ContactName;
    }
    public toolbarClick(args: ClickEventArgs): void {
        if (args.item.id === 'mastergrid_excelexport') {
            const appendExcelExportProperties: ExcelExportProperties = {
                multipleExport: { type: 'AppendToSheet', blankRows: 2 }
            };
            (this.mastergrid as GridComponent).excelExport(appendExcelExportProperties, true);
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Customizing columns on export

The Grid component allows you to customize the appearance of grid columns in your exported Excel or CSV documents. This feature empowers you to tailor specific column attributes such as field, header text, and text alignment, ensuring that your exported Excels align perfectly with your design and reporting requirements.

To customize the grid columns, you can follow these steps:

  1. Access the excelExportProperties.column of the Grid component.

  2. Set the column object with attributes such as field, headerText, and textAlign to define the desired format.

  3. Trigger the Excel or CSV export operation to apply the customized column settings.

The following example demonstrates how to customize the grid columns when exporting a document. In this scenario, the attributes for different columns have been customized: OrderID with textAlign set to Right, CustomerID with headerText as Customer Name, and Freight with a center-aligned textAlign property, which is not rendered in the grid columns:

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, ToolbarService, ExcelExportService, FilterService } from '@syncfusion/ej2-angular-grids'

import { Component, ViewChild } from '@angular/core';
import { data } from './datasource';
import { GridComponent, ToolbarItems, ExcelExportProperties, Column } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';

@Component({
imports: [
        
        GridModule
    ],

providers: [ExcelExportService, ToolbarService, FilterService],
standalone: true,
  selector: 'app-root',
  template: `<ejs-grid #grid id='Grid' [dataSource]='data' [toolbar]='toolbarOptions' height='272px' 
               [allowExcelExport]='true' (toolbarClick)='toolbarClick($event)'>
                    <e-columns>
                        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120>
                        </e-column>
                        <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                        <e-column field='ShipCity' headerText='Ship City' width=120></e-column>
                        <e-column field='ShipName' headerText='Ship Name' width=180></e-column>
                    </e-columns>
                </ejs-grid>`
})
export class AppComponent {

  public data?: object[];
  public toolbarOptions?: ToolbarItems[];
  @ViewChild('grid')
  public grid?: GridComponent;

  public ngOnInit(): void {
    this.data = data;
    this.toolbarOptions = ['ExcelExport'];
  }

  toolbarClick(args: ClickEventArgs): void {
    if (args.item.id === 'Grid_excelexport') {
      // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
      const excelExportColumns: ExcelExportColumn[] = [
        { field: 'OrderID', textAlign: 'Right', width: 120 },
        { field: 'CustomerID', headerText: 'Customer Name', width: 120 },
        { field: 'Freight', textAlign: 'Center', width: 120 },
      ];
      const excelExportProperties: ExcelExportProperties = {
        columns: excelExportColumns as Column[]
      };
      (this.grid as GridComponent).excelExport(excelExportProperties);
    }
  }
}
export interface ExcelExportColumn {
  field: string;
  headerText?: string;
  textAlign?: string;
  width?: number;
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Font and color customization

The Excel export feature in Grid provides an option to include themes for the exported Excel document. This feature is particularly useful when you want to maintain a consistent and visually appealing style for the exported data in Excel.

To apply a theme to the exported Excel document, you can define the theme property within the excelExportProperties. This property allows you to specify the theme to be used in the exported Excel file, including styles for the caption, header, and record content.

caption: This property defines the theme style for the caption content in the exported Excel document. The caption is the title or description that appears at the top of the exported Excel sheet.

header: This property is used to defines the style for the header content in the exported Excel document. The header corresponds to the column headers in the Grid.

record: This property defines the theme style for the record content in the exported Excel document. The record represents the data rows in the Grid that are exported to Excel.

In the following example, apply font styling to the caption, header, and record in the Excel file using the theme property:

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, ToolbarService, ExcelExportService, FilterService } from '@syncfusion/ej2-angular-grids'

import { Component, ViewChild } from '@angular/core';
import { data } from './datasource';
import { GridComponent, ToolbarItems, ExcelExportProperties } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';

@Component({
imports: [
        
        GridModule
    ],

providers: [ExcelExportService, ToolbarService, FilterService],
standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #grid id='Grid' [dataSource]='data' [toolbar]='toolbarOptions' 
               height='272px' [allowExcelExport]='true' (toolbarClick)='toolbarClick($event)'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' 
                    width=120></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=150>
                    </e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=150>
                    </e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=150>
                    </e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent {

    public data?: object[];
    public toolbarOptions?: ToolbarItems[];
    @ViewChild('grid') public grid?: GridComponent;

    public ngOnInit(): void {
        this.data = data;
        this.toolbarOptions = ['ExcelExport'];
    }
    toolbarClick(args: ClickEventArgs): void {
        if (args.item.id === 'Grid_excelexport') { 
            // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
            const excelExportProperties: ExcelExportProperties = {
                theme:
                    {
                        header: { fontName: 'Segoe UI', fontColor: '#666666' },
                        record: { fontName: 'Segoe UI', fontColor: '#666666' },
                        caption: { fontName: 'Segoe UI', fontColor: '#666666' }
                    }
            };
           (this.grid as GridComponent).excelExport(excelExportProperties);
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Rotate a header text in the exported grid

Rotate header text in the exported Excel file by using the excelHeaderQueryCellInfo event and setting the rotation property on the style argument.

Example: Rotate column headers as needed in the exported document.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule } from '@syncfusion/ej2-angular-grids'
import { DropDownListModule,DropDownListComponent } from '@syncfusion/ej2-angular-dropdowns'
import { PageService, SortService, FilterService, GroupService, ToolbarService, ExcelExportService } from '@syncfusion/ej2-angular-grids'
import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import { GridComponent, ToolbarItems, ExcelQueryCellInfoEventArgs, ExcelHeaderQueryCellInfoEventArgs, Column, Cell, ExcelStyle } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';

@Component({
imports: [GridModule,DropDownListModule],
providers: [PageService,SortService,FilterService,GroupService,ToolbarService,ExcelExportService],
standalone: true,
    selector: 'app-root',
    template: `   
            <div style="display: flex; align-items: center;">
                <label style="margin-right: 10px;">Select a degree:</label>
                <ejs-dropdownlist id='ddlelement' #ddlelement placeholder='Select a degree' [dataSource]='degree'>
                </ejs-dropdownlist>
            </div>
            <div style="padding:20px 0px 0px 0px">
                <ejs-grid #grid id="Grid" [dataSource]='data' [height]='240' (created)='setHeaderHeight()' (excelQueryCellInfo)='excelQueryCellInfo($event)' (excelHeaderQueryCellInfo)='excelHeaderQueryCellInfo($event)' (toolbarClick)='toolbarClick($event)' [toolbar]='toolbarOptions' [allowExcelExport]='true'>
                    <e-columns>
                        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
                        <e-column field='CustomerID' headerText='Customer ID' [customAttributes]='customAttributes' width=120></e-column>
                        <e-column field='Freight' headerText='Freight' textAlign='Center'
                        format='C2' width=80></e-column>
                        <e-column field='ShipCity' headerText='Ship City' width=100 ></e-column>
                    </e-columns>
                </ejs-grid>
            </div>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public toolbarOptions?: ToolbarItems[];
    public degree?: number[];
    public customAttributes?: object;
    @ViewChild('grid')
    public grid?: GridComponent;
    @ViewChild('ddlelement') public dropDownListObject?: DropDownListComponent;

    ngOnInit(): void {
        this.data = data;
        this.customAttributes = { class: 'orientationcss' };
        this.toolbarOptions = ['ExcelExport'];
        this.degree = [90, 180, 45, 135];
    }
    setHeaderHeight() {
        const textWidth = (document.querySelector('.orientationcss > div') as Element).scrollWidth;
        const headerCell: NodeList = document.querySelectorAll('.e-headercell');
        for (let i = 0; i < headerCell.length; i++) {
            (headerCell.item(i) as HTMLElement).style.height = textWidth + 'px';
        }
    }
    excelQueryCellInfo(args: ExcelQueryCellInfoEventArgs): void {
        if (args.column.field == 'Freight') {
            if ((args.value as number) < 30) {
                args.style = { backColor: '#99ffcc' };
            }
            else if ((args.value as number)< 60) {
                args.style = { backColor: '#ffffb3' };
            }
            else {
                args.style = { backColor: '#ff704d' };
            }
        }
    }

    excelHeaderQueryCellInfo(args: ExcelHeaderQueryCellInfoEventArgs): void {
        let textWidth = (document.querySelector(".orientationcss > div") as Element).scrollWidth;
        if ((args.gridCell as Cell<Column>).column.field == 'Freight') {
            args.style = { backColor: '#99ffcc', vAlign: 'Bottom' };
        }
        else {
            args.style = { vAlign: 'Center', rotation: ((this.dropDownListObject as DropDownListComponent).value as number) };
        }
        (args.cell as CustomExcelStyle).cellHeight = textWidth;
    }

    toolbarClick(args: ClickEventArgs): void {
        if (args.item.id === 'Grid_excelexport') {
            (this.grid as GridComponent).excelExport();
        }
    }
}

interface CustomExcelStyle extends ExcelStyle {
    cellHeight?: number;
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Conditional cell formatting

Use the excelQueryCellInfo event to apply custom formatting (such as background color) to cells in the exported Excel file based on value or logic.

Example: Apply background color to the Freight column conditionally during Excel export:

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, ToolbarService, ExcelExportService, FilterService } from '@syncfusion/ej2-angular-grids'




import { Component, ViewChild } from '@angular/core';
import { columnDataType, data } from './datasource';
import { GridComponent, ToolbarItems, ExcelQueryCellInfoEventArgs, QueryCellInfoEventArgs, Column } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';

@Component({
imports: [
        
        GridModule
    ],

providers: [ExcelExportService, ToolbarService, FilterService],
standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #grid id='Grid' [dataSource]='data' [toolbar]='toolbarOptions' 
               height='272px' [allowExcelExport]='true' (queryCellInfo)='queryCellInfo($event)' 
               (excelQueryCellInfo)='excelQueryCellInfo($event)' (toolbarClick)='toolbarClick($event)'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' 
                    width=120></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=150>
                    </e-column>
                    <e-column field='Freight' headerText='Freight' width=150>
                    </e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=150>
                    </e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent {

    public data?: object[];
    public toolbarOptions?: ToolbarItems[];
    @ViewChild('grid') public grid?: GridComponent;

   constructor() {
        this.data = data;
        this.toolbarOptions = ['ExcelExport'];
    }
    toolbarClick(args: ClickEventArgs): void {
        if (args.item.id === 'Grid_excelexport') { 
            // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
            (this.grid as GridComponent).excelExport();
        }
    }
    excelQueryCellInfo(args: ExcelQueryCellInfoEventArgs): void {
        if (args.column.field === 'Freight') {
            if (args.value as number < 30) {
                args.style = { backColor: '#99ffcc' };
            } else if (args.value as number < 60) {
                args.style = { backColor: '#ffffb3' };
            } else {
                args.style = { backColor: '#ff704d' };
            }
        }
    }
    queryCellInfo({column,data,cell}:QueryCellInfoEventArgs): void {
        if ((column as Column).field === 'Freight') {
            if ((data as columnDataType)['Freight'] < 30) {
                (cell as HTMLElement).style.backgroundColor = '#99ffcc'
            } else if ((data as columnDataType)['Freight'] < 60) {
                (cell as HTMLElement).style.backgroundColor = '#ffffb3';
            } else {
                (cell as HTMLElement).style.backgroundColor = '#ff704d';
            }
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

The Excel or CSV Export feature in Grid component allows you to include header and footer content in the exported Excel or CSV document. This feature is particularly useful when you want to add additional information or branding to the exported Excel or CSV file.

To achieve this, you can use toolbarClick event along with defining the header and footer properties in the excelExportProperties object allowing you to customize the header and footer content.

The following example demonstrates how to add a header and footer to the exported grid:

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, ToolbarService, ExcelExportService, FilterService } from '@syncfusion/ej2-angular-grids'

import { Component, ViewChild, OnInit } from '@angular/core';
import { data } from './datasource';
import { GridComponent, ToolbarItems, ExcelExportProperties } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';

@Component({
imports: [
        
        GridModule
    ],

providers: [ExcelExportService, ToolbarService, FilterService],
standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #grid id='Grid' [dataSource]='data' [toolbar]='toolbarOptions' 
               height='272px' [allowExcelExport]='true' (toolbarClick)='toolbarClick($event)'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right'
                     width=120></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=150>
                    </e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=150></e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=150></e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit{

    public data?: object[];
    public toolbarOptions?: ToolbarItems[];
    @ViewChild('grid') public grid?: GridComponent;

    public ngOnInit(): void 
     {
        this.data = data;
        this.toolbarOptions = ['ExcelExport'];
     }

    toolbarClick(args: ClickEventArgs): void {
        if (args.item.id === 'Grid_excelexport') { // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
            const excelExportProperties: ExcelExportProperties = {
                header: {
                    headerRows: 7,
                    rows: [
                        {
                            cells: [{
                                colSpan: 4, value: 'Northwind Traders',
                                style: { fontColor: '#C67878', fontSize: 20, hAlign: 'Center', bold: true, }
                            }]
                        },
                        {
                            cells: [{
                                colSpan: 4, value: '2501 Aerial Center Parkway',
                                style: { fontColor: '#C67878', fontSize: 15, hAlign: 'Center', bold: true, }
                            }]
                        },
                        {
                            cells: [{
                                colSpan: 4, value: 'Suite 200 Morrisville, NC 27560 USA',
                                style: { fontColor: '#C67878', fontSize: 15, hAlign: 'Center', bold: true, }
                            }]
                        },
                        {
                            cells: [{
                                colSpan: 4, value: 'Tel +1 888.936.8638 Fax +1 919.573.0306',
                                style: { fontColor: '#C67878', fontSize: 15, hAlign: 'Center', bold: true, }
                            }]
                        },
                        {
                            cells: [{
                                colSpan: 4, hyperlink: { target: 'https://www.northwind.com/', displayText: 'www.northwind.com' },
                                style: { hAlign: 'Center' }
                            }]
                        },
                        { cells: [{ colSpan: 4, hyperlink: { target: 'mailto:[email protected]' }, style: { hAlign: 'Center' } }] },
                    ]
                },
                footer: {
                    footerRows: 4,
                    rows: [
                        { cells: [{ colSpan: 4, value: 'Thank you for your business!', style: { hAlign: 'Center', bold: true } }] },
                        { cells: [{ colSpan: 4, value: '!Visit Again!', style: { hAlign: 'Center', bold: true } }] }
                    ]
                },
            };
            (this.grid as GridComponent).excelExport(excelExportProperties);
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Export grid as blob

Export data as a Blob by setting the isBlob parameter to true in the excelExport method. Use the excelExportComplete event to retrieve the blob data for further processing.

Example for exporting and handling exported blob data:

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, ToolbarService, ExcelExportService } from '@syncfusion/ej2-angular-grids'

import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import { GridComponent, ToolbarItems, ExcelExportCompleteArgs } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';

@Component({
imports: [
        
        GridModule
    ],

providers: [ExcelExportService, ToolbarService],
standalone: true,
    selector: 'app-root',
    template: `<ejs-grid #grid id='Grid' [dataSource]='data' [toolbar]='toolbarOptions' height='230px'  [allowExcelExport]='true' 
                (excelExportComplete)='excelExportComplete($event)' (toolbarClick)='toolbarClick($event)'>
                    <e-columns>
                        <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
                        <e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
                        <e-column field='Freight' headerText='Freight' width=80></e-column>
                        <e-column field='ShipName' headerText='Ship Name' width=120></e-column>
                    </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    public toolbarOptions?: ToolbarItems[];
    @ViewChild('grid')
    public grid?: GridComponent;    

    ngOnInit(): void {
        this.data = data;
        this.toolbarOptions = ['ExcelExport', 'CsvExport'];
    }

    toolbarClick(args: ClickEventArgs): void {
        if (args.item.id === 'Grid_excelexport') {
            // pass undefined to use default settings
            (this.grid as GridComponent).excelExport(undefined, undefined, undefined, true);
        }
        if (args.item.id === 'Grid_csvexport') {
            // pass undefined to use default settings
            (this.grid as GridComponent).csvExport(undefined, undefined, undefined, true);
        }
    }

    excelExportComplete(args: ExcelExportCompleteArgs): void {
        if (args && args.promise) { 
            // execute the promise to get the blob data
            args.promise.then((e: { blobData: Blob }) => {
                this.exportBlob(e.blobData);
            });
        }
    }

    public exportBlob = (blob: Blob) => {
        const a: HTMLAnchorElement = document.createElement('a');
        document.body.appendChild(a);
        a.style.display = 'none';
        const url: string = window.URL.createObjectURL(blob); // Fix typo here
        a.href = url;
        a.download = 'Export';
        a.click();
        window.URL.revokeObjectURL(url); // Fix typo here
        document.body.removeChild(a);
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));