AngularJS Sort table columns

Question

I have a table filter whichs show the content according to the user parameters, this is working perfectly but now I want to let the user filter according to each column.

This is the issue:

When you type "User" on the text input (Filter by columns" I want to only display the "User Column", if you type "Start Date" then only displays "Start Date column" I'm wondering if this is possible using filter option or how can I approach to this requirement.

Here's my code:

<div class="col-xs-10 grid-container">
    <div class="row form-entry">
        <div class="col-xs-3 input-container">
            <input type="text" placeholder="Search in Grid" ng-model="searchFills"/>
        </div>
        <div class="col-xs-3 input-container">
            <input type="text" placeholder="Filter by columns" />
        </div>
    </div>
    <div class="col-xs-10 grid-container">
        <div class="generic-grid">
            <table class="table-bordered grid-table table-hover">
                <thead>
                <tr>
                    <th>id</th>
                    <th>User</th>
                    <th>Alt User</th>
                    <th>Creation Date</th>
                    <th>Start Date</th>
                    <th>Recieved Date</th>
                    <th>1</th>
                    <th>2</th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="fill in fills_list | filter:searchFills">

                    <td>
                        {{fill.id}}
                    </td>
                    <td>
                        {{fill.user}}
                    </td>
                    <td>
                        {{fill.useralt}}
                    </td>
                    <td>
                        {{fill.creationdate}}
                    </td>
                    <td>
                        {{fill.startdate}}
                    </td>
                    <td>
                        {{fill.recieveddate}}
                    </td>
                    <td>
                    </td>
                    <td>

                    </td>
                </tr>
                </tbody>
            </table>
           </div>
         </div>

You might be better off using the ui-grid element as that has all the functionality you would need to hide/show columns easily — Scott
– Scott, Commented Apr 16, 2015 at 18:48

tandrewnichols · Accepted Answer · 2015-04-16 18:58:53Z

1

You can add ng-model="columnFilter" to your input:

<input type="text" placeholder="Filter by columns" `ng-model="columnFilter"` />

Then addng-hide="columnFilter == 'Start Date'" to <td>{{fill.user}}</td>

Add ng-hide="columnFilter == 'User'" to <td>{{fill.startdate}}</td>

And add ng-hide="columnFilter == 'User' || columnFilter == 'Start Date'" to the rest of the <td>'s.

edited Apr 16, 2015 at 18:58

tandrewnichols

3,4561 gold badge31 silver badges33 bronze badges

answered Apr 16, 2015 at 18:50

MattDionis

3,62610 gold badges55 silver badges111 bronze badges

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

3 Comments

tandrewnichols Over a year ago

Or just use ng-show="columnFilter == 'User'" so you don't need multiple conditions.

Alex Over a year ago

This works perfect!! Thank you very much, I had to add many logic because there are many columns but it worked!

MattDionis Over a year ago

No problem. I just upvoted your question too as I learned something while solving it. This was the first time I saw Angular used to filter columns rather than just rows.

Dmitry Bezzubenkov · Accepted Answer · 2015-04-16 19:35:03Z

If you want to filter by column, then you need ng-repeat by columns. After that you can use the same filter that you are using for filtering rows

controller.js

controllers.controller("MainController", ["$scope", function($scope) {
    return ["$scope", function ($scope) {
        $scope.columns = [{
            title: "id",
            alias: "id"
        }, {
            title: "User",
            alias: "user"
        }, {
            title: "Alt User",
            alias: "useralt"
        }, {
            title: "Creation Date",
            alias: "creationdate"
        }, {
            title: "Start Date",
            alias: "startdate"
        }, {
            title: "Recieved Date",
            alias: "recieveddate"
        }];
    }]);

template.html

<div ng-controller="MainController">
    <div class="col-xs-10 grid-container">
        <div class="row form-entry">
            <div class="col-xs-3 input-container">
                <input type="text" placeholder="Search in Grid" ng-model="searchFills" />
            </div>
            <div class="col-xs-3 input-container">
                <input type="text" placeholder="Filter by columns" ng-model="searchColumn" />
            </div>
        </div>
        <div class="col-xs-10 grid-container">
            <div class="generic-grid">
                <table class="table-bordered grid-table table-hover">
                    <thead>
                        <tr>
                            <th ng-repeat="column in columns | filter:searchColumn">{{column.title}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="fill in fills_list | filter:searchFills">
                            <td ng-repeat="column in columns | filter:searchColumn">{{fill[column.alias]}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

That will filter any column in a table.

But this removes the data placed in the ng-repeat fill in fill_list, I want to have both

Collectives™ on Stack Overflow

AngularJS Sort table columns

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related