JavaScript Data GridExcel Export - Rows

Version 36.2.0

Enterprise

Excel Export allows you to select which rows get exported to Excel.

By default, all the rows in the grid are included in the Excel export. However, you can set which rows are exported and configure how they are rendered within the Excel file.

Export Selected Rows Copy Link

By default, all visible rows are exported, but by using the onlySelected param, only the selected rows will be exported.

main.ts

import {
  ClientSideRowModelModule,
  ColDef,
  CsvExportModule,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  NumberFilterModule,
  RowSelectionModule,
  TextFilterModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  ExcelExportModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  TextFilterModule,
  NumberFilterModule,
  RowSelectionModule,
  ClientSideRowModelModule,
  CsvExportModule,
  ExcelExportModule,
  ColumnMenuModule,
  ContextMenuModule,
]);

const columnDefs: ColDef[] = [
  { field: "athlete", minWidth: 200 },
  { field: "country", minWidth: 200 },
  { headerName: "Group", valueGetter: "data.country.charAt(0)" },
  { field: "sport", minWidth: 150 },
  { field: "gold", hide: true },
  { field: "silver", hide: true },
  { field: "bronze", hide: true },
  { field: "total", hide: true },
];

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  defaultColDef: {
    filter: true,
    minWidth: 100,
    flex: 1,
  },
  columnDefs: columnDefs,
  rowSelection: {
    mode: "multiRow",
    headerCheckbox: false,
  },
  onGridReady: (params: GridReadyEvent) => {
    (document.getElementById("selectedOnly") as HTMLInputElement).checked =
      true;
  },
};

function onBtExport() {
  gridApi!.exportDataAsExcel({
    onlySelected: (document.querySelector("#selectedOnly") as HTMLInputElement)
      .checked,
  });
}

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);
fetch("https://www.ag-grid.com/example-assets/small-olympic-winners.json")
  .then((response) => response.json())
  .then((data) =>
    gridApi!.setGridOption(
      "rowData",
      data.filter((rec: any) => rec.country != null),
    ),
  );

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).onBtExport = onBtExport;
}

styles.css

.details > label {
    margin-bottom: 10px;
}
.details > label:first-of-type {
    margin-top: 10px;
}
.details > label:last-of-type {
    margin-bottom: 0;
}
.option {
    display: block;
    margin: 5px 10px 5px 0;
}
.grid-wrapper {
    display: flex;
    flex: 1 1 0px;
}
.grid-wrapper > div {
    width: 100%;
    height: 100%;
}
.container {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.columns {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
}

index.html

<div class="container">
    <div class="columns">
        <label class="option" for="selectedOnly"><input id="selectedOnly" type="checkbox" />Selected Rows Only</label>
        <div>
            <button onclick="onBtExport()" style="font-weight: bold">Export to Excel</button>
        </div>
    </div>
    <div class="grid-wrapper">
        <div id="myGrid"></div>
    </div>
</div>

interfaces.ts


export interface IOlympicData {
    athlete: string,
    age: number,
    country: string,
    year: number,
    date: string,
    sport: string,
    gold: number,
    silver: number,
    bronze: number,
    total: number
}

Export Multi Line Cells Copy Link

By default Excel renders every exported value in a cell using a single line. If you need to display a cell value on multiple lines, please set the Excel Alignment wrapText option as shown in sample below.

main.ts

import {
  CellStyleModule,
  ClientSideRowModelModule,
  ColDef,
  CsvExportModule,
  GridApi,
  GridOptions,
  ICellRendererParams,
  ModuleRegistry,
  RowAutoHeightModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  ExcelExportModule,
} from "ag-grid-enterprise";
import { MultilineCellRenderer } from "./multilineCellRenderer";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  RowAutoHeightModule,
  CellStyleModule,
  ClientSideRowModelModule,
  CsvExportModule,
  ExcelExportModule,
  ColumnMenuModule,
  ContextMenuModule,
]);

const columnDefs: ColDef[] = [
  { field: "address" },
  {
    headerName: "Custom column",
    autoHeight: true,
    valueGetter: (param) => {
      return param.data.col1 + "\n" + param.data.col2;
    },
    cellRenderer: MultilineCellRenderer,
  },
];

let gridApi: GridApi;

const gridOptions: GridOptions = {
  defaultColDef: {
    cellClass: "multiline",
    minWidth: 100,
    flex: 1,
  },

  columnDefs: columnDefs,

  rowData: [
    {
      address:
        "1197 Thunder Wagon Common,\nCataract, RI, \n02987-1016, US, \n(401) 747-0763",
      col1: "abc",
      col2: "xyz",
    },
    {
      address:
        "3685 Rocky Glade, Showtucket, NU, \nX1E-9I0, CA, \n(867) 371-4215",
      col1: "abc",
      col2: "xyz",
    },
    {
      address:
        "3235 High Forest, Glen Campbell, MS, \n39035-6845, US, \n(601) 638-8186",
      col1: "abc",
      col2: "xyz",
    },
    {
      address:
        "2234 Sleepy Pony Mall , Drain, DC, \n20078-4243, US, \n(202) 948-3634",
      col1: "abc",
      col2: "xyz",
    },
  ],

  excelStyles: [
    {
      id: "multiline",
      alignment: {
        wrapText: true,
      },
    },
  ],
};

