title: Reactjs-tables. How to join multiple values into 1 cell?
body: <p>I am using <a href="https://github.com/react-tools/react-table" rel="nofollow noreferrer">react-table</a> but I have 2 values that I want to join into one cell. Does anyone know how to do this?</p>
  
  <p>Say I have this sample code, right now it has "name" which as the first and last name combined.</p>
  
  <p>What happens if in my db I have it separate by first name and last. How could I join them together in the ui here(I know I could do this at the db level but this just an example)</p>
  
  <pre><code>import ReactTable from 'react-table'
  
  render() {
    const data = [{
      name: 'Tanner Linsley',
      age: 26,
      friend: {
        name: 'Jason Maurer',
        age: 23,
      }
    },{
      ...
    }]
  
    const columns = [{
      Header: 'Name',
      accessor: 'name' // String-based value accessors!
    }, {
      Header: 'Age',
      accessor: 'age',
      Cell: props =&gt; &lt;span className='number'&gt;{props.value}&lt;/span&gt; // Custom cell components!
    }, {
      id: 'friendName', // Required because our accessor is not a string
      Header: 'Friend Name',
      accessor: d =&gt; d.friend.name // Custom value accessors!
    }, {
      Header: props =&gt; &lt;span&gt;Friend Age&lt;/span&gt;, // Custom header components!
      accessor: 'friend.age'
    }]
  
    &lt;ReactTable
      data={data}
      columns={columns}
    /&gt;
  }
  </code></pre>