Components: [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 https://github.com/angular/material2/issues/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: https://github.com/daniel-nagy/md-data-table/issues/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 @ #

[kamok]

This solution works for dynamic columns that overflow scroll horizontally. No more missing styling for me.

https://github.com/angular/material2/issues/9027#issuecomment-352801566

[andrewseguin]

Fixed in #10594 - Use native <table> for a better horizontal scrolling experience

[EduardoMiguelCruz]

.table-responsive {
display: block;
width: 100%;
overflow-x: auto;

.mat-table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 1rem;
    display: table;
    border-collapse: collapse;
    margin: 0px;
}

.mat-row,
.mat-header-row {
    display: table-row;
}

.mat-cell,
.mat-header-cell {
    word-wrap: initial;
    display: table-cell;
    padding: 0px 5px;
    line-break: unset;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: middle;
}

}

[pcnate]

@EduardoMiguelCruz works like a charm without switching away from mat-table. In my case I had the table inside a mat-card-content but it makes no difference.

[Tyrcheg]

@EduardoMiguelCruz great solution! simple and compact! thanx

[latchezar-kostov-ascendlearning-com]

@EduardoMiguelCruz @Tyrcheg With all column widths set to 100%, you end up with the first column taking up much more space than it needs. Is there a solution the properly calculates and distributes the column widths?

[tatsujb]

@latchezar-kostov-ascendlearning-com that's not default behavior, normally by default they all take equal percentages of the width.

[pcnate]

@tatsujb I have the same issue. It happens when you use the above css to make tables that can scroll horizontally when they get too wide. When they are too narrow, the first column takes up the extra space

[tatsujb]

oh ok, my bad I hadn't gotten that because they were never too narrow.

[pcnate]

I may try to compare mat-table to the table css used by vuetify in the next few weeks

[dfamorim]

can change width individual cell
.mat-column-description { width: 10%; }

_description_ is name of column

[Myrkotyn]

@EduardoMiguelCruz thanks bro, you just saved my time!

[rohanshenoy96]

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;
}

Not working for me, Even I have around 20+ columns and it looks too congested.

[rohanshenoy96]

can change width individual cell
.mat-column-description { width: 10%; }

_description_ is name of column

@EduardoMiguelCruz @dfamorim Finding solution for this for so long. Thanks

[JoaquimCAP]

Using the solution commented before:
table {
display: block;
width: 100%;
overflow-x: auto;
}
and adding a parent DIV with "width:100vw;" do the trick for me.

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