---
title: "Notes"
enterprise: true
framework: react
version: "36.1.0"
---

# Notes

Notes let users attach comments to individual cells without storing note text in row data. Cells with notes are marked in the grid, note actions are available from the context menu, hovering a noted cell opens the built-in resizable note editor, and `Shift + F2` opens or creates a note for the focused cell when notes are allowed.

## Enabling Notes

Notes are enabled by providing a `notesDataSource` to the grid. The datasource has two required methods `getNote()` and `setNote()` and is responsible for managing the state of the notes for the grid. To ensure stable row ids [getRowId()](https://www.ag-grid.com/react-data-grid/row-ids/) is required.

To add a new note either right-click a cell to open the context menu or press `Shift + F2`. Hovering a cell with a note will display the note popup. Use `noteShowDelay` and `noteHideDelay` to control how quickly note popups appear and disappear on hover.

#### 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,
  FullWidthNotesDataSource,
  GetRowIdFunc,
  GetRowIdParams,
  GridOptions,
  ModuleRegistry,
  Note,
  NotesDataSource,
  NotesDataSourceGetNoteParams,
  NotesDataSourceSetNoteParams,
  enableDevValidations,
} from "ag-grid-community";
import { ContextMenuModule, NotesModule } from "ag-grid-enterprise";
import { OlympicWinner } from "./interfaces";

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

const modules = [ClientSideRowModelModule, ContextMenuModule, NotesModule];

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

const noteStore = new Map<string, Note>([
  [
    getNoteKey("1", "athlete"),
    {
      text: "Confirm the athlete biography before the next review.",
    },
  ],
  [
    getNoteKey("3", "country"),
    {
      text: "Check the latest federation naming guidance for this country.",
    },
  ],
]);

const GridExample = () => {
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [rowData, setRowData] = useState<OlympicWinner[]>([
    {
      id: "1",
      athlete: "Michael Phelps",
      age: 23,
      country: "United States",
      year: 2008,
      sport: "Swimming",
    },
    {
      id: "2",
      athlete: "Usain Bolt",
      age: 22,
      country: "Jamaica",
      year: 2008,
      sport: "Athletics",
    },
    {
      id: "3",
      athlete: "Simone Biles",
      age: 19,
      country: "United States",
      year: 2016,
      sport: "Gymnastics",
    },
    {
      id: "4",
      athlete: "Katie Ledecky",
      age: 19,
      country: "United States",
      year: 2016,
      sport: "Swimming",
    },
    {
      id: "5",
      athlete: "Allyson Felix",
      age: 30,
      country: "United States",
      year: 2016,
      sport: "Athletics",
    },
    {
      id: "6",
      athlete: "Mo Farah",
      age: 33,
      country: "Great Britain",
      year: 2016,
      sport: "Athletics",
    },
  ]);
  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" },
    { field: "age", maxWidth: 110 },
    { field: "country" },
    { field: "year", maxWidth: 110 },
    { field: "sport" },
  ]);
  const getRowId = useCallback(
    ({ data }: GetRowIdParams<OlympicWinner>) => data.id,
    [],
  );
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      flex: 1,
      minWidth: 120,
    };
  }, []);

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div className="example-wrapper">
          <div style={gridStyle}>
            <AgGridReact<OlympicWinner>
              rowData={rowData}
              notesDataSource={notesDataSource}
              columnDefs={columnDefs}
              getRowId={getRowId}
              defaultColDef={defaultColDef}
            />
          </div>
        </div>
      </div>
    </AgGridProvider>
  );
};

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

