1-users.js

import React from 'react';
import { Link } from 'react-router-dom';
import Table from 'table.js';

function profileUrl(props, item) {
  return {
    to: `/admin/users/${item.id}`,
  };
}

// Usage:
// pass array of objects to Table
// Children are elements to use in cells
// children field is the key to use from the items[n] object.
const Users = ({ users }) =>
  <Table items={users}>
    <Link to="/default-value" renderProps={profileUrl} field="id" />
    <b field="groups" />
  </Table>

export default Users;

2-table.js

import React from 'react';

const Row = ({ item, children }) =>
  <tr>
    {React.Children.map(children, ({ props: { field, renderProps, ...props}, ...child }) => (
      <td>
        <child.type {...props} {...(renderProps && renderProps(props, item))}>
          {item[field]}
        </child.type>
      </td>
    ))}
  </tr>

const Table = ({ items, ...props}) =>
  <table>
    <tbody>
      {items.map(item => <Row key={item.id} item={item} {...props} />)}
    </tbody>
  </table>

export default Table;