---
title: "Excel Export - Notes"
enterprise: true
framework: vue
version: "36.1.0"
---

# Excel Export - Notes

Excel notes/comments can be added to exported cells using a callback, exported automatically from the [Notes](https://www.ag-grid.com/vue-data-grid/notes/) feature, or attached to custom content rows.

## Adding Notes to Cells

Use `processNoteCallback` to inject notes during export. The callback is invoked for each exported cell and receives the cell value, column, and row node. Return an `ExcelNote` object to attach a note, `undefined` to keep the default behaviour, or `null` to suppress the note for the current cell.

If a note does not specify an `author`, the Excel document `author` is used. When the document author is not provided, the exporter falls back to `AG Grid`.

#### Excel Export - Basic Notes

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./styles.css";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  ExcelExportParams,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
import { ContextMenuModule, ExcelExportModule } from "ag-grid-enterprise";
import { OlympicWinner } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  ContextMenuModule,
  ExcelExportModule,
]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="container">
      <div class="controls">
        <button v-on:click="onBtExport()">Export</button>
      </div>
      <div class="grid-wrapper">
        <ag-grid-vue
          style="width: 100%; height: 100%;"
          @grid-ready="onGridReady"
          :columnDefs="columnDefs"
          :rowData="rowData"
          :defaultColDef="defaultColDef"
          :defaultExcelExportParams="defaultExcelExportParams"></ag-grid-vue>
        </div>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<OlympicWinner> | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "athlete", minWidth: 180 },
      { field: "country", minWidth: 180 },
      { field: "year", maxWidth: 120 },
      { field: "sport", minWidth: 160 },
      { field: "gold", maxWidth: 120 },
    ]);
    const rowData = ref<OlympicWinner[] | null>([
      {
        athlete: "Michael Phelps",
        country: "United States",
        year: 2008,
        sport: "Swimming",
        gold: 8,
      },
      {
        athlete: "Usain Bolt",
        country: "Jamaica",
        year: 2008,
        sport: "Athletics",
        gold: 3,
      },
      {
        athlete: "Simone Biles",
        country: "United States",
        year: 2016,
        sport: "Gymnastics",
        gold: 4,
      },
      {
        athlete: "Katie Ledecky",
        country: "United States",
        year: 2016,
        sport: "Swimming",
        gold: 4,
      },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 120,
    });
    const defaultExcelExportParams = ref<ExcelExportParams>({
      author: "Export Bot",
      processNoteCallback: (params) => {
        if (params.column.getColId() === "gold" && Number(params.value) >= 5) {
          return {
            text: `Outstanding medal count (${params.value} gold). Flag for performance review.`,
            author: "Review Team",
          };
        }
        return undefined;
      },
    });

    function onBtExport() {
      gridApi.value.exportDataAsExcel();
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;
    };

    return {
      gridApi,
      columnDefs,
      rowData,
      defaultColDef,
      defaultExcelExportParams,
      onGridReady,
      onBtExport,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

[Live example: Excel Export - Basic Notes](https://www.ag-grid.com/examples/excel-export-notes/excel-export-notes-basic/vue3)

```ts
<ag-grid-vue
    :defaultExcelExportParams="defaultExcelExportParams"
    /* other grid options ... */>
</ag-grid-vue>

this.defaultExcelExportParams = {
    processNoteCallback: (params) => {
        if (params.column.getColId() === 'gold' && Number(params.value) >= 5) {
            return {
                text: `Outstanding medal count (${params.value} gold).`,
            };
        }
    },
 };
```

## Exporting Grid Notes

When the [Notes](https://www.ag-grid.com/vue-data-grid/notes/) feature is enabled and `notesDataSource` is configured, cell notes are exported automatically as Excel notes/comments. No callback is needed.

#### Excel Export - Grid Notes

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./styles.css";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  ExcelExportParams,
  FullWidthNotesDataSource,
  GetRowIdFunc,
  GetRowIdParams,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  Note,
  NotesDataSource,
  NotesDataSourceGetNoteParams,
  NotesDataSourceSetNoteParams,
  enableDevValidations,
} from "ag-grid-community";
import {
  ContextMenuModule,
  ExcelExportModule,
  NotesModule,
} from "ag-grid-enterprise";
import { OlympicWinner } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  ContextMenuModule,
  ExcelExportModule,
  NotesModule,
]);

