Skip to content

Instantly share code, notes, and snippets.

@fabriciocolombo
Last active August 29, 2015 14:23
Show Gist options
  • Save fabriciocolombo/8899a729d6cbfdea0fd5 to your computer and use it in GitHub Desktop.
Save fabriciocolombo/8899a729d6cbfdea0fd5 to your computer and use it in GitHub Desktop.
React table
/*
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'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment