title: How do I group by a value in a nested object in ReactJS material-table?
body: <p>Let's say I have an array of <strong>people</strong> with a nested object <strong>company</strong> and I want to be able to group by <strong>company.name</strong> in the <a href="https://www.material-table.com" rel="nofollow noreferrer">Material-Table</a>.</p>
  
  <pre><code>const people = [ 
    {name: 'John', company: {name: 'Google'}},
    {name: 'Chad', company: {name: 'Google'}},
    {name: 'Mary', company: {name: 'StackOverflow'}
  ]
  
  &lt;MaterialTable
    data={people}
    columns=[
              {
                title: "Company", field: "company.name", grouping: true,
                render: rowData =&gt; rowData.company.name
              },
    ],
    options={grouping: true}
  /&gt;
  </code></pre>
  
  <p>The table sorts correctly by the company name, but if I try to group by column, it throws an error:</p>
  
  <p><em>table-config.js is the location of the columns array</em></p>
  
  <pre><code>table-config.js:187 Uncaught TypeError: Cannot read property 'name' of undefined
  at Object.render (table-config.js:187)
  at MTableCell.getRenderValue (m-table-cell.js:94)
  at MTableCell.render (m-table-cell.js:176)
  at finishClassComponent (react-dom.development.js:18470)
  at updateClassComponent (react-dom.development.js:18423)
  at beginWork$1 (react-dom.development.js:20186)
  at HTMLUnknownElement.callCallback (react-dom.development.js:336)
  at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
  at invokeGuardedCallback (react-dom.development.js:440)
  at beginWork$$1 (react-dom.development.js:25780)
  </code></pre>
  
  <p>How exactly do I make this work?</p>
  
  <p>Thanks</p>