javascript - Material UI: ¿Puedo usar un componente de React en la celda de DataGrid en lugar de los tipos de celda predefinidos ('string', 'number', 'date', 'dateTime')?

React, Material UI, TypeScript
Quiero poner un componente de React dentro de la celda de DataGrid. Leí sobre los tipos personalizados de celda aquí, pero no me ayudó: permite gestionar solo mediante formato de cadena, pero necesito usar un componente en lugar de una cadena. Por ejemplo, quiero usar el componente Link en la celda. Mi código:

{ field: 'name', headerName: 'Name', width: 200,
    valueGetter: (params: ValueGetterParams): JSX.Element =>
        (<Link href={this.props.createRecordUrl(params.row.logicalName as EntityNames,
            params.row.id as ID)} target="_blank">{params.row.name}</Link>)
},

Pero obtengo la cadena [object Object] en lugar del componente Link en la celda. ¿Cómo puedo resolver el problema?

Respuesta #1

Puedes insertar componentes personalizados usando la propiedad renderCell, que defines en las columnas. Consulta este enlace para más información: https://material-ui.com/components/data-grid/columns/

Ejemplo tomado de la documentación de Material UI:

const columns: GridColDef[] = [
  {
    field: 'date',
    headerName: 'Year',
    renderCell: (params: GridCellParams) => (
      <strong>
        {(params.value as Date).getFullYear()}
        <Button
          variant="contained"
          color="primary"
          size="small"
          style={{ marginLeft: 16 }}
        >
          Open
        </Button>
      </strong>
    ),
  },
];