[Table] Responsive stacking support

[marcusreese]

Bug, feature request, or proposal:

feature request

What is the expected behavior?

I would like to be able to convert a CDK table into a stacked list. I want to do this through CSS media queries (i.e. when window size is narrow), and I also want to be able to do it through JavaScript (e.g., when the user clicks a button). The header cell contents should be displayed on each line instead of just at the top. E.g.,

     Header 1     Header 2     Header 3     Header 4
       1.1          1.2          1.3          1.4
       2.1          2.2          2.3          2.4

becomes

     Header 1        1.1
     Header 2        1.2
     Header 3        1.3
     Header 4        1.4

     Header 1        2.1
     Header 2        2.2
     Header 3        2.3
     Header 4        2.4

and even

     Header 1
        1.1
     Header 2
        1.2
     Header 3
        1.3
     Header 4
        1.4

     Header 1
        2.1
     Header 2
        2.2
     Header 3
        2.3
     Header 4
        2.4

If this is already facilitated by the CDK, I would like to see an example of this feature in the docs.

What is the current behavior?

The two docs pages I am looking at (https://material.angular.io/guide/cdk-table and the link below) do not mention 'responsive' or 'stack', and there are no demonstrations of tables that stack.

From https://material.angular.io/components/table/overview

What are the steps to reproduce?

Go to https://material.angular.io/components/table/overview on a small mobile browser or, with a desktop browser, resize the window to be narrow (e.g., 760px wide).

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

1. There are groups where I work, and no doubt at many other organizations, that do not want to use a table library that does not offer this feature.
2. The need for this feature is evidenced by its existence in other solutions, such as PrimeNG datatable https://www.primefaces.org/primeng/#/datatable/responsive and https://css-tricks.com/responsive-data-tables/

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

N/A

Is there anything else we should know?

This is a restatement of #6608, trying to follow the advice of @jelbourn.

[alexzaytsev-newsroomly]

I was able to implement a workaround using samples provided here: https://css-tricks.com/responsive-data-tables/

It would certainly be nice to be able to have this behaviour as part of the component (and toggle it on/off).

[mhosman]

Agree with @marcusreese, this is a must-have feature in a first-mobile & across devices today's world. Maybe some workaround with FlexLayout as an example?

[andrewseguin]

Since the foundation of the table allows for any arbitrary content to be in the header/row cells, it'll be hard to make a universal approach. For example, if your header has a filter/menu/icon/etc then you'll likely not want those things to show up in the responsive version.

I'll incorporate this into my design for some kind of mat-simple-table which understands more deeply about what data is being shown and some rules on what is possible (e.g. header cells are only text).

For now with the current tables, it's just too open for any templates to fully prescribe something.

That said, if you want to make your tables responsive. Here's an example of how you can do this:

Wide-screen:

Narrow-screen:

CSS:

// By default, the mobile label shouldn't show
.mobile-label {
  display: none;
}

@media(max-width: 600px) {
  // Custom header label that shows in each column, with a set width and bold font
  .mobile-label {
    width: 80px;
    display: inline-block;
    font-weight: bold;
  }

  // Remove the header row altogether
  .mat-header-row {
    display: none;
  }

  // The row cells should display as a column, justified left, with a bit of extra padding
  .mat-row { 
    flex-direction: column;
    align-items: start;
    padding: 8px 24px;
  }
}

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

[dhniels]

Some sort of responsive implementation would be nice, even at the very least allow the table to overflow along the x-axis and perhaps add a fixed column. For example, there is a Vue.js component library called Element that has a lot of nice options for table. Check out an example at Element's website.

[imVinayPandya]

@dhniels I think that is an awesome idea. that table's functionality looks awesome. I hope that material team will provide these kinds of options.

1+ for responsive table

[ayepiz]

I think a scroll at the x-axis will be a great approach and of course, it will be a lot better if an implementation of a fixed column like the Element's webpage is added.

[mhosman]

Another simple workaround to make the table responsive:

Create a new div:

<div class="responsive_table">
</div>

Inside that div create your mat-table.
Now go to your css and put something like this:

@media(max-width: 800px) {
    .responsive_table {
        overflow-x: auto !important;
    }

    .mat-table {
        min-width:800px;
    }
}

This is not an "elegant" solution but works.

[budkin76]

Another +1 for built-in responsive Angular Material Tables