Cell as React component

RevoGrid provide a way to render react elements inside of cells.

WARNING

This functionality is slightly decreasing overall grid render performance. If you are aiming for the faster render we are recommending to stick with native VNode render.

Create component which be presented as cell:

import React from "react";
export default class Sample extends React.Component {
  render() {
    return <div>{this.props.val}</div>;
  }
}

Create an adapter function for React binding or trigger component update.
A primitive sample of adapter:

function adapter(parent, props) {
  let wrapper;
  if (parent.childNodes.length) {
    wrapper = parent.childNodes[0];
    ReactDOM.unmountComponentAtNode(wrapper);
  } else {
    wrapper = document.createElement("span");
    parent.appendChild(wrapper);
  }
  ReactDOM.render(<MyReactComponent val={props.model[props.prop]} />, wrapper);
}

Apply Adapter during virtual DOM render:

export default class App extends React.Component {
  constructor(props) {
    super(props);
    defineCustomElements();
    this.state = {
      columns: [
        {
          prop: "name",
          cellTemplate(h, p) => h("span", { ref: (el) => adapter(el, p) })
        }
      ],
      source: [{ name: "Item 1" }]
    };
  }

  render() {
    return (
      <div>
        <RevoGrid
          theme="compact"
          columns={this.state.columns}
          source={this.state.source}
        />
      </div>
    );
  }
}

Check Sandbox (opens new window) for real live sample.