What's the 'Material' way of going about displaying a row-count on a table?

Question

I have a project where there are multiple Angular mat-tables. The requirements for the project state that it must abide by Material principles, and that each table also display the number of results found below it. I would just use the pagination tool, however requirements state that users specifically don't want paging. I would also just use the pagination but set the page length to whatever the length of the dataset is, but this looks messy and creates navigation buttons that never get used.

It seems my 2 options are:

1. Use a final mat-row and display the current row count in the first column (doesn't look great, seems hacky)
2. Create a component that displays the row count at the bottom of the table below all rows, including final rows (messy, because some of the tables do have final mat-rows and with two different rows it looks bad and is inconsistent)

What's the best way to go about doing this?

Answer 1

I don't perfectly understand what your final rows from option 2 are made of but the cleanest way to solve your problem is to use a footer row as explained here: https://material.angular.io/components/table/overview#footer-row

Answer 2

If you are using the material table dataSource you can then access its properties:

• myDataSource.data.length shows how many items there are total
• myDataSource.filteredData.length shows how many items match the current filters

Answer 3

You can use let i = index and use that for numbering the rows.

<ng-container matColumnDef="#">
    <th mat-header-cell *matHeaderCellDef> # </th>
    <td mat-cell *matCellDef="let element; let i = index"> {{i + 1}}</td>
</ng-container>

Remember to add the matColumnDef value to the columns array in your component.