custom control for a generic View via Bootstrap table

ccUtilsGenericView.xsp

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex">
	<xp:panel id="pnlContainer"
		style="#{javascript:compositeData.panelStyle}">
		<div class="row">
			<div class="col-md-6">
				<xp:panel
					tagName="#{javascript:compositeData.headerSize}" id="pnlSubHead">
					<xp:text escape="true"
						value="#{javascript:compositeData.header}" />
				</xp:panel>
			</div>
			<div class="col-md-6">
				<xp:pager layout="Previous Group Next"
					partialRefresh="true" id="pgrTop" for="rptObjects"
					styleClass="pull-right"
					rendered="${javascript:compositeData.pagerTop}" />
			</div>
		</div><!-- /.row -->
    
		<xp:panel id="pnlTableContainer">

			<table class="table">
				<thead>
					<tr>
						<th>
							<xp:span
								rendered="#{javascript:compositeData.iconDisplay}">
								&#160;&#160;&#160;&#160;&#160;&#160;
							</xp:span>
							<xp:text escape="true"
								value="#{javascript:compositeData.linkHeader}" />
						</th>

						<xp:repeat id="repeatTableHead" rows="30"
							var="objTableHead" indexVar="idx"
							value="#{javascript:compositeData.cols}">
							<th>
								<xp:text escape="true"
									id="computedField4">
									<xp:this.value><![CDATA[#{javascript:objTableHead["colName"]}]]></xp:this.value>
								</xp:text>
							</th>
						</xp:repeat>
					</tr>
				</thead>
				<tbody>
					<xp:panel disableOutputTag="true">
						<xp:this.rendered><![CDATA[#{javascript:if (compositeData.collection == null){
	return true;
}
else if (compositeData.collection.size()> 0){
	return false;
}
else{
	return true;
}}]]></xp:this.rendered>
						<tr>
							<td colspan="3">
								<xp:text escape="true"
									value="no message found" />
							</td>
						</tr>
					</xp:panel>

					<xp:repeat id="rptObjects" var="obj" indexVar="idx"
						value="#{javascript:compositeData.collection}"
						rows="#{javascript:compositeData.rows}">
						<tr>
							<xp:panel tagName="td"
								styleClass="${javascript:compositeData.LinkColumnWidth}">
								<xp:span
									rendered="#{javascript:compositeData.iconDisplay}">
									<xp:text escape="false">
										<xp:this.value><![CDATA[#{javascript:return "<i class='" + compositeData.icon + "' aria-hidden='true'></i>";}]]></xp:this.value>
									</xp:text>
									&#160;&#160;
								</xp:span>
								<xp:link escape="true">
									<xp:this.text><![CDATA[#{javascript:var lbl = compositeData.linkName;
obj[lbl]}]]></xp:this.text>
									<xp:this.value><![CDATA[#{javascript:var key = compositeData.linkKey;
return compositeData.pageLink + "?" +compositeData.linkParam + "=" + obj[key]}]]></xp:this.value>
								</xp:link>
							</xp:panel>

							<xp:repeat id="repeatCols" rows="30"
								var="objTableHead" indexVar="idx"
								value="#{javascript:compositeData.cols}">
								<xp:panel tagName="td">
									<xp:this.styleClass><![CDATA[#{javascript:var width = objTableHead["colWidth"];
return width;}]]></xp:this.styleClass>
									<xp:text escape="true"
										id="typeText">
										<xp:this.value><![CDATA[#{javascript:var field = objTableHead["colValue"];
obj[field]}]]></xp:this.value>
										<xp:this.rendered><![CDATA[#{javascript:var type = objTableHead["colType"];
if (type != "text"){
	return false;
}
else{
	return true;
}}]]></xp:this.rendered>
									</xp:text>
									<xp:text escape="true"
										id="typeDate">
										<xp:this.value><![CDATA[#{javascript:var field = objTableHead["colValue"];
obj[field]}]]></xp:this.value>
										<xp:this.converter>
											<xp:convertDateTime
												pattern="yyyy-MM-dd hh:mm">
											</xp:convertDateTime>
										</xp:this.converter>
										<xp:this.rendered><![CDATA[#{javascript:var type = objTableHead["colType"];
if (type != "date"){
	return false;
}
else{
	return true;
}}]]></xp:this.rendered>
									</xp:text>
								</xp:panel>
							</xp:repeat>
						</tr>
					</xp:repeat>
				</tbody>
			</table>

			<div class="row">
				<div class="col-md-8">
					<xe:pagerSizes id="pgrSizes" for="rptObjects"
						partialRefresh="false"
						rendered="${javascript:compositeData.pagerSizer}" />
				</div>
				<div class="col-md-4">
					<xp:pager layout="Previous Group Next"
						partialRefresh="true" id="pgrBottom" for="rptObjects"
						styleClass="pull-right"
						rendered="${javascript:compositeData.pagerBottom}" />
				</div>
			</div>
		</xp:panel>
	</xp:panel>
</xp:view>