Loading...

Jammie Mountz

Software Engineer

Building a component to show a populated table in React

For my most recent project, we’re working with a front-end stack of React, Flux, and Semantic UI. Since I had never worked with React before, some of the simpler parts of building a component were tricky for me. This is a quick post on how to build a table that populates rows with data from a JSON object (or the database).

React keeps the front-end parts pretty modular, which means our components start with a few require statements.

[code lang=”js”]
var React = require(‘react’);
var outletStore = require(‘../stores/outletStore’);
var ConnectusDispatcher = require(‘../dispatcher/ConnectusDispatcher’);
var Link = require(‘react-router’).Link;
[/code]

React brings in React itself, followed by the ‘store,’ which contains the data either from an object or pulled from the database. The dispatcher is what threads the components together between React and Flux. Let’s start writing our component:

[code lang=”js”]
var outletsList = React.createClass({
getInitialState: function(){
return {
list: outletStore.getOutlets()
}
}
)}
[/code]

Here we set up our component as “outletsList,” and then begin to flesh out the functionality of that component as an argument to the createClass method. All I have in there now is the function that grabs the data from my store. The method “getOutlets” is a function that just returns the data saved in the store.

The second function we will write inside “outletsList” is our render function. This is what’s called when we have the router render this component on the page.

[code lang=”js”]
render: function() {
var that = this;
var outlets = outletStore.getOutlets();

var outletHtml = outlets.map(function(outlet) {
return <Link to="reserveOutlet" params={{id: outlet.id}}>
<tr key={outlet.id} onClick={that.reserveOutlet}>
<td>
<h2 className="ui center aligned header"> { outlet.name } </h2>
</td>
<td className="single line">
{ outlet.seller }
</td>
<td>
<div className="ui star rating" data-rating={ outlet.rating } data-max-rating={ outlet.rating }>{ outlet.rating }</div>
</td>
<td className="right aligned">
Voltage: { outlet.voltage }
</td>
<td>
Price by hour: { outlet.priceHr }
Price by kWh: { outlet.pricekWh }
</td>
<td>
{ outlet.description }
</td>
</tr>
</Link>
});

return <table className="ui selectable celled padded table">
<thead>
<tr><th className="single line">Outlet Name</th>
<th>Seller</th>
<th>Rating</th>
<th>Voltage</th>
<th>Price</th>
<th>Description</th>
</tr></thead>
<tbody>
{ outletHtml }
</tbody>
</table>
}
[/code]

The render function has two parts. I save the creation of the table rows and table data into a variable calling the map function on my data. This will move through each of my items and then I can use their properties to populate the table row.

In the second part, I tell it to return my table head and then I use the variable where the table rows are held as the input for my table body. This will dynamically populate the table with all the information in the store.

Another thing to notice is the placement of some front-end routing logic on the creation of the table rows. Using the react router Link (also required in the initialization of the document) I can pass data along through the url to be used in subsequent renders. Here, I’ve chosen to pass the ID of the outlet who’s row was clicked to the component that will create it’s page. This allows me to customize that page based on the outlet data that the ID corresponds to.

Fluent in Spanish and JavaScript, salsa dancer, lover of material design.

Living in San Francisco, CA