Allow default JS options to be overwritten for TableBlocks

CHANGELOG.txt

@@ -5,6 +5,7 @@ Changelog
 ~~~~~~~~~~~~~~~~~
 
  * Fix: Unauthenticated AJAX requests to admin views now return 403 rather than redirecting to the login page (Karl Hobley)
+ * Fix: `TableBlock` options `afterChange`, `afterCreateCol`, `afterCreateRow`, `afterRemoveCol`, `afterRemoveRow` and `contextMenu` can now be overridden (Loic Teixeira)
 
 
 1.10 (xx.xx.xxxx) - IN DEVELOPMENT

docs/releases/1.11.rst

@@ -19,6 +19,7 @@ Bug fixes
 ~~~~~~~~~
 
  * Unauthenticated AJAX requests to admin views now return 403 rather than redirecting to the login page (Karl Hobley)
+ * ``TableBlock`` options ``afterChange``, ``afterCreateCol``, ``afterCreateRow``, ``afterRemoveCol``, ``afterRemoveRow`` and ``contextMenu`` can now be overridden (Loic Teixeira)
 
 
 Upgrade considerations

wagtail/contrib/table_block/static/table_block/js/table.js

@@ -8,6 +8,7 @@ function initTable(id, tableOptions) {
     var tableHeaderCheckbox = $('#' + tableHeaderCheckboxId);
     var colHeaderCheckbox = $('#' + colHeaderCheckboxId);
     var hot;
+    var defaultOptions;
     var finalOptions = {};
     var persist;
     var cellEvent;
@@ -43,18 +44,7 @@ function initTable(id, tableOptions) {
         // do nothing
     }
 
-    for (var key in tableOptions) {
-        if (tableOptions.hasOwnProperty(key)) {
-            finalOptions[key] = tableOptions[key];
-        }
-    }
-
     if (dataForForm !== null) {
-        if (dataForForm.hasOwnProperty('data')) {
-            // Overrides default value from tableOptions (if given) with value from database
-            finalOptions.data = dataForForm.data;
-        }
-
         if (dataForForm.hasOwnProperty('first_row_is_table_header')) {
             tableHeaderCheckbox.prop('checked', dataForForm.first_row_is_table_header);
         }
@@ -102,25 +92,40 @@ function initTable(id, tableOptions) {
     colHeaderCheckbox.change(function() {
         persist();
     });
-    
-    finalOptions.afterChange = cellEvent;
-    finalOptions.afterCreateCol = structureEvent;
-    finalOptions.afterCreateRow = structureEvent;
-    finalOptions.afterRemoveCol = structureEvent;
-    finalOptions.afterRemoveRow = structureEvent;
-    finalOptions.contextMenu = [
-        'row_above',
-        'row_below',
-        '---------',
-        'col_left',
-        'col_right',
-        '---------',
-        'remove_row',
-        'remove_col',
-        '---------',
-        'undo',
-        'redo'
-    ];
+
+    defaultOptions = {
+        afterChange: cellEvent,
+        afterCreateCol: structureEvent,
+        afterCreateRow: structureEvent,
+        afterRemoveCol: structureEvent,
+        afterRemoveRow: structureEvent,
+        contextMenu: [
+            'row_above',
+            'row_below',
+            '---------',
+            'col_left',
+            'col_right',
+            '---------',
+            'remove_row',
+            'remove_col',
+            '---------',
+            'undo',
+            'redo'
+        ]
+    };
+
+    if (dataForForm !== null && dataForForm.hasOwnProperty('data')) {
+        // Overrides default value from tableOptions (if given) with value from database
+        defaultOptions.data = dataForForm.data;
+    }
+
+    Object.keys(defaultOptions).forEach(function (key) {
+        finalOptions[key] = defaultOptions[key];
+    });
+    Object.keys(tableOptions).forEach(function (key) {
+        finalOptions[key] = tableOptions[key];
+    });
+
     hot = new Handsontable(document.getElementById(containerId), finalOptions);
     hot.render(); // Call to render removes 'null' literals from empty cells