html - Dynamically arrange colums in a table -

what trying is, have table made of divs. total 8 colums . first 8 colums in div shows heading, , rest columns shows content

<div id="student-table"> <div id="student-table-header"> <div class="student-table-col-header">{label.header1}</div> <div class="student-table-col-header">{label.header2}</div> <div class="student-table-col-header">{label.header3}</div> <div class="student-table-col-header">{label.header4}</div> </div> <div id="student-table-body"> <div rv-each-studentlist="studentlist"> <div class="student-table-col-body">{studentlist.name}</div> <div class="student-table-col-body">{studentlist.age}</div> <div class="student-table-col-body">{studentlist.subject}</div> <div class="student-table-col-body">{studentlist.mark}</div> </div> </div> </div> 

so need provide configuration end, specific order. , want arrange column in order of configuration. should this. lead? should use templating?

no idea on configuration structure using. lets if can have simple json structure shown below things pretty easy

{  "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 }                   :                   :                   :                 ] } 

the table generate column order specified within tableheader array, if have name, age, subject, mark order table column , body details generated in order.

in html use rivet formatter formatting details show below

<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> 

foramtter function be

rivets.formatters.formatdetails = function (studentdetails, headerkey) {    return studentdetails[headerkey]; }; 

working jsfiddle - change tableheader json order , test