CDataTable: Table content doesn't support specifying the nested JSON in 'fields' props

The CDataTable displays undefined for the column where the “key” is specified in nested JSON. ex:

App.js:

export default function App() {
  const data = usersData;
  const fields = [{
      key: "name",
      label: "Name"
    },{
      key: "available.status",
      label: "Available"
    }];

   return (
<CDataTable
         items={data}
         fields={fields}
    />
  );
}

usersData.js:

export const usersData = [
  {
    id: 0,
    name: "John Doe",
    available: {
      status: false
    }
  },
  {
    id: 1,
    name: "Samppa Nori",
    available: {
      status: true
    }
  },
  {
    id: 2,
    name: "Estavan Lykos",
    available: {
      status: false
    }
  },
  {
    id: 3,
    name: "Chetan Mohamed",
    available: {
      status: true
    }
  }
];

The column for “Available” is undefined.

Below you can find the link for working demo of the issue

Operating system and version: Windows 10 Pro Browser and version: All the browsers Reduced test cases : click here

[shamvilkv]

@woothu Please help me with this issue

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions