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

Question

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

我正在使用一个名为 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 中的数据网格以添加到该进度条中。

这是我的用户列表代码，它可以正确显示来自 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

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

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

Add custom column to Datagrid in admin-on-rest

reactjs

datagrid

progress-bar

admin-on-rest

更新（解决方案）