Add fixed columns add selection to table

src/app/app.module.ts

@@ -3,6 +3,9 @@ import { NgModule } from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
 
+import {DragDropModule} from '@angular/cdk/drag-drop';
+
+
 // Angular Material Components
 import {MatToolbarModule} from '@angular/material/toolbar';
 import {MatButtonModule} from '@angular/material/button';
@@ -16,6 +19,7 @@ import {MatListModule} from '@angular/material/list';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import {MatProgressBarModule} from '@angular/material/progress-bar';
+import {MatCheckboxModule} from '@angular/material/checkbox';
 
 
 import { AppRoutingModule } from './app-routing.module';
@@ -58,7 +62,9 @@ import { TableOverviewComponent } from './pages/table-overview/table-overview.co
     MatFormFieldModule,
     MatProgressSpinnerModule,
     MatProgressBarModule,
-    GraphQLModule
+    MatCheckboxModule,
+    GraphQLModule,
+    DragDropModule
   ],
   providers: [],
   bootstrap: [AppComponent]

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

@@ -2,46 +2,84 @@
   <button mat-raised-button color="primary">Primary</button>
   <button mat-raised-button color="accent">Accent</button>
 </div>
-<table mat-table [dataSource]="bikes" class="mat-elevation-z8">
+<div id="table-container">
-  <!--- Note that these columns can be defined in any order.
+  <table
+    mat-table
+    [dataSource]="bikes"
+    class="mat-elevation-z8"
+    cdkDropList
+    cdkDropListOrientation="horizontal"
+    (cdkDropListDropped)="drop($event)"
+  >
+    <!--- Note that these columns can be defined in any order.
         The actual rendered columns are set as a property on the row definition" -->
 
-  <!-- Position Column -->
+    <!-- Checkbox Column -->
-  <ng-container matColumnDef="id">
+    <ng-container matColumnDef="select" sticky>
-    <th mat-header-cell *matHeaderCellDef>ID</th>
+      <th mat-header-cell *matHeaderCellDef>
-    <td mat-cell *matCellDef="let element">{{ element.id }}</td>
+        <mat-checkbox
-  </ng-container>
+          (change)="$event ? masterToggle() : null"
+          [checked]="selection.hasValue() && isAllSelected()"
+          [indeterminate]="selection.hasValue() && !isAllSelected()"
+        >
+        </mat-checkbox>
+      </th>
+      <td mat-cell *matCellDef="let row">
+        <mat-checkbox
+          (click)="$event.stopPropagation()"
+          (change)="$event ? selection.toggle(row) : null"
+          [checked]="selection.isSelected(row)"
+        >
+        </mat-checkbox>
+      </td>
+    </ng-container>
 
-  <!-- Name Column -->
+    <!-- Name Column -->
-  <ng-container matColumnDef="name">
+    <ng-container matColumnDef="name">
-    <th mat-header-cell *matHeaderCellDef>Name</th>
+      <th mat-header-cell *matHeaderCellDef>Name</th>
-    <td
+      <td
-      mat-cell
+        mat-cell
-      *matCellDef="let element"
+        *matCellDef="let element"
-      contenteditable
+        contenteditable
-      (input)="onTableInput(element)"
+        (input)="onTableInput(element)"
-    >
+      >
-      {{ element.name }}
+        {{ element.name }}
-    </td>
+      </td>
-  </ng-container>
+    </ng-container>
 
-  <!-- Weight Column -->
+    <!-- ID Column -->
-  <ng-container matColumnDef="frameNumber">
+    <ng-container matColumnDef="id">
-    <th mat-header-cell *matHeaderCellDef>Fahrgestellnummer</th>
+      <th mat-header-cell cdkDrag *matHeaderCellDef>ID</th>
-    <td mat-cell *matCellDef="let element">
+      <td mat-cell *matCellDef="let element">{{ element.id }}</td>
-      <!--<mat-form-field>
+    </ng-container>
+
+    <!-- FrameNumber Column -->
+    <ng-container matColumnDef="frameNumber">
+      <th mat-header-cell cdkDrag *matHeaderCellDef>Fahrgestellnummer</th>
+      <td mat-cell *matCellDef="let element">
+        <!--<mat-form-field>
         <input matInput color="warn" [value]="element.security.frameNumber"/>
       </mat-form-field>-->
-      {{ element.security.frameNumber }}
+        {{ element.security.frameNumber }}
-    </td>
+      </td>
-  </ng-container>
+    </ng-container>
+
+    <!-- NumberOfChildren Column -->
+    <ng-container matColumnDef="numberOfChildren">
+      <th mat-header-cell cdkDrag *matHeaderCellDef>Anzahl Kinder</th>
+      <td mat-cell *matCellDef="let element">{{ element.numberOfChildren }}</td>
+    </ng-container>
 
-  <!-- Symbol Column -->
+    <!-- Buttons Column -->
-  <ng-container matColumnDef="numberOfChildren">
+    <ng-container matColumnDef="buttons" stickyEnd>
-    <th mat-header-cell *matHeaderCellDef>Anzahl Kinder</th>
+      <th mat-header-cell *matHeaderCellDef></th>
-    <td mat-cell *matCellDef="let element">{{ element.numberOfChildren }}</td>
+      <td mat-cell *matCellDef="let element">
-  </ng-container>
+        <mat-icon>more_vert</mat-icon>
+      </td>
+    </ng-container>
 
-  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <!-- Table Definition -->
-  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
-</table>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+  </table>
+</div>

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

@@ -1,6 +1,24 @@
 .table-control {
-    margin: 0.5em;
+  margin: 0.5em;
 }
-table {
+#table-container {
+  width: 100%;
+  max-width: 100%;
+  overflow: auto;
+  table {
     width: 100%;
-}
+    th.mat-column-name,
+    td.mat-column-name {
+      padding-left: 8px;
+    }
+
+    .mat-table-sticky:first-child {
+      border-right: 1px solid #ffffff1f;
+      padding-right: 1em;
+    }
+
+    .mat-table-sticky:last-child {
+      border-left: 1px solid #ffffff1f;
+    }
+  }
+}

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

@@ -1,4 +1,6 @@
+import { SelectionModel } from '@angular/cdk/collections';
 import { Component, OnInit } from '@angular/core';
+import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';
 import { BikesService, CargoBikeResult } from 'src/app/services/bikes.service';
 
 @Component({
@@ -7,13 +9,34 @@ import { BikesService, CargoBikeResult } from 'src/app/services/bikes.service';
   styleUrls: ['./bikes.component.scss'],
 })
 export class BikesComponent {
-  displayedColumns: string[] = ['id', 'name', 'frameNumber', 'numberOfChildren'];
+  displayedColumns: string[] = ['select', 'name', 'id', 'frameNumber', 'numberOfChildren', 'buttons'];
   
   bikes: CargoBikeResult[];
+  selection = new SelectionModel<CargoBikeResult>(true, []);
+
 
   constructor(private bikesService: BikesService) {
     bikesService.bikes.subscribe(bikes => this.bikes = bikes);
 
     bikesService.loadBikes();
   }
+
+  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
+  }
+
+  /** Whether the number of selected elements matches the total number of rows. */
+  isAllSelected() {
+    const numSelected = this.selection.selected.length;
+    const numRows = this.bikes.length;
+    return numSelected === numRows;
+  }
+
+  /** Selects all rows if they are not all selected; otherwise clear selection. */
+  masterToggle() {
+    this.isAllSelected() ?
+        this.selection.clear() :
+        this.bikes.forEach(row => this.selection.select(row));
+  }
 }