React table

gistfile1.js

/*
https://jsfiddle.net/kuvmy7sa/1/
*/
var Table = React.createClass({
    render: function() {
        return <div className="table-responsive">
            <table className="table table-striped">
              {this.props.children}
            </table>
            </div>
    }
});
 
var TableHeader = React.createClass({
    render: function() {
        return <thead>
                 <TableRow>   
                  {this.props.children}
                 </TableRow>     
               </thead>
    }
});

var TableBody = React.createClass({
    render: function() {
        return <tbody>
                {this.props.children}
               </tbody>
    }
});

var TableRow = React.createClass({
    render: function() {
        return <tr>
                {this.props.children}
               </tr>
    }
});

var TableColumn = React.createClass({
    render: function() {
        if (this.props.header) {
          return (<th>{this.props.value}
                  </th>);
        }
        
        var style = {};
        if (this.props.align) {
         style = {textAlign: this.props.align};
        }
        
        return (<td {...this.props} style={style}>{this.props.value}
                {this.props.children} 
                </td>);
    }
});

var Button = React.createClass({
    render: function() {
        return (<button type="button">{this.props.children}</button>);
    }
});

var SelectButton = React.createClass({
    render: function() {
        return (<Button>Select</Button>);
    }
});

var TableSelectButton = React.createClass({
    render: function() {
        return (<TableColumn>
                 <SelectButton/>
                </TableColumn>);
    }
});

var Main = React.createClass({

    header: function() {
        return (<TableHeader>
                    <TableColumn value="Ordem" header/> 
                    <TableColumn value="Item" header/> 
                    <TableColumn value="Descrição" header/> 
                    <TableColumn value="Qtde Solicitada" header/>                                                                 
                    <TableColumn value="Ação" header/> 
                </TableHeader>);
    },
    
    body: function() {
        var items = [
            {ordem: 1, item: 123, descricao: 'Açucar', qtde: 12.45},
            {ordem: 2, item: 478, descricao: 'Café', qtde: 249.45}];
        return (<TableBody>
                  {items.map(function(item) {  
                    return (
                      <TableRow>
                        <TableColumn value={item.ordem} align='right'/>   
                        <TableColumn value={item.item}/>   
                        <TableColumn value={item.descricao}/> 
                        <TableColumn value={item.qtde} align='right'/> 
                        <TableColumn> 
                          <SelectButton/>
                          <Button>Excluir</Button>                          
                        </TableColumn>
                      </TableRow>);                      
                  }, this)}                  
                </TableBody>);
    },
    
    render: function() {        
        return (<Table>
                  {this.header()} 
                  {this.body()}       
                </Table>);
    }
});
 
React.render(<Main/>, document.getElementById('container'));