---
title: "Excel Export - Notes"
enterprise: true
framework: react
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/react-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

```tsx
"use client";

import React, {
  useCallback,
  useMemo,
  useRef,
  useState,
  StrictMode,
} from "react";
import { createRoot } from "react-dom/client";
import { AgGridReact, AgGridProvider } from "ag-grid-react";
import "./styles.css";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  ExcelExportParams,
  GridApi,
  GridOptions,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
import { ContextMenuModule, ExcelExportModule } from "ag-grid-enterprise";
import { OlympicWinner } from "./interfaces";

if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

const modules = [
  ClientSideRowModelModule,
  ContextMenuModule,
  ExcelExportModule,
];

const GridExample = () => {
  const gridRef = useRef<AgGridReact<OlympicWinner>>(null);
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [rowData, setRowData] = useState<OlympicWinner[]>([
    {
      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 [columnDefs, setColumnDefs] = useState<ColDef[]>([
    { field: "athlete", minWidth: 180 },
    { field: "country", minWidth: 180 },
    { field: "year", maxWidth: 120 },
    { field: "sport", minWidth: 160 },
    { field: "gold", maxWidth: 120 },
  ]);
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      flex: 1,
      minWidth: 120,
    };
  }, []);
  const defaultExcelExportParams = useMemo<ExcelExportParams>(() => {
    return {
      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;
      },
    };
  }, []);

  const onBtExport = useCallback(() => {
    gridRef.current!.api.exportDataAsExcel();
  }, []);

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div className="container">
          <div className="controls">
            <button onClick={onBtExport}>Export</button>
          </div>
          <div className="grid-wrapper">
            <div style={gridStyle}>
              <AgGridReact<OlympicWinner>
                ref={gridRef}
                rowData={rowData}
                columnDefs={columnDefs}
                defaultColDef={defaultColDef}
                defaultExcelExportParams={defaultExcelExportParams}
              />
            </div>
          </div>
        </div>
      </div>
    </AgGridProvider>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(
  <StrictMode>
    <GridExample />
  </StrictMode>,
);
```

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

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

<AgGridReact defaultExcelExportParams={defaultExcelExportParams} />
```

## Exporting Grid Notes

When the [Notes](https://www.ag-grid.com/react-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

```tsx
"use client";

import React, {
  useCallback,
  useMemo,
  useRef,
  useState,
  StrictMode,
} from "react";
import { createRoot } from "react-dom/client";
import { AgGridReact, AgGridProvider } from "ag-grid-react";
import "./styles.css";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  ExcelExportParams,
  FullWidthNotesDataSource,
  GetRowIdFunc,
  GetRowIdParams,
  GridApi,
  GridOptions,
  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();
}