const getNoteKey = (rowId: string, colId: string) => `${rowId}::${colId}`;

const noteStore = new Map<string, Note>([
  [
    getNoteKey("1", "athlete"),
    {
      text: "Confirm the athlete biography before publishing the desk report.",
      author: "Maya",
      updatedAt: "29 Mar 2026, 09:15",
    },
  ],
  [
    getNoteKey("3", "country"),
    {
      text: "Check the latest federation naming guidance for this country.",
      updatedAt: "27 Mar 2026, 14:30",
    },
  ],
]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="container">
      <div class="controls">
        <button v-on:click="onBtExport()">Export</button>
      </div>
      <div class="grid-wrapper">
        <ag-grid-vue
          style="width: 100%; height: 100%;"
          @grid-ready="onGridReady"
          :notesDataSource="notesDataSource"
          :columnDefs="columnDefs"
          :rowData="rowData"
          :getRowId="getRowId"
          :defaultColDef="defaultColDef"
          :defaultExcelExportParams="defaultExcelExportParams"></ag-grid-vue>
        </div>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<OlympicWinner> | null>(null);
    const notesDataSource = ref<NotesDataSource | FullWidthNotesDataSource>({
      getNote: (params: NotesDataSourceGetNoteParams) =>
        noteStore.get(getNoteKey(params.rowNode.id!, params.column.getColId())),
      setNote: (params: NotesDataSourceSetNoteParams) => {
        const key = getNoteKey(params.rowNode.id!, params.column.getColId());
        if (params.note === undefined) {
          noteStore.delete(key);
        } else {
          noteStore.set(key, params.note);
        }
      },
    });
    const columnDefs = ref<ColDef[]>([
      { field: "athlete", minWidth: 180 },
      { field: "country", minWidth: 180 },
      { field: "year", maxWidth: 120 },
      { field: "sport", minWidth: 160 },
      { field: "gold", maxWidth: 120 },
    ]);
    const rowData = ref<OlympicWinner[] | null>([
      {
        id: "1",
        athlete: "Michael Phelps",
        country: "United States",
        year: 2008,
        sport: "Swimming",
        gold: 8,
      },
      {
        id: "2",
        athlete: "Usain Bolt",
        country: "Jamaica",
        year: 2008,
        sport: "Athletics",
        gold: 3,
      },
      {
        id: "3",
        athlete: "Simone Biles",
        country: "United States",
        year: 2016,
        sport: "Gymnastics",
        gold: 4,
      },
      {
        id: "4",
        athlete: "Katie Ledecky",
        country: "United States",
        year: 2016,
        sport: "Swimming",
        gold: 4,
      },
    ]);
    const getRowId = ref<GetRowIdFunc>(
      ({ data }: GetRowIdParams<OlympicWinner>) => data.id,
    );
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 120,
    });
    const defaultExcelExportParams = ref<ExcelExportParams>({
      author: "Portfolio Ops",
    });

    function onBtExport() {
      gridApi.value.exportDataAsExcel();
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;
    };

    return {
      gridApi,
      notesDataSource,
      columnDefs,
      rowData,
      getRowId,
      defaultColDef,
      defaultExcelExportParams,
      onGridReady,
      onBtExport,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

[Live example: Excel Export - Grid Notes](https://www.ag-grid.com/examples/excel-export-notes/excel-export-grid-notes/vue3)

### Suppressing Grid Notes

Set `suppressGridNotesExport` to `true` to prevent grid notes from being included in the export. The grid still displays notes, but the exported file will not contain them. Callback-based note injection via `processNoteCallback` still works when this is set.

#### Excel Export - Suppress Grid Notes

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./styles.css";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  ExcelExportParams,
  FullWidthNotesDataSource,
  GetRowIdFunc,
  GetRowIdParams,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  Note,
  NotesDataSource,
  NotesDataSourceGetNoteParams,
  NotesDataSourceSetNoteParams,
  enableDevValidations,
} from "ag-grid-community";
import {
  ContextMenuModule,
  ExcelExportModule,
  NotesModule,
} from "ag-grid-enterprise";
import { OlympicWinner } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  ContextMenuModule,
  ExcelExportModule,
  NotesModule,
]);

