eddyson-react-grid base example

by dhfsk

HTML

<script src="https://fb.me/react-with-addons-15.2.0.js"></script>
<script src="https://fb.me/react-dom-15.2.0.js"></script>
<script src="https://npmcdn.com/eddyson-react-grid/dist/Ardagryd.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div id="container">
</div>

Babel + JSX

const Grid = window.Ardagryd.Grid;

const objects = [
{name: "John", age: 15, email: "john@local.local"},
{name: "Bert", age: 27, email: "bert@local.local"},
{name: "Joosie", age: 65, email: "joosie@local.local"},
{name: "May", age: 45, email: "may@local.local"}];

const columns = {
	id: { show: false},
	name: { label: "Forename", 
  				order: 0,
  				displayValueGetter: ({value}) => value.toUpperCase()},
  email: { order: 1,
    			 cellRenderer: ({value, object}) => <a href={"mailto:"+value}>{object.name} - {value} </a>
  }
};

const config = {paging: 2}


ReactDOM.render(
  <Grid 
  	objects={objects} 
    columns={columns}
    config={config} />,
  document.getElementById('container')
);