Components: md-table - How to update the column width

[Vinutha-BK]

Bug,Feature request, or proposal:

Hi,
I have started using the md-table for my project, and I want fixed column width.Currently all columns width are divided into equal size.
Could any one please help me in this.

Answered by me for this in the below comment on Aug 9

[andrewseguin]

Closing since the issue does not represent a bug or feature request. The best way to get help using Material is to ask the community through other avenues like Gitter, StackOverflow, Google Groups, etc.

[duard]

I want to know how to set the column width too

[duard]

I want to know how to set the width of that column Código

[bogacg]

For those looking for an answer to the same question and fall here, material2 uses Angular Flex-Layout flexbox.

In order to give a fixed width to a column you may add for example [Angular Flex-Layout] fxFlex="60px" both to md-cell and md-header-cell.

[Vinutha-BK]

I got the very easy solution for this:
setting different width for column in style sheet by overriding the both cell and header cell

Example: setting custom width for 1st and 5th column:-
.mat-cell:nth-child(1),
.mat-header-cell:nth-child(1),
{
flex: 0 0 5%;
}
.mat-cell:nth-child(5),
.mat-header-cell:nth-child(5),
{
flex: 0 0 10%;
}

The remaining width will be divided equally among remaining cells.

Note: Column number start with 1

[joseluisq]

@Vinutha-BK solution's works. 👍

.my-mat-cell,
.my-mat-header-cell {
  flex: 0 0 30%;
}

[AKlaus]

@bogacg, it's inconvenient that we have to duplicate fxFlex for md-cell and md-header-cell.
Is there a way to avoid duplication and apply flex settings to both (the header and the cells)?

[bogacg]

@AKlaus first: my initial comment was partially right partially wrong. Material2 uses flexbox but does not import Angular Flex-Layout. If you are using Angular Flex-Layout, like me, that's a way to handle that situation.

To answer your question, I don't change widths often, so for me adding fxFlex in two places didn't feel inconvenient but since headers and cells are different directives, I can't think a solution where you define once and it effects all.

Maybe team needs to implement that in order to make it easy.

[AKlaus]

I thought, I share here a solution my team is using:

Instead of using fxFlex on the header and the column, we utilise a feature, where mat-table auto generate CSS classes with column names (e.g. .mat-column-title) and these classes get applied to the header and the column!
Hence, we apply "width" in the CSS, like

.mat-column-title {
  flex: 2;
}

We have gone even further, because of similar obstacles in other places, we replaced all angular/flex-layout directives with corresponding CSS styles instead. Immediate tangible benefit out of it was simpler (or more straightforward) debugging of the UI in the browser, where the devs need to tweak styles a bit.

[briosheje]

Before someone else gets mad, remember that to use fxFlex you MUST include in your project angular/flex-layout, otherwise it won't work.

Some angular material projects comes bundled WITHOUT the flex-layout module.

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