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. I am having the same problem with my tables, but I guess I will have to make them responsive my self.

There is currently no way you can achieve this in MDL, Check out this issue on github. Angular Material has all the Angular components you need to build a nice looking and fully responsive nav. Angular Material components help in constructing attractive, consistent, and functional web pages and web applications while adhering to modern web design principles like browser portability, device independence, and graceful degradation. But i just wanted to share it, so that it maybe could serve and help as a starting point for others.īecause 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. Pretty much all pages need a responsive navigation. Angular Material is a UI component library for Angular JS developers.

Also the styling of the table mobile view is bound to my specific requirements and probably needs to be adjusted. This should not be seen as a general solution, as it does of course not cover all use cases.

in mobile view it only shows the columns which were made sortable via the matSort directive.

reacts also on row changes/updates (e.g.

reacts on language changes and updates the column names for mobile view.

no extra hard coded column names for mobile view.

Unfortunately CSS styles can't be applied to a directive, so the styles need to be imported globally. Expanding upon the card motifs first seen in Google Now, it is a design with increased use of grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows. 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). Material Design is a design language developed by Google. This way it is easy to only add responsive behavior to some tables in the application (which was a requirement in my case). I created a little directive which can be applied to a mat-table table to make it responsive.

Angular2 responsive design tutorial