[DataGrid] include api in gridCellParams interface (#14201)

Signed-off-by: Rajat  <robertdoweny2301@gmail.com>
Co-authored-by: Kenan Yusuf <kenan.m.yusuf@gmail.com>

docs/pages/x/api/data-grid/grid-cell-params.json

@@ -6,6 +6,7 @@
     "import { GridCellParams } from '@mui/x-data-grid'"
   ],
   "properties": {
+    "api": { "type": { "description": "GridApiCommunity" }, "required": true },
     "cellMode": { "type": { "description": "GridCellMode" }, "required": true },
     "colDef": { "type": { "description": "GridStateColDef" }, "required": true },
     "field": { "type": { "description": "string" }, "required": true },

docs/translations/api-docs/data-grid/grid-cell-params.json

@@ -1,6 +1,7 @@
 {
   "interfaceDescription": "Object passed as parameter in the column <a href=\"/x/api/data-grid/grid-col-def/\">GridColDef</a> cell renderer.",
   "propertiesDescriptions": {
+    "api": { "description": "GridApi that let you manipulate the grid." },
     "cellMode": { "description": "The mode of the cell." },
     "colDef": { "description": "The column of the row that the current cell belongs to." },
     "field": { "description": "The column field of the cell that triggered the event." },

packages/x-data-grid/src/components/cell/GridCell.tsx

@@ -8,7 +8,6 @@ import {
   unstable_capitalize as capitalize,
 } from '@mui/utils';
 import { fastMemo } from '@mui/x-internals/fastMemo';
-import type { GridApiCommunity } from '../../internals';
 import { doesSupportPreventScroll } from '../../utils/doesSupportPreventScroll';
 import { getDataGridUtilityClass, gridClasses } from '../../constants/gridClasses';
 import {
@@ -75,11 +74,7 @@ export type GridCellProps = {
   [x: string]: any; // TODO v7: remove this - it breaks type safety
 };
 
-type CellParamsWithAPI = GridCellParams<any, any, any, GridTreeNodeWithRender> & {
-  api: GridApiCommunity;
-};
-
-const EMPTY_CELL_PARAMS: CellParamsWithAPI = {
+const EMPTY_CELL_PARAMS: GridCellParams<any, any, any, GridTreeNodeWithRender> = {
   id: -1,
   field: '__unset__',
   row: {},
@@ -183,19 +178,17 @@ const GridCell = React.forwardRef<HTMLDivElement, GridCellProps>(function GridCe
 
   const field = column.field;
 
-  const cellParamsWithAPI = useGridSelector(
+  const cellParams = useGridSelector(
     apiRef,
     () => {
       // This is required because `.getCellParams` tries to get the `state.rows.tree` entry
       // associated with `rowId`/`fieldId`, but this selector runs after the state has been
       // updated, while `rowId`/`fieldId` reference an entry in the old state.
       try {
-        const cellParams = apiRef.current.getCellParams<any, any, any, GridTreeNodeWithRender>(
+        const result = apiRef.current.getCellParams<any, any, any, GridTreeNodeWithRender>(
           rowId,
           field,
         );
-
-        const result = cellParams as CellParamsWithAPI;
         result.api = apiRef.current;
         return result;
       } catch (e) {
@@ -215,15 +208,15 @@ const GridCell = React.forwardRef<HTMLDivElement, GridCellProps>(function GridCe
     }),
   );
 
-  const { cellMode, hasFocus, isEditable = false, value } = cellParamsWithAPI;
+  const { cellMode, hasFocus, isEditable = false, value } = cellParams;
 
   const canManageOwnFocus =
     column.type === 'actions' &&
     (column as GridActionsColDef)
       .getActions?.(apiRef.current.getRowParams(rowId))
       .some((action) => !action.props.disabled);
   const tabIndex =
-    (cellMode === 'view' || !isEditable) && !canManageOwnFocus ? cellParamsWithAPI.tabIndex : -1;
+    (cellMode === 'view' || !isEditable) && !canManageOwnFocus ? cellParams.tabIndex : -1;
 
   const { classes: rootClasses, getCellClassName } = rootProps;
 
@@ -243,7 +236,7 @@ const GridCell = React.forwardRef<HTMLDivElement, GridCellProps>(function GridCe
   if (column.cellClassName) {
     classNames.push(
       typeof column.cellClassName === 'function'
-        ? column.cellClassName(cellParamsWithAPI)
+        ? column.cellClassName(cellParams)
         : column.cellClassName,
     );
   }
@@ -253,10 +246,10 @@ const GridCell = React.forwardRef<HTMLDivElement, GridCellProps>(function GridCe
   }
 
   if (getCellClassName) {
-    classNames.push(getCellClassName(cellParamsWithAPI));
+    classNames.push(getCellClassName(cellParams));
   }
 
-  const valueToRender = cellParamsWithAPI.formattedValue ?? value;
+  const valueToRender = cellParams.formattedValue ?? value;
   const cellRef = React.useRef<HTMLDivElement>(null);
   const handleRef = useForkRef(ref, cellRef);
   const focusElementRef = React.useRef<FocusElement>(null);
@@ -373,7 +366,7 @@ const GridCell = React.forwardRef<HTMLDivElement, GridCellProps>(function GridCe
     }
   }, [hasFocus, cellMode, apiRef]);
 
-  if (cellParamsWithAPI === EMPTY_CELL_PARAMS) {
+  if (cellParams === EMPTY_CELL_PARAMS) {
     return null;
   }
 
@@ -411,7 +404,7 @@ const GridCell = React.forwardRef<HTMLDivElement, GridCellProps>(function GridCe
   let title: string | undefined;
 
   if (editCellState === null && column.renderCell) {
-    children = column.renderCell(cellParamsWithAPI);
+    children = column.renderCell(cellParams);
   }
 
   if (editCellState !== null && column.renderEditCell) {
@@ -422,10 +415,10 @@ const GridCell = React.forwardRef<HTMLDivElement, GridCellProps>(function GridCe
 
     const formattedValue = column.valueFormatter
       ? column.valueFormatter(editCellState.value as never, updatedRow, column, apiRef)
-      : cellParamsWithAPI.formattedValue;
+      : cellParams.formattedValue;
 
     const params: GridRenderEditCellParams = {
-      ...cellParamsWithAPI,
+      ...cellParams,
       row: updatedRow,
       formattedValue,
       ...editCellStateRest,

packages/x-data-grid/src/hooks/features/rows/useGridParamsApi.ts

@@ -77,6 +77,7 @@ export function useGridParamsApi(apiRef: React.MutableRefObject<GridPrivateApiCo
         value,
         formattedValue: value,
         isEditable: false,
+        api: {} as any,
       };
       if (colDef && colDef.valueFormatter) {
         params.formattedValue = colDef.valueFormatter(value as never, row, colDef, apiRef);

packages/x-data-grid/src/models/params/gridCellParams.ts

@@ -65,6 +65,10 @@ export interface GridCellParams<
    * the tabIndex value.
    */
   tabIndex: 0 | -1;
+  /**
+   * GridApi that let you manipulate the grid.
+   */
+  api: GridApiCommunity;
 }
 
 export interface FocusElement {