Accessor keys not working with space in react-table

Question

Table rows are not able to access the columns in response payload when they have a space in the accessor key. The column displays - on UI.

const data =[
  {
    "agent": {
      "first name": "hello",
      "lastname": "world"
    } 
  },
  "agent": {
    {
      "first name": "hello",
      "lastname": "world"
    }
  }
];

const columns = [
  {
    Header: "First Name",
    accessor: "agent['first name']"
  },
  {
    Header: "Last Name",
    accessor: "agent.lastname"
  },
  
];
...
<Table columns={columns} data={data} />
...

Answer 1

have you tried creating a function instead of a string accessor?

something like

  {
    Header: "Last Name",
    accessor: (agent) => agent.lastname
  },

Answer 2

You have to de something like this.

{
   header: "First Name",
   accessor: (data) => data.agent['first name']
}