dynamically adjust mat-table column width based on content

I am trying to make a mat-table where the column width automatically adjusts based on the content of the longest column.

<mat-table #table [dataSource]="dataSource">

 <ng-container matColumnDef="email">
  <mat-header-cell *matHeaderCellDef class="myHeader"> No. </mat-header-cell>
  <mat-cell *matCellDef="let element" class="myCell"> {{element.email}} </mat-cell>
 </ng-container>

 <ng-container matColumnDef="name">
  <mat-header-cell *matHeaderCellDef class="myHeader"> Name </mat-header-cell>
  <mat-cell *matCellDef="let element" class="myCell"> {{element.name}} </mat-cell>
 </ng-container>

</mat-table>

Example Data:

const DATA: Data[] = [
 {email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="076a666e6b36476a666e6b2964686a">[email protected]</a>', name: 'Long name for this person'},
 {email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="83eee2eaefb1c3eee2eaefade0ecee">[email protected]</a>': 'name2',
 {email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ce0e3e2ebe1ede5e0ede8e8fee9ffcce0e3e2ebe1ede5e0ede8e8fee9ffffa2efe3e1">[email protected]</a>: 'name3'}
];

The cell width needs to accommodate "[email protected]" and "Long name for this person".

I have tried using FxFlexFill and fxFlex in my CSS, but it didn't work.

.myHeader, .myCell{
  flex: 0 0 100px;
  white-space: nowrap;
}

Can anyone offer some help?

angularcss

Answer №1

In case you haven't found the solution yet, I'm sharing it here for anyone else who may need help.

I came across this resource which helped me: https://github.com/angular/material2/issues/5808

Although it's not about auto-sizing columns, here's how you can set widths on specific mat-table columns (the content wraps by default):

mat-cell:nth-child(1),
mat-header-cell:nth-child(1) {
    flex: 0 0 30%;
}

mat-cell:nth-child(5),
mat-header-cell:nth-child(5) {
    flex: 0 0 10%;
}

If you prefer to use auto-sizing, you'll need to revert to using native <table> as suggested in this solution: https://github.com/angular/material2/issues/5866

Answer №2

.mat-footer-row,
.mat-header-row,
.mat-row {
    Using inline-flex to display the elements has been found to be effective in ensuring a minimum width of 100% for each element.
}

source:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Struggling to make a row of images resize smoothly and responsively when the viewport size changes

Struggling with making a row of images resize responsively when the viewport changes? Are your images wrapping awkwardly or leaving white space as the screen narrows, requiring users to scroll horizontally to view them? I want my images to resize without w ...

htmlcssbootstrap-4responsive-designlayout-viewport

Comparison Between Angular 4 `ng serve --prod` and `ng serve` Commands

So, here's the situation: I have an app that is 4.6MB when running on ng serve. When I run: ng serve --prod The file size drops to 1MB. However, when I use --prod, my entire application breaks. All of my services (which are promise-based) that ...

javascriptangulartypescriptwebpackangular-cli

Transforming the sentence into a particular keyboard symbol

Looking for a way to transform this code snippet: <tr> <td width="100%" bgcolor="#96002D" height="3" style="font-size: 1px; line-height: 1px;">&nbsp;</td> </tr> From just a single line into a series of "/" characters like so ...

htmlcss

Top Tip for Preventing Angular Version Compatibility Issues

Here is an illustration that delves into my inquiry ----> Version Conflict The dilemma arises when my product has a dependency on a node package, which in turn relies on a specific version of Angular, denoted as version #y. However, my product itself ...

angularjsnode.jsangularnpmnpm-install

Avoid angular2 error by fetching response data without using a loop

Currently in my angular2 project, I am attempting to extract the value of an email id from an object array. The challenge is that there is only one object and I would prefer not to use a loop. I have attempted to achieve this using the following code snipp ...

angularangular-loopback

Issue with HTTP Interceptor not being effective when making service calls

I've implemented an interceptor to automatically add headers to each HTTP request without manual intervention. However, I'm facing an issue where the service call inside my interceptor is not triggering for some reason. Below is the code snippet: ...

node.jsangulartypescriptrxjsangular-httpclient-interceptors

Creating a pop-up confirmation message upon email submission through React and custom CSS styling

In my React project, I've created an email form and included the <div className="msg">Message has been sent</div> class. However, I only want this message to display when the message has successfully been sent (status: true). How ...

javascriptcssreactjsnodemailer

When working on one of my subdomains, I require the ability to distribute cookies between the two

Currently, I am involved in a project that utilizes a sub-domain under a parent domain called "my-project.parent.com", which unfortunately I do not have access to. Additionally, there is another project operating under the main domain "parent.com" with t ...

javascriptangulartypescriptcookies

The app-root component template does not duplicate when referenced multiple times in the index.html file

After using angular-cli to create my Angular application, I encountered an issue where the app-root component template was not appearing twice when I referenced it twice in the index.html file. Despite including app-root multiple times, the template only d ...

javascriptangulartypescript

Rendertron and the importance of <script> tags

Recently, I implemented Rendertron for my Angular 6 application and realized that it wasn't rendering the <script> tags. Does anyone have insight on how to configure Rendertron to render these tags properly? The main reason I am looking to addr ...

angularjson-ldrendertron

Changing the Values of Variables in an npm Package within SvelteKit

I have been working on a SvelteKit component library where I define variables for components like background-color and font-family in a CSS file. Inside the ./dist/index.js file of my library, I export the CSS using `import './main.css'`. When in ...

cssnpmsveltekit

Angular only allows click events to trigger during a push

Is there a way to reveal the password without requiring a click, but simply by pushing on an eye icon? My code HTML <input [formControlName]="'password'" [type]="isShow ? 'text' : 'password'" class=&qu ...

javascriptangular

Error number 13 encountered during Angular CLI installation process

When attempting to install npm install -g @angular/cli, I encountered the following error: npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules npm ERR! path /usr/local/lib/node_modules npm ERR! code EACCES npm ERR! errno -13 npm ...

node.jsangularnpmangular-cli

What is the easiest way to update the border color of a radio button in Material-UI?

I am looking to customize the appearance of the outer ring on Material UI radio buttons. https://material-ui.com/components/radio-buttons/ Currently, my radio button looks like this: https://i.stack.imgur.com/o67mN.jpg However, I would like it to look ...

cssreactjsmaterial-ui

Having difficulty customizing the layout with JavaScript

I want to demonstrate the ability to send a message without hardcoding all messages in my frontend. I utilized existing code from this link shared by another developer. I have included the id="msg" in the input field and id="chatpanel" with class chat-pan ...

javascripthtmlcssbootstrap-4frontend

Why is it that the form does not fully appear when the screen is being resized with absolute display?

Utilizing bootstrap columns, I have a form that is set to display: absolute. However, when the screen size is reduced, the form does not appear completely as seen in this image. How can I ensure that the form appears entirely as shown in the desired resul ...

htmlcssbootstrap-4

Leveraging bootstrap for achieving vertical and horizontal centering of images

My webpage uses bootstrap to display content, and while I've managed to center my images vertically, I'm facing an issue with horizontal centering. I want to ensure that any image, regardless of size, remains within the column/row and adjusts it ...

htmlcssbootstrap-4

Achieving Horizontal Alignment of jQuery within HTML utilizing CSS

I'm struggling to center the ASlider Jquery plugin () that I've added to my website's HTML code using CSS. No matter what I try, it stubbornly remains fixed to the left side of the page. I attempted using CSS properties like float, display, ...

javascriptjqueryhtmlcss

Styling text by reducing its size with CSS

Utilizing a CSS class to truncate text in the accordion header, which includes both a URL and plain text fields that need to be displayed on the same line. Desired Output: .../abc/xyz Count:42 Current output: .../abc/xyz Count:42/ (An odd slash is ...

htmlcssangularjsaccordion

Update the class of the panel immediately prior to a click event

Is it possible to change the class before the animation starts or when opening/closing the panel? Currently, the class only changes after the animation has finished and the panel is already open or closed. Here is an example: http://jsfiddle.net/0b9jppve/ ...

jquerycsstwitter-bootstrap