Create an empty row if there is no data.

[jjspace]

I have been using ngTable for a big project and I am creating a lot of similar tables so I created a directive for the ng-table directive that I could just pass columns and a getData function and have the same logic behind all the tables. All that aside there are times that no data would be returned, which is the proper functionality of the api I'm using but that would leave just the top of these tables with no rows making it look like something was still loading. To prevent this I wanted to create an empty row that just says "No Data" for when this happens and I am slightly ashamed to admit how long it too me to find this and how many places I tried searching for a way to do that. So that said I just wanted to post this here for other people who may be trying to do the same thing. This isn't an issue I just wanted it to be searchable by other people on this repo. I'm sorry if this is just clutter. (and if someone else has a better way let me know)

<table ng-table-dynamic="tableParams with cols" class="table table-hover">
    <colgroup>
        <col ng-repeat="col in $columns" width="{{col.width}}%"/>
    </colgroup>
    <tr ng-repeat="row in $data" ng-class="{hidden: $data.length == 0}">
        <td ng-repeat="col in $columns" ng-bind-html="col.getValue(this, row)"></td>
    </tr>
    <tr ng-class="{hidden: $data.length > 0}">
        <td>No Data</td>
        <td ng-repeat="col in $columns" ng-if="$index > 0"></td>
    </tr>
</table>