Grid.js

class Grid extends React.Component {
  renderCell(record, col) {
    return <td>{col.renderer(record[col.field], record)}</td>
  }

  renderRow(row) {
    return <tr className=...>
      {this.props.columns.map((col) => this.renderCell(d, col))}
    </tr>
  }

  renderContent(data) {
    return data.map((d) => this.renderRow(d));
  } 
  render() {
    return <table>
      {/* render table headers and colgroups */}
      {this.renderContent(this.props.items)}
    </table>
  }
}

// ================================================

class TreeGrid extends Grid {
  constructor(props)
  {
    this.super(props);
    this.state = {expanded: {}}
  }

  expand(id) {
    ...
  }
  
  renderTreeColumn(value, record, treeinfo)
  {
    // render tree item with offsets, [+\-] buttons etc.
  }
  
  buildTreeInfo()
  {
    //return some data for tree rendering, like offsets etc.
    ...
  }
  
  renderContent(data) // overloaded parent function
  {
  	return this.renderTree(data[0]);
  }
  
  renderTree(item)
  {
  	var res = [this.renderRow(item)];
  	
  	res = res.concat(item.childs.map(child) => renderTree(child))
  	
  	return res;
  }
  
  render() {
    var treeinfo = this.buildTreeInfo(this.props.items);
	
    // this should be done once (move to function?)
    var old = this.props.columns[0].renderer;
    this.props.columns[0].renderer = (v,r) =>
      this.renderTreeColumn(old(v,r), r, treeinfo.shift());

    return super.render();
  }
}