[DataGrid] Add support for generic types in GridRowParams, GridCellParams, GridRenderCellParams

docs/src/pages/components/data-grid/columns/RenderCellGrid.tsx

@@ -7,9 +7,9 @@ const columns: GridColDef[] = [
     field: 'date',
     headerName: 'Year',
     width: 150,
-    renderCell: (params: GridRenderCellParams) => (
+    renderCell: (params: GridRenderCellParams<Date>) => (
       <strong>
-        {(params.value as Date).getFullYear()}
+        {params.value.getFullYear()}
         <Button
           variant="contained"
           color="primary"

docs/src/pages/components/data-grid/columns/RenderExpandCellGrid.tsx

@@ -117,7 +117,7 @@ const GridCellExpand = React.memo(function GridCellExpand(
   );
 });
 
-function renderCellExpand(params: GridRenderCellParams) {
+function renderCellExpand(params: GridRenderCellParams<string>) {
   return (
     <GridCellExpand
       value={params.value ? params.value.toString() : ''}

docs/src/pages/components/data-grid/columns/columns.md

@@ -175,9 +175,9 @@ const columns: GridColDef[] = [
   {
     field: 'date',
     headerName: 'Year',
-    renderCell: (params: GridRenderCellParams) => (
+    renderCell: (params: GridRenderCellParams<Date>) => (
       <strong>
-        {(params.value as Date).getFullYear()}
+        {params.value.getFullYear()}
         <Button
           variant="contained"
           color="primary"

docs/src/pages/components/data-grid/editing/RenderRatingEditCellGrid.tsx

@@ -4,7 +4,7 @@ import { makeStyles } from '@material-ui/styles';
 import Rating from '@material-ui/lab/Rating';
 import { DataGrid, GridRenderCellParams } from '@mui/x-data-grid';
 
-function renderRating(params) {
+function renderRating(params: GridRenderCellParams<number>) {
   return <Rating readOnly value={params.value} />;
 }
 

docs/src/pages/components/data-grid/style/style.md

@@ -35,15 +35,15 @@ const columns: GridColumns = [
 The `getRowClassName` prop can be used to apply a custom CSS class on each row. It's called with a `GridRowParams` object and must return a string.
 
 ```tsx
-interface GridRowParams {
+interface GridRowParams<RowDataType = any> {
   /**
    * The grid row id.
    */
   id: GridRowId;
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: GridRowModel;
+  row: GridRowModel<RowDataType>;
   /**
    * All grid columns.
    */

packages/grid/_modules_/grid/models/gridRows.ts

@@ -1,10 +1,10 @@
 export type GridRowsProp = Readonly<GridRowData[]>;
-export type GridRowData = { [key: string]: any };
+export type GridRowData<RowType = { [key: string]: any }> = RowType;
 
 /**
  * The key value object representing the data of a row.
  */
-export type GridRowModel = GridRowData;
+export type GridRowModel<RowType = any> = GridRowData<RowType>;
 
 export type GridUpdateAction = 'delete';
 

packages/grid/_modules_/grid/models/params/gridCellParams.ts

@@ -6,7 +6,7 @@ import { GridEditCellProps } from '../gridEditRowModel';
 /**
  * Object passed as parameter in the column [[GridColDef]] cell renderer.
  */
-export interface GridCellParams {
+export interface GridCellParams<T = GridCellValue, RowType = any> {
   /**
    * The grid row id.
    */
@@ -18,15 +18,15 @@ export interface GridCellParams {
   /**
    * The cell value, but if the column has valueGetter, use getValue.
    */
-  value: GridCellValue;
+  value: T;
   /**
    * The cell value formatted with the column valueFormatter.
    */
-  formattedValue: GridCellValue;
+  formattedValue: T;
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: GridRowModel;
+  row: GridRowModel<RowType>;
   /**
    * The column of the row that the current cell belongs to.
    */
@@ -52,13 +52,13 @@ export interface GridCellParams {
    * @param id
    * @param field
    */
-  getValue: (id: GridRowId, field: string) => GridCellValue;
+  getValue: (id: GridRowId, field: string) => T;
 }
 
 /**
  * GridCellParams containing api.
  */
-export interface GridRenderCellParams extends GridCellParams {
+export interface GridRenderCellParams<T = any, RowType = any> extends GridCellParams<T, RowType> {
   /**
    * GridApi that let you manipulate the grid.
    */

packages/grid/_modules_/grid/models/params/gridRowParams.ts

@@ -3,17 +3,17 @@ import { GridRowId, GridRowModel } from '../gridRows';
 import type { GridColumns } from '../colDef';
 
 /**
- * Object passed as parameter in the column [[GridColDef]] cell renderer.
+ * Object passed as parameter in the row callbacks.
  */
-export interface GridRowParams {
+export interface GridRowParams<RowDataType = any> {
   /**
    * The grid row id.
    */
   id: GridRowId;
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: GridRowModel;
+  row: GridRowModel<RowDataType>;
   /**
    * All grid columns.
    */