Skip to content

Instantly share code, notes, and snippets.

@simonlc
Created July 19, 2017 19:29
Show Gist options
  • Save simonlc/716fce63fcf8ab608c6ead75b31bb152 to your computer and use it in GitHub Desktop.
Save simonlc/716fce63fcf8ab608c6ead75b31bb152 to your computer and use it in GitHub Desktop.
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;
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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment