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:

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

var ReactTable = React.createClass({

  getInitialState: function() {

     return {currentData: this.props.data};

  },

  render: function() {

    var key = Date.now();

    var tableHeader = Object.keys(this.state.currentData[0]).map(function(columnName){

        key = key+1;

        return (

            <th key={key} data-field={columnName}>{columnName}</th>

        );

    });

    var tableRow = this.state.currentData.map(function(rowObject){

        var i;

        var returnValue = [];

        for (i in rowObject){

            key = key+1;

            returnValue.push(

                <td key={key}>

                    {rowObject[i]}

                </td>

            )

        };

        key = key+1;

        return (<tr key={key}>

            {returnValue}

            </tr>

        );

    });

    return (

        <table>

            <thead>

                  <tr>

                      {tableHeader}

                  </tr>

                </thead>

                <tbody>

                      {tableRow}

                </tbody>

        </table>

    );

  }

});

window.__ReactTable__ = ReactTable

view raw
ReactTable.js
hosted with ❤ by GitHub

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:

var someComponent = React.createClass({

  render: function() {

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

return (

        <div>

            <span>Demo Component</span>

            <ReactTable data={data}/>

        </div>

    );

  }

});

view raw
UsingReactTable.js
hosted with ❤ by GitHub

Share this:

Like this:

Related

One thought on “React JS : Tables in the browser”