const getNoteKey = (rowId: string, colId: string) => `${rowId}::${colId}`;

const noteStore = new Map<string, Note>([
  [
    getNoteKey("1", "athlete"),
    {
      text: "Confirm the athlete biography before publishing the desk report.",
      author: "Maya",
      updatedAt: "29 Mar 2026, 09:15",
    },
  ],
  [
    getNoteKey("3", "country"),
    {
      text: "Check the latest federation naming guidance for this country.",
      updatedAt: "27 Mar 2026, 14:30",
    },
  ],
]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="container">
      <div class="controls">
        <button v-on:click="onBtExport()">Export</button>
      </div>
      <div class="grid-wrapper">
        <ag-grid-vue
          style="width: 100%; height: 100%;"
          @grid-ready="onGridReady"
          :notesDataSource="notesDataSource"
          :columnDefs="columnDefs"
          :rowData="rowData"
          :getRowId="getRowId"
          :defaultColDef="defaultColDef"
          :defaultExcelExportParams="defaultExcelExportParams"></ag-grid-vue>
        </div>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<OlympicWinner> | null>(null);
    const notesDataSource = ref<NotesDataSource | FullWidthNotesDataSource>({
      getNote: (params: NotesDataSourceGetNoteParams) =>
        noteStore.get(getNoteKey(params.rowNode.id!, params.column.getColId())),
      setNote: (params: NotesDataSourceSetNoteParams) => {
        const key = getNoteKey(params.rowNode.id!, params.column.getColId());
        if (params.note === undefined) {
          noteStore.delete(key);
        } else {
          noteStore.set(key, params.note);
        }
      },
    });
    const columnDefs = ref<ColDef[]>([
      { field: "athlete", minWidth: 180 },
      { field: "country", minWidth: 180 },
      { field: "year", maxWidth: 120 },
      { field: "sport", minWidth: 160 },
      { field: "gold", maxWidth: 120 },
    ]);
    const rowData = ref<OlympicWinner[] | null>([
      {
        id: "1",
        athlete: "Michael Phelps",
        country: "United States",
        year: 2008,
        sport: "Swimming",
        gold: 8,
      },
      {
        id: "2",
        athlete: "Usain Bolt",
        country: "Jamaica",
        year: 2008,
        sport: "Athletics",
        gold: 3,
      },
      {
        id: "3",
        athlete: "Simone Biles",
        country: "United States",
        year: 2016,
        sport: "Gymnastics",
        gold: 4,
      },
      {
        id: "4",
        athlete: "Katie Ledecky",
        country: "United States",
        year: 2016,
        sport: "Swimming",
        gold: 4,
      },
    ]);
    const getRowId = ref<GetRowIdFunc>(
      ({ data }: GetRowIdParams<OlympicWinner>) => data.id,
    );
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 120,
    });
    const defaultExcelExportParams = ref<ExcelExportParams>({
      author: "Portfolio Ops",
      suppressGridNotesExport: true,
    });

    function onBtExport() {
      gridApi.value.exportDataAsExcel();
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;
    };

    return {
      gridApi,
      notesDataSource,
      columnDefs,
      rowData,
      getRowId,
      defaultColDef,
      defaultExcelExportParams,
      onGridReady,
      onBtExport,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

[Live example: Excel Export - Suppress Grid Notes](https://www.ag-grid.com/examples/excel-export-notes/excel-export-suppress-grid-notes/vue3)

```ts
<ag-grid-vue
    :defaultExcelExportParams="defaultExcelExportParams"
    /* other grid options ... */>
</ag-grid-vue>

this.defaultExcelExportParams = {
    suppressGridNotesExport: true,
 };
```

### Customising Exported Notes

The `processNoteCallback` can be used to customise existing grid notes before they are exported. For cells that contain grid notes the `processNoteCallback` provides both `excelNote` and `gridNote`.

- `excelNote` - is the note that will be exported to Excel
- `gridNote` - is the source grid note for this cell

The example below shows how the existing `excelNote` text can be updated to include the `updatedAt` value from the underlying `gridNote`.

#### Excel Export - Customising Notes

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./styles.css";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  ExcelExportParams,
  FullWidthNotesDataSource,
  GetRowIdFunc,
  GetRowIdParams,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  Note,
  NotesDataSource,
  NotesDataSourceGetNoteParams,
  NotesDataSourceSetNoteParams,
  enableDevValidations,
} from "ag-grid-community";
import {
  ContextMenuModule,
  ExcelExportModule,
  NotesModule,
} from "ag-grid-enterprise";
import { OlympicWinner } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  ContextMenuModule,
  ExcelExportModule,
  NotesModule,
]);

const getNoteKey = (rowId: string, colId: string) => `${rowId}::${colId}`;

const noteStore = new Map<string, Note>([
  [
    getNoteKey("1", "athlete"),
    {
      text: "Confirm the athlete biography before publishing the desk report.",
      author: "Maya",
      updatedAt: "29 Mar 2026, 09:15",
    },
  ],
  [
    getNoteKey("3", "country"),
    {
      text: "Check the latest federation naming guidance for this country.",
      updatedAt: "27 Mar 2026, 14:30",
    },
  ],
]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="container">
      <div class="controls">
        <button v-on:click="onBtExport()">Export</button>
      </div>
      <div class="grid-wrapper">
        <ag-grid-vue
          style="width: 100%; height: 100%;"
          @grid-ready="onGridReady"
          :notesDataSource="notesDataSource"
          :columnDefs="columnDefs"
          :rowData="rowData"
          :getRowId="getRowId"
          :defaultColDef="defaultColDef"
          :defaultExcelExportParams="defaultExcelExportParams"></ag-grid-vue>
        </div>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<OlympicWinner> | null>(null);
    const notesDataSource = ref<NotesDataSource | FullWidthNotesDataSource>({
      getNote: (params: NotesDataSourceGetNoteParams) =>
        noteStore.get(getNoteKey(params.rowNode.id!, params.column.getColId())),
      setNote: (params: NotesDataSourceSetNoteParams) => {
        const key = getNoteKey(params.rowNode.id!, params.column.getColId());
        if (params.note === undefined) {
          noteStore.delete(key);
        } else {
          noteStore.set(key, params.note);
        }
      },
    });
    const columnDefs = ref<ColDef[]>([
      { field: "athlete", minWidth: 180 },
      { field: "country", minWidth: 180 },
      { field: "year", maxWidth: 120 },
      { field: "sport", minWidth: 160 },
      { field: "gold", maxWidth: 120 },
    ]);
    const rowData = ref<OlympicWinner[] | null>([
      {
        id: "1",
        athlete: "Michael Phelps",
        country: "United States",
        year: 2008,
        sport: "Swimming",
        gold: 8,
      },
      {
        id: "2",
        athlete: "Usain Bolt",
        country: "Jamaica",
        year: 2008,
        sport: "Athletics",
        gold: 3,
      },
      {
        id: "3",
        athlete: "Simone Biles",
        country: "United States",
        year: 2016,
        sport: "Gymnastics",
        gold: 4,
      },
      {
        id: "4",
        athlete: "Katie Ledecky",
        country: "United States",
        year: 2016,
        sport: "Swimming",
        gold: 4,
      },
    ]);
    const getRowId = ref<GetRowIdFunc>(
      ({ data }: GetRowIdParams<OlympicWinner>) => data.id,
    );
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 120,
    });
    const defaultExcelExportParams = ref<ExcelExportParams>({
      author: "Portfolio Ops",
      processNoteCallback: (params) => {
        if (params.excelNote) {
          return {
            ...params.excelNote,
            text: `${params.excelNote.text}\n\nUpdated: ${params.gridNote?.updatedAt ?? "Not recorded"}`,
          };
        }
        // Export a note to Excel for which there is not an existing gridNote
        if (params.column.getColId() === "gold" && Number(params.value) >= 8) {
          return {
            text: "Flag this medal count for the performance review pack.",
          };
        }
      },
    });

    function onBtExport() {
      gridApi.value.exportDataAsExcel();
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;
    };

    return {
      gridApi,
      notesDataSource,
      columnDefs,
      rowData,
      getRowId,
      defaultColDef,
      defaultExcelExportParams,
      onGridReady,
      onBtExport,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

[Live example: Excel Export - Customising Notes](https://www.ag-grid.com/examples/excel-export-notes/excel-export-notes-customisation/vue3)

```ts
<ag-grid-vue
    :notesDataSource="notesDataSource"
    :defaultExcelExportParams="defaultExcelExportParams"
    /* other grid options ... */>
</ag-grid-vue>

notesDataSource;
this.defaultExcelExportParams = {
    processNoteCallback: (params) => {
        if (params.excelNote) {
            return {
                ...params.excelNote,
                text: `${params.excelNote.text}\n\nUpdated: ${params.gridNote?.updatedAt ?? 'Not recorded'}`,
            };
        }
    },
};
```

## Hiding Author

By default, the author name is prepended as bold text in the Excel note body (matching Excel's native behaviour). Set `suppressPrependAuthorToNotes` to `true` to export only the note text. The author is still stored in the Excel workbook's note metadata.

#### Excel Export - Hide Author

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./styles.css";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  ExcelExportParams,
  FullWidthNotesDataSource,
  GetRowIdFunc,
  GetRowIdParams,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  Note,
  NotesDataSource,
  NotesDataSourceGetNoteParams,
  NotesDataSourceSetNoteParams,
  enableDevValidations,
} from "ag-grid-community";
import {
  ContextMenuModule,
  ExcelExportModule,
  NotesModule,
} from "ag-grid-enterprise";
import { OlympicWinner } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  ContextMenuModule,
  ExcelExportModule,
  NotesModule,
]);

