I want to display a no data message in my ngTable table when the response data array is empty.

So far I have this

        <tr ng-repeat="row in $data">
            <td data-title="'name'" filter="{name: 'text'}" sortable="'name'">{{row.name}}</td>
            <td data-title="'lastName'" filter="{lastName: 'text'}" sortable="'lastName'">{{row.lastName}}</td>
        </tr>
        <tr>
            <td ng-show="$data.length == 0">
                There's no data
            </td>
        </tr>

but what this does is that it shows that message in the first column, I want that message background to take all the columns, I mean I don't want to repeat the message in all columns, I want to show the message in the center of the first row of the table; Or at the beginning of the first column but not limit this message to the first column boundaries.

Another example would be like the bootstrap zebra stripes table, I want the message to take a full stripe color, but the messages can't be limited to a specific column it should display in the entire row.

Is there a option in the ngTble plgun for this, like in the jQuery data-tables plugin message that says "no data available" when the table is empty

I want to display a no data message in my ngTable table when the response data array is empty.

So far I have this

        <tr ng-repeat="row in $data">
            <td data-title="'name'" filter="{name: 'text'}" sortable="'name'">{{row.name}}</td>
            <td data-title="'lastName'" filter="{lastName: 'text'}" sortable="'lastName'">{{row.lastName}}</td>
        </tr>
        <tr>
            <td ng-show="$data.length == 0">
                There's no data
            </td>
        </tr>

but what this does is that it shows that message in the first column, I want that message background to take all the columns, I mean I don't want to repeat the message in all columns, I want to show the message in the center of the first row of the table; Or at the beginning of the first column but not limit this message to the first column boundaries.

Another example would be like the bootstrap zebra stripes table, I want the message to take a full stripe color, but the messages can't be limited to a specific column it should display in the entire row.

Is there a option in the ngTble plgun for this, like in the jQuery data-tables plugin message that says "no data available" when the table is empty

• javascript
• angularjs
• css
• html-table
• ngtable

2 Answers 2

You should use colspan to keep it consistant.

<td colspan="2" ng-show="$data.length == 0"> 
    There's no data 
</td>

It's very simple, just remove this <td></td> from the table..

<td ng-show="$data.length == 0">
                There's no data
</td>

And put this..

<div ng-if="$data.length == 0">Oops, no record found!</div>

and in your table put a condition...

<table ng-if="$data.length > 0"></table>