diff --git a/frontend/src/app/modules/grids/context_menus/column.directive.ts b/frontend/src/app/modules/grids/context_menus/column.directive.ts
index 4468bf247f..4dcef92ff9 100644
--- a/frontend/src/app/modules/grids/context_menus/column.directive.ts
+++ b/frontend/src/app/modules/grids/context_menus/column.directive.ts
@@ -90,7 +90,6 @@ export class GridColumnContextMenu extends OpContextMenuTrigger {
         linkText: "Add column before",
         onClick: () => {
           grid.addColumn(columnNumber - 1);
-          //this.wpTableSortBy.addDescending(c);
           return true;
         }
       },
@@ -98,14 +97,13 @@ export class GridColumnContextMenu extends OpContextMenuTrigger {
         linkText: "Add column after",
         onClick: () => {
           grid.addColumn(columnNumber);
-          //this.wpTableSortBy.addAscending(c);
           return true;
         }
       },
       {
         linkText: "Remove column",
         onClick: () => {
-          //this.wpTableGroupBy.setBy(c);
+          grid.removeColumn(columnNumber);
           return true;
         }
       }
diff --git a/frontend/src/app/modules/grids/grid.component.ts b/frontend/src/app/modules/grids/grid.component.ts
index 038238f1a7..c06e6b072b 100644
--- a/frontend/src/app/modules/grids/grid.component.ts
+++ b/frontend/src/app/modules/grids/grid.component.ts
@@ -252,29 +252,45 @@ export class GridComponent implements OnDestroy, OnInit {
     this.buildAreas();
   }
 
-  public addColumn(after:number) {
+  public addColumn(column:number) {
     this.numColumns++;
 
     this.addAreas(this.buildGridAreasColumn(this.numColumns));
 
     this.gridWidgetAreas.filter((area) => {
-      return area.startColumn > after;
+      return area.startColumn > column;
     }).forEach((area) => {
       area.moveRight();
     });
   }
 
-  //public addColumnBefore(before:number) {
-  //  this.numColumns++;
+  public removeColumn(column:number) {
+    this.numColumns--;
 
-  //  this.gridAreas.push(...this.buildGridAreasColumn(this.numColumns));
+    // remove widgets that only span the removed column
+    this.widgetResources = this.widgetResources.filter((widget) => {
+      return !(widget.startColumn === column && widget.endColumn === column + 1);
+    });
+
+    //shrink widgets that span more than the removed column
+    this.widgetResources.forEach((widget) => {
+      if (widget.startColumn <= column && widget.endColumn >= column + 1) {
+        //shrink widgets that span more than the removed column
+        widget.endColumn--;
+      }
+    });
 
-  //  this.gridWidgetAreas.filter((area) => {
-  //    return area.startColumn >= before;
-  //  }).forEach((area) => {
-  //    area.moveRight();
-  //  });
-  //}
+    // move all widgets that are after the removed column
+    // so that they appear to keep their place.
+    this.widgetResources.filter((widget) => {
+      return widget.startColumn > column;
+    }).forEach((widget) => {
+      widget.startColumn--;
+      widget.endColumn--;
+    });
+
+    this.buildAreas();
+  }
 
   private buildAreas() {
     this.gridAreas = this.buildGridAreas();