[Table] Add better support for horizontal scrolling

[trungi]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

I should be able to create a mat-table element with width larger than its container and set it to overflow: auto; to create a scrollbar.

What is the current behavior?

Rows are not correctly rendered when I move scrollbar to the right.

What are the steps to reproduce?

http://plnkr.co/edit/wv9KxNPBC9hLpZfFegiB?p=preview

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

Table is rendered incorrectly. I need to render a lot of data inside mat-table even on small screens, so I need to use scrollbar.

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

"@angular/core": "^5.0.0",
"@angular/material": "^5.0.0-rc.1",
"@angular/cdk": "^5.0.0-rc.1",

Is there anything else we should know?

[andrewseguin]

Would love to make this happen - it'll likely be a part of some initiative for auto-column sizing. As it is now, the width of the table is dictated by the width of the cells, not the other way around. This means that the table is unaware of the width of its cells and cannot create a scrollbar for it. Instead, you'll want to set your own styling to the table such that the min-width matches the total min-width of the cells.

[trungi]

Sure, but what if I need to visualize tens of columns in the table? It's impossible to do on smaller screens without horizontal scrolling. I work in a data analyzing company and being able to do this is almost mission-critical for us.

[andrewseguin]

It's possible to have horizontal scrolling, it's just not as magic as I'd like yet. For now if you want to have min-widths on your columns, you'll need to pass that information along to the rows so they know how wide you are specifying it to be.

In your case, you specified that the columns have a min-width of 300px. Because there are four columns, your rows cannot be less than 1200px.

Add this to your example and you'll see that it scrolls correctly:

.mat-row, .mat-header-row {
  background: white;
  min-width: 1200px;
}

http://plnkr.co/edit/dJWCM8gtQaGqzHCOhFX0?p=preview

(Side note: this case seems to show that its not the table that should have the white background, but the rows.)

[edokkir]

Hi, just to mention I still have the "no lined" table as I scroll right. Only if you match the amount of columns times the min-row width with the min-width of the table, it works. But if you are using a dynamic table, how to get around? Any suggestions?

[djleonskennedy]

same issue has diferent tag #9027

[pantonis]

I have the same problem too. Lots of columns and data are getting shrinked. Numbers are unreadable because they wrap to next line and this causes the control to be unusable.

Any workaround to enable horizontal scrolling?

[kamok]

@edokkir It's because you've hard coded the .mat-cell. I'm guessing it's a min-width. This is the cleanest way to handle table with many columns, but we have the width of the row not rendering properly, hence you're not seeing the "lines". I removed the lines in my table to get around the problem rising from dynamically generated tables.

@andrewseguin Does not work for tables that dynamically changes number of columns.

[edokkir]

After some search: daniel-nagy/md-data-table#311
@andrewseguin, I used your plunker and changed the css for the table to
.mat-table { table-layout: fixed; }
and now I don't get the non lined rows, this may be work around / solution ?

[tatsujb]

this worked better for me :

.mat-row, .mat-header-row {
  width: 450vw; //PERSONALLY I HAD 45 COLUMNS
}
.mat-header-row { //THIS MAKES THE HEADER STICKY
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 1;
  background-color: inherit;
}
.table { //OR WHATEVER YOU CALL THE mat-table
  overflow: scroll;
}

[BrunoAMSilva]

Need this urgently, I have dynamic columns and it is crucial.

[vishnu-220]

tatsujb ..your style worked for me @ #