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):
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | |
); | |
} | |
}); |
One thought on “React JS : Tables in the browser”
Comments are closed.