Angular material table - column width by string length

Question

In my app I have a bunch of different material tables. I want to find some way to automatically set column width.

I know, I can set this directly in CSS like this and I try this

.mat-column-position {
  flex: 0 0 10%;
}
.mat-column-name {
  flex: 0 0 25%;
}
.mat-column-weight {
  flex: 0 0 25%;
}
.mat-column-symbol {
  flex: 0 0 25%;
}

But in this way, I need to manually set the width for every table.

I also try dynamically set CSS with SCSS

@mixin mat-table-columns($columns)
{
    .mat-column-
    {
        @each $colName, $props in $columns {

            $width: map-get($props, 'width');

            &#{$colName} 
            {
                flex: $width;
                min-width: $width;

                @if map-has-key($props, 'color') 
                {
                    color: map-get($props, 'color');
                }
            }  
        }
    }
}

@include mat-table-columns((

    orderid: (width: 6rem, color: gray),
    date: (width: 9rem),
    items: (width: 20rem)

));

But in all of these ideas, I need to manually set the width.

I try to find, is there any way to automatically set the width relative to the string with the longest length

| abc   | abcdefg | abcdefgh |
| abcde | abc     | abc      |
| ab    | abcdef  | abc      |

Here is stackblitz for example. Thnx

You could add those styles into global style.css or style.scss — user12251399
– user12251399, Commented Apr 9, 2021 at 12:15

robbieAreBest · Accepted Answer · 2021-04-12 22:30:19Z

4

I would recommend using native table elements, this way your cells will auto resize and you should never have to worry about setting them manually.

  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

https://stackblitz.com/edit/angular-8kyrsp-gnhbfd?file=src%2Fapp%2Ftable-flex-basic-example.css

answered Apr 12, 2021 at 22:30

robbieAreBest

1,78114 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mihai Socaciu Over a year ago

I support this. Even on official websie, if you open Stackblitz and play with their table you can it it resizes after content. It uses there native elements. material.angular.io/components/table/overview

Sofía · Accepted Answer · 2022-08-24 14:38:41Z

3

As robbieAreBest suggested, the native table element will resize. What I didn't know is that all that needs to be done is this:

<table mat-table>
    your table
</table>

instead of (old way)

<mat-table>
    your table
</mat-table>

See docs for more info

answered Aug 24, 2022 at 14:38

Sofía

94012 silver badges24 bronze badges

1 Comment

rzin Over a year ago

Thats it! Even though the width 100% was being applied to the table(tested using border red), the content of the table wasnt being adjusted to take the whole empty space. Forcing mat-cell to X width was working in some weird way.

Collectives™ on Stack Overflow

Angular material table - column width by string length

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related