Блог

React, Material UI, TypeScript
Я хочу поместить компонент React в ячейку DataGrid. Я читал здесь о пользовательских типах ячеек, но это мне не помогло: это позволяет управлять только строковым форматом, но мне нужно использовать component вместо string . Например, я хочу использовать компонент Link в ячейке. Мой код:

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

Но я получаю [object Object] строку вместо Link компонента в ячейке. Как я могу решить проблему?

Вы можете вставлять пользовательские компоненты, используя renderCell свойство, которое вы определяете в столбцах. Посмотрите на эту ссылку для получения дополнительной информации: https://material-ui.com/components/data-grid/columns /

Пример взят из документов 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>
    ),
  },
];
 

Похоже, что использование компонентов в столбцах является лишь частью платной функции XGrid? В прошлом я использовал material-table, который позволяет использовать пользовательские компоненты для столбцов.