JSFiddle - React, Tailwind, and code Playground

by Christopher McCulloh

HTML

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fuelux/3.5.1/css/fuelux.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fuelux/3.5.1/js/fuelux.min.js"></script>
<div class="fuelux">
<div class="repeater" id="myRepeater">
    <div class="repeater-header">
      <div class="repeater-header-left">
        <span class="repeater-title">Awesome Repeater</span>
        <div class="repeater-search">
          <div class="search input-group">
            <input type="search" class="form-control" placeholder="Search"/>
            <span class="input-group-btn">
              <button class="btn btn-default" type="button">
                <span class="glyphicon glyphicon-search"></span>
                <span class="sr-only">Search</span>
              </button>
            </span>
          </div>
        </div>
      </div>
      <div class="repeater-header-right">
        <div class="btn-group selectlist repeater-filters" data-resize="auto">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            <span class="selected-label">&nbsp;</span>
            <span class="caret"></span>
            <span class="sr-only">Toggle Filters</span>
          </button>
          <ul class="dropdown-menu" role="menu">
            <li data-value="all" data-selected="true"><a href="#">all</a></li>
            <li data-value="some"><a href="#">some</a></li>
            <li data-value="others"><a href="#">others</a></li>
          </ul>
          <input class="hidden hidden-field" name="filterSelection" readonly="readonly" aria-hidden="true" type="text"/>
        </div>
        <div class="btn-group repeater-views" data-toggle="buttons">
          <label class="btn btn-default active">
            <input name="repeaterViews"...

JavaScript

var DS = function(options,callback) {
	var columns = [
		{
			label: 'Name',
			property: 'name',
			sortable: true
		},
		{
			label: 'Id',
			property: 'id',
			sortable: true
		},
		{
			label: 'Type',
			property: 'type',
			sortable: true
		},
		{
			label: 'Height (in)',
			property: 'height',
			sortable: true
		},
		{
			label: 'Weight (lbs)',
			property: 'weight',
			sortable: true
		},
		{
			label: 'Abilities',
			property: 'abilities',
			sortable: true
		},
		{
			label: 'Weakness',
			property: 'weakness',
			sortable: true
		}
	];
    var baseData = {
			"abilities": "Overgrow",
			"weight": "15.2",
			"weakness": "fire, flying, ice, psychic",
			"height": "28.0",
			"id": "001",
			"name": "Bulbasaur",
			"ThumbnailAltText": "Bulbasaur",
			"ThumbnailImage": "http://assets2.pokemon.com/assets/cms2/img/pokedex/detail/001.png",
			"type": "grass, poison"
		};
   var data = [];
    for (var i = 0; i < 400; i++) {
        data.push(baseData);
    }
    
   var datasource = {};
   datasource.items = data;
   datasource.columns = columns;
   datasource.page = options.pageIndex;
   datasource.count = datasource.items.length;
   datasource.start = 1;
   callback(datasource);
};

$(window).ready(function() {
    var rptOpt = {
        dataSource:DS,
        list_selectable : true,
        list_columnSizing : true
    }
    $("#myRepeater").repeater(rptOpt);
});