JSFiddle - React, Tailwind, and code Playground

by gurkavcu

HTML

<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.2.0.js"></script>
<script src="https://raw.github.com/Knockout-Contrib/KoGrid/master/build/KoGrid.debug.js"></script>
<script type="text/html" id="editableCellTemplate">
    <div data-bind="if: selected, kgCell: $cell" class="$cellClass">
        <input type="text" data-bind="value: $cellValue"/>
    </div>
     <div data-bind="ifnot: selected, kgCell: $cell" class="$cellClass">
        <span data-bind="text: $cellValue"></span>
    </div>
</script>

<div data-bind="with: mySelectedItem">
    <p>Title: <span data-bind="text: title" /></p>
</div>
<div style="width: 100%; height: 400px"
     data-bind="koGrid: {
     data: products,
     useExternalFiltering : true,
     useExternalSorting : true,
     filterInfo : filterInfo,
     sortInfo : sortInfo,
     autogenerateColumns: false,
     columnDefs: [ { field: 'id', displayName: 'ID', width: 100 },
                   { field: 'title', displayName: 'Title', width: 250, cellTemplate: 'editableCellTemplate' }
                 ],

    displaySelectionCheckbox : false,
    isMultiSelect: false,
    enablePaging: true,
    pageSize: pageSize,
    pageSizes: [25, 50, 75],
    currentPage: currentPage,
    totalServerItems: totalServerItems,
    selectedItem: mySelectedItem
    }"></div>

CSS

/******** Grid Global ********/
.kgLabel {
    display: block;
    float: left;
    font-weight: bold;
    padding-right: 5px;
}
/******** Grid ********/
.kgGrid {
    background-color: rgb(253, 253, 253);
}

/******** Header ********/
.kgTopPanel {
    background-color: rgb(241, 241, 241);
    overflow: hidden;
}
.kgHeaderContainer {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgb(229, 229, 229);
    font-weight: bold;
}
.kgHeaderScroller {
    position: absolute;
}
.kgHeaderCell {
    position: absolute;
    background-color: rgb(241, 241, 241); 
    padding: 0;
    cursor: pointer;
    border-right: 1px solid rgb(241, 241, 241);
}
/******** Viewport ********/
.kgViewport{
    background-color: rgb(255, 255, 255);
    overflow: auto;
}

.kgCanvas{
    position: relative;
}

/******** Rows ********/
.kgRow {
    border-bottom: 1px solid rgb(229, 229, 229);
    cursor: pointer;
}
.kgRow.even {
    background-color: rgb(253, 253, 253);
}
.kgRow.odd {
    background-color: rgb(249, 249, 249);
}
.kgRow.kgSelected {
    background-color: rgb(255, 255, 204);
}
.kgRow.kgCanSelect {
    cursor: pointer;
}

/******** Cells ********/
.kgCell {
    overflow: hidden; 
    position: absolute;
    padding: 0;
    display: inline;
}
.kgRowIndexCell{ 
    text-align: center;
}
.kgSelectionCell {
    
}
.kgSelectionCell input[type="checkbox"] {
    margin-left: auto; 
    margin-right: auto;
    margin-top: 7px;
    height: 15px;
    width: 15px;
}

/******** Header Sorting ********/
.kgSortImg{
    height: 9px;
    width: 7px;
}

.kgNoSort {
    cursor:default;
}

/******** Header Filtering ********/
.kgFilterBtn {
    cursor: pointer;
    height: 16px;
    width: 16px;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    margin-top: 5px;
    margin-left: 5px;
}
.kgFilterBtn.openBtn {
    background-image:...

JavaScript

var viewModel =
{
    products : ko.observableArray([]),
    mySelectedItem: ko.observable(),
    currentPage : ko.observable(1),
    pageSize : ko.observable(100),
    totalServerItems : ko.observable(0),
    sortInfo : ko.observable(),
    filterInfo : ko.observable()
};

ko.applyBindings(viewModel);

var initialData = [{id: '1', title: ko.observable('Title 1') },
                   {id: '2', title: ko.observable('Title 2') }
                  ];

$(document).ready(function()
{
    viewModel.products(initialData);                      
});