Components: data-table loading and empty data text

[zh99998]

Bug, feature request, or proposal:

feature request

there is a common usage showing text to tell apart loading or empty data. currently it's complex to do with md-table

it will be much simplify to have a direct API.

<md-table 
loading="Loading data..." // before dataSource emit any result.
empty="No result to show" // dataSource emitted a empty array.
>

or

<md-table>
<md-table-loading><p>a complex html text for loading</p></md-table-loading>
<md-table-empty><p>yet another complex html text</p></md-table-empty>
</md-table>

[andrewseguin]

Check out this example to see what it would look like to include loading, using a simple div next to the table. https://plnkr.co/edit/VAvjp7t5jqtUKfHv4ogM?p=preview

Since the table is focused on the rows (not the header or paginator, or any other surrounding elements), its already available to the user to implement something similar to <md-table-loading> which can be showed with an *ngIf

[mikejohanson]

Hey @andrewseguin, would it be possible to update the plunker so that the Expression has changed after it was checked error isn't thrown when updating the isLoading property?

[mdelorimier]

@andrewseguin Any ways to display a loading indicator untill the table rendering completes?
Or, to have "skeleton" rows while the real rows are being rendered?

[iamwhitebox]

This works with a single http request, but fails to work when using a BehaviorSubject to periodically update results on the table - if the results are empty, the loader just hangs there.

[CodAffection]

try this.
_app.component.ts_
```
listData: MatTableDataSource;
//assume no. of column = 6

_app.component.html_

//after ng-containers with mat-header-cell & mat-cell


Loading data...




No data.

_style.css_

  ```
  .hide{
        display: none;
    }

[saifytarar]

listData.data.length dont work

Cannot read property 'data' of undefined

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

<sub>_This action has been performed automatically by a bot._</sub>