diff --git a/app/scripts/controllers/commonmap.js b/app/scripts/controllers/commonmap.js
index ebbb1bca..a0899fb6 100644
--- a/app/scripts/controllers/commonmap.js
+++ b/app/scripts/controllers/commonmap.js
@@ -88,17 +88,49 @@ angular.module('accessimapEditeurDerApp')
         'f0': 'Titre par défaut',
       }];
 
-      var checkboxTemplate = '<input ng-if="row.entity.type === \'boolean\'" type="checkbox" value="{{row.entity[col.field]}}" ng-model="row.entity[col.field]"><div ng-if="row.entity.type !== \'boolean\'">{{row.entity[col.field]}}</div>';
+      var checkboxTemplate = '<input ng-if="row.entity.type === \'boolean\'" type="checkbox" value="{{row.entity[col.field]}}" ng-model="row.entity[col.field]">';
+      checkboxTemplate += '<div ng-if="row.entity.type !== \'boolean\'">{{row.entity[col.field]}}</div>';
+
+      var menuItems = [
+        {
+          title: 'Supprimer cette colonne',
+          icon: 'ui-grid-icon-cancel',
+          action: function() {
+            var colName = this.context.col.name;
+
+            // Remove the column from interactiveFiltersColumns
+            var columnToDelete = interactiveFiltersColumns.filter(function(col) {
+              return col.name === colName;
+            });
+            var index = interactiveFiltersColumns.indexOf(columnToDelete[0]);
+            interactiveFiltersColumns.splice(index, 1);
+
+            // Remove the column from interactiveFiltersColumns
+            angular.forEach($scope.interactiveFilters.data, function(row) {
+              delete row[colName];
+            });
+          }
+        }
+      ];
+
+      var interactiveFiltersColumns = [
+        { name: 'id', enableCellEdit: false, enableHiding: false },
+        { name: 'f0', cellTemplate: checkboxTemplate, menuItems: menuItems, enableHiding: false },
+        { name: 'f1', cellTemplate: checkboxTemplate, menuItems: menuItems, enableHiding: false }
+      ];
 
       $scope.interactiveFilters = {
         data: $scope.interactiveFiltersInit,
         showSelectionCheckbox: true,
         enableSorting: false,
-        columnDefs: [
-          { name: 'id', enableCellEdit: false },
-          { name: 'f0', cellTemplate: checkboxTemplate },
-          { name: 'f1', cellTemplate: checkboxTemplate }
-        ],
+        columnDefs: interactiveFiltersColumns,
+      };
+
+      $scope.nextFilterNumber = 2;
+
+      $scope.addFilter = function() {
+        interactiveFiltersColumns.push({ name: 'f' + $scope.nextFilterNumber, cellTemplate: checkboxTemplate, menuItems: menuItems, enableHiding: false });
+        $scope.nextFilterNumber += 1;
       };
 
       d3.select('svg').append('defs')
diff --git a/app/styles/map.scss b/app/styles/map.scss
index e97dc08e..4d4a610d 100644
--- a/app/styles/map.scss
+++ b/app/styles/map.scss
@@ -45,6 +45,6 @@
 }
 
 .myGrid {
-  width: 500px;
+  width: 800px;
   height: 250px;
 }
\ No newline at end of file
diff --git a/app/views/commonmap.html b/app/views/commonmap.html
index dc945988..130cb78f 100644
--- a/app/views/commonmap.html
+++ b/app/views/commonmap.html
@@ -101,7 +101,7 @@
   <span class="pull-right" id="slide-submenu" ng-click="hideMenu()">
     <i class="fa fa-times"></i>
   </span>
-    Ajouter des interactions
-    <div ui-grid="interactiveFilters" ui-grid-edit class="myGrid"></div>
+  <button id="button_add" class="btn btn-success" ng-click="addFilter()">Ajouter un filtre d'interaction</button>
+  <div ui-grid="interactiveFilters" ui-grid-edit class="myGrid"></div>
 </div>