[Table] Responsive stacking support

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 https://github.com/angular/material2/issues/6608, trying to follow the advice of @jelbourn.

[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

[budkin76]

Another +1 for built-in responsive Angular Material Tables