Accessor keys don't work with Dots

[ajtran]

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.

[burtyish]

A period in an accessor is used for accessing properties on a data object.

Your column definition

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

Would work well with data like this:

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

Result:

You can see it in this working codesandbox: https://codesandbox.io/s/tannerlinsleyreact-table-basic-vxlcg

[ajtran]

Oh! I see. Thank you for the clarification!

[kderbalah]

@tannerlinsley @burtyish is there any way to disable the deep inspection and treat the accessor as a normal string?

[burtyish]

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

[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!

[kevinisaac]

In v8, the accessor property was renamed to accessorFn.

So, the same example by @kderbalah should be the following:

{
    header: 'First Column',
    accessorFn: data => data[key], // example key - 'first.column'
    id: key
}

[WillemSleegers]

What would this solution look like with Typescript?

[rajagopalstalwart]

V7 for React-Table

Header: "Start Date",
accessorkey: "startDate",
Cell: StartDate,

V8 for React-Table

header: "Start Date",
accessorKey: "startDate",
cell: StartDate,

[khaukheng]

What would this solution look like with Typescript?

For me it's like this (v8):

{
  header: 'First Column',
  // @ts-ignore
  accessorFn: (d) => d[key], // example key first.column
}