[Live example: Notes](https://www.ag-grid.com/examples/notes/notes/reactFunctionalTs)

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `notesDataSource` | `NotesDataSource \| FullWidthNotesDataSource` |  |  | Provide a data source to control where notes are stored and retrieved. Can be updated to enable, disable, or replace Notes at runtime. Module: [`NotesModule`](https://www.ag-grid.com/react-data-grid/modules/). |

```jsx
const getRowId = useCallback((params) => String(params.data.id), []);
const notesDataSource = {
    getNote: ({ rowNode, column }) => notesStore[rowNode.id]?.[column.getColId()],
    setNote: ({ rowNode, column, note }) => {
        const row = (notesStore[rowNode.id] ??= {});

        if (note === undefined) {
            delete row[column.getColId()];
        } else {
            row[column.getColId()] = note;
        }
    },
};

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

## Notes Trigger

Use `noteTrigger` to control whether existing notes open on hover or on left-click. `hover` is the default. When using `click`, `noteShowDelay` no longer applies, but `noteHideDelay` still controls how long the note stays open after the pointer leaves the cell or popup.

Click mode follows the same passive note rules as hover mode: notes still do not open for the cell currently being edited.

```jsx
const noteTrigger = 'click';

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

#### Notes Trigger

```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,
  FullWidthNotesDataSource,
  GetRowIdFunc,
  GetRowIdParams,
  GridOptions,
  ModuleRegistry,
  Note,
  NotesDataSource,
  NotesDataSourceGetNoteParams,
  NotesDataSourceSetNoteParams,
  enableDevValidations,
} from "ag-grid-community";
import { ContextMenuModule, NotesModule } from "ag-grid-enterprise";
import { OlympicWinner } from "./interfaces";

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

const modules = [ClientSideRowModelModule, ContextMenuModule, NotesModule];

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

const noteStore = new Map<string, Note>([
  [
    getNoteKey("1", "athlete"),
    {
      text: "Click a noted cell to open this note instead of hovering it.",
    },
  ],
  [
    getNoteKey("3", "country"),
    {
      text: "Click trigger still uses the same note datasource and built-in popup.",
    },
  ],
]);

const GridExample = () => {
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [rowData, setRowData] = useState<OlympicWinner[]>([
    {
      id: "1",
      athlete: "Michael Phelps",
      age: 23,
      country: "United States",
      year: 2008,
      sport: "Swimming",
    },
    {
      id: "2",
      athlete: "Usain Bolt",
      age: 22,
      country: "Jamaica",
      year: 2008,
      sport: "Athletics",
    },
    {
      id: "3",
      athlete: "Simone Biles",
      age: 19,
      country: "United States",
      year: 2016,
      sport: "Gymnastics",
    },
    {
      id: "4",
      athlete: "Katie Ledecky",
      age: 19,
      country: "United States",
      year: 2016,
      sport: "Swimming",
    },
    {
      id: "5",
      athlete: "Allyson Felix",
      age: 30,
      country: "United States",
      year: 2016,
      sport: "Athletics",
    },
    {
      id: "6",
      athlete: "Mo Farah",
      age: 33,
      country: "Great Britain",
      year: 2016,
      sport: "Athletics",
    },
  ]);
  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" },
    { field: "age", maxWidth: 110 },
    { field: "country" },
    { field: "year", maxWidth: 110 },
    { field: "sport" },
  ]);
  const getRowId = useCallback(
    ({ data }: GetRowIdParams<OlympicWinner>) => data.id,
    [],
  );
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      flex: 1,
      minWidth: 120,
    };
  }, []);

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div className="example-wrapper">
          <div style={gridStyle}>
            <AgGridReact<OlympicWinner>
              rowData={rowData}
              notesDataSource={notesDataSource}
              columnDefs={columnDefs}
              getRowId={getRowId}
              defaultColDef={defaultColDef}
              noteTrigger={"click"}
            />
          </div>
        </div>
      </div>
    </AgGridProvider>
  );
};

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

[Live example: Notes Trigger](https://www.ag-grid.com/examples/notes/notes-trigger/reactFunctionalTs)

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `noteTrigger` | `'hover' \| 'click'` |  | `'hover'` | Changes how existing notes are opened. - `'hover'` - Existing notes open when hovering a noted cell or full width row. - `'click'` - Existing notes open when clicking a noted cell or full width row. Module: [`NotesModule`](https://www.ag-grid.com/react-data-grid/modules/). |
| `noteShowDelay` | `number` |  | `180` | The delay in milliseconds before a note is shown when hovering a noted cell. Only applies when `noteTrigger = 'hover'`. Module: [`NotesModule`](https://www.ag-grid.com/react-data-grid/modules/). |
| `noteHideDelay` | `number` |  | `220` | The delay in milliseconds before a note is hidden after the pointer leaves a noted cell or note popup. Module: [`NotesModule`](https://www.ag-grid.com/react-data-grid/modules/). |

## Metadata

Built-in note metadata, including `author`, `createdAt`, and `updatedAt`, is rendered exactly as provided by your datasource.

The built-in note editor only updates the note text. If notes created from the built-in UI should also include metadata, stamp it inside `notesDataSource.setNote()`. The example below includes an `Authenticated User` input to simulate the current user being stamped into saved notes.

#### Metadata

```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,
  FullWidthNotesDataSource,
  GetRowIdFunc,
  GetRowIdParams,
  GridOptions,
  ModuleRegistry,
  Note,
  NotesDataSource,
  NotesDataSourceGetNoteParams,
  NotesDataSourceSetNoteParams,
  enableDevValidations,
} from "ag-grid-community";
import { ContextMenuModule, NotesModule } from "ag-grid-enterprise";
import { OlympicWinner } from "./interfaces";

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

const modules = [ClientSideRowModelModule, ContextMenuModule, NotesModule];

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

const getDisplayTimestamp = () =>
  new Intl.DateTimeFormat("en-GB", {
    dateStyle: "medium",
    timeStyle: "short",
  }).format(new Date());

const getCurrentUser = () => {
  const user = (
    document.getElementById("current-user") as HTMLInputElement | null
  )?.value.trim();
  return user || undefined;
};

const noteStore = new Map<string, Note>([
  [
    getNoteKey("1", "athlete"),
    {
      text: "Confirm the athlete biography before the next review.",
      author: "AG Grid",
      createdAt: "26 Mar 2026, 10:30",
      updatedAt: "29 Mar 2026, 09:15",
    },
  ],
  [
    getNoteKey("3", "country"),
    {
      text: "Check the latest federation naming guidance for this country.",
      author: "Chris",
      createdAt: "24 Mar 2026, 16:10",
      updatedAt: "27 Mar 2026, 14:30",
    },
  ],
]);

const GridExample = () => {
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [rowData, setRowData] = useState<OlympicWinner[]>([
    {
      id: "1",
      athlete: "Michael Phelps",
      age: 23,
      country: "United States",
      year: 2008,
      sport: "Swimming",
    },
    {
      id: "2",
      athlete: "Usain Bolt",
      age: 22,
      country: "Jamaica",
      year: 2008,
      sport: "Athletics",
    },
    {
      id: "3",
      athlete: "Simone Biles",
      age: 19,
      country: "United States",
      year: 2016,
      sport: "Gymnastics",
    },
    {
      id: "4",
      athlete: "Katie Ledecky",
      age: 19,
      country: "United States",
      year: 2016,
      sport: "Swimming",
    },
    {
      id: "5",
      athlete: "Allyson Felix",
      age: 30,
      country: "United States",
      year: 2016,
      sport: "Athletics",
    },
    {
      id: "6",
      athlete: "Mo Farah",
      age: 33,
      country: "Great Britain",
      year: 2016,
      sport: "Athletics",
    },
  ]);
  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());
        const existingNote = noteStore.get(key);
        if (params.note === undefined) {
          noteStore.delete(key);
        } else {
          noteStore.set(key, {
            ...existingNote,
            ...params.note,
            author: getCurrentUser(),
            createdAt: existingNote?.createdAt ?? getDisplayTimestamp(),
            updatedAt: getDisplayTimestamp(),
          });
        }
      },
    };
  }, []);
  const [columnDefs, setColumnDefs] = useState<ColDef[]>([
    { field: "athlete" },
    { field: "age", maxWidth: 110 },
    { field: "country" },
    { field: "year", maxWidth: 110 },
    { field: "sport" },
  ]);
  const getRowId = useCallback(
    ({ data }: GetRowIdParams<OlympicWinner>) => data.id,
    [],
  );
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      flex: 1,
      minWidth: 120,
    };
  }, []);

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div className="example-wrapper">
          <div className="example-toolbar">
            <label className="example-field">
              <span>Authenticated User</span>
              <input id="current-user" type="text" defaultValue="AG Grid" />
            </label>
          </div>

          <div style={gridStyle}>
            <AgGridReact<OlympicWinner>
              rowData={rowData}
              notesDataSource={notesDataSource}
              columnDefs={columnDefs}
              getRowId={getRowId}
              defaultColDef={defaultColDef}
            />
          </div>
        </div>
      </div>
    </AgGridProvider>
  );
};

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

