knockout table component

by mcannon

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.4.0.js"></script>

<ko-table>	
					<thead>
				   	<tr>
					   	<ko-th type="th_checkbox" />
							<ko-th type="th_text" field="personnelKey">Key</ko-th>
							<ko-th type="th_text" field="firstName">First Name</ko-th>
							<ko-th type="th_text" field="middleInit" >Middle</ko-th>
							<ko-th type="th_text" field="lastName">Last Name</ko-th>
							<ko-th type="th_text" field="shieldNo">Shield #</ko-th>
							<ko-th type="th_text" field="rankPosition">Rank/Title</ko-th>
							<ko-th type="th_text" field="umosFlag">UMOS</ko-th>
							<ko-th type="th_text" field="active">Active</ko-th>
							<ko-th type="th_blank"/>
						</tr>
					</thead>
</ko-table>

<template id='th_text'>
    <th data-bind="style: {width: $data.width}, attr: { class: getCssClass($data.field) }, click: sortBy.bind($data, $data.field),template: { nodes: $componentTemplateNodes }"></th>
</template>
<template id='th_blank'>
    <th data-bind="style: {width: $data.width}, template: { nodes: $componentTemplateNodes }"></th>
</template>
<template id='th_checkbox'>
    <th data-bind="style: {width: $data.width}, template: { nodes: $componentTemplateNodes }">finish this
    <!--<span class="click-block" data-bind="click: togglePagedListSelected">
			<input type="checkbox" data-bind="prop: { indeterminate: isMixedSelected }, checked: isAllPagedSelected, visible : $root.selectedRow() == null && $root.list().length>0" />
			</span>-->
    </th>
</template>

CSS

message-editor {
  font-size: 19px;
}

JavaScript

ko.components.register('ko-table', {
    viewModel: function(params) {
        this.dataBind = params.dataBind;
        
    },
    template: '<div class="table-responsive"><table data-bind="template: { nodes: $componentTemplateNodes }" class="table table-striped table-condensed "></table></div>'
});

//${cssClass}" id="${id}" role="${role}

ko.components.register('ko-th', {
    viewModel : function(params) {
        var self = this;
        var field = params.field;
        var type = params.type;
        var width = params.width;
    },
    template : '<div data-bind="template:{name: $data.type}"></div>'
});

ko.applyBindings();