Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular4 Material md-table Column Width AutoSizing Like Normal Table

I'm using an md-table in an Angular 4 app since I'm using Material for other parts of the UI formatting. When I use a regular table with basically no CSS, the columns auto-format to fit the widest td element. With md-table, the columns are all set to the same width divided into the total table width, except for cells that are too wide and then it extends the cell and pushes the other cells in that row to the right. My regular table:

<md-tab label="Data" >
  <md-card class="datacard">
    <md-card-content>
      <div>
        <table class="datatable">
        ....
        </table>
      </div>
    </md-card-content>
  </md-card>
</md-tab>

The datatable css:

.datatable {
  border: 1px solid black;
  border-collapse: collapse;
  font-size: 10px;
  width: 100%;
  overflow-y:scroll;
}

The md-table:

 <md-tab label="Data" >
   <md-card class="datacard">
     <md-card-content>
       <div>
        <div class="datatableheader">
          <md-input-container floatPlaceholder="never" id="filtercontainer">
            <input mdInput #filter placeholder="Filter services" />
          </md-input-container>
        </div>

        <md-table id="datatable" #datatable [dataSource]="resultDataSource" mdSort>

          <ng-container cdkColumnDef="Index">
            <md-header-cell *cdkHeaderCellDef md-sort-header>Index</md-header-cell>
            <md-cell *cdkCellDef="let result">{{result,Index}}</md-cell>
          </ng-container>

          <ng-container cdkColumnDef="Service">
            <md-header-cell *cdkHeaderCellDef md-sort-header>Service</md-header-cell>
            <md-cell *cdkCellDef="let result">{{result.Service}}</md-cell>
          </ng-container>

          <ng-container cdkColumnDef="Region">
            <md-header-cell *cdkHeaderCellDef md-sort-header>Region</md-header-cell>
            <md-cell *cdkCellDef="let result">{{result.Region}}</md-cell>
          </ng-container>


        </md-table>

        <md-paginator #paginator
                      [length]="results.length"
                      [pageIndex]="0"
                      [pageSize]="25"
                      [pageSizeOptions]="[5, 10, 25, 100]">
        </md-paginator>

      </div>
    </md-card-content>
  </md-card>
</md-tab>

I've helped fix some of the issue with overflow/overlap of text by setting .mat-row { height: auto }, but what I really want is for the table to do the same auto-fit with the columns as the normal table. I've attempted messing with the flex property and resetting width on the rows and columns to initial, but haven't found the right combination of css to get back the original formatting style of the table element.

like image 323
mhaken Avatar asked Aug 04 '17 17:08

mhaken


People also ask

What is MatColumnDef?

MatColumnDef extends CdkColumnDef Column definition for the mat-table. Defines a set of cells available for a table column. Selector: [matColumnDef]


1 Answers

There's an open issue for this right now. See this workaround.

.mat-table {
    display: table;
    width: 100%;

    > .mat-header-row, > .mat-row {
        display: table-row;
        padding: 0;
        border: none;

        > .mat-header-cell, > .mat-cell {
            display: table-cell;
            height: 48px;
            vertical-align: middle;

            border-bottom: 1px solid rgba(0, 0, 0, 0.12);
        }
    }
}

https://plnkr.co/edit/fDX4dgL26Ri0EEmQhSsR?p=preview

like image 151
Will Howell Avatar answered Sep 21 '22 04:09

Will Howell