Framework:Javascript Data GridAngular Data GridReact Data GridVue Data Grid

React Data Grid: Excel Export - Images

Excel Export allows including images in the Excel export file. For example, you can add your company logo to the top or bottom of the exported Excel spreadsheet, or export any images you're displaying inside grid cells.

Exporting Images

You can export an image for any grid cell using the addImageToCell callback in the export parameters shown below:

const defaultExcelExportParams = {
    addImageToCell: (rowIndex, column, value) => {
        if (rowIndex === 1 && column.colId === 'athlete') {
            const myCompanyLogo = getBase64Image('logo.png');
            return {
                image: {
                    id: 'company_logo',
                    base64: myCompanyLogo,
                    imageType: 'png',
                    fitCell: true
                }
            };
        }
    }
};

<AgGridReact defaultExcelExportParams={defaultExcelExportParams}>
    {/* column definitions ... */}
</AgGridReact>

It's important to note that images can only be exported as base64 strings, and the image format must be either PNG, GIF or JPG. You can convert your images to a base64 string, using third party tools, or using the code in our examples on this page.

Every image is required to have an id. This way, if you're exporting the same image multiple times as part of the same export operation, the id will be used to access the image data, so the image file is imported only once.

At the moment, it's only possible the export one image per cell.

Cells with Images

The example below includes a Custom Cell Renderer and uses the addImageToCell callback to convert the cell value into a base64 image.

Note the following:

  • The image gets a margin within the cell because of the offsetX and offsetY properties in the ExcelImage.

Cells with Images and Text

This example has a Custom Cell Renderer showing an image together with text, and uses the addImageToCell to convert the cell value into a base64 image.

Note the following:

  • The image gets a margin within the cell because of the offsetX and offsetY properties in the ExcelImage.
  • This example returns the image and a value. The value is rendered within the same cell as the image.
  • Excel Styles are used to indent the text and vertically align it with the image.

Prepend Images

This example uses the prepend content to add a custom logo to the export.

Note the following:

  • The first row has a larger height as set in the rowHeight callback.
  • The custom content added using prependContent spans across two columns.

Even if an ExcelCell object that merges multiple cells across is created, the ExcelImage still needs be informed of how many columns it will be spanning. This is done by passing position: { colSpan: number } to the ExcelImage.

Interface

addImageToCell
Function
A callback function invoked once per cell. Return an ExcelImage object to add an image to the current cell.
addImageToCell = (
    params: AddImageToCellParams
) => AddImageToCell;

interface AddImageToCellParams {
  rowIndex: number;
  column: Column;
  value: string;
}

interface AddImageToCell {
  image: ExcelImage;
  value: string;
}

ExcelImage

id *
string
The image id. This field is required so the same image doesn't get imported multiple times.
base64 *
string
A base64 string that represents the image being imported. See more info about Base64/
imageType *
string
The type of image being exported.
Options: 'jpg', 'png', 'gif'
fitCell
boolean
If set to true, the image will cover the whole cell that is being imported to.
Default: false
transparency
number
Set a value between 0 - 100 that will indicate the percentage of transparency of the image.
Default: 0
rotation
number
Set a value between 0 - 359 that will indicate the number of degrees to rotate the image clockwise.
Default: 0
recolor
string
Set this property to select a preset that changes the appearance of the image.
Options: 'Grayscale', 'Sepia', 'Washout'
width
number
The width of the image in pixels. If this value is not selected, fitCell will be automatically set to true.
height
number
The height of the image in pixels. If this value is not selected, fitCell will be automatically set to true.
position
See position for more details.

position

excelImage > position
row
number
The row containing this image. This property is set automatically, don't change it unless you know what you are doing.
rowSpan
number
The amount of rows this image will cover.
Default: 1
column
number
The column containing this image. This property is set automatically, don't change it unless you know what you are doing.
colSpan
number
The amount of columns this image will cover.
Default: 1
offsetX
number
The amount in pixels the image should be offset horizontally.
Default: 0
offsetY
number
The amount in pixels the image should be offset vertically.
Default: 0

Next Up

Continue to the next section: Multiple Sheets.