Accessor keys don't work with Dots

Using v7?

Yawps!

Describe the bug

Table rows aren’t able to access the columns in data when they have a . in the accessor key.

To Reproduce

With columns and data described below, the values for the broken column are undefined.

const columns = [
  {
    Header: 'broken column',
    accessor: 'first.column',
  },
  {
    Header: 'working column',
    accessor: 'first-column',
  },
]

const data = [
  {
     'first.column': 'hello world',
     'first-column': 'hello again',
  },
  {
    'first.column': 'fizz',
    'first-column': 'buzz',
  },
]

...
<Table columns={columns} data={data} />
...

Expected behavior

I expect the cell to still be able to access the data even with dot in the accessor key.

Codesandbox!

Use a new react-table codesandbox to reproduce the issue.

Screenshots

Desktop (please complete the following information):

• OS: iOS
• Browser: chrome
• Version: 79.0.3945.36 (Official Build) beta (64-bit)

Additional context

Not sure if this is by design or a limitation of my data model or a bug.

[kderbalah]

@burtyish thanks for the quick reply. Yea, I managed to fix it by using a custom accessor

{
    Header: 'First Column',
    accessor: (d) => d[key], // example key first.column
    id: key
}

Thanks for the hint!

[burtyish]

@kderbalah idk about that. But you can get full control of the logic by supplying a function as the accessor