Rivets JS

Rivets JS

by arjuncc

HTML

<script src="https://rawgit.com/mikeric/rivets/v0.7.0-rc2/dist/rivets.bundled.min.js"></script>
<script src="https://rawgit.com/mikeric/rivets/v0.7.0-rc2/dist/rivets.min.js"></script>
<div id="student-table">
    <div id="student-table-header">
        <div class="student-table-col-header" rv-each-headers="studentDetails.tableHeader">
            <p>{ headers.headerValue }</p>
        </div>
    </div>
    <div class="student-table-body" rv-each-students="studentDetails.tableBody">
        <div class="student-table-col-body" rv-each-header="studentDetails.tableHeader">
             <span>{ students | formatDetails header.headerKey }</span>
        </div>
    </div>
</div>

CSS

#student-table {
     display: table;
 }
 #student-table-header {
     display: table-row;
     font-weight: bold;
     text-align: center;
 }
 .student-table-body {
     display: table-row;
 }
 .student-table-col-header {
     display: table-cell;
     border: solid;
     border-width: thin;
     padding-left: 5px;
     padding-right: 5px;
 }
 .student-table-col-body {
     display: table-cell;
     border: solid;
     border-width: thin;
     padding-left: 5px;
     padding-right: 5px;
 }

JavaScript

rivets.formatters.formatDetails = function (studentDetails, headerKey) {
	    return studentDetails[headerKey];
	};

	var studentDetails = {
	    tableHeader: [{
	        headerValue: 'Name',
	        headerKey: 'name'
	    }, {
	        headerValue: 'Age',
	        headerKey: 'age'
	    }, {
	        headerValue: 'Subject',
	        headerKey: 'subject'
	    }, {
	        headerValue: 'Mark',
	        headerKey: 'mark'
	    }],
	    tableBody: [{
	        "name": "manu",
	        "age": 22,
	        "subject": "maths",
	        "mark": 125
	    }, {
	        "name": "john",
	        "age": 25,
	        "subject": "maths",
	        "mark": 111
	    }, {
	        "name": "arun",
	        "age": 28,
	        "subject": "maths",
	        "mark": 222
	    }, {
	        "name": "diya",
	        "age": 26,
	        "subject": "maths",
	        "mark": 158
	    }, {
	        "name": "niya",
	        "age": 36,
	        "subject": "maths",
	        "mark": 159
	    }, {
	        "name": "ninu",
	        "age": 30,
	        "subject": "maths",
	        "mark": 132
	    }, {
	        "name": "nono",
	        "age": 31,
	        "subject": "maths",
	        "mark": 147
	    }, {
	        "name": "nanu",
	        "age": 25,
	        "subject": "maths",
	        "mark": 152
	    }, {
	        "name": "noni",
	        "age": 38,
	        "subject": "maths",
	        "mark": 162
	    }, {
	        "name": "popy",
	        "age": 22,
	        "subject": "maths",
	        "mark": 138
	    }, {
	        "name": "meri",
	        "age": 24,
	        "subject": "maths",
	        "mark": 241
	    }, {
	        "name": "doll",
	        "age": 38,
	        "subject": "maths",
	        "mark": 175
	    }]
	};

	var studentTable = document.getElementById('student-table');
	rivets.bind(studentTable, {
	    studentDetails: studentDetails
	});