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;
}

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

Answer 2

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

Answer 3

I have used stickyEnd to achieve this like below.

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

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;
}

`

---

Answer 5

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;

} `