Search code examples
htmlbackbone-viewsrivets.js

Dynamically arrange columns in a table

What I am trying to do is, I have a table made of divs. total 8 columns . first eight columns in a div shows the heading, and rest columns shows the 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 I need to provide a configuration from back end, that is a specific order. And I want to arrange the column in the order of configuration. So what should i do for this. Any lead? Should I use templating?

Solution

  • No idea on which configuration structure you are using. Lets say if you can have a simple json structure like as shown below then things will be 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 will generate with the column order specified within the tableHeader array, say if you have the Name, Age, Subject, Mark as the order then table column and the body details will be generated in that order.

    In the html use rivet formatter for formatting the details like as 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 will be

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

    Working JSFiddle - change the tableHeader json order and test