[Live example: Metadata](https://www.ag-grid.com/examples/notes/notes-metadata/reactFunctionalTs)

```jsx
const getCurrentUser = () => document.getElementById('current-user').value;
const getDisplayTimestamp = () => new Date().toLocaleString('en-GB');
const notesDataSource = {
    setNote: ({ rowNode, column, note }) => {
        const row = (noteStore[rowNode.id] ??= {});
        const colId = column.getColId();
        const existingNote = row[colId];

        if (note === undefined) {
            delete row[colId];
        } else {
            row[colId] = {
                ...existingNote,
                ...note,
                author: getCurrentUser(),
                createdAt: existingNote?.createdAt ?? getDisplayTimestamp(),
                updatedAt: getDisplayTimestamp(),
            };
        }
    },
};

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

### Custom Data

Use `note.metadata` to store any application-defined data alongside the built-in note fields. The Grid preserves this data when the built-in editor updates an existing note, but the built-in note popup does not render it.

The example below stores `metadata.type` and `metadata.priority` on notes, then uses application-level cell classes and CSS variables to style note indicators differently. This keeps custom Note data in your datasource while letting your app decide how that data should affect presentation.

#### Custom Data

```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 {
  CellClassParams,
  CellStyleModule,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  FullWidthNotesDataSource,
  GetRowIdFunc,
  GetRowIdParams,
  GridOptions,
  ModuleRegistry,
  Note,
  NotesDataSource,
  NotesDataSourceGetNoteParams,
  NotesDataSourceSetNoteParams,
  enableDevValidations,
} from "ag-grid-community";
import { ContextMenuModule, NotesModule } from "ag-grid-enterprise";

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

const modules = [
  CellStyleModule,
  ClientSideRowModelModule,
  ContextMenuModule,
  NotesModule,
];

interface OlympicWinner {
  id: string;
  athlete: string;
  age: number;
  country: string;
  year: number;
  sport: string;
}
interface NoteMetadata {
  type: "team" | "review" | "personal";
  priority: "high" | "medium" | "low";
}

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

const defaultMetadataByColumn: Record<string, NoteMetadata> = {
  athlete: { type: "team", priority: "high" },
  country: { type: "review", priority: "medium" },
  sport: { type: "personal", priority: "low" },
};

const noteStore = new Map<string, Note<NoteMetadata>>([
  [
    getNoteKey("1", "athlete"),
    {
      text: "This team note needs a response before the next content review.",
      author: "AG Grid",
      updatedAt: "29 Mar 2026, 09:15",
      metadata: { type: "team", priority: "high" },
    },
  ],
  [
    getNoteKey("3", "country"),
    {
      text: "This review note tracks external naming guidance for this country.",
      author: "Chris",
      updatedAt: "27 Mar 2026, 14:30",
      metadata: { type: "review", priority: "medium" },
    },
  ],
  [
    getNoteKey("5", "sport"),
    {
      text: "This personal note is a lightweight reminder for later follow-up.",
      author: "Martha",
      updatedAt: "28 Mar 2026, 11:45",
      metadata: { type: "personal", priority: "low" },
    },
  ],
]);

const getCellNoteMetadata = (
  rowId: string,
  colId: string,
): NoteMetadata | undefined =>
  noteStore.get(getNoteKey(rowId, colId))?.metadata;

const getNoteClasses = (
  metadata: NoteMetadata | undefined,
): string[] | undefined =>
  metadata
    ? [`note-type-${metadata.type}`, `note-priority-${metadata.priority}`]
    : undefined;

const GridExample = () => {
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [rowData, setRowData] = useState<OlympicWinner[]>([
    {
      id: "1",
      athlete: "Michael Phelps",
      age: 23,
      country: "United States",
      year: 2008,
      sport: "Swimming",
    },
    {
      id: "2",
      athlete: "Usain Bolt",
      age: 22,
      country: "Jamaica",
      year: 2008,
      sport: "Athletics",
    },
    {
      id: "3",
      athlete: "Simone Biles",
      age: 19,
      country: "United States",
      year: 2016,
      sport: "Gymnastics",
    },
    {
      id: "4",
      athlete: "Katie Ledecky",
      age: 19,
      country: "United States",
      year: 2016,
      sport: "Swimming",
    },
    {
      id: "5",
      athlete: "Allyson Felix",
      age: 30,
      country: "United States",
      year: 2016,
      sport: "Athletics",
    },
    {
      id: "6",
      athlete: "Mo Farah",
      age: 33,
      country: "Great Britain",
      year: 2016,
      sport: "Athletics",
    },
  ]);
  const notesDataSource = useMemo<
    NotesDataSource | FullWidthNotesDataSource
  >(() => {
    return {
      getNote: (params: NotesDataSourceGetNoteParams) =>
        noteStore.get(getNoteKey(params.rowNode.id!, params.column.getColId())),
      setNote: (params: NotesDataSourceSetNoteParams<NoteMetadata>) => {
        const key = getNoteKey(params.rowNode.id!, params.column.getColId());
        const existingNote = noteStore.get(key);
        if (params.note === undefined) {
          noteStore.delete(key);
        } else {
          noteStore.set(key, {
            ...existingNote,
            ...params.note,
            metadata:
              existingNote?.metadata ??
              defaultMetadataByColumn[params.column.getColId()],
          });
        }
      },
    };
  }, []);
  const [columnDefs, setColumnDefs] = useState<ColDef[]>([
    { field: "athlete" },
    { field: "age", maxWidth: 110 },
    { field: "country" },
    { field: "year", maxWidth: 110 },
    { field: "sport" },
  ]);
  const getRowId = useCallback(
    ({ data }: GetRowIdParams<OlympicWinner>) => data.id,
    [],
  );
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      flex: 1,
      minWidth: 120,
      cellClass: (params: CellClassParams<OlympicWinner>) =>
        getNoteClasses(
          getCellNoteMetadata(params.node.id!, params.column.getColId()),
        ),
    };
  }, []);

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div className="example-wrapper">
          <div className="example-toolbar">
            <div className="legend-chip note-type-team note-priority-high">
              Team · High
            </div>
            <div className="legend-chip note-type-review note-priority-medium">
              Review · Medium
            </div>
            <div className="legend-chip note-type-personal note-priority-low">
              Personal · Low
            </div>
          </div>

          <div style={gridStyle}>
            <AgGridReact<OlympicWinner>
              rowData={rowData}
              notesDataSource={notesDataSource}
              columnDefs={columnDefs}
              getRowId={getRowId}
              defaultColDef={defaultColDef}
            />
          </div>
        </div>
      </div>
    </AgGridProvider>
  );
};

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

