);
};
const root = createRoot(document.getElementById("root")!);
root.render(
,
);
```
[Live example: Simple Cell Editing](https://www.ag-grid.com/archive/36.2.0/examples/cell-editing/simple-editing/reactFunctionalTs/)
## Conditional Editing
To dynamically determine which cells are editable, a callback function can be supplied to the `editable` property on the Column Definition:
```jsx
const [columnDefs, setColumnDefs] = useState([
{
field: 'athlete',
// conditionally enables editing for data for 2012
editable: (params) => params.data.year == 2012
}
]);
```
In the snippet above, **Athlete** cells will be editable on rows where the **Year** is `2012`.
This is demonstrated in the following example, note that:
- An `editable` callback is added to the **Athlete** and **Age** columns to control which cells are editable based on the selected **Year**.
- A custom `editableColumn` [Column Type](https://www.ag-grid.com/archive/36.2.0/react-data-grid/column-definitions/#default-column-definitions) is used to avoid duplication of the callback for **Athlete** and **Age**.
- Buttons are provided to change the **Year** used by the `editable` callback function to control which cells are editable.
- A blue [Cell Style](https://www.ag-grid.com/archive/36.2.0/react-data-grid/cell-styles/) has been added to highlight editable cells using the same logic as the `editable` callback.
#### Conditional Cell Editing
```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,
ClientSideRowModelApiModule,
ClientSideRowModelModule,
ColDef,
ColGroupDef,
ColTypeDefs,
EditableCallbackParams,
GridApi,
GridOptions,
ModuleRegistry,
NumberEditorModule,
RowApiModule,
TextEditorModule,
enableDevValidations,
} from "ag-grid-community";
import { IOlympicData } from "./interfaces";
import { useFetchJson } from "./useFetchJson";
if (process.env.NODE_ENV !== "production") {
// Enable extended validations only for development
enableDevValidations();
}
const modules = [
RowApiModule,
NumberEditorModule,
TextEditorModule,
CellStyleModule,
ClientSideRowModelApiModule,
ClientSideRowModelModule,
];
let editableYear = 2012;
function isCellEditable(params: EditableCallbackParams | CellClassParams) {
return params.data.year === editableYear;
}
const GridExample = () => {
const gridRef = useRef>(null);
const containerStyle = useMemo(() => ({ width: "100%", height: "100%" }), []);
const gridStyle = useMemo(() => ({ height: "100%", width: "100%" }), []);
const [columnDefs, setColumnDefs] = useState([
{ field: "athlete", type: "editableColumn" },
{ field: "age", type: "editableColumn" },
{ field: "year" },
{ field: "country" },
{ field: "sport" },
{ field: "total" },
]);
const columnTypes = useMemo(() => {
return {
editableColumn: {
editable: (params: EditableCallbackParams) => {
return isCellEditable(params);
},
cellStyle: (params: CellClassParams) => {
if (isCellEditable(params)) {
return { backgroundColor: "#2244cc44" };
}
},
},
};
}, []);
const { data, loading } = useFetchJson(
"https://www.ag-grid.com/example-assets/olympic-winners.json",
);
const setEditableYear = useCallback((year: number) => {
editableYear = year;
// Redraw to re-apply the new cell style
gridRef.current!.api.redrawRows();
}, []);
return (