CODEWITHSUNDEEP
sassangular-material2angular5
Marshall Tigerus
Marshall Tigerus

Reputation: 3764

Making Material Table columns dynamic width to content

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?

Upvotes: 7

Views: 23183

Answers (4)

user28297749
user28297749

Reputation: 1

      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 */
  }

Upvotes: -1

BernieSF
BernieSF

Reputation: 1828

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!

Upvotes: 9

Pritam
Pritam

Reputation: 381

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'
              },

Upvotes: 0

bob
bob

Reputation: 625

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

Upvotes: 2

Related Questions