Reordering columns in html table with Angularjs

Question

I have a set number of available columns in html table. As soon as the user will filter out which columns they want I'm displaying the table with the selected columns only.

Now, I want to give the option to the user to also set the order of the columns displayed, which column to come first, which second. I have the list and the functionality for reordering the columns in a select list ready, please check the screenshot below:

I want to know how can I actually sort the columns in the table in the same order as they are set in the list on the right.

This is the code I have so far:

                        <table class="table table-hover" id="basicTable">
                            <thead>
                                <tr>
                                    <th ng-show="ShowDescription">Description</th>
                                    <th ng-show="ShowDeviceId">Device ID</th>
                                    <th ng-show="ShowUpdateRequired">Update Required</th>
                                    <th ng-show="ShowOpenTime">Open Time</th>
                                    <th ng-show="ShowOpenTimeAda">Open Time Ada</th>
                                    <th ng-show="ShowKeypadCode">Keypad Code</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="(k, v) in assets | filter: appliedFilter">
                                    <td class="v-align-middle" ng-show="ShowDescription">
                                        <p>{{v.description}}</p>
                                    </td>
                                    <td class="v-align-middle" ng-show="ShowDeviceId">
                                        <p>{{v.extdoorid}}</p>
                                    </td>
                                    <td class="v-align-middle" ng-show="ShowUpdateRequired">
                                        <p><span ng-if="v.updaterequired == '1'">Yes</span><span ng-if="v.updaterequired == '0'">No</span></p>
                                    </td>
                                    <td class="v-align-middle" ng-show="ShowOpenTime">
                                        <p>{{v.opentime}}</p>
                                    </td>
                                    <td class="v-align-middle" ng-show="ShowOpenTimeAda">
                                        <p>{{v.opentimeada}}</p>
                                    </td>
                                    <td class="v-align-middle" ng-show="ShowKeypadCode">
                                        <p>{{v.keypadcode}}</p>
                                    </td>
                                </tr>
                            </tbody>
                        </table>

lzagkaretos · Accepted Answer · 2017-12-18 20:02:59Z

4

One suggestion is using an array for the current selected columns and of course an array for the current displayed assets.

I created a sample just for demonstration of the logic.

$scope.columns = [
    {id: "col1", description: "col 1", show: true},
    {id: "col2", description: "col 2", show: true},
    {id: "col3", description: "col 3", show: false},
    {id: "col4", description: "col 4", show: true}
];

$scope.assets = [
    {col1: "Some value 1", col2: "Another value 1", col3: "Col 3 1", col4: "Val. 1"},
    {col1: "Some value 2", col2: "Another value 2", col3: "Col 3 2", col4: "Val. 2"},
    {col1: "Some value 3", col2: "Another value 3", col3: "Col 3 3", col4: "Val. 3"}
];

And a simple table in html is:

<table class="table table-hover">

  <thead>
    <tr>
      <th ng-repeat="column in columns | filter: {show: true}">{{column.description}}</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="asset in assets">
      <td ng-repeat="column in columns | filter: {show: true}">{{asset[column.id]}}</td>
    </tr>
  </tbody>

</table>

If you change the order of the columns inside $scope.columns array, you will see the change happening in html table (through ng-repeat directive).

Hope you get some useful tips and ideas to fit your needs.

answered Dec 18, 2017 at 20:02

lzagkaretos

2,9202 gold badges19 silver badges28 bronze badges

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

1 Comment

Brian Over a year ago

Nice and clean.

Collectives™ on Stack Overflow

Reordering columns in html table with Angularjs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related