React Dynamic Table not showing in Knowckout project - reactjs

Question

i have been able to successfully integrate react components in my durandal/knockout application. I have managed to show data in a graph but i cant seem to show the data in my react table. I get the following JSON dynamic data :
{
"Level": 1,
"Label": "Level 1",
"Qualification": "≥ 100 points",
"BBBEERecognitionLevel": "135%",
"LevelMet": false,
"Color": "whitesmoke"
},
Now the data shows in my console so i know i am getting the Json data, here is my Knockout code:
index.html
<bee-data-Table data-bind="attr: { data: ReactBeeLevelTable }" />
index.js
self.ReactBeeLevelTable = ko.observable();
var length = levels.length;
for (var i = 0; i < length; i++) {
var levelItem = levels[i];
levelItem.LevelMet = levelItem.Level === recognisedLevel;
levelItem.Color = levelItem.LevelMet ? reveresedColours[i].color : defaultTableRowColor;
var levelCompare = getCompareValueFromLevel(levelItem.Level);
var recognisedLevelCompare = getCompareValueFromLevel(recognisedLevel);
if (levelCompare <= recognisedLevelCompare) {
var chartIndex = ConvertLevelToIndex(levelItem.Level);
dataset.backgroundColor[chartIndex] = defaultChartBackgroundColor;
}
}
self.ReactBeeLevelTable(JSON.stringify(levels));
And this is my react datatable.js
import React, { Component } from 'react';
import { Table } from '#react-pakistan/react-commons-collection/table';
const RenderRow = (props) =>{
return props.keys.map((key, index)=>{
return <td key={props.data[key]}>{props.data[key]}</td>
})
}
export class Example extends Component {
constructor(props) {
super(props)
this.getHeader = this.getHeader.bind(this);
this.getRow= this.getRow.bind(this);
this.getKeys=this.getKeys.bind(this);
}
getKeys = function() {
return Object.keys(this.props.data[0]);
}
getHeader = function() {
var keys = this.getKeys();
return keys.map((key,index)=> {
return <th key={key}>{key.toUpperCase()}</th>
})
}
getRow = function () {
var items = this.props.data;
var keys = this.getKeys();
return items.map((row,index) => {
return <tr key={index}><RenderRow key={index} data={row} keys={keys}/></tr>
})
}
render () {
return (
<div>
<Table>
<thead>
<tr>
<th>B-BBEE Recognition Level</th>
</tr>
<tr>
<th>{this.getHeader()}</th>
</tr>
</thead>
<tbody>
<tr> {this.getRow()} </tr>
</tbody>
</Table>
</div>
);
}
}
and here is my Datatable.Story.js
import React from 'react';
import { storiesOf } from '#storybook/react';
import { Example } from './DataTable';
const TableElements = [{
"Level": 1,
"Label": "Level 1",
"Qualification": "≥ 100 points",
"BBBEERecognitionLevel": "135%",
"LevelMet": false,
"Color": "whitesmoke"
}]
storiesOf('Table Examples', module)
.add('Priority Element', () => (
<Example data={TableElements} title={"Points Available/Earned"}/>)
);
and here is my index,js
import { register } from 'web-react-components';
register(Example,'bee-data-Table',['data'],{}, { useShadowDOM: false });
So the Table shows with hard coded data in my react project but when i try to switch out the data with dynamic data in my durandal/knockout project, it doesnt seem to show

Answer 1

After some investigation i found that when you register a component, it is case sensitive, so if you look in my index.jsfile i have this line of code:
register(Example,'bee-data-Table',['data'],{}, { useShadowDOM: false });
Which is incorrect, the correct way to register a component is like this:
register(Example,'bee-data-table',['data'],{}, { useShadowDOM: false });