mat-table: Rows and table elements widths don't grow according to cell widths

[AbakumovAlexandr]

Bug, feature request, or proposal:

Bug.

What is the expected behavior?

Rows and table elements widths grow according to cell widths so cells don't overflow them.

What is the current behavior?

Rows and table elements widths don't grow according to cell widths and cells overflow them.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-material2-table-min-width
The width of the viewport must be less than 1000px (combined cells' width) in order to see how cells overflow row and table elements.

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

It creates tricky issues especially when you deal with horizontal scrolling.

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

Material 5.2.0.

Is there anything else we should know?

[andrewseguin]

This is tricky using the flex table, but fortunately as of v6 you can use the native table which makes handling columns widths much better.

[AbakumovAlexandr]

Could you elaborate on what is exactly tricky here?

It's just a mat-table where one or a few columns have min-width set and a viewport doesn't have enough width (maybe user scaled page too much).

[andrewseguin]

Flex itself is tricky when trying to solve this issue. I've tried many ways to get the <mat-table> to play nice with horizontal scrolling but there doesn't seem to be a great solution except to set a min-width on the row itself.

This was one of the primary reasons why we invested in getting <table mat-table> to work since the native HTML table is great at adjusting size especially based on content

[AbakumovAlexandr]

I see, thank you! Looking forward to v6 release 😄

[luisfbp]

The following workaround worked perfectly for me. It made my table re-sizable

.mat-table__wrapper .mat-table {
    min-width: auto !important;
    width: 100% !important;
}

.mat-header-row {
    width: 100%;
}

.mat-row {
    width: 100%;
}

And for every column add this with the percentage and min-width you need

.mat-column-{colum-name} {
    flex: 0 0 25% !important;
    min-width: 104px !important;
}

I hope that work for you guys!

[SamiHK]

@luisfbp Thank You.

[VikramVasudevan]

@luisfbp your solution worked ..thank you!

[andreisrob]

@andrewseguin native html tables indeed solve this issue, but we lose the ability to add angular animation...

[dcolakchile]

You cannot use CSS with dynamically created columns. The solution works only if you for some crazy reason do every datatable by hand, writing each column by hand.

[magleahy]

Was having the same issue. The sticky columns are collapsing and there's weird spacing between columns caused by the sticky attribute. This means when you scroll across the table, there's an accordion effect on sticky column sizes and the content on the lower/non sticky scrolling column is showing up under the top/sticky columns.

Solution:

Set min-width and max-width on each sticky column to be the same value - I used px.

[angular-automatic-lock-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.}