feat(table): add the ability to show a data row when no data is available

[crisbeto]

As the table is set up at the moment, there's no convenient way to show the user something when their filtered table didn't match any data. These changes add a new directive that renders out a single row when no other data is available which can be used to show a message.

[crisbeto]

The name of the directive sounds a little clunky, but I couldn't come up with anything more descriptive. I'm open ideas on how to name it better.

[ccjmne]

The term "placeholder" comes to (my) mind but I'm not sure it'd be adequate here.

I'd somewhat like to have all the elements that are "placeholders" of some sort identified as such across all the components that use them. Not just all the placeholders in particular, but all the elements that are (semantically) somewhat agnostic to the "collection" they belong to in general.

A reusable naming convention makes for a conceptually simpler API!

I think the CDK Drag&Drop uses something like cdkDragPlaceholder, so maybe cdkNoDataPlaceholder would be acceptable... but I don't like it, it's clunkier than cdkNoDataRow ever was 🤪

Disclaimer: I really haven't thought this through, this is just my two cents.

[crisbeto]

Having "placeholder" in there sounds good to me since this behaves a little bit like the native input placeholder (e.g. something that shows up when the input is empty).

[jelbourn]

I'm not totally sold that we'd want to add this to the table. You can accomplish the same thing today by:

• Have the data source emit a placeholder value when the data would be empty
• Use the when property on the row definition to show whatever for that placeholder

We could explicitly document this pattern without needing to add any additional code or concepts to the table.

[crisbeto]

How would you handle the placeholder row having a different amount of cells compared to regular rows? You don't need a full row of cells just to say "No more data".

[jelbourn]

I was thinking something like this

<table mat-table [dataSource]="dataSource">

  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef>Name</th>
    <td mat-cell *matCellDef="let element">{{item.name}}</td>
  </ng-container>

  <!-- ... other data columns ... -->

  <!-- Empty data placeholder -->
  <ng-container matColumnDef="empty-placeholder">
    <td mat-cell *matCellDef colspan="3">No results found</td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="['name', 'age', 'address']"></tr>
  <tr mat-row *matRowDef="let row; columns: ['name', 'age', 'address'];"></tr>
  <tr mat-row *matRowDef="let row; columns: ['empty-placeholder']; when: isEmptyRow"></tr>
</table>

We can chat about it during this week's team meeting

[jelbourn]

Based on discussion, we will go ahead with this. I propose using matEmptyDataRowDef or matEmptyPlaceholderRowDef

[crisbeto]

@jelbourn I've changed the naming to matEmptyPlaceholderRowDef.

[jelbourn]

LGTM, just needs rebase

[crisbeto]

Rebased.

[quanterion]

any updates?

[angular-automatic-lock-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.

_{This action has been performed automatically by a bot.}