const modules = [
  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 GridExample = () => {
  const gridRef = useRef<AgGridReact<OlympicWinner>>(null);
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [rowData, setRowData] = useState<OlympicWinner[]>([
    {
      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 notesDataSource = useMemo<
    NotesDataSource | FullWidthNotesDataSource
  >(() => {
    return {
      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, setColumnDefs] = useState<ColDef[]>([
    { field: "athlete", minWidth: 180 },
    { field: "country", minWidth: 180 },
    { field: "year", maxWidth: 120 },
    { field: "sport", minWidth: 160 },
    { field: "gold", maxWidth: 120 },
  ]);
  const getRowId = useCallback(
    ({ data }: GetRowIdParams<OlympicWinner>) => data.id,
    [],
  );
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      flex: 1,
      minWidth: 120,
    };
  }, []);
  const defaultExcelExportParams = useMemo<ExcelExportParams>(() => {
    return {
      author: "Portfolio Ops",
    };
  }, []);

  const onBtExport = useCallback(() => {
    gridRef.current!.api.exportDataAsExcel();
  }, []);

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div className="container">
          <div className="controls">
            <button onClick={onBtExport}>Export</button>
          </div>
          <div className="grid-wrapper">
            <div style={gridStyle}>
              <AgGridReact<OlympicWinner>
                ref={gridRef}
                rowData={rowData}
                notesDataSource={notesDataSource}
                columnDefs={columnDefs}
                getRowId={getRowId}
                defaultColDef={defaultColDef}
                defaultExcelExportParams={defaultExcelExportParams}
              />
            </div>
          </div>
        </div>
      </div>
    </AgGridProvider>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(
  <StrictMode>
    <GridExample />
  </StrictMode>,
);
```

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

### 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

```tsx
"use client";

import React, {
  useCallback,
  useMemo,
  useRef,
  useState,
  StrictMode,
} from "react";
import { createRoot } from "react-dom/client";
import { AgGridReact, AgGridProvider } from "ag-grid-react";
import "./styles.css";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  ExcelExportParams,
  FullWidthNotesDataSource,
  GetRowIdFunc,
  GetRowIdParams,
  GridApi,
  GridOptions,
  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();
}

const modules = [
  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 GridExample = () => {
  const gridRef = useRef<AgGridReact<OlympicWinner>>(null);
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [rowData, setRowData] = useState<OlympicWinner[]>([
    {
      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 notesDataSource = useMemo<
    NotesDataSource | FullWidthNotesDataSource
  >(() => {
    return {
      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, setColumnDefs] = useState<ColDef[]>([
    { field: "athlete", minWidth: 180 },
    { field: "country", minWidth: 180 },
    { field: "year", maxWidth: 120 },
    { field: "sport", minWidth: 160 },
    { field: "gold", maxWidth: 120 },
  ]);
  const getRowId = useCallback(
    ({ data }: GetRowIdParams<OlympicWinner>) => data.id,
    [],
  );
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      flex: 1,
      minWidth: 120,
    };
  }, []);
  const defaultExcelExportParams = useMemo<ExcelExportParams>(() => {
    return {
      author: "Portfolio Ops",
      suppressGridNotesExport: true,
    };
  }, []);

  const onBtExport = useCallback(() => {
    gridRef.current!.api.exportDataAsExcel();
  }, []);

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div className="container">
          <div className="controls">
            <button onClick={onBtExport}>Export</button>
          </div>
          <div className="grid-wrapper">
            <div style={gridStyle}>
              <AgGridReact<OlympicWinner>
                ref={gridRef}
                rowData={rowData}
                notesDataSource={notesDataSource}
                columnDefs={columnDefs}
                getRowId={getRowId}
                defaultColDef={defaultColDef}
                defaultExcelExportParams={defaultExcelExportParams}
              />
            </div>
          </div>
        </div>
      </div>
    </AgGridProvider>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(
  <StrictMode>
    <GridExample />
  </StrictMode>,
);
```

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

```jsx
const defaultExcelExportParams = useMemo(() => { 
	return {
        suppressGridNotesExport: true,
     };
}, []);

<AgGridReact defaultExcelExportParams={defaultExcelExportParams} />
```

### 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

```tsx
"use client";

import React, {
  useCallback,
  useMemo,
  useRef,
  useState,
  StrictMode,
} from "react";
import { createRoot } from "react-dom/client";
import { AgGridReact, AgGridProvider } from "ag-grid-react";
import "./styles.css";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  ExcelExportParams,
  FullWidthNotesDataSource,
  GetRowIdFunc,
  GetRowIdParams,
  GridApi,
  GridOptions,
  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();
}

const modules = [
  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 GridExample = () => {
  const gridRef = useRef<AgGridReact<OlympicWinner>>(null);
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [rowData, setRowData] = useState<OlympicWinner[]>([
    {
      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 notesDataSource = useMemo<
    NotesDataSource | FullWidthNotesDataSource
  >(() => {
    return {
      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, setColumnDefs] = useState<ColDef[]>([
    { field: "athlete", minWidth: 180 },
    { field: "country", minWidth: 180 },
    { field: "year", maxWidth: 120 },
    { field: "sport", minWidth: 160 },
    { field: "gold", maxWidth: 120 },
  ]);
  const getRowId = useCallback(
    ({ data }: GetRowIdParams<OlympicWinner>) => data.id,
    [],
  );
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      flex: 1,
      minWidth: 120,
    };
  }, []);
  const defaultExcelExportParams = useMemo<ExcelExportParams>(() => {
    return {
      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.",
          };
        }
      },
    };
  }, []);

  const onBtExport = useCallback(() => {
    gridRef.current!.api.exportDataAsExcel();
  }, []);

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div className="container">
          <div className="controls">
            <button onClick={onBtExport}>Export</button>
          </div>
          <div className="grid-wrapper">
            <div style={gridStyle}>
              <AgGridReact<OlympicWinner>
                ref={gridRef}
                rowData={rowData}
                notesDataSource={notesDataSource}
                columnDefs={columnDefs}
                getRowId={getRowId}
                defaultColDef={defaultColDef}
                defaultExcelExportParams={defaultExcelExportParams}
              />
            </div>
          </div>
        </div>
      </div>
    </AgGridProvider>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(
  <StrictMode>
    <GridExample />
  </StrictMode>,
);
```

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

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

<AgGridReact
    notesDataSource={notesDataSource}
    defaultExcelExportParams={defaultExcelExportParams}
/>
```

## 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

```tsx
"use client";

import React, {
  useCallback,
  useMemo,
  useRef,
  useState,
  StrictMode,
} from "react";
import { createRoot } from "react-dom/client";
import { AgGridReact, AgGridProvider } from "ag-grid-react";
import "./styles.css";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  ExcelExportParams,
  FullWidthNotesDataSource,
  GetRowIdFunc,
  GetRowIdParams,
  GridApi,
  GridOptions,
  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();
}

const modules = [
  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 GridExample = () => {
  const gridRef = useRef<AgGridReact<OlympicWinner>>(null);
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [rowData, setRowData] = useState<OlympicWinner[]>([
    {
      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 notesDataSource = useMemo<
    NotesDataSource | FullWidthNotesDataSource
  >(() => {
    return {
      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, setColumnDefs] = useState<ColDef[]>([
    { field: "athlete", minWidth: 180 },
    { field: "country", minWidth: 180 },
    { field: "year", maxWidth: 120 },
    { field: "sport", minWidth: 160 },
    { field: "gold", maxWidth: 120 },
  ]);
  const getRowId = useCallback(
    ({ data }: GetRowIdParams<OlympicWinner>) => data.id,
    [],
  );
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      flex: 1,
      minWidth: 120,
    };
  }, []);
  const defaultExcelExportParams = useMemo<ExcelExportParams>(() => {
    return {
      author: "Portfolio Ops",
      suppressPrependAuthorToNotes: true,
    };
  }, []);

  const onBtExport = useCallback(() => {
    gridRef.current!.api.exportDataAsExcel();
  }, []);

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div className="container">
          <div className="controls">
            <button onClick={onBtExport}>Export</button>
          </div>
          <div className="grid-wrapper">
            <div style={gridStyle}>
              <AgGridReact<OlympicWinner>
                ref={gridRef}
                rowData={rowData}
                notesDataSource={notesDataSource}
                columnDefs={columnDefs}
                getRowId={getRowId}
                defaultColDef={defaultColDef}
                defaultExcelExportParams={defaultExcelExportParams}
              />
            </div>
          </div>
        </div>
      </div>
    </AgGridProvider>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(
  <StrictMode>
    <GridExample />
  </StrictMode>,
);
```

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

```jsx
const defaultExcelExportParams = useMemo(() => { 
	return {
        author: 'Portfolio Ops',
        suppressPrependAuthorToNotes: true,
     };
}, []);

<AgGridReact defaultExcelExportParams={defaultExcelExportParams} />
```

## Adding Notes to Extra Content

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

#### Excel Export - Notes on Extra Content

```tsx
"use client";

import React, {
  useCallback,
  useMemo,
  useRef,
  useState,
  StrictMode,
} from "react";
import { createRoot } from "react-dom/client";
import { AgGridReact, AgGridProvider } from "ag-grid-react";
import "./styles.css";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  ExcelExportParams,
  ExcelRow,
  ExcelStyle,
  GridApi,
  GridOptions,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
import { ExcelExportModule } from "ag-grid-enterprise";
import { OlympicWinner } from "./interfaces";

if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

const modules = [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 GridExample = () => {
  const gridRef = useRef<AgGridReact<OlympicWinner>>(null);
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [rowData, setRowData] = useState<OlympicWinner[]>([
    {
      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 [columnDefs, setColumnDefs] = useState<ColDef[]>([
    { field: "athlete", minWidth: 180 },
    { field: "country", minWidth: 180 },
    { field: "year", maxWidth: 120 },
    { field: "sport", minWidth: 160 },
    { field: "gold", maxWidth: 120 },
  ]);
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      flex: 1,
      minWidth: 120,
    };
  }, []);
  const excelStyles = useMemo<ExcelStyle[]>(() => {
    return [
      {
        id: "coverHeading",
        font: {
          bold: true,
          size: 14,
        },
      },
    ];
  }, []);
  const defaultExcelExportParams = useMemo<ExcelExportParams>(() => {
    return {
      author: "Portfolio Ops",
      prependContent: extraContent,
    };
  }, []);

  const onBtExport = useCallback(() => {
    gridRef.current!.api.exportDataAsExcel();
  }, []);

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div className="container">
          <div className="controls">
            <button onClick={onBtExport}>Export</button>
          </div>
          <div className="grid-wrapper">
            <div style={gridStyle}>
              <AgGridReact<OlympicWinner>
                ref={gridRef}
                rowData={rowData}
                columnDefs={columnDefs}
                defaultColDef={defaultColDef}
                excelStyles={excelStyles}
                defaultExcelExportParams={defaultExcelExportParams}
              />
            </div>
          </div>
        </div>
      </div>
    </AgGridProvider>
  );
};

const root = createRoot(document.getElementById("root")!);
root.render(
  <StrictMode>
    <GridExample />
  </StrictMode>,
);
```

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

```jsx
const defaultExcelExportParams = useMemo(() => { 
	return {
        prependContent: [
            {
                cells: [
                    {
                        data: { type: 'String', value: 'Export Summary' },
                        note: {
                            text: 'This note is added only during export through ExcelCell.note.',
                        },
                    },
                ],
            },
        ],
    };
}, []);

<AgGridReact defaultExcelExportParams={defaultExcelExportParams} />
```

## API

### ExcelNote

Properties available on the `ExcelNote` interface.

See [Notes](https://www.ag-grid.com/react-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/react-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/react-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/react-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/react-data-grid/grid-api/) |  |  | The grid api. |
| `context` | [`TContext`](https://www.ag-grid.com/react-data-grid/typescript-generics/#context-tcontext) |  |  | Application context as set on `gridOptions.context`. |