[Live example: Custom Data](https://www.ag-grid.com/examples/notes/notes-custom-data/reactFunctionalTs)

```jsx
const defaultColDef = useMemo(() => { 
	return {
        cellClass: ({ node, column }) => {
            const colId = column.getColId();
            const metadata = getCellNoteMetadata(node.id, colId);

            if (metadata) {
                const { type, priority } = metadata;
                return [`note-type-${type}`, `note-priority-${priority}`]
            }
        },
    };
}, []);
const notesDataSource = {
    setNote: ({ rowNode, column, note }) => {
        const key = `${rowNode.id}::${column.getColId()}`;
        const existingNote = noteStore.get(key);

        if (note === undefined) {
            noteStore.delete(key);
        } else {
            noteStore.set(key, {
                ...existingNote,
                ...note,
                metadata: existingNote?.metadata ?? { type: 'team', priority: 'medium' },
            });
        }
    },
};

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

## Read-Only Notes

Set `Note.readOnly = true` to make a note view-only. Read-only notes can still be opened from hover or click based on `noteTrigger`, the context menu, or `Shift + F2`, but they cannot be edited or removed through the built-in UI. The grid API can still update or remove read-only notes programmatically.

`Athlete` has an editable note. `Country` and `Sport` have **read-only** notes, so they can be viewed but not edited or removed through the built-in UI.

#### Read-Only 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,
  FullWidthNotesDataSource,
  GetRowIdFunc,
  GetRowIdParams,
  GridOptions,
  ModuleRegistry,
  Note,
  NotesDataSource,
  NotesDataSourceGetNoteParams,
  NotesDataSourceSetNoteParams,
  enableDevValidations,
} from "ag-grid-community";
import { ContextMenuModule, NotesModule } from "ag-grid-enterprise";
import { OlympicWinner } from "./interfaces";

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

const modules = [ClientSideRowModelModule, ContextMenuModule, NotesModule];

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

const noteStore = new Map<string, Note>([
  [
    getNoteKey("1", "athlete"),
    {
      text: "This note can still be edited from hover, the context menu, or Shift + F2.",
      author: "AG Grid",
      updatedAt: "29 Mar 2026, 09:15",
    },
  ],
  [
    getNoteKey("3", "country"),
    {
      text: "This note is read-only, so the built-in UI opens it in view-only mode.",
      author: "AG Grid",
      updatedAt: "27 Mar 2026, 14:30",
      readOnly: true,
    },
  ],
  [
    getNoteKey("5", "sport"),
    {
      text: "Read-only notes can still show metadata and can still be opened with Shift + F2.",
      updatedAt: "28 Mar 2026, 11:45",
      readOnly: true,
    },
  ],
]);

const GridExample = () => {
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [rowData, setRowData] = useState<OlympicWinner[]>([
    {
      id: "1",
      athlete: "Michael Phelps",
      age: 23,
      country: "United States",
      year: 2008,
      sport: "Swimming",
    },
    {
      id: "2",
      athlete: "Usain Bolt",
      age: 22,
      country: "Jamaica",
      year: 2008,
      sport: "Athletics",
    },
    {
      id: "3",
      athlete: "Simone Biles",
      age: 19,
      country: "United States",
      year: 2016,
      sport: "Gymnastics",
    },
    {
      id: "4",
      athlete: "Katie Ledecky",
      age: 19,
      country: "United States",
      year: 2016,
      sport: "Swimming",
    },
    {
      id: "5",
      athlete: "Allyson Felix",
      age: 30,
      country: "United States",
      year: 2016,
      sport: "Athletics",
    },
    {
      id: "6",
      athlete: "Mo Farah",
      age: 33,
      country: "Great Britain",
      year: 2016,
      sport: "Athletics",
    },
  ]);
  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" },
    { field: "age", maxWidth: 110 },
    { field: "country" },
    { field: "year", maxWidth: 110 },
    { field: "sport" },
  ]);
  const getRowId = useCallback(
    ({ data }: GetRowIdParams<OlympicWinner>) => data.id,
    [],
  );
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      flex: 1,
      minWidth: 120,
    };
  }, []);

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div style={gridStyle}>
          <AgGridReact<OlympicWinner>
            rowData={rowData}
            notesDataSource={notesDataSource}
            columnDefs={columnDefs}
            getRowId={getRowId}
            defaultColDef={defaultColDef}
          />
        </div>
      </div>
    </AgGridProvider>
  );
};

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

[Live example: Read-Only Notes](https://www.ag-grid.com/examples/notes/notes-read-only/reactFunctionalTs)

```ts
noteStore.set(noteKey('3', 'country'), {
    text: 'Check the latest federation naming guidance for this country.',
    author: 'AG Grid',
    updatedAt: '27 Mar 2026, 14:30',
    readOnly: true,
});
```

## Suppressing Note Actions

Use `colDef.suppressNoteActions` to suppress built-in note actions for a column or specific row. Suppressed cells still allow existing notes to be viewed through the configured note trigger and through `getNote()`, but add/edit/remove actions and note creation shortcuts are blocked.

`Year` and `Sport` suppress built-in note actions. Existing notes on those cells can still be viewed normally, while other columns keep the standard add, edit, and remove behaviour.

#### Suppressing 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,
  FullWidthNotesDataSource,
  GetRowIdFunc,
  GetRowIdParams,
  GridOptions,
  ModuleRegistry,
  Note,
  NotesDataSource,
  NotesDataSourceGetNoteParams,
  NotesDataSourceSetNoteParams,
  enableDevValidations,
} from "ag-grid-community";
import { ContextMenuModule, NotesModule } from "ag-grid-enterprise";
import { OlympicWinner } from "./interfaces";

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

const modules = [ClientSideRowModelModule, ContextMenuModule, NotesModule];

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

const noteStore = new Map<string, Note>([
  [
    getNoteKey("1", "athlete"),
    {
      text: "This cell still allows the full built-in note workflow.",
      updatedAt: "29 Mar 2026, 09:15",
    },
  ],
  [
    getNoteKey("2", "year"),
    {
      text: "Year suppresses note actions, but existing notes still open on hover.",
      updatedAt: "28 Mar 2026, 11:45",
    },
  ],
  [
    getNoteKey("5", "sport"),
    {
      text: "Sport also suppresses note actions for the entire column.",
      updatedAt: "27 Mar 2026, 14:30",
    },
  ],
]);

const GridExample = () => {
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [rowData, setRowData] = useState<OlympicWinner[]>([
    {
      id: "1",
      athlete: "Michael Phelps",
      age: 23,
      country: "United States",
      year: 2008,
      sport: "Swimming",
    },
    {
      id: "2",
      athlete: "Usain Bolt",
      age: 22,
      country: "Jamaica",
      year: 2008,
      sport: "Athletics",
    },
    {
      id: "3",
      athlete: "Simone Biles",
      age: 19,
      country: "United States",
      year: 2016,
      sport: "Gymnastics",
    },
    {
      id: "4",
      athlete: "Katie Ledecky",
      age: 19,
      country: "United States",
      year: 2016,
      sport: "Swimming",
    },
    {
      id: "5",
      athlete: "Allyson Felix",
      age: 30,
      country: "United States",
      year: 2016,
      sport: "Athletics",
    },
    {
      id: "6",
      athlete: "Mo Farah",
      age: 33,
      country: "Great Britain",
      year: 2016,
      sport: "Athletics",
    },
  ]);
  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" },
    { field: "age", maxWidth: 110 },
    { field: "country" },
    { field: "year", maxWidth: 110, suppressNoteActions: true },
    { field: "sport", suppressNoteActions: true },
  ]);
  const getRowId = useCallback(
    ({ data }: GetRowIdParams<OlympicWinner>) => data.id,
    [],
  );
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      flex: 1,
      minWidth: 120,
    };
  }, []);

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div style={gridStyle}>
          <AgGridReact<OlympicWinner>
            rowData={rowData}
            notesDataSource={notesDataSource}
            columnDefs={columnDefs}
            getRowId={getRowId}
            defaultColDef={defaultColDef}
          />
        </div>
      </div>
    </AgGridProvider>
  );
};

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

[Live example: Suppressing Notes](https://www.ag-grid.com/examples/notes/notes-suppressing/reactFunctionalTs)

```jsx
const [columnDefs, setColumnDefs] = useState([
    { field: 'athlete' },
    { field: 'year', suppressNoteActions: true },
    { field: 'sport', suppressNoteActions: params => params.data?.sport === 'Swimming' },
]);

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

## Full Width Rows

To support adding notes to full width rows ensure the `notesDataSource` implements the `FullWidthNotesDataSource` interface. The interface requires `supportsFullWidthRows:true` to be set on the `notesDataSource`.

The example below includes both regular notes on cells and notes on full width rows in the same datasource. Full width rows use a separate note identity. Instead of receiving a `column`, the datasource receives `location: 'fullWidthRow'` and an optional `pinned` value when in `embedFullWidthRows` mode.

#### Notes with Full Width Rows

```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,
  FullWidthNotesDataSource,
  FullWidthNotesDataSourceGetNoteParams,
  FullWidthNotesDataSourceSetNoteParams,
  GetRowHeight,
  GetRowIdFunc,
  GetRowIdParams,
  GridOptions,
  ICellRendererComp,
  ICellRendererParams,
  IsFullWidthRow,
  IsFullWidthRowParams,
  ModuleRegistry,
  Note,
  NotesDataSource,
  RowHeightParams,
  enableDevValidations,
} from "ag-grid-community";
import { ContextMenuModule, NotesModule } from "ag-grid-enterprise";

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

const modules = [ClientSideRowModelModule, ContextMenuModule, NotesModule];

interface OlympicWinner extends Partial<IOlympicData> {
  id: string;
  featured?: boolean;
}

const noteStore = new Map<string, Note>([
  [
    "cell::1::athlete",
    {
      text: "This note belongs to a regular cell.",
    },
  ],
  [
    "fullWidth::2",
    {
      text: "This note belongs to a full width row. The datasource receives location: fullWidthRow instead of a column.",
    },
  ],
]);

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

const getFullWidthNoteKey = (rowId: string) => `fullWidth::${rowId}`;

class FullWidthCellRenderer implements ICellRendererComp {
  private eGui!: HTMLElement;

  public init(params: ICellRendererParams<OlympicWinner>): void {
    const data = params.data!;
    const eGui = document.createElement("div");
    eGui.className = "notes-full-width-row";
    eGui.innerHTML = `
            <div class="notes-full-width-row__title">${data.athlete}</div>
            <div class="notes-full-width-row__details">
                <span>${data.country}</span>
                <span>${data.year}</span>
                <span>${data.sport}</span>
            </div>
        `;
    this.eGui = eGui;
  }

  public getGui(): HTMLElement {
    return this.eGui;
  }

  public refresh(): boolean {
    return false;
  }
}

const GridExample = () => {
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [rowData, setRowData] = useState<OlympicWinner[]>([
    {
      id: "1",
      athlete: "Michael Phelps",
      age: 23,
      country: "United States",
      year: 2008,
      sport: "Swimming",
    },
    {
      id: "2",
      athlete: "Usain Bolt",
      age: 22,
      country: "Jamaica",
      year: 2008,
      sport: "Athletics",
      featured: true,
    },
    {
      id: "3",
      athlete: "Simone Biles",
      age: 19,
      country: "United States",
      year: 2016,
      sport: "Gymnastics",
    },
    {
      id: "4",
      athlete: "Katie Ledecky",
      age: 19,
      country: "United States",
      year: 2016,
      sport: "Swimming",
    },
    {
      id: "5",
      athlete: "Allyson Felix",
      age: 30,
      country: "United States",
      year: 2016,
      sport: "Athletics",
      featured: true,
    },
    {
      id: "6",
      athlete: "Mo Farah",
      age: 33,
      country: "Great Britain",
      year: 2016,
      sport: "Athletics",
    },
  ]);
  const notesDataSource = useMemo<
    NotesDataSource | FullWidthNotesDataSource
  >(() => {
    return {
      supportsFullWidthRows: true,
      getNote: (params: FullWidthNotesDataSourceGetNoteParams) =>
        params.location === "fullWidthRow"
          ? noteStore.get(getFullWidthNoteKey(params.rowNode.id!))
          : noteStore.get(
              getNoteKey(params.rowNode.id!, params.column.getColId()),
            ),
      setNote: (params: FullWidthNotesDataSourceSetNoteParams) => {
        const key =
          params.location === "fullWidthRow"
            ? getFullWidthNoteKey(params.rowNode.id!)
            : 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" },
    { field: "age", maxWidth: 110 },
    { field: "country" },
    { field: "year", maxWidth: 110 },
    { field: "sport" },
  ]);
  const getRowId = useCallback(
    ({ data }: GetRowIdParams<OlympicWinner>) => data.id,
    [],
  );
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      flex: 1,
      minWidth: 120,
    };
  }, []);
  const getRowHeight = useCallback((params: RowHeightParams<OlympicWinner>) => {
    if (params.data?.featured) {
      return 96;
    }
  }, []);
  const isFullWidthRow = useCallback(
    (params: IsFullWidthRowParams<OlympicWinner>) =>
      !!params.rowNode.data?.featured,
    [],
  );
  const fullWidthCellRenderer = useCallback(FullWidthCellRenderer, []);

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div className="example-wrapper">
          <div style={gridStyle}>
            <AgGridReact<OlympicWinner>
              rowData={rowData}
              notesDataSource={notesDataSource}
              columnDefs={columnDefs}
              getRowId={getRowId}
              defaultColDef={defaultColDef}
              getRowHeight={getRowHeight}
              isFullWidthRow={isFullWidthRow}
              fullWidthCellRenderer={fullWidthCellRenderer}
            />
          </div>
        </div>
      </div>
    </AgGridProvider>
  );
};

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

[Live example: Notes with Full Width Rows](https://www.ag-grid.com/examples/notes/notes-full-width/reactFunctionalTs)

```jsx
const notesStore = new Map();
const getRowId = useCallback((params) => String(params.data.id), []);
const notesDataSource = {
    // Enable support for Full Width Rows
    supportsFullWidthRows: true,
    getNote: (params) =>
        params.location === 'fullWidthRow'
            ? notesStore.get(getFullWidthNoteKey(params.rowNode.id))
            : notesStore.get(getNoteKey(params.rowNode.id, params.column.getColId())),
    setNote: (params) => {
        const key =
            params.location === 'fullWidthRow'
                ? getFullWidthNoteKey(params.rowNode.id)
                : getNoteKey(params.rowNode.id, params.column.getColId());
        if (params.note === undefined) {
            notesStore.delete(key);
        } else {
            notesStore.set(key, params.note);
        }
    },
};

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

```ts
notesStore.set('2', {
    text: 'This note belongs to a full width row.',
});
```

### Embedded Full Width Rows

When `embedFullWidthRows=true`, the datasource still receives `location: 'fullWidthRow'`, but `pinned` identifies whether the note belongs to the left, centre, or right rendered section so that the `notesDataSource` can save the note appropriately.

#### Notes with Embedded Full Width Rows

```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,
  FullWidthNotesDataSource,
  FullWidthNotesDataSourceGetNoteParams,
  FullWidthNotesDataSourceSetNoteParams,
  GetRowHeight,
  GetRowIdFunc,
  GetRowIdParams,
  GridOptions,
  ICellRendererComp,
  ICellRendererParams,
  IsFullWidthRow,
  IsFullWidthRowParams,
  ModuleRegistry,
  Note,
  NotesDataSource,
  RowHeightParams,
  enableDevValidations,
} from "ag-grid-community";
import { ContextMenuModule, NotesModule } from "ag-grid-enterprise";

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

const modules = [ClientSideRowModelModule, ContextMenuModule, NotesModule];

interface OlympicWinner extends Partial<IOlympicData> {
  id: string;
  featured?: boolean;
}

const getSection = (pinned: "left" | "right" | null | undefined) =>
  pinned ?? "center";

const getFullWidthNoteKey = (
  rowId: string,
  pinned: "left" | "right" | null | undefined,
) => `${rowId}::${getSection(pinned)}`;

const noteStore = new Map<string, Note>([
  [
    getFullWidthNoteKey("2", "left"),
    {
      text: "This note belongs to the left embedded full width section.",
    },
  ],
  [
    getFullWidthNoteKey("2", undefined),
    {
      text: "This note belongs to the centre embedded full width section.",
    },
  ],
  [
    getFullWidthNoteKey("2", "right"),
    {
      text: "This note belongs to the right embedded full width section.",
    },
  ],
]);

class FullWidthCellRenderer implements ICellRendererComp {
  private eGui!: HTMLElement;

  public init(params: ICellRendererParams<OlympicWinner>): void {
    const data = params.data!;
    const section = getSection(params.pinned);

    const eGui = document.createElement("div");
    eGui.className = `notes-full-width-row notes-full-width-row--${section}`;
    eGui.innerHTML = `
            <div class="notes-full-width-row__badge">${section}</div>
            <div class="notes-full-width-row__title">${data.athlete}</div>
            <div class="notes-full-width-row__details">
                <span>${data.country}</span>
                <span>${data.year}</span>
                <span>${data.sport}</span>
            </div>
        `;
    this.eGui = eGui;
  }

  public getGui(): HTMLElement {
    return this.eGui;
  }

  public refresh(): boolean {
    return false;
  }
}

const GridExample = () => {
  const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
  const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
  const [rowData, setRowData] = useState<OlympicWinner[]>([
    {
      id: "1",
      athlete: "Michael Phelps",
      age: 23,
      country: "United States",
      year: 2008,
      sport: "Swimming",
    },
    {
      id: "2",
      athlete: "Usain Bolt",
      age: 22,
      country: "Jamaica",
      year: 2008,
      sport: "Athletics",
      featured: true,
    },
    {
      id: "3",
      athlete: "Simone Biles",
      age: 19,
      country: "United States",
      year: 2016,
      sport: "Gymnastics",
    },
    {
      id: "4",
      athlete: "Katie Ledecky",
      age: 19,
      country: "United States",
      year: 2016,
      sport: "Swimming",
    },
    {
      id: "5",
      athlete: "Allyson Felix",
      age: 30,
      country: "United States",
      year: 2016,
      sport: "Athletics",
      featured: true,
    },
    {
      id: "6",
      athlete: "Mo Farah",
      age: 33,
      country: "Great Britain",
      year: 2016,
      sport: "Athletics",
    },
  ]);
  const notesDataSource = useMemo<
    NotesDataSource | FullWidthNotesDataSource
  >(() => {
    return {
      supportsFullWidthRows: true,
      getNote: (params: FullWidthNotesDataSourceGetNoteParams) =>
        params.location === "fullWidthRow"
          ? noteStore.get(
              getFullWidthNoteKey(params.rowNode.id!, params.pinned),
            )
          : undefined,
      setNote: (params: FullWidthNotesDataSourceSetNoteParams) => {
        if (params.location !== "fullWidthRow") {
          return;
        }
        const key = getFullWidthNoteKey(params.rowNode.id!, params.pinned);
        if (params.note === undefined) {
          noteStore.delete(key);
        } else {
          noteStore.set(key, params.note);
        }
      },
    };
  }, []);
  const [columnDefs, setColumnDefs] = useState<ColDef[]>([
    { field: "athlete", pinned: "left", width: 235 },
    { field: "age", maxWidth: 110 },
    { field: "country" },
    { field: "year", maxWidth: 110 },
    { field: "sport", pinned: "right", width: 235 },
  ]);
  const getRowId = useCallback(
    ({ data }: GetRowIdParams<OlympicWinner>) => data.id,
    [],
  );
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      flex: 1,
      minWidth: 120,
    };
  }, []);
  const getRowHeight = useCallback((params: RowHeightParams<OlympicWinner>) => {
    if (params.data?.featured) {
      return 96;
    }
  }, []);
  const isFullWidthRow = useCallback(
    (params: IsFullWidthRowParams<OlympicWinner>) =>
      !!params.rowNode.data?.featured,
    [],
  );
  const fullWidthCellRenderer = useCallback(FullWidthCellRenderer, []);

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div className="example-wrapper">
          <div style={gridStyle}>
            <AgGridReact<OlympicWinner>
              rowData={rowData}
              notesDataSource={notesDataSource}
              columnDefs={columnDefs}
              embedFullWidthRows={true}
              getRowId={getRowId}
              defaultColDef={defaultColDef}
              getRowHeight={getRowHeight}
              isFullWidthRow={isFullWidthRow}
              fullWidthCellRenderer={fullWidthCellRenderer}
            />
          </div>
        </div>
      </div>
    </AgGridProvider>
  );
};

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

[Live example: Notes with Embedded Full Width Rows](https://www.ag-grid.com/examples/notes/notes-full-width-embedded/reactFunctionalTs)

## Feature Interaction

### Context Menu

When the `ContextMenuModule` is registered, the note actions are included automatically. If you customise `getContextMenuItems()`, include the built-in `note` item to keep the standard note actions:

```jsx
const getContextMenuItems = () => ['note', 'copy', 'export'];

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

The built-in `note` item expands based on the current cell state:

- `Add Note` when the cell has no note and note creation is allowed.
- `Edit Note` and `Remove Note` when the existing note is editable.
- `View Note`, plus a disabled `Remove Note`, when the existing note is read-only.
- Disabled note actions when the cell is suppressed. Existing suppressed notes still show `View Note`.

### Keyboard Shortcuts

`Shift + F2` opens an existing note for the focused cell, or creates a new note if the cell allows notes and does not already have one. Plain `F2` keeps the normal cell editing behaviour.

### Cell Editing

Notes are **not** displayed if the cell is currently being edited. Hovering that cell or pressing `Shift + F2` will have no effect until editing is complete.

## API

Use the grid API to read, write, remove and refresh notes programmatically. This is useful when notes are edited from application UI outside the grid, or when the underlying note store changes directly. The API example also shows how to set `readOnly` on a note payload.

In the example below:

- clicking a cell selects it and syncs the toolbar controls automatically.
- `Save via API` updates the note with `setNote()`, including setting or clearing `readOnly`.
- `Remove via API` clears the note
- `Mutate Store Directly` plus `Refresh Notes` shows how to resync the grid after external store updates.

#### Notes API

```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 {
  CellFocusedEvent,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  Column,
  FullWidthNotesDataSource,
  GetRowIdFunc,
  GetRowIdParams,
  GridApi,
  GridOptions,
  IRowNode,
  ModuleRegistry,
  Note,
  NotesDataSource,
  NotesDataSourceGetNoteParams,
  NotesDataSourceSetNoteParams,
  RowApiModule,
  enableDevValidations,
} from "ag-grid-community";
import { ContextMenuModule, NotesModule } from "ag-grid-enterprise";
import { OlympicWinner } from "./interfaces";

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

const modules = [
  ClientSideRowModelModule,
  ContextMenuModule,
  NotesModule,
  RowApiModule,
];

const getDisplayTimestamp = () =>
  new Intl.DateTimeFormat("en-GB", {
    dateStyle: "medium",
    timeStyle: "short",
  }).format(new Date());

const noteStore: Record<string, Record<string, Note>> = {
  "2": {
    athlete: {
      text: "Follow up with the regional team before publishing this profile.",
      author: "Martha",
      readOnly: true,
      updatedAt: "29 Mar 2026, 09:15",
    },
  },
};

const getSelectionStatusElement = () =>
  document.getElementById("selection-status") as HTMLElement;

const getAuthorInput = () =>
  document.getElementById("note-author") as HTMLInputElement;

const getNoteTextArea = () =>
  document.getElementById("note-text") as HTMLTextAreaElement;

const getReadOnlyInput = () =>
  document.getElementById("note-readonly") as HTMLInputElement;

const describeCell = (cell: SelectedCell) =>
  `${cell.rowNode.data?.athlete ?? cell.rowNode.id} / ${cell.column.getColId()}`;

const setStatus = (message: string) => {
  getSelectionStatusElement().textContent = message;
};

const getSelectedCell = (): SelectedCell | undefined => {
  const win = window as any;
  const selectedCell = win.selectedCell as SelectedCell | undefined;
  if (!selectedCell) {
    setStatus("No cell selected.");
    return undefined;
  }
  return selectedCell;
};

const syncNote = (gridApi: GridApi<OlympicWinner>) => {
  const cell = getSelectedCell();
  if (!cell || !gridApi) {
    return;
  }
  const note = gridApi.getNote(cell);
  getNoteTextArea().value = note?.text ?? "";
  getAuthorInput().value =
    (note?.author ?? getAuthorInput().value) || "API Demo";
  getReadOnlyInput().checked = !!note?.readOnly;
  setStatus(
    note
      ? `Loaded note for ${describeCell(cell)}.`
      : `No note stored for ${describeCell(cell)}.`,
  );
};

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",
      age: 23,
      country: "United States",
      year: 2008,
      sport: "Swimming",
    },
    {
      id: "2",
      athlete: "Usain Bolt",
      age: 22,
      country: "Jamaica",
      year: 2008,
      sport: "Athletics",
    },
    {
      id: "3",
      athlete: "Simone Biles",
      age: 19,
      country: "United States",
      year: 2016,
      sport: "Gymnastics",
    },
    {
      id: "4",
      athlete: "Katie Ledecky",
      age: 19,
      country: "United States",
      year: 2016,
      sport: "Swimming",
    },
    {
      id: "5",
      athlete: "Allyson Felix",
      age: 30,
      country: "United States",
      year: 2016,
      sport: "Athletics",
    },
    {
      id: "6",
      athlete: "Mo Farah",
      age: 33,
      country: "Great Britain",
      year: 2016,
      sport: "Athletics",
    },
  ]);
  const notesDataSource = useMemo<
    NotesDataSource | FullWidthNotesDataSource
  >(() => {
    return {
      getNote: (params: NotesDataSourceGetNoteParams) =>
        noteStore[params.rowNode.id!]?.[params.column.getColId()],
      setNote: (params: NotesDataSourceSetNoteParams) => {
        const rowId = params.rowNode.id!;
        const colId = params.column.getColId();
        if (params.note === undefined) {
          delete noteStore[rowId]?.[colId];
        } else {
          const row = (noteStore[rowId] ??= {});
          row[colId] = params.note;
        }
      },
    };
  }, []);
  const [columnDefs, setColumnDefs] = useState<ColDef[]>([
    { field: "athlete" },
    { field: "age", maxWidth: 110 },
    { field: "country" },
    { field: "year", maxWidth: 110 },
    { field: "sport" },
  ]);
  const getRowId = useCallback(
    ({ data }: GetRowIdParams<OlympicWinner>) => data.id,
    [],
  );
  const defaultColDef = useMemo<ColDef>(() => {
    return {
      flex: 1,
      minWidth: 120,
    };
  }, []);

  const onCellFocused = useCallback(
    (event: CellFocusedEvent<OlympicWinner>) => {
      const win = window as any;
      win.selectedCell = {
        rowNode: gridRef.current!.api.getDisplayedRowAtIndex(event.rowIndex!),
        column: event.column,
      };
      syncNote(gridRef.current!.api);
    },
    [],
  );

  const saveSelectedNote = useCallback(() => {
    const cell = getSelectedCell();
    if (!cell || !gridRef.current!.api) {
      return;
    }
    const text = getNoteTextArea().value.trim();
    const author = getAuthorInput().value.trim();
    const readOnly = getReadOnlyInput().checked;
    const nextNote = text
      ? {
          text,
          author: author || undefined,
          readOnly: readOnly || undefined,
          updatedAt: getDisplayTimestamp(),
        }
      : undefined;
    gridRef.current!.api.setNote({
      ...cell,
      note: nextNote,
    });
    syncNote(gridRef.current!.api);
    setStatus(
      text
        ? `Saved note for ${describeCell(cell)} via gridRef.current!.api.setNote().`
        : `Removed note for ${describeCell(cell)} via gridRef.current!.api.setNote().`,
    );
  }, [
    getSelectedCell,
    getNoteTextArea,
    getAuthorInput,
    getReadOnlyInput,
    getDisplayTimestamp,
    syncNote,
    setStatus,
    describeCell,
  ]);

  const removeSelectedNote = useCallback(() => {
    const cell = getSelectedCell();
    if (!cell || !gridRef.current!.api) {
      return;
    }
    gridRef.current!.api.setNote({
      ...cell,
      note: undefined,
    });
    syncNote(gridRef.current!.api);
    setStatus(
      `Removed note for ${describeCell(cell)} via gridRef.current!.api.setNote().`,
    );
  }, [getSelectedCell, syncNote, setStatus, describeCell]);

  const mutateStoreDirectly = useCallback(() => {
    const cell = getSelectedCell();
    if (!cell) {
      return;
    }
    const rowId = cell.rowNode.id!;
    const colId = cell.column.getColId();
    const currentNote = noteStore[rowId]?.[colId];
    const author = getAuthorInput().value.trim() || "External Store";
    const text =
      getNoteTextArea().value.trim() ||
      currentNote?.text ||
      "Updated outside the grid";
    const readOnly = getReadOnlyInput().checked;
    const row = (noteStore[rowId] ??= {});
    row[colId] = {
      ...(currentNote ?? {}),
      text: `${text} (external update)`,
      author,
      readOnly: readOnly || undefined,
      updatedAt: getDisplayTimestamp(),
    };
    setStatus(`Updated the store directly for ${describeCell(cell)}.`);
  }, [
    getSelectedCell,
    noteStore,
    getReadOnlyInput,
    getDisplayTimestamp,
    setStatus,
    describeCell,
  ]);

  const refreshSelectedNotes = useCallback(() => {
    const cell = getSelectedCell();
    if (!cell || !gridRef.current!.api) {
      return;
    }
    gridRef.current!.api.refreshNotes({
      rowNodes: [cell.rowNode],
      columns: [cell.column],
    });
    syncNote(gridRef.current!.api);
    setStatus(
      `Refreshed notes for ${describeCell(cell)} via gridRef.current!.api.refreshNotes().`,
    );
  }, [getSelectedCell, syncNote, setStatus, describeCell]);

  return (
    <AgGridProvider modules={modules}>
      <div style={containerStyle}>
        <div className="example-wrapper">
          <div className="toolbar">
            <div className="toolbar-row">
              <span id="selection-status">No cell selected.</span>
            </div>
            <div className="toolbar-row">
              <label className="toolbar-field">
                <span>Author</span>
                <input id="note-author" type="text" defaultValue="API Demo" />
              </label>
              <label className="toolbar-field">
                <span>Read-only</span>
                <input id="note-readonly" type="checkbox" />
              </label>
              <button onClick={saveSelectedNote}>Save via API</button>
              <button onClick={removeSelectedNote}>Remove via API</button>
              <button onClick={mutateStoreDirectly}>
                Mutate Store Directly
              </button>
              <button onClick={refreshSelectedNotes}>Refresh Notes</button>
            </div>
            <textarea
              id="note-text"
              rows="3"
              placeholder="Edit note text."
            ></textarea>
          </div>

          <div style={gridStyle}>
            <AgGridReact<OlympicWinner>
              ref={gridRef}
              rowData={rowData}
              notesDataSource={notesDataSource}
              columnDefs={columnDefs}
              getRowId={getRowId}
              defaultColDef={defaultColDef}
              onCellFocused={onCellFocused}
            />
          </div>
        </div>
      </div>
    </AgGridProvider>
  );
};

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

[Live example: Notes API](https://www.ag-grid.com/examples/notes/notes-api/reactFunctionalTs)

### Grid Options

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `noteTrigger` | `'hover' \| 'click'` |  | `'hover'` | Changes how existing notes are opened. - `'hover'` - Existing notes open when hovering a noted cell or full width row. - `'click'` - Existing notes open when clicking a noted cell or full width row. Module: [`NotesModule`](https://www.ag-grid.com/react-data-grid/modules/). |
| `noteShowDelay` | `number` |  | `180` | The delay in milliseconds before a note is shown when hovering a noted cell. Only applies when `noteTrigger = 'hover'`. Module: [`NotesModule`](https://www.ag-grid.com/react-data-grid/modules/). |
| `noteHideDelay` | `number` |  | `220` | The delay in milliseconds before a note is hidden after the pointer leaves a noted cell or note popup. Module: [`NotesModule`](https://www.ag-grid.com/react-data-grid/modules/). |

### API Reference

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `getNote` | `Function` |  |  | Return the current note for a cell. Module: [`NotesModule`](https://www.ag-grid.com/react-data-grid/modules/). |
| `setNote` | `Function` |  |  | Set or remove the note for a cell. Pass `note: undefined` to remove the note. Module: [`NotesModule`](https://www.ag-grid.com/react-data-grid/modules/). |
| `refreshNotes` | `Function` |  |  | Refresh note presence for the currently rendered cells. Module: [`NotesModule`](https://www.ag-grid.com/react-data-grid/modules/). |

### NotesDataSource

Properties available on the `NotesDataSource&lt;TMetadata = any&gt;` interface.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `getNote` | `Function` |  |  | Return the note for the given cell. |
| `setNote` | `Function` |  |  | Set or clear the note for the given cell. |
| `init` | `Function` |  |  | Initialise the data source so that the user can take a reference to the gridApi if needed. |
| `destroy` | `Function` |  |  | Called by the grid when the data source is being disposed. |

### FullWidthNotesDataSource

Properties available on the `FullWidthNotesDataSource&lt;TMetadata = any&gt;` interface.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `supportsFullWidthRows` | `true` |  |  | Enables full width row notes for this datasource. |
| `getNote` | `Function` |  |  | Return the note for the given cell or full width row. |
| `setNote` | `Function` |  |  | Set or clear the note for the given cell or full width row. |
| `init` | `Function` |  |  | Initialise the data source so that the user can take a reference to the gridApi if needed. |
| `destroy` | `Function` |  |  | Called by the grid when the data source is being disposed. |

### Note

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `text` | `string` |  |  | Text content of the note. |
| `readOnly` | `boolean` |  |  | Set to `true` to make this note readonly. |
| `author` | `string` |  |  | Optional author of the note. |
| `createdAt` | `string` |  |  | Optional creation timestamp. |
| `updatedAt` | `string` |  |  | Optional updated timestamp. |
| `metadata` | `TMetadata` |  |  | Optional application metadata to be associated with this note. |

### RefreshNotesParams

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `rowNodes` | [`IRowNode[]`](https://www.ag-grid.com/react-data-grid/row-object/) |  |  | Only refresh the provided rowNodes. If `undefined` refresh all rows. |
| `columns` | `(string \| Column)[]` |  |  | Only refresh the provided columns. If `undefined` refresh all columns. |