JSFiddle - React, Tailwind, and code Playground

by madcapnmckay

HTML

<script src="https://github.com/SteveSanderson/knockout/raw/master/build/output/knockout-latest.debug.js"></script>
<div data-bind="foreach: grouped" >
    <div data-bind="foreach: $data" class="row">
        <div class="column" data-bind="text: text"></div>
    </div>
</div>

CSS

.column { float: left; padding: 5px 10px; }
.row { overflow: hidden; }

JavaScript

var viewModel = function() {
    this.items = [
        { text: "item 1" },
        { text: "item 2" },
        { text: "item 3" },
        { text: "item 4" },
        { text: "item 5" },
        { text: "item 6" },
        { text: "item 7" },
        { text: "item 8" },
        { text: "item 9" },
        { text: "item 10" },
        { text: "item 11" },
        { text: "item 12" }
    ];
    
    this.grouped = ko.computed(function () {
        var rows = [], current = [];
        rows.push(current);
        for (var i = 0; i < this.items.length; i += 1) {
            current.push(this.items[i]);
            if (((i + 1) % 4) === 0) {
                current = [];
                rows.push(current);
            }
        } 
        return rows;
    }, this);
};

ko.applyBindings(new viewModel());