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 sort='name'>Name</th>
      <th sort='address'>Address</th>
      <th sort='salesperson'>Sales Person</th>
    </tr>
  </thead>
  <tbody>
    <tr b-scope="people" b-loop="person in people">
      <td b-sort="name">{{person.name}}</td>
      <td b-sort="address">{{person.address}}</td>
      <td b-sort="salesperson">{{person.salesperson}}</td>
    </tr>
  </tbody>
</table>

JavaScript

$(function(){
  var data = {
    people: [
      {name: 'a', address: 'c', salesperson: 'b'},
      {name: 'b', address: 'b', salesperson: 'a'},
      {name: 'c', address: 'a', salesperson: 'c'},
    ]
  };
  breed.run({
    scope: 'people',
    input: data
  });
  $("th").click(function(){
    breed.sort({
      scope: 'people',
      selector: $(this).attr('sort')
    });
  });
});