Fuel UX 3 Repeater Demo

This is an example of a Fuel UX 3 Repeater using a static data source.

by The Jared Wilcurt

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//www.fuelcdn.com/fuelux/3.4.0/css/fuelux.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="//www.fuelcdn.com/fuelux/3.4.0/js/fuelux.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="//www.fuelcdn.com/fuelux-utilities/1.0.0/js/fuelux-utilities.min.js"></script>
<div id="myRepeater" class="repeater" data-staticheight="true">

    <div class="repeater-header">
        <div class="repeater-header-left">
            <div class="repeater-search">
                <div class="search disabled 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 disabled repeater-filters">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    <span class="selected-label"></span>
                    <span class="caret"></span>
                    <span class="sr-only">Toggle Filters</span>
                </button>
                <ul class="dropdown-menu pull-right" role="menu">
                    <li data-value="all" data-selected="true" data-property="all"><a href="#">All Items</a></li>
                    <li class="divider"></li>
                    <li data-value="draft"...

CSS

#myRepeater {
    position: absolute;
    top: 25px;
    right: 25px;
    bottom: 25px;
    left:25px;
}

JavaScript

// Clear the console on every subsequent run.
// There are many points below where you can
// uncomment a console.log to gain better
// understanding of how this code works.
console.clear();



// Define the data to be displayed in the repeater.
function staticDataSource(options, callback) {

    // Define the columns for the grid
    var columns = [{
        'label': 'Name', // Column header label.
        'property': 'name', // The JSON property you are binding to.
        'sortable': true // Is the column sortable.
    }, {
        'label': 'Description',
        'property': 'description',
        'sortable': true
    }, {
        'label': 'Status',
        'property': 'status',
        'sortable': true
    }, {
        'label': 'Category',
        'property': 'category',
        'sortable': true
    }];

    // Generate the rows in your dataset.
    // NOTE: The property names of your items should
    // match the column properties defined above.
    function generateDummyData() {
        var items = [];
        var amountOfItems = 100; //Change this number
        var statuses = ['Archived', 'Active', 'Draft'];
        var categories = ['New', 'Old', 'Upcoming'];

        function getRandomStatus() {
            var index = Math.floor(Math.random() * statuses.length);
            return statuses[index];
        }

        function getRandomCategory() {
            var index = Math.floor(Math.random() * categories.length);
            return categories[index];
        }

        for (var i = 1; i <= amountOfItems; i++) {
            var item = {
                id: i,
                name: 'Item ' + i,
                description: 'Desc ' + i,
                status: getRandomStatus(),
                category: getRandomCategory()
            }
            items.push(item);
        };

        // Uncomment these to see in your console the
        // JSON payload produced by this function.
        //console.log(JSON.stringify(items));
       ...