Components: Material table should be responsive

[pierre03]

Bug, feature request, or proposal:

Can not set the table to be responsive.

What is the expected behavior?

I have a default columns list by using *matHeaderRowDef parameter. like:
<mat-header-row *matHeaderRowDef="defaultColumns"></mat-header-row>

I need to set another columns list to display for smartphone.
This expected columns list should be different to the default columns list and trigged automatically on smartphone.

What is the current behavior?

I didn't find any example, can you help me please?

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.

StackBlitz starter: https://goo.gl/wwnhMV

What is the use-case or motivation for changing an existing behavior?

I need something like this for Angular 5 for the company use:
https://codepen.io/zavoloklom/pen/IGkDz

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 5
Material latest version

Is there anything else we should know?

[benneq]

This is no issue / bug.

Just Build your own table component which internally uses mat-table and sets the displayedColumns according to the Display size.

[josephperrott]

Please keep GitHub issues for bug reports / feature requests. Better avenues for troubleshooting / questions are stack overflow, gitter, mailing list, etc.

[andrewseguin]

Duplicate of #8494

@pierre03 Here's a comment I made on that issue that may help guide you into creating a responsive table. https://github.com/angular/material2/issues/8494#issuecomment-359607760

In that example, I used the same columns. However, if you want to change the columns based on the screen size, try using the CDK's breakpoint observer.

Here's a quick example showing this: https://stackblitz.com/edit/angular-mohmt5-y88uhq?file=app%2Ftable-basic-example.ts

[kakins]

@andrewseguin Thanks for that example. I feel it almost gets me there, but I'm not quite sure what to do if your label text is long... i'd the "column" for the labels to align, or at least not wrap the text. Any ideas?

[av1m]

An alternative is to use responsive bootstrap tables, see here

For example :

<div class='table-responsive mat-elevation-z8'>
    <mat-table [dataSource]="data">
       // code ...
    </mat-table>
</div>

[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.

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