Results:
Loading...
Javascript Data GridJavascriptReact Data GridReactAngular Data GridAngularVue Data GridVue

JavaScript Data GridExcel Export - Extra ContentEnterprise

Prepending and Appending Custom Content

The recommended way to prepend and append content, is by passing an array of ExcelCell objects to prependContent or appendContent. This ensures that the extra content is correctly escaped.

For compatibility with earlier versions of the Grid you can also pass a string, which will be inserted into the file without any processing. You are responsible for formatting the string correctly.

Note the following:

  • You can check and uncheck the checkboxes to add extra content before and after the grid via the prependContent and appendContent properties.
  • With prependContent=ExcelRow[] or appendContent=ExcelRow[], custom content will be inserted containing commas and quotes. These commas and quotes will be visible when opened in Excel because they have been escaped properly.

Adding Header and Footer Content

Extra content can also be added in the form of Headers and Footers of the exported Excel file. Please note that this header and footer content is only visible when printing or exporting from Excel to PDF.

You can set header and footer content via the headerFooterConfig: ExcelHeaderFooterConfig object. See it documented further below.

The header and footer object accepts the following placeholders:

  • &[Page]: Prints the current page number.
  • &[Pages]: Prints the total number of pages.
  • &[Date]: Prints the current date.
  • &[Time]: Prints the current time.
  • &[Tab]: Prints the current sheet name.
  • &[Path]: Prints the file path.
  • &[File]: Prints the file name.

ExcelHeaderFooterConfig

Properties available on the ExcelHeaderFooterConfig interface.

all
ExcelHeaderFooter
The configuration for header and footer on every page. 
all: ExcelHeaderFooter;

interface ExcelHeaderFooter {
  // An array of maximum 3 items (`Left`, `Center`, `Right`), containing header configurations. 
  header?: ExcelHeaderFooterContent[];
  // An array of maximum 3 items (`Left`, `Center`, `Right`), containing footer configurations. 
  footer?: ExcelHeaderFooterContent[];
}

interface ExcelHeaderFooterContent {
  // The value of the text to be included in the header. 
  value: string;
  // Configures where the text should be added: `Left`, `Center` or `Right`.
  // Default: `Left`
  position?: 'Left' | 'Center' | 'Right';
  // The font style of the header/footer value. 
  font?: ExcelFont;
}
first
ExcelHeaderFooter
The configuration for header and footer on the first page only. 
first: ExcelHeaderFooter;

interface ExcelHeaderFooter {
  // An array of maximum 3 items (`Left`, `Center`, `Right`), containing header configurations. 
  header?: ExcelHeaderFooterContent[];
  // An array of maximum 3 items (`Left`, `Center`, `Right`), containing footer configurations. 
  footer?: ExcelHeaderFooterContent[];
}

interface ExcelHeaderFooterContent {
  // The value of the text to be included in the header. 
  value: string;
  // Configures where the text should be added: `Left`, `Center` or `Right`.
  // Default: `Left`
  position?: 'Left' | 'Center' | 'Right';
  // The font style of the header/footer value. 
  font?: ExcelFont;
}
even
ExcelHeaderFooter
The configuration for header and footer on even numbered pages only. 
even: ExcelHeaderFooter;

interface ExcelHeaderFooter {
  // An array of maximum 3 items (`Left`, `Center`, `Right`), containing header configurations. 
  header?: ExcelHeaderFooterContent[];
  // An array of maximum 3 items (`Left`, `Center`, `Right`), containing footer configurations. 
  footer?: ExcelHeaderFooterContent[];
}

interface ExcelHeaderFooterContent {
  // The value of the text to be included in the header. 
  value: string;
  // Configures where the text should be added: `Left`, `Center` or `Right`.
  // Default: `Left`
  position?: 'Left' | 'Center' | 'Right';
  // The font style of the header/footer value. 
  font?: ExcelFont;
}

ExcelHeaderFooter

Properties available on the ExcelHeaderFooter interface.

header
ExcelHeaderFooterContent[]
An array of maximum 3 items (Left, Center, Right), containing header configurations. 
header: ExcelHeaderFooterContent[];

interface ExcelHeaderFooterContent {
  // The value of the text to be included in the header. 
  value: string;
  // Configures where the text should be added: `Left`, `Center` or `Right`.
  // Default: `Left`
  position?: 'Left' | 'Center' | 'Right';
  // The font style of the header/footer value. 
  font?: ExcelFont;
}
ExcelHeaderFooterContent[]
An array of maximum 3 items (Left, Center, Right), containing footer configurations. 
footer: ExcelHeaderFooterContent[];

interface ExcelHeaderFooterContent {
  // The value of the text to be included in the header. 
  value: string;
  // Configures where the text should be added: `Left`, `Center` or `Right`.
  // Default: `Left`
  position?: 'Left' | 'Center' | 'Right';
  // The font style of the header/footer value. 
  font?: ExcelFont;
}

ExcelHeaderFooterContent

Properties available on the ExcelHeaderFooterContent interface.

value *
string
The value of the text to be included in the header.
position
'Left' | 'Center' | 'Right'
Configures where the text should be added: Left, Center or Right.
Default: Left
font
ExcelFont
The font style of the header/footer value.

Export Cover Page

In addition to exporting the Grid in the Excel file, you can also provide additional content on a separate sheet of the Excel file. This can be useful when you'd like to add a cover page to provide your users additional details on the data in this file.

Next Up

Continue to the next section: Customising Content.