Making Material Table columns dynamic width to content

Question

After a lot of tinkering I finally have a decent setup for my material table. It's got pagination, it's got sort, it's got all the goodies I need. However, it looks off because several of my columns are single digit values, and they have the same width as columns I would prefer to be larger (like the description which is wrapped excessively).

Being inexperienced in scss (and css for that matter) I'm at a loss for how to fix this. I attempted tinkering with the flex property in just about every way I could figure out, and it doesn't appear to change a thing on the table.

This issue is further complicated in that I cannot easily use the 'hack' of the material table generating classes based on the column identifier, as the columns are generated dynamically. I could pass in width information as well, but that seems like an unmaintainable hack.

Is there a way to apply styling to the entire table and header that would get me the desired look?

BernieSF · Accepted Answer · 2021-02-22 15:59:08Z

10

I used this successfully with Angular10.

First, wrap your table with a div, like this:

<div class='table-responsive'>
   <mat-table>
      ....
   </mat-table>
</div>

then add this CSS

.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: auto;
 white-space: nowrap;
 overflow: hidden;
 vertical-align: middle;
}

This will size the cells according to the content, and make your table horizontally scrollable!

answered Feb 22, 2021 at 15:59

BernieSF

1,8582 gold badges31 silver badges46 bronze badges

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

1 Comment

Jerry Aug 31 at 11:09

this is a great answer and fixed my issues - thanks! Angular 19 seems to simplify the issue. I put this: .mat-mdc-header-row {display: table-row; } in my custom-theme.scss - easy!

bob · Accepted Answer · 2018-01-25 14:27:59Z

2

Assuming that you do mean the angular material table, this one might help: md-table - How to update the column width

answered Jan 25, 2018 at 14:27

bob

6355 silver badges26 bronze badges

Comments

Pritam · Accepted Answer · 2021-01-13 17:59:33Z

0

Use the below style for columns width and header

         columns={[
              {
                title: 'Create Date',
                field: 'create_date',
                cellStyle: {
                 whiteSpace: 'nowrap'
                },
               ...
               ]}
            options={{
              headerStyle: {
                backgroundColor: '#DEF3FA',
                color: 'Black',
                 whiteSpace: 'nowrap'
              },

answered Jan 13, 2021 at 17:59

Pritam

3813 silver badges5 bronze badges

Comments

user28297749 · Accepted Answer · 2024-11-14 11:45:33Z

      functionFn() {
        document.addEventListener('DOMContentLoaded', () => {
          const table = document.getElementById(
            'demo-table-v2'
          ) as HTMLTableElement;
          const headers = table.querySelectorAll(
            'th'
          ) as NodeListOf<HTMLTableCellElement>;
          let startX: number,
            startWidth: number,
            currentColumn: HTMLElement | null = null;
          let isResizing: boolean = false;
    
          function onMouseDown(event: MouseEvent): void {
            if (event.target && (event.target as HTMLElement).tagName === 'TH') {
              currentColumn = event.target as HTMLElement;
              startX = event.clientX;
              startWidth = currentColumn.offsetWidth;
              isResizing = true;
              currentColumn.classList.add('resizing');
            }
          }
    
          function onMouseMove(event: MouseEvent): void {
            if (isResizing && currentColumn) {
              const newWidth = startWidth + (event.clientX - startX);
              currentColumn.style.width = `${newWidth}px`;
            }
          }
    
          function onMouseUp(): void {
            if (isResizing) {
              isResizing = false;
              if (currentColumn) {
                currentColumn.classList.remove('resizing');
                currentColumn = null;
              }
            }
          }
    
          headers.forEach((header) => {
            header.addEventListener('mousedown', onMouseDown);
          });
    
          document.addEventListener('mousemove', onMouseMove);
          document.addEventListener('mouseup', onMouseUp);
        });
      }

    table {
    table-layout: fixed;
    width: 100%;
  }
  
  td, th {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    position: relative;
    width: 85px;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
  }
  
  th {
    cursor: col-resize;
  }
  
  th.resizing {
    background-color: #ddd; /* Optional: to indicate the column is being resized */
  }

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Making Material Table columns dynamic width to content

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related