JSFiddle - React, Tailwind, and code Playground

by jjppof

HTML

<script src="https://rawgit.com/jjppof/breedjs/master/min/breedjs.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Gender</th>
      <th>Age</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr b-scope="people" b-loop="person in people" b-paginate="5">
      <td>{{person.name}}</td>
      <td>{{person.gender}}</td>
      <td>{{person.age}}</td>
      <td>{{person.email}}</td>
    </tr>
  </tbody>
</table>
<ul></ul>

CSS

li{
  cursor: pointer;
}

JavaScript

var data={people:[{age:21,name:"Wells Ferrell",gender:"male",email:"[email protected]"},{age:22,name:"Burton Pena",gender:"male",email:"[email protected]"},{age:22,name:"Buchanan Nelson",gender:"male",email:"[email protected]"},{age:27,name:"Marshall Armstrong",gender:"male",email:"[email protected]"},{age:21,name:"Sofia Dixon",gender:"female",email:"[email protected]"},{age:38,name:"Kent Mason",gender:"male",email:"[email protected]"},{age:21,name:"Cummings Rodgers",gender:"male",email:"[email protected]"},{age:27,name:"Lorrie Haynes",gender:"female",email:"[email protected]"},{age:27,name:"Lisa Sampson",gender:"female",email:"[email protected]"},{age:38,name:"Anita Perkins",gender:"female",email:"[email protected]"},{age:38,name:"Barr Jacobs",gender:"male",email:"[email protected]"},{age:34,name:"Clayton Best",gender:"male",email:"[email protected]"},{age:36,name:"Craig Blake",gender:"male",email:"[email protected]"},{age:39,name:"Marisol Maldonado",gender:"female",email:"[email protected]"},{age:20,name:"Rene Odonnell",gender:"female",email:"[email protected]"},{age:25,name:"Melanie Oconnor",gender:"female",email:"[email protected]"},{age:25,name:"Odom Peterson",gender:"male",email:"[email protected]"},{age:32,name:"Wilder Johnston",gender:"male",email:"[email protected]"},{age:28,name:"Lavonne Head",gender:"female",email:"[email protected]"},{age:39,name:"Shelby Gardner",gender:"female",email:"[email protected]"}]};


$(function() {
  breed.run({
    scope: 'people',
    input: data,
    runEnd: function(){
    	for(i=1 ; i<=breed.getPageCount('people') ; i++){
      	$('ul').append(
        	$('<li>',{
          	html: i,
            onclick: "breed.paginate({scope: 'people', page: " + i + "});"
          })
        );
      }
    }
  });
});