How to add alphabetical column sorting to a table using AngularJS

Question

Essentially I need to add a little button or something within the headers of the table to be able to sort the data alphabetically by column. I've been having trouble with doing this making use of AngularJS and need some help with it.

This is a snippet showing the table and...

<div class="col-md-10">
    <table class="table table-hover table-bordered">
        <thead>
        <tr>
            <th>Status</th>
            <th>Ref</th>
            <th>Service</th>
            <th>Domain</th>
            <th>Service Owner</th>
            <th>Stage</th>
        </tr>
        </thead>

        <tbody>
        <tr ng-click="isCollapsed = !isCollapsed" ng-repeat-start="x in projects | filter:query | filter:myFilter | orderBy:orderProp">
            <td><b>{{x.a}}</b></td>
            <td>{{x.b}}</td>
            <td><u>{{x.c}}</u></td>
            <td>{{x.d}}</td>
            <td>{{x.e}}</td>
            <td>{{x.f}}</td>
        </tr>
        <tr collapse="isCollapsed" ng-repeat-end="">
        <td colspan="6">
          <h3>Test</h3>
          <p>Test</p>
        </td>
      </tr>
        </tbody>
    </table>
    </div>
</div>

This is a plnkr of the code http://plnkr.co/edit/OkRbR9geeOcCGy2K01jB?p=preview

bm1729 · Accepted Answer · 2015-06-22 15:25:28Z

3

Give this a try for a very simple solution:

HTML:

<table>
    <thead>
    <tr>
        <th>Status<a ng-click="orderProperty = 'a'">^</a></th>
        <th>Ref<a ng-click="orderProperty = 'b'">^</a></th>
        <th>Service<a ng-click="orderProperty = 'c'">^</a></th>
        <th>Domain<a ng-click="orderProperty = 'd'">^</a></th>
        <th>Service Owner<a ng-click="orderProperty = 'e'">^</a></th>
        <th>Stage<a ng-click="orderProperty = 'f'">^</a></th>
    </tr>
    </thead>
    <tbody>
        <tr ng-repeat="x in projects | orderBy:orderProperty">
            <td><b>{{x.a}}</b></td>
            <td>{{x.b}}</td>
            <td>{{x.c}}</td>
            <td>{{x.d}}</td>
            <td>{{x.e}}</td>
            <td>{{x.f}}</td>
        </tr>
    </tbody>
</table>

JavaScript:

app.controller('controller', function($scope) {
    $scope.orderProperty = "f"; // Sort by "f" by default
    $scope.projects = [...];
});

Working jsFiddle here: http://jsfiddle.net/ben1729/3nxykbhk/

answered Jun 22, 2015 at 15:25

bm1729

2,3753 gold badges23 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

TheLimeTrees Over a year ago

I tried something very close to that but I see why it didn't work. I used ng-click but I didn't attach it to a clickable property, just the <th>. Thanks for the help.

TheLimeTrees Over a year ago

If I would like to alternate between reversing the sorting on click how would I go about doing that? I've tried various things to no avail.

bm1729 Over a year ago

The documentation for orderBy seems to have exactly what you're looking for: docs.angularjs.org/api/ng/filter/orderBy

Collectives™ on Stack Overflow

How to add alphabetical column sorting to a table using AngularJS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related