React, Material UI, TypeScript
I want to put React component into the DataGrid cell. I read about cell custom types here but it didn't help me: it allows to manage by string format only, but I need to use component instead of string. For example I want to use Link component in the cell. My code:

{ 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>)
},

But I get the [object Object] string instead of Link component in the cell. How can I solve the problem?

React, Material UI, TypeScript
I want to put React component into the DataGrid cell. I read about cell custom types here but it didn't help me: it allows to manage by string format only, but I need to use component instead of string. For example I want to use Link component in the cell. My code:

{ 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>)
},

But I get the [object Object] string instead of Link component in the cell. How can I solve the problem?

• javascript
• reactjs
• typescript
• material-ui

2 Answers 2

You can insert custom components using the renderCell property, which you define in the columns. Have a look at this link for more information: https://material-ui.com/components/data-grid/columns/

Example taken from Material UI Docs:

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>
    ),
  },
];

It looks like using components in columns is only part of the paid XGrid feature? I've used material-table in the past, which does allow using custom components for columns.