CODEWITHSUNDEEP
ember.js
The Old County
The Old County

Reputation: 109

Ember - multi-sort table

Is there a multi-sort table in Ember? Something like what you can do in excell?

I've only seen a simple sort and filter. http://crodriguez1a.github.io/ember-sort-filter-table/

Upvotes: 0

Views: 347

Answers (2)

Vignesh Raja
Vignesh Raja

Reputation: 8761

It can be achieved simply by sortDefinition and Ember.computed.sort

Ember Twiddle

JS:

import Ember from 'ember';

export default Ember.Controller.extend({
    data:function(){
        return [{
                     "marks":90,
                     "totalmarks":100,
                     "percentage":90,
                             "status":"pass"
                  },
                  {
                     "marks":80,
                     "totalmarks":100,
                     "percentage":80,
                     "status":"pass"
                  },
                  {
                     "marks":50,
                     "totalmarks":50,
                     "percentage":100,
                     "status":"pass"
                  },
                  {
                     "marks":30,
                     "totalmarks":40,
                     "percentage":75,
                     "status":"fail"
                  }];
    }.property(),
    sortDefinition : [],
    sortedData: Ember.computed.sort('data', 'sortDefinition'),
    columns:function(){
        return ["marks","totalmarks","percentage","status"];
    }.property(),

    actions:
    {
        sortByColumn:function(columnname)
        {
            var sortdef = this.get("sortDefinition");
            if(sortdef.length)
            {
                sortdef = sortdef[0].split(":");
                sortdef[1] = sortdef[0]==columnname ? sortdef[1]=="asc"?"desc":"asc":"asc";
                sortdef[0] = columnname;
            }
            else
            {
                sortdef.push([columnname,"asc"].join(":"));
            }
            this.set("sortDefinition",[sortdef.join(":")]);
        }
    }
});

HBS:

<table>
    <tr>
        {{#each columns as |column|}}
            <th {{action "sortByColumn" column}}>{{column}}</th>
        {{/each}}
    </tr>
    {{#each sortedData as |value|}}
        <tr><td>{{value.marks}}</td>
        <td>{{value.totalmarks}}</td>
        <td>{{value.percentage}}</td>
        <td>{{value.status}}</td></tr>
    {{/each}}
</table>

CSS:

table, tr, th, td{
    border:1px solid #000;
}
th{
    cursor:pointer;
}

Upvotes: 1

LocalPCGuy
LocalPCGuy

Reputation: 6116

I think Ember Table is what you are looking for.

Ember Table is a power table made for users who need a full-fledged, fully-customizable table component for their apps. It is built to be flexible, scalable, and ergonomic for day-to-day use.

Upvotes: 1

Related Questions