Add different color to fixed columns

src/app/pages/tables/bikes/bikes.component.html

@@ -78,7 +78,7 @@
         <th mat-header-cell *matHeaderCellDef></th>
         <td mat-cell *matCellDef="let element">
           <div class="button-wrapper">
-            <button mat-icon-button>
+            <button mat-icon-button (click)="edit(element.id)">
               <mat-icon>edit</mat-icon>
             </button>
             <button mat-icon-button>

src/app/pages/tables/bikes/bikes.component.scss

@@ -20,6 +20,11 @@
         box-sizing: border-box;
       }
 
+      .mat-table-sticky {
+        filter: brightness(90%);
+        //opacity: 1;
+      }
+
       .button-wrapper {
         display: flex;
         flex-direction: row;

src/app/pages/tables/bikes/bikes.component.ts

@@ -21,9 +21,12 @@ export class BikesComponent {
     bikesService.loadBikes();
   }
 
+  edit(id: string) {
+    console.log(id);
+  }
+
   drop(event: CdkDragDrop<string[]>) {
-    console.log(event);
-    moveItemInArray(this.displayedColumns, event.previousIndex + 1, event.currentIndex + 1); // + 1 because the first (selection) column is not dragable
+    moveItemInArray(this.displayedColumns, event.previousIndex + 2, event.currentIndex + 2); // +2 because the first 2 (selection + name) columns are not dragable
   }
 
   /** Whether the number of selected elements matches the total number of rows. */