Internal issue 3117 - Re-raised: Allow dot notation for the "key" field in data table columns

More in-depth example below:

import React from 'react';
import { IcDataTable } from '@ukic/canary-react';

import '@ukic/fonts/dist/fonts.css';
import '@ukic/react/dist/core/core.css';
import '@ukic/react/dist/core/normalize.css';

const DataTable = () => {
  const columns = [
    {
      key: 'name.first',
      title: 'First name',
      dataType: 'string',
    },
    {
      key: 'coffeeOrder',
      title: 'Coffee order',
      dataType: 'string',
    },
    {
      key: 'quantity',
      title: 'Quantity',
      dataType: 'number',
    },
  ];
  const data = [
    {
      name: { first: 'Joe' },
      coffeeOrder: 'Latte',
      quantity: 3,
    },
    {
      name: { first: 'Sarah' },
      coffeeOrder: 'Mocha',
      quantity: 2,
    },
    {
      name: { first: 'Mark' },
      coffeeOrder: 'Espresso',
      quantity: 1,
    },
  ];
  return (
    <IcDataTable caption="Embedded" columns={columns} data={data} embedded />
  );
};
export default DataTable;

The previous issue was closed but the example given was incorrect.

Additionnal info:

The data model has nested objects in it as seen in the example. So to access the first name, you would have to do 'name.first'.
If I was building just an HTML table I would do something like:

{data.map(person => (
        <tr>
          <td>{person.name.first}</td>
          <td>{person.coffeeOrder}</td>
          <td>{person.quantity}</td>
        </tr>
      ))}

Start at the IcDataTable column handling described in the issue and trace how each column key reads from a data object. Use the nested name.first example as the case to support, while preserving existing top-level keys such as coffeeOrder and quantity. Done means the table renders Joe, Sarah, and Mark's first names from the nested data.