#58 - add ability to pin database column left or right

src/app/components/editor/database/columns/columns.component.html

@@ -48,6 +48,25 @@
           <ion-button fill="outline" color="light" (click)="onDeleteClick(i)">
             <ion-icon color="danger" name="trash"></ion-icon>
           </ion-button>
+          <ion-button
+              fill="outline"
+              color="light"
+              (click)="iteratePin(i)"
+              [title]="columnSets[i].additionalData.pinned ? 'Column is pinned to the ' + columnSets[i].additionalData.pinned : 'Column is not pinned'"
+          >
+            <i
+              class="fa fa-caret-square-left"
+              style="font-size: 1.7em; color: #cccccc" *ngIf="columnSets[i].additionalData.pinned === 'left'"
+            ></i>
+            <i
+              class="fa fa-caret-square-right"
+              style="font-size: 1.7em; color: #cccccc" *ngIf="columnSets[i].additionalData.pinned === 'right'"
+            ></i>
+            <i
+              class="fa fa-square"
+              style="font-size: 1.7em; color: #cccccc" *ngIf="!columnSets[i].additionalData.pinned"
+            ></i>
+          </ion-button>
         </ion-row>
         <ion-row>
           <ion-button fill="outline" color="light" size="small" (click)="onUpArrow(i)">

src/app/components/editor/database/columns/columns.component.ts

@@ -84,4 +84,13 @@ export class ColumnsComponent implements OnInit {
     }
   }
 
+  iteratePin(i) {
+    if ( !this.columnSets[i].additionalData.pinned ) {
+      this.columnSets[i].additionalData.pinned = 'left';
+    } else if ( this.columnSets[i].additionalData.pinned === 'left' ) {
+      this.columnSets[i].additionalData.pinned = 'right';
+    } else {
+      delete this.columnSets[i].additionalData.pinned;
+    }
+  }
 }

src/app/components/editor/database/database.component.ts

@@ -225,6 +225,10 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit {
         x.width = x.additionalData.width;
       }
 
+      if ( x.additionalData?.pinned ) {
+        x.pinned = x.additionalData.pinned;
+      }
+
       // Set editors and renderers for different types
       if ( x.Type === 'text' ) {
         x.editor = 'agTextCellEditor';