React JS : Tables in the browser

A good exersize while learning React JS was building a re-usable component that produces HTML tables given an arbitrary JSON array of objects in the form:

[{'col1_name':'col1_value','col2_name':'col2_value'} ,
{'col1_name':'col1_value','col2_name':'col2_value'}]

So a practical example of the above would be:

[{'name':'dave','age':'12'},{'name':'foo','age':'19'}]

With the resulting table being:

Selection_072

Here’s the reusable code (feel free to improve/include in your projects):

A couple of lessons from the above:

  • Concatenating React JSX objects: JSX objects are usually used in the “render” function, in the case of the table it was necessary to concatenate JSX object in lines 31-36.  This is relatively easy by storing the object in an array with the javascript push array function. It’s noteworthy that only complete objects will be parsed correctly. In other words, this is not valid:
    someArray.push(<span>);
    
    someArray.push(innerText);
    
    someArray.push(</span>);

    But this is valid:

    someArray.push(
    
        <span>
    
        innerText
    
        </span>
    
    );

    Which is why we need to nest JSX objects as per lines 41-44.

  • “Exporting” react components when working in the browser: in the last line you see the code:
    window.__ReactTable__ = ReactTable

    Which allows you simply copy the javascript file in your project folder, and reference it normally using a <script> tag. To use the react component you simply need a single line as follows:

    var ReactTable = window.__ReactTable__

    which then allows you to use the component along these lines, using react props to pass the data to the table component: