JSFiddle - React, Tailwind, and code Playground

by ipeshev

HTML

<script type="text/html" id="_table.tmpl">
    <div class="btn-group col-sm-3 pull-left" >
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        Visible columns<span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" data-bind="foreach:$data.columns">
            <li data-bind="event:{click:$parent.toggleVisible},clickBubble:false">
                <a href="javascript:void(0)">
                    <span data-bind="text:$data.title"></span>
                    <span class="glyphicon pull-right" data-bind="css:{'glyphicon-ok':$data.visible}"></span>
                </a>
            </li>
        </ul>
    </div>
    <label  class="control-label col-sm-1">Per page</label>
    <div class="controls col-sm-2">
        <select class="form-control" data-bind="options: $data.perPageOptions,value: $data.perPage"></select>
    </div>

    <div class="controls col-sm-4 pull-right">
        <div class="input-group" >
            <div class="input-group-btn">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    <span data-bind="text:$data.selectedFilterName"></span>
                    <span class="caret"></span></button>
                <ul class="dropdown-menu" data-bind="foreach:$data.filters">
                    <li data-bind="event:{click:$parent.toggleFilter},clickBubble:false">
                        <a href="javascript:void(0)">
                            <span data-bind="text:$data.title"></span>
                            <span class="glyphicon pull-right" data-bind="css:{'glyphicon-ok':$data.picked}"></span>
                        </a>
                    </li>
                </ul>
            </div>
            <input type="text" class="form-control" data-bind="value:$data.search" />
            <span class="input-group-btn">
                <button class="btn btn-default" data-bind="click:$data.goSearch"...

JavaScript

function TableController_old(campaignGuid,daterange){
    var self = this;
    self.campaignGuid = campaignGuid;
    self.daterange = daterange || {};
    self.perPage = ko.observable(10);
    self.startRow = ko.observable(0);
    var columns = [
        {
            field:'vendorName',
            title:'Vendor'
        },
        {
            field:'buyName',
            title:'Buy'
        },
        {
            field:'creativeName',
            title:'Creative'
        }
    ];
    columns = columns.concat(initData.get('fields')||[]);
    self.filters = ko.observableArray();
    self.pickedFilters = ko.observableArray();

    $.each(columns,function(idx,item){
        if(idx<7)
            item.visible = ko.observable(true);
        else
            item.visible = ko.observable(item.visible||false);
        var filterItem = jQuery.extend({}, item);
        filterItem.picked = ko.observable(false);
        self.filters.push(filterItem);
    });

    self.toggleVisible = function(item){

        item.visible(!item.visible());
    };
    self.toggleFilter = function(item){
        var state = item.picked();
        if(state==false){
            self.pickedFilters.push(item);
        }
        else{
            self.pickedFilters.remove(item);
        }
        item.picked(!state);
    };
    self.selectedFilterName = ko.computed(function(){
        return (self.pickedFilters().length || 'Nothing') + ' selected';
    });
    self.columns = ko.observableArray(columns);
    self.perPageOptions = ko.observableArray([10,15,20]);
    self.tableData = ko.observableArray();
    self.result = ko.observableArray();
    self.sortColumn = ko.observable({});

    self.sortOrderClass = ko.computed(function(){
        return self.sortColumn().desc ? 'glyphicon glyphicon-chevron-down' : 'glyphicon glyphicon-chevron-up';

    });

    self.changeSortColumn = function(item){

        item.desc = !!!item.desc;

        self.sortColumn(item);
        self.loadData();
    };

  ...