const getNoteKey = (rowId: string, colId: string) => `${rowId}::${colId}`;

const noteStore = new Map<string, Note>([
  [
    getNoteKey("1", "athlete"),
    {
      text: "Confirm the athlete biography before publishing the desk report.",
      author: "Maya",
      updatedAt: "29 Mar 2026, 09:15",
    },
  ],
  [
    getNoteKey("3", "country"),
    {
      text: "Check the latest federation naming guidance for this country.",
      updatedAt: "27 Mar 2026, 14:30",
    },
  ],
]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="container">
      <div class="controls">
        <button v-on:click="onBtExport()">Export</button>
      </div>
      <div class="grid-wrapper">
        <ag-grid-vue
          style="width: 100%; height: 100%;"
          @grid-ready="onGridReady"
          :notesDataSource="notesDataSource"
          :columnDefs="columnDefs"
          :rowData="rowData"
          :getRowId="getRowId"
          :defaultColDef="defaultColDef"
          :defaultExcelExportParams="defaultExcelExportParams"></ag-grid-vue>
        </div>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<OlympicWinner> | null>(null);
    const notesDataSource = ref<NotesDataSource | FullWidthNotesDataSource>({
      getNote: (params: NotesDataSourceGetNoteParams) =>
        noteStore.get(getNoteKey(params.rowNode.id!, params.column.getColId())),
      setNote: (params: NotesDataSourceSetNoteParams) => {
        const key = getNoteKey(params.rowNode.id!, params.column.getColId());
        if (params.note === undefined) {
          noteStore.delete(key);
        } else {
          noteStore.set(key, params.note);
        }
      },
    });
    const columnDefs = ref<ColDef[]>([
      { field: "athlete", minWidth: 180 },
      { field: "country", minWidth: 180 },
      { field: "year", maxWidth: 120 },
      { field: "sport", minWidth: 160 },
      { field: "gold", maxWidth: 120 },
    ]);
    const rowData = ref<OlympicWinner[] | null>([
      {
        id: "1",
        athlete: "Michael Phelps",
        country: "United States",
        year: 2008,
        sport: "Swimming",
        gold: 8,
      },
      {
        id: "2",
        athlete: "Usain Bolt",
        country: "Jamaica",
        year: 2008,
        sport: "Athletics",
        gold: 3,
      },
      {
        id: "3",
        athlete: "Simone Biles",
        country: "United States",
        year: 2016,
        sport: "Gymnastics",
        gold: 4,
      },
      {
        id: "4",
        athlete: "Katie Ledecky",
        country: "United States",
        year: 2016,
        sport: "Swimming",
        gold: 4,
      },
    ]);
    const getRowId = ref<GetRowIdFunc>(
      ({ data }: GetRowIdParams<OlympicWinner>) => data.id,
    );
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 120,
    });
    const defaultExcelExportParams = ref<ExcelExportParams>({
      author: "Portfolio Ops",
      suppressPrependAuthorToNotes: true,
    });

    function onBtExport() {
      gridApi.value.exportDataAsExcel();
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;
    };

    return {
      gridApi,
      notesDataSource,
      columnDefs,
      rowData,
      getRowId,
      defaultColDef,
      defaultExcelExportParams,
      onGridReady,
      onBtExport,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

[Live example: Excel Export - Hide Author](https://www.ag-grid.com/examples/excel-export-notes/excel-export-hide-author/vue3)

```ts
<ag-grid-vue
    :defaultExcelExportParams="defaultExcelExportParams"
    /* other grid options ... */>
</ag-grid-vue>

this.defaultExcelExportParams = {
    author: 'Portfolio Ops',
    suppressPrependAuthorToNotes: true,
 };
```

## Adding Notes to Extra Content

Cells in [extra content](https://www.ag-grid.com/vue-data-grid/excel-export-extra-content/) rows can carry Excel notes via `ExcelCell.note`.

#### Excel Export - Notes on Extra Content

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import "./styles.css";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  ExcelExportParams,
  ExcelRow,
  ExcelStyle,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
import { ExcelExportModule } from "ag-grid-enterprise";
import { OlympicWinner } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([ClientSideRowModelModule, ExcelExportModule]);

const extraContent: ExcelRow[] = [
  {
    cells: [
      {
        data: { type: "String", value: "Export Summary" },
        styleId: "coverHeading",
        note: {
          text: "This note is added only during export through ExcelCell.note.",
        },
      },
    ],
  },
  { cells: [] },
];

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <div class="container">
      <div class="controls">
        <button v-on:click="onBtExport()">Export</button>
      </div>
      <div class="grid-wrapper">
        <ag-grid-vue
          style="width: 100%; height: 100%;"
          @grid-ready="onGridReady"
          :columnDefs="columnDefs"
          :rowData="rowData"
          :defaultColDef="defaultColDef"
          :excelStyles="excelStyles"
          :defaultExcelExportParams="defaultExcelExportParams"></ag-grid-vue>
        </div>
      </div>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<OlympicWinner> | null>(null);
    const columnDefs = ref<ColDef[]>([
      { field: "athlete", minWidth: 180 },
      { field: "country", minWidth: 180 },
      { field: "year", maxWidth: 120 },
      { field: "sport", minWidth: 160 },
      { field: "gold", maxWidth: 120 },
    ]);
    const rowData = ref<OlympicWinner[] | null>([
      {
        athlete: "Michael Phelps",
        country: "United States",
        year: 2008,
        sport: "Swimming",
        gold: 8,
      },
      {
        athlete: "Usain Bolt",
        country: "Jamaica",
        year: 2008,
        sport: "Athletics",
        gold: 3,
      },
      {
        athlete: "Simone Biles",
        country: "United States",
        year: 2016,
        sport: "Gymnastics",
        gold: 4,
      },
      {
        athlete: "Katie Ledecky",
        country: "United States",
        year: 2016,
        sport: "Swimming",
        gold: 4,
      },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 120,
    });
    const excelStyles = ref<ExcelStyle[]>([
      {
        id: "coverHeading",
        font: {
          bold: true,
          size: 14,
        },
      },
    ]);
    const defaultExcelExportParams = ref<ExcelExportParams>({
      author: "Portfolio Ops",
      prependContent: extraContent,
    });

    function onBtExport() {
      gridApi.value.exportDataAsExcel();
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;
    };

    return {
      gridApi,
      columnDefs,
      rowData,
      defaultColDef,
      excelStyles,
      defaultExcelExportParams,
      onGridReady,
      onBtExport,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

[Live example: Excel Export - Notes on Extra Content](https://www.ag-grid.com/examples/excel-export-notes/excel-export-notes-extra-content/vue3)

```ts
<ag-grid-vue
    :defaultExcelExportParams="defaultExcelExportParams"
    /* other grid options ... */>
</ag-grid-vue>

this.defaultExcelExportParams = {
    prependContent: [
        {
            cells: [
                {
                    data: { type: 'String', value: 'Export Summary' },
                    note: {
                        text: 'This note is added only during export through ExcelCell.note.',
                    },
                },
            ],
        },
    ],
};
```

## API

### ExcelNote

Properties available on the `ExcelNote` interface.

See [Notes](https://www.ag-grid.com/vue-data-grid/excel-export-notes/) for more information.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `text` | `string` | Yes |  | The body text to export in the Excel note/comment. |
| `author` | `string` |  |  | Optional author name displayed in the exported Excel note. When omitted, the document `author` is used. |

### ProcessNoteForExportParams

Properties available on the `ProcessNoteForExportParams&lt;TData = any, TContext = any&gt;` interface.

See [Notes](https://www.ag-grid.com/vue-data-grid/excel-export-notes/) for more information.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `gridNote` | `Note` |  |  | The grid note resolved for the current cell, when the Notes feature is available. |
| `excelNote` | `ExcelNote` |  |  | The Excel note/comment value derived from `gridNote` when automatic note export is enabled. |
| `value` | `any` |  |  | The raw cell value before any formatting or processing. |
| `accumulatedRowIndex` | `number` |  |  | The zero-based row index in the exported output, including any prepended content rows. Only populated for file export flows (`'excel'`, `'csv'`); omitted for clipboard flows. |
| `node` | [`IRowNode \| null`](https://www.ag-grid.com/vue-data-grid/row-object/) |  |  | The row node for the cell. May be `null` or `undefined` for clipboard flows when no row is associated. |
| `column` | [`Column`](https://www.ag-grid.com/vue-data-grid/column-object/) |  |  | The column for the cell. |
| `type` | `string` |  |  | The operation that triggered the callback |
| `parseValue` | `Function` |  |  | Utility function to parse a value using the column's `colDef.valueParser` |
| `formatValue` | `Function` |  |  | Utility function to format a value using the column's `colDef.valueFormatter` |
| `api` | [`GridApi`](https://www.ag-grid.com/vue-data-grid/grid-api/) |  |  | The grid api. |
| `context` | [`TContext`](https://www.ag-grid.com/vue-data-grid/typescript-generics/#context-tcontext) |  |  | Application context as set on `gridOptions.context`. |