Material table should be responsive

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?

[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

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