How to make an Angular Material table responsive

Question

I have a simple table with numerous columns, and I would like the columns to shrink automatically when sizing the browser window. The table-responsive works with Bootstrap, but I am looking for something similar for Angular Material. I am trying to avoid having 2 table definitions, and do not really want to do this myself in CSS. Is there a standard way in Angular Material for this?

<table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp" flex>
    <thead>
        <th class="mdl-data-table__cell--non-numeric">Date</th>
        <th class="mdl-data-table__cell--non-numeric">Time</th>
        <th class="mdl-data-table__cell--non-numeric">Park</th>
        <th class="mdl-data-table__cell--non-numeric">Home Team</th>
        <th class="mdl-data-table__cell--non-numeric">Away Team</th>
        <th class="mdl-data-table__cell--non-numeric">Win/Loss</th>
    </thead>
    <tbody>
        <tr ng-repeat="game in games">
            <td class="mdl-data-table__cell--non-numeric">{{game.GameDate | SLS_Date}}</td>
            <td class="mdl-data-table__cell--non-numeric">{{game.GameTime | SLS_Time:'HH:mm' }}</td>
            <td class="mdl-data-table__cell--non-numeric">{{game.VenueName}}</td>
            <td class="mdl-data-table__cell--non-numeric">{{game.HomeTeamName}}</td>
            <td class="mdl-data-table__cell--non-numeric">{{game.AwayTeamName}}</td>
            <td class="mdl-data-table__cell--non-numeric">{{game.WinLoss}}</td>
        </tr>
    </tbody>
</table>

Note, I have used the Material Design Lite table here, as Angular Material does not have a table today. Same problem, including the use of flex and grids.

I guess the new Material world does not like tables, so best option is to change the layout to not use tables.

Answer 1

I created a little directive which can be applied to a mat-table table to make it responsive. This way it is easy to only add responsive behavior to some tables in the application (which was a requirement in my case).

So basically the directive duplicates the content of each header cell (column name) as a data attribute so it can be accessed via the CSS content property (inspired by this article). Unfortunately CSS styles can't be applied to a directive, so the styles need to be imported globally.

Features

• no extra hard coded column names for mobile view
• reacts on language changes and updates the column names for mobile view
• reacts also on row changes/updates (e.g. add a row)
• in mobile view it only shows the columns which were made sortable via the matSort directive

This should not be seen as a general solution, as it does of course not cover all use cases. Also the styling of the table mobile view is bound to my specific requirements and probably needs to be adjusted. But i just wanted to share it, so that it maybe could serve and help as a starting point for others.

Angular 12+ (TS strict mode)

Because of the request in the comments from the user klaydze, here is an alternative version that supports the requirement to use strict: true in tsconfig.json for Angular 12+.

Stackblitz using TS strict mode

Angular < 12

Stackblitz

Answer 2

There is currently no way you can achieve this in MDL, Check out this issue on github.

I am having the same problem with my tables, but I guess I will have to make them responsive my self. There are a lot of tutorials out there & you should do a bit of research which table design would suit your responsive website the best.

Also, I think its worth checking out materializecss's responsive tables