How to set md-order-by for column names created by ng-repeat

[gurdeep18]

I am trying to get the md-order/md-order-by working for column names populated via ng-repeat, but not able to make any progress. The sort ordering for the data works on the default column set by vm.order, but I am not able to get the interactive sorting working once the data table is populated.

Please see my code for the view

`

{{ c.column_name }}
{{ d[c.column_name] }}

        </md-table-container>

`

[zgambino]

Have a look at a similar "bug" response: https://github.com/daniel-nagy/md-data-table/issues/243

[monzol]

@gurdeep18 I'm reposting your code, formatted for better readablity (see my solution below):

<md-table-container class="gf-cards-table" md-progress="vm.metrics">
    <table md-table>
        <thead md-head md-order="vm.order">
            <tr md-row>
                <th md-column md-order-by="c.column_name" ng-repeat="c in ordered_columns | orderBy:vm.order"><span>{{ c.column_name }}</span></th>
            </tr>
        </thead>
        <tbody md-body >
            <tr ng-repeat="d in vm.metrics">
                <td md-cell ng-repeat="c in ordered_columns | orderBy: vm.order"><span>{{ d[c.column_name] }}</span></td>
            </tr>
        </tbody>
    </table>
</md-table-container>

You added ' | orderBy: vm.order' in the th and td tags, whereas it should only be in the ng-repeat of the tbody's tr tag. Please check below my version and let me know if it worked:

<md-table-container class="gf-cards-table" md-progress="vm.metrics">
    <table md-table>
        <thead md-head md-order="vm.order">
            <tr md-row>
                <th md-column md-order-by="c.column_name" ng-repeat="c in ordered_columns"><span>{{ c.column_name }}</span></th>
            </tr>
        </thead>
        <tbody md-body >
            <tr ng-repeat="d in vm.metrics | orderBy:vm.order">
                <td md-cell ng-repeat="c in ordered_columns"><span>{{ d[c.column_name] }}</span></td>
            </tr>
        </tbody>
    </table>
</md-table-container>