Example table component using GraphQL query fragment for row.

OrderTableRelay.js

import React from 'react';
import PropTypes from 'prop-types';
import {Table} from 'react-bootstrap';
import R from 'ramda';
import {graphql, createFragmentContainer} from 'react-relay';

import utils from '@/utils';
import constants from '@/constants';
import Status from '@/components/Status';

const columnsPropType = utils.makeColumnsPropType([
    'creationTime',
    'dueDate',
    'id',
    'poNumber',
    'status',
    'totalQuantity',
]);

const OrderRow = createFragmentContainer(
    (props) => {
        const columnElements = {
            creationTime: <td>{utils.dateToDisplay(props.order.creationTime)}</td>,
            dueDate: <td>{utils.dateToDisplay(props.order.dueDate)}</td>,
            id: <td>{utils.idToDisplay(props.order.id)}</td>,
            poNumber: <td>{props.order.poNumber}</td>,
            status: (
                <td>
                    <Status
                        state={constants.ORDER_STATUSES[props.order.status.toLowerCase()]}
                    />
                </td>
            ),
            totalQuantity: (
                <td>
                    {R.reduce(
                        R.sum,
                        0,
                        R.pluck('quantity', R.pluck('node', props.order.lineItems.edges)),
                    )}
                </td>
            ),
        };

        return (
            <tr>
                {React.Children.toArray(
                    props.columns.map((column) => columnElements[column]),
                )}
            </tr>
        );
    },
    graphql`
        fragment OrderTableRelay_order on OrderNode {
            id
            creationTime
            dueDate
            poNumber
            status
            lineItems {
                edges {
                    node {
                        quantity
                    }
                }
            }
        }
    `,
);

OrderRow.propTypes = {
    columns: columnsPropType,
};

const OrderTable = (props) => {
    const columnElements = {
        creationTime: <th>Created</th>,
        dueDate: <th>Due Date</th>,
        id: <th>ID</th>,
        poNumber: <th>PO Number</th>,
        totalQuantity: <th>Total Quantity</th>,
        status: <th>Status</th>,
    };

    const emptyDisplay = (
        <tfoot>
            <tr>
                <td colSpan={props.columns.length}>
                    No orders to display
                </td>
            </tr>
        </tfoot>
    );

    return (
        <Table striped bordered hover>
            <thead>
                <tr className="bg-blue font-white">
                    {React.Children.toArray(
                        props.columns.map(
                            (column) => columnElements[column],
                        ),
                    )}
                </tr>
            </thead>
            <tbody>
                {props.orders.edges.map((edge) => (
                    <OrderRow
                        key={edge.node.__id}
                        columns={props.columns}
                        order={edge.node}
                    />
                ))}
            </tbody>
            {R.isEmpty(props.orders.edges) ? emptyDisplay : null}
        </Table>
    );
};

OrderTable.propTypes = {
    orders: PropTypes.shape({
        edges: PropTypes.arrayOf(
            PropTypes.shape({
                node: PropTypes.object,
            }),
        ),
    }),
    columns: columnsPropType,
};

export default OrderTable;