Simple Renderer for React

function renderTable({ colGroups, bodyRows }) {
  return (
    <table>
      <colgroups>
      </colgroups>
      <tbody>
      {
        _.map(bodyRows, ({ cells, attributes }) => (
          <tr {...attributes}>
            {
              _.map(cells, ({ content, attributes}) => (
                <td {...attributes}>{content}</td>
              ))
            }
          </tr>
        ))
      }
      </tbody>
    </table>
  );
}

API sample

import HelpLink from 'help-link-plugin-react';

render() {
  return (
    <ProjectionGrid
      config = {
        ProjectionGridReactConfig({
          data: this.state.data,
          columns: [{
            name: 'Name',
            component: NameCell,
          }],
          row: RowComponent,
        })
      },
      projections = {[
        SortableHeader({ onSort: (key) => this.sort(key) }),
        Selection({ onSelectionChange: this.props.onSelectionChange1 }),
        Selection({ onSelectionChange: this.props.onSelectionChange2 }),
        this.state.filter ? CustomRow({ content: (<FilterBar filter = this.state.filter/>) }) : null,
        CustomRow({ }),
        HelpLink({ column: A, link: 'abc' }),
      ]}

      myCustomRow={ content: <FilterBar filter=this.state.filter />}
    />
  );
}

Converter sample

function ({ RowComponent, data, columns }) {
  return {
    bodyRows: _.map(data, item => (
      <RowComponent item={item} columns={columns} />
    )),
  }
}