在 admin-on-rest 中将自定义列添加到 Datagrid

Question

我在 React.js 中使用 admin-on-rest 创建了一个管理面板。我有一个页面显示从 api 提取数据的用户列表。我需要在该表的每一行末尾添加一个自定义列，该列将为每个用户显示一个进度条。

我正在使用一个名为rc-progress 的模块来生成进度条。这是当前在用户列表中的单独页面上显示的示例：

import React from 'react';
import { Line } from 'rc-progress';

var Progress = React.createClass({
render: function render() {

    return (
       <Line percent="40" strokeWidth="1" strokeColor="#38bcd5" />
    );
}
});

export default Progress;

我不确定如何在 admin-on-rest 中将自定义列附加到 Datagrid 以添加到该进度条中。

这是我为用户列表正确显示来自 API 的数据的代码。我添加了一条评论，我想在其中添加进度条：

import React from 'react';
import { List, Datagrid, TextField} from 'admin-on-rest';
import { Line } from 'rc-progress';

export const UserList = (props) => (
<List {...props}>
    <Datagrid>
        <TextField source="firstName" />
        <TextField source="lastName" />
        <TextField source="email" />
        <TextField source="phone" />
        <TextField source="type" />

        //I'd like to add the progress bar below:
        //<Line percent="40" strokeWidth="1" strokeColor="#38bcd5" />

    </Datagrid>
</List>

);

导出默认用户列表；

非常感谢任何帮助！

更新（解决方案）

所以根据 Gildas 的建议，我尝试使用 FunctionField。这是代码的工作版本。 （进度条现在有硬编码值）

import React from 'react';
import { List, Datagrid, TextField} from 'admin-on-rest';
import { Line } from 'rc-progress';
import { FunctionField } from 'admin-on-rest'

export const UserList = (props) => (
<List {...props}>
    <Datagrid>
        <TextField source="firstName" />
        <TextField source="lastName" />
        <TextField source="email" />
        <TextField source="phone" />
        <TextField source="type" />

        //Here is the working version below:
        <FunctionField label="Progress" render= {function render() { return ( <Line percent="40" strokeWidth="1" strokeColor="#38bcd5" />);}} />

    </Datagrid>
</List>

);


export default UserList;

这是当前的屏幕截图：

Answer 1

FunctionField 应该可以解决问题：https://marmelab.com/admin-on-rest/Fields.html#functionfield

如果没有，您是否尝试过遵循自定义字段文档？