Angular material Sticky column more than 1 column

Question

im curently using angular ver 7 with angular cli and also angular material the lastest version

im get to the point when using the angular table with sticky column position

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

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

but when im serve it in the browser the sticky column all mess up, there is some space beetween them so when im scroll to the right, the animation seems so off

it is the right way to use 2 sticky?

Answer 1

Solved but in a clumsy way. The Angular 7 material table columns require percentage width positioning to be correctly aligned. Anyways I ended up giving fixed width to columns which are sticky from .scss file *e.g. * in your case

.mat-col-name 
{
  left: 0px;
  width: 100px 
}
.mat-col-address 
{
  left: 100px;
  width: 100px;
}

Notice that left has to be positioned exactly. This along with sticky tag on these two columns in the HTML template made it work properly for me.

EDIT: In newest version of Angular you need to use .mat-column.

.mat-column-name 
{
  left: 0px;
  width: 100px 
}
.mat-column-address 
{
  left: 100px;
  width: 100px;
}

Answer 2

Was having the same issue. The sticky columns are collapsing and there's weird spacing between columns caused by the sticky attribute. This means when you scroll across the table, there's an accordion effect on sticky column sizes and the content on the lower/non sticky scrolling column is showing up under the top/sticky columns.

Solution:

Set min-width and max-width on each sticky column to be the same value - I used px.