JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//cdn.wijmo.com/themes/aristo/jquery-wijmo.css">
<link rel="stylesheet" href="//cdn.wijmo.com/jquery.wijmo-complete.all.2.1.0.min.css">
<script src="//cdn.wijmo.com/jquery.wijmo-open.all.2.1.0.min.js"></script>
<script src="//cdn.wijmo.com/jquery.wijmo-complete.all.2.1.0.min.js"></script>
<h1>Wijmo Grid Demo</h1>
Freeze column:
<select data-bind="options:columns, value:gridConfig.staticColumnIndex"></select>
<table data-bind="wijgrid:gridConfig"></table>
JavaScript
ko.bindingHandlers.wijgrid = {
init: function (element, valueAccessor, allBindingsAccessor, data, context) {
var options = valueAccessor() || {};
var grid = $(element).wijgrid({
cellClicked: function (e, args) {
alert(args.cell.value());
},
allowPaging: true,
pageSize: options.pageSize(),
data: options.data(),
columns: options.headers,
scrollMode: "auto"
});
options.staticColumnIndex.subscribe(function (newValue) {
grid.wijgrid({
staticColumnIndex: newValue
});
});
}
};
var viewModel = function () {
var self = {};
self.columns = [-1, 0, 1, 2];
self.gridConfig = {
data: ko.observableArray([
[27, 'Canada', 'Adams, Craig', 'RW'],
[43, 'Canada', 'Boucher, Philippe', 'D', 'R'],
[24, 'Canada', 'Cooke, Matt', 'LW', 'L'],
[87, 'Canada', 'Crosby, Sidney (C)', 'C', 'L'],
[1, 'United States', 'Curry, John', 'G', 'L']
]),
headers: [{
headerText: "Number"
}, {
headerText: "Nationality"
}, {
headerText: "Player"
}, {
headerText: "Position"
}],
recordCount: ko.observable(0),
lowTotNoOfRec: ko.observable(0),
pageSize: ko.observable(3),
pageIndex: ko.observable(0),
paged: function (e, data) {
self.gridConfig.pageIndex(data.newPageIndex);
},
staticColumnIndex: ko.observable(-1)
};
return self;
};
ko.applyBindings(viewModel());