How to make Angular Material Table with sticky first column

Question

Is there any way to make Angular Material with a sticky first column using CSS?.

Here is ready to edit Stackblitz code

I have tried to adapt this solution https://jsfiddle.net/zinoui/BmLpV/ but for some reasons, the first column is thrown out of the table itself and it loses styling.

<div class="zui-wrapper">
    <div class="zui-scroller">
        <table class="zui-table">
            <thead>
                <tr>
                    <th class="zui-sticky-col">Name</th>..........
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="zui-sticky-col">DeMarcus Cousins</td>
.......
                <tr>
            </tbody>
        </table>
    </div>
</div>


.zui-scroller {
    margin-left: 141px;
    overflow-x: scroll;
    overflow-y: visible;
    padding-bottom: 5px;
    width: 300px;
}
.zui-table .zui-sticky-col {
    border-left: solid 1px #DDEFEF;
    border-right: solid 1px #DDEFEF;
    left: 0;
    position: absolute;
    top: auto;
    width: 120px;
}

Scurrile

Answer 1

With the Angular Material version 6 this has been made easy.

You can add sticky tag on columns that need to be sticky on the left of the table and stickyEnd tag for the ones on the right of the table.

Here is a Stackblitz example and official documentation.

Equilibrant

Answer 2

td:first-child, th:first-child {
  position:sticky;
  left:0;
  z-index:1;
  background-color:grey;
}

Moncton

Answer 3

I have used stickyEnd to achieve this like below.

 <ng-container matColumnDef="12" class="white-bg" stickyEnd>
</ng-container>

Decomposed

Answer 4

.mat-table-sticky:first-child {
    border-right: 1px solid #e0e0e0;
}

<ng-container
            matColumnDef="name"
            sticky
>
</ng-container>

---

`

.mat-table-sticky:first-child {
    border-right: 1px solid #e0e0e0;
}

`

---

Briolette

There is no explanation as to why this answers the question. Could you add some clarity please? In addition, please read our tour page. – Primm

Answer 5

in template.html to table (#table)

<table mat-table #table>

====Component.ts

 @ViewChild(MatTable) table!: MatTable<any>;

 ngAfterViewChecked(): void {
   if (this.table) {
     this.table.updateStickyColumnStyles();
   }
 }

Amaranth

Answer 6

It worked for me using;

:host ::ng-deep .mat-cell:first-child, .mat-header-cell:first-child {
  position: sticky;
  position: -webkit-sticky;
  right:0;
  z-index:1;
  background:inherit;
  border-left: 1px solid grey;
}

Blindly