I have used a Bootstrap datatable to show records in a tabular format as shown below
And here is the simple code for the above page
<style>
input[type="text"] {
display: block !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
width: 100% !important;
border-radius: 0 !important;
line-height: 1 !important;
}
td {margin: 0 !important;
padding: 0 !important;
}
</style>
<apex:form >
<apex:pageBlock >
<apex:commandButton value="Save Sheet" action="{!saveSheet}" reRender="theTable"/>
<table id="theTable" class="table table-striped table-bordered" width="100%">
<thead>
<tr>
<apex:repeat value="{!lstCustSetFields}" var="field">
<th>{!field.Label__c}</th>
</apex:repeat>
</tr>
</thead>
<tbody>
<apex:repeat value="{!lstRecords}" var="record">
<tr>
<apex:repeat value="{!lstCustSetFields}" var="field">
<td>
<apex:inputField value="{!record[field.API_Name__c]}"/>
</td>
</apex:repeat>
</tr>
</apex:repeat>
</tbody>
</table>
</apex:pageBlock>
</apex:form>
<apex:includeScript value="//code.jquery.com/jquery-1.11.1.min.js"/>
<apex:includeScript value="//cdn.datatables.net/1.10.6/js/jquery.dataTables.min.js"/>
<apex:includeScript value="//cdn.datatables.net/plug-ins/1.10.6/integration/bootstrap/3/dataTables.bootstrap.js"/>
<script>
$(document).ready(function() {
$('#theTable').dataTable();
} );
</script>
Now the problem is that the built in functionality for sorting the table columns is not working for this table. I have deduced that it is so because the the data is inside an or tag and not specified directly inside the tags.
Please suggest some client side scripting solution to apply sorting for this table