title: Add custom column to Datagrid in admin-on-rest
body: <p>I've created an admin panel in React.js using <a href="https://marmelab.com/admin-on-rest/" rel="nofollow noreferrer"><code>admin-on-rest</code></a>. 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.</p>
  
  <p>I'm using a module called <a href="https://github.com/react-component/progress" rel="nofollow noreferrer"><code>rc-progress</code></a> to generate the progress bar. Here's an example display on a separate page currently from the user list:</p>
  
  <pre><code>import React from 'react';
  import { Line } from 'rc-progress';
  
  var Progress = React.createClass({
  render: function render() {
  
      return (
         &lt;Line percent="40" strokeWidth="1" strokeColor="#38bcd5" /&gt;
      );
  }
  });
  
  export default Progress;
  </code></pre>
  
  <p>I'm not sure how to append a custom column to a Datagrid in admin-on-rest to add in that progress bar.</p>
  
  <p>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:</p>
  
  <pre><code>import React from 'react';
  import { List, Datagrid, TextField} from 'admin-on-rest';
  import { Line } from 'rc-progress';
  
  export const UserList = (props) =&gt; (
  &lt;List {...props}&gt;
      &lt;Datagrid&gt;
          &lt;TextField source="firstName" /&gt;
          &lt;TextField source="lastName" /&gt;
          &lt;TextField source="email" /&gt;
          &lt;TextField source="phone" /&gt;
          &lt;TextField source="type" /&gt;
  
          //I'd like to add the progress bar below:
          //&lt;Line percent="40" strokeWidth="1" strokeColor="#38bcd5" /&gt;
  
      &lt;/Datagrid&gt;
  &lt;/List&gt;
  
  );
  </code></pre>
  
  <p>export default UserList;</p>
  
  <p>Any help is much appreciated!</p>
  
  <h2>Update (Solution)</h2>
  
  <p>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)</p>
  
  <pre><code>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) =&gt; (
  &lt;List {...props}&gt;
      &lt;Datagrid&gt;
          &lt;TextField source="firstName" /&gt;
          &lt;TextField source="lastName" /&gt;
          &lt;TextField source="email" /&gt;
          &lt;TextField source="phone" /&gt;
          &lt;TextField source="type" /&gt;
  
          //Here is the working version below:
          &lt;FunctionField label="Progress" render= {function render() { return ( &lt;Line percent="40" strokeWidth="1" strokeColor="#38bcd5" /&gt;);}} /&gt;
  
      &lt;/Datagrid&gt;
  &lt;/List&gt;
  
  );
  
  
  export default UserList;
  </code></pre>
  
  <p>Here's a current screenshot:
  <a href="https://i.stack.imgur.com/FBYzs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FBYzs.png" alt="Screenshot of added column"></a></p>