CODEWITHSUNDEEP
reactjsdatagridprogress-baradmin-on-rest
Mark
Mark

Reputation: 151

Add custom column to Datagrid in admin-on-rest

I've created an admin panel in React.js using admin-on-rest. I have a page showing a user list pulling data from an api. I need to add a custom column at the end of each row of that table that will display a progress bar for each user.

I'm using a module called rc-progress to generate the progress bar. Here's an example display on a separate page currently from the user list:

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;

I'm not sure how to append a custom column to a Datagrid in admin-on-rest to add in that progress bar.

Here's the code I have for the User list which is displaying the data from the API correctly. I've added a comment where I'd want to add the progress bar:

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>

);

export default UserList;

Any help is much appreciated!

Update (Solution)

So on the recommendation of Gildas I've tried to use the FunctionField. Here is the working version of the code. (The progress bar has hard-coded values right now)

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;

Here's a current screenshot: Screenshot of added column

Upvotes: 2

Views: 2332

Answers (1)

Gildas Garcia
Gildas Garcia

Reputation: 7066

The FunctionField should do the trick: https://marmelab.com/admin-on-rest/Fields.html#functionfield

If not, have you tried following the custom field documentation ?

Upvotes: 4

Related Questions