React Dynamic Table not showing in Knowckout project

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 });