function onBtExport() {
  gridApi!.exportDataAsExcel();
}

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).onBtExport = onBtExport;
}

styles.css

.grid-wrapper {
    display: flex;
    flex: 1 1 0px;
}
.grid-wrapper > div {
    width: 100%;
    height: 100%;
}
.container {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.columns {
    display: flex;
    flex-direction: row;
    gap: 16px;
}

multilineCellRenderer.ts

import type { ICellRendererComp, ICellRendererParams } from 'ag-grid-community';

export class MultilineCellRenderer implements ICellRendererComp {
    eGui!: HTMLDivElement;

    init(params: ICellRendererParams) {
        this.eGui = document.createElement('div');
        this.eGui.innerHTML = params.value.replace('\n', '<br/>');
    }

    getGui() {
        return this.eGui;
    }

    refresh() {
        return false;
    }
}

index.html

<div class="container">
    <div>
        <button onclick="onBtExport()" style="margin: 5px 0px; font-weight: bold">Export to Excel</button>
    </div>
    <div class="grid-wrapper">
        <div id="myGrid"></div>
    </div>
</div>

Export All Unprocessed Rows Copy Link

By default, the grid exports grid rows after filtering and sorting has been applied. This means that if you’ve filtered the grid, only the filtered rows will be exported in the order they appear in visually at the time of export.

You can override this and export all rows instead of only the filtered rows by setting the exportedRows param to ‘all’.

When exporting all rows, any column filters or sort applied to the grid are ignored and all rows are exported in the original order.

You can verify this in the example below:

Filter the Country column to only show rows for Australia
Sort descending by Athlete column
Uncheck the All Rows checkbox and click the Export to Excel button

Observe how only the filtered rows are exported in the Excel file in descending order by Athlete column

Check the All Rows checkbox and click the Export to Excel button

Observe how all rows are exported in the Excel file in the original unsorted row order

main.ts

import {
  ClientSideRowModelModule,
  ColDef,
  CsvExportModule,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  NumberFilterModule,
  TextFilterModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  ExcelExportModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  TextFilterModule,
  NumberFilterModule,
  ClientSideRowModelModule,
  CsvExportModule,
  ExcelExportModule,
  ColumnMenuModule,
  ContextMenuModule,
]);

const columnDefs: ColDef[] = [
  { field: "athlete", minWidth: 200 },
  { field: "country", minWidth: 200 },
  { headerName: "Group", valueGetter: "data.country.charAt(0)" },
  { field: "sport", minWidth: 150 },
  { field: "gold", hide: true },
  { field: "silver", hide: true },
  { field: "bronze", hide: true },
  { field: "total", hide: true },
];

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  defaultColDef: {
    filter: true,
    minWidth: 100,
    flex: 1,
  },
  columnDefs: columnDefs,
  onGridReady: (params: GridReadyEvent) => {
    (document.getElementById("allRows") as HTMLInputElement).checked = true;
  },
};

function onBtExport() {
  gridApi!.exportDataAsExcel({
    exportedRows: (document.getElementById("allRows") as HTMLInputElement)
      .checked
      ? "all"
      : "filteredAndSorted",
  });
}

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);
fetch("https://www.ag-grid.com/example-assets/small-olympic-winners.json")
  .then((response) => response.json())
  .then((data) =>
    gridApi!.setGridOption(
      "rowData",
      data.filter((rec: any) => rec.country != null),
    ),
  );

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).onBtExport = onBtExport;
}

styles.css

.details > label {
    margin-bottom: 10px;
}
.details > label:first-of-type {
    margin-top: 10px;
}
.details > label:last-of-type {
    margin-bottom: 0;
}
.option {
    display: block;
    margin: 5px 10px 5px 0;
}
.grid-wrapper {
    display: flex;
    flex: 1 1 0px;
}
.grid-wrapper > div {
    width: 100%;
    height: 100%;
}
.container {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.columns {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
}

index.html

<div class="container">
    <div class="columns">
        <label class="option" for="allRows"><input id="allRows" type="checkbox" />All Rows</label>
        <div>
            <button onclick="onBtExport()" style="font-weight: bold">Export to Excel</button>
        </div>
    </div>
    <div class="grid-wrapper">
        <div id="myGrid"></div>
    </div>
</div>

interfaces.ts


export interface IOlympicData {
    athlete: string,
    age: number,
    country: string,
    year: number,
    date: string,
    sport: string,
    gold: number,
    silver: number,
    bronze: number,
    total: number
}

Pinned Rows Copy Link

If you'd like to exclude pinned top/bottom rows in AG Grid from the Excel export, please set the skipPinnedTop and skipPinnedBottom properties to true.

Manually pinned rows also remain in the exported body by default. Set skipPinnedRowDuplicates=true to omit those body copies while retaining the rows in their pinned sections.

Note the following:

By default, all pinned rows are exported.
If Skip Pinned Top Rows is checked, the rows pinned at the top will be skipped.
If Skip Pinned Bottom Rows is checked, the rows pinned at the bottom will be skipped.

main.ts

import {
  ClientSideRowModelModule,
  ColGroupDef,
  CsvExportModule,
  GridApi,
  GridOptions,
  ModuleRegistry,
  NumberFilterModule,
  PinnedRowModule,
  TextFilterModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ContextMenuModule,
  ExcelExportModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  TextFilterModule,
  NumberFilterModule,
  PinnedRowModule,
  ClientSideRowModelModule,
  CsvExportModule,
  ExcelExportModule,
  ColumnMenuModule,
  ContextMenuModule,
]);

const columnDefs: ColGroupDef[] = [
  {
    headerName: "Top Level Column Group",
    children: [
      {
        headerName: "Group A",
        children: [
          { field: "athlete", minWidth: 200 },
          { field: "country", minWidth: 200 },
          { headerName: "Group", valueGetter: "data.country.charAt(0)" },
        ],
      },
      {
        headerName: "Group B",
        children: [
          { field: "date", minWidth: 150 },
          { field: "sport", minWidth: 150 },
          { field: "gold" },
          { field: "silver" },
          { field: "bronze" },
          { field: "total" },
        ],
      },
    ],
  },
];

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  defaultColDef: {
    filter: true,
    minWidth: 100,
    flex: 1,
  },

  columnDefs: columnDefs,
  popupParent: document.body,

  pinnedTopRowData: [
    {
      athlete: "Floating <Top> Athlete",
      country: "Floating <Top> Country",
      date: "01/08/2020",
      sport: "Track & Field",
      gold: 22,
      silver: 3,
      bronze: 44,
      total: 69,
    } as any,
  ],

  pinnedBottomRowData: [
    {
      athlete: "Floating <Bottom> Athlete",
      country: "Floating <Bottom> Country",
      date: "01/08/2030",
      sport: "Track & Field",
      gold: 222,
      silver: 5,
      bronze: 244,
      total: 471,
    } as any,
  ],
};

function getBoolean(id: string) {
  return !!(document.querySelector("#" + id) as HTMLInputElement).checked;
}

function getParams() {
  return {
    skipPinnedTop: getBoolean("skipPinnedTop"),
    skipPinnedBottom: getBoolean("skipPinnedBottom"),
  };
}

function onBtExport() {
  gridApi!.exportDataAsExcel(getParams());
}

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);
fetch("https://www.ag-grid.com/example-assets/small-olympic-winners.json")
  .then((response) => response.json())
  .then((data) =>
    gridApi!.setGridOption(
      "rowData",
      data.filter((rec: any) => rec.country != null),
    ),
  );

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).onBtExport = onBtExport;
}

styles.css

.details > label {
    margin-bottom: 10px;
}
.details > label:first-of-type {
    margin-top: 10px;
}
.details > label:last-of-type {
    margin-bottom: 0;
}
.option {
    display: block;
    margin: 5px 10px 5px 0;
}
.grid-wrapper {
    display: flex;
    flex: 1 1 0px;
}
.grid-wrapper > div {
    width: 100%;
    height: 100%;
}
.container {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.columns {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
}

index.html

<div class="container">
    <div class="columns">
        <div class="column">
            <label for="skipPinnedTop"><input id="skipPinnedTop" type="checkbox" />Skip Pinned Top Rows</label>
        </div>
        <div class="column">
            <label for="skipPinnedBottom"><input id="skipPinnedBottom" type="checkbox" />Skip Pinned Bottom Rows</label>
        </div>
        <div>
            <button onclick="onBtExport()" style="margin: 5px 0px; font-weight: bold">Export to Excel</button>
        </div>
    </div>
    <div class="grid-wrapper">
        <div id="myGrid"></div>
    </div>
</div>

interfaces.ts


export interface IOlympicData {
    athlete: string,
    age: number,
    country: string,
    year: number,
    date: string,
    sport: string,
    gold: number,
    silver: number,
    bronze: number,
    total: number
}

Getting Started

AI Features

Layout & Styling

Charting

Core Features

Advanced Features

JavaScript Data GridExcel Export - Rows

Export Selected Rows Copy Link

Export Multi Line Cells Copy Link

Export All Unprocessed Rows Copy Link

Pinned Rows Copy Link