Angular material Sticky column more than 1 column - angular7

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.

Answer 3

I work around that by overriding sticky css and use sticky as attribute too. It works for me in my case with its three sticky headers
<ng-container matColumnDef="name" sticky class="mat-col-name">
<th mat-header-cell *matHeaderCellDef class="mat-col-name"> Name </th>
<td mat-cell *matCellDef="let element" class="mat-col-name"> {{element.name}} </td>
</ng-container>
<ng-container matColumnDef="address" sticky class="mat-col-address">
<th mat-header-cell *matHeaderCellDef class="mat-col-address"> Address</th>
<td mat-cell *matCellDef="let element" class="mat-col-address"> {{element.address}} </td>
</ng-container>
css:
.mat-col-name {
width: 100px;
top: 56px;
z-index: 101;
left: 0px;
position: sticky;
}
.mat-col-address {
left: 100px !important;
width: 100px;
top: 56px;
z-index: 101;
position: sticky;
}

Answer 4

When using sticky for 3 columns, in the Angular material table.
I was finding a distorted view for sticky columns with added white space within them, this was because of the inbuilt CSS property of the sticky attribute. In my local, I didn't give any left or width CSS in code, but ongoing to DOM it was taking extra left space.
So I solved this using the below CSS by overriding the CSS of the sticky attribute.
HTML:
<ng-container matColumnDef="level" class="mat-col-levelDefault " sticky>
<th mat-header-cell *matHeaderCellDef> Level </th>
<td mat-cell *matCellDef="let element"> {{element.level}} </td>
</ng-container>
CSS:
.mat-col-levelDefault {
left: 200px !important;
width: 100px;
top: 56px;
z-index: 101;
position: sticky;
}

Answer 5

Instead of just writing sticky, prefer writing [sticky]="true" at both positions, that should probably do. Rest the angular material will auto adjust.
Code Below:-
<ng-container matColumnDef="name" [sticky]="true">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<ng-container matColumnDef="address" [sticky]="true">
<th mat-header-cell *matHeaderCellDef> Address</th>
<td mat-cell *matCellDef="let element"> {{element.address}} </td>
</ng-container>