ENH: formhandler table hide option. Fixes #44 @tejesh

README.md

@@ -303,7 +303,8 @@ The full list of options is below. Simple options can be specified as `data-` at
         Example: `"https://example.org/city/<%- city >"`
       - If `link:` is a function, opens a new window with the URL as `fn(row)`.
         Example: `function(row) { return 'https://example.org/city/' + row.city }`
-    - `hideable`: `true` (default) / `false`. Hides the column
+    - `hideable`: `true` (default) / `false`. Show or hide `Hide` option in header dropdown
+    - `hide`: `true` / `false` (default). Hides the column
     - `unique`: TODO: {dict of query parameter and display value} or [list of values] or function?
 - `table`: Shows the table control. Can be:
   - `true`: displays a table (default)

src/formhandler.js

@@ -47,9 +47,13 @@ function col_defaults(colinfo) {
   if (!('filters' in colinfo) || (colinfo.filters === true))
     colinfo.filters = default_filters[colinfo.type]
 
-  // Hide defaults
+  // Hideable defaults
   if (!('hideable' in colinfo))
     colinfo.hideable = true
+
+  // Hide defaults
+  if (!('hide' in colinfo))
+    colinfo.hide = false
 }
 
 

src/formhandler.template.html

@@ -56,7 +56,8 @@ Each template receives these variables:
   var filtered_cols = args['_c'] && args['_c'].length != options.columns.length ?
                       options.columns.filter(function(col) { return args['_c'].indexOf('-' + col.name) < 0 }) :
                       options.columns
-  var cols = options.columns.length ? filtered_cols : meta.columns
+  var cols = options.columns.length ? filtered_cols : meta.columns;
+  cols = cols.filter(function(col) { return col.hide !== true})
   var form_id = idcount
 %>
 <% if(options.rowTemplate) { %>

test/test-formhandler.html

@@ -37,6 +37,10 @@
   <script>
     tape.onFinish(function () { window.renderComplete = true })
   </script>
+  <div class="hide_col3" data-src="/formhandler-data"></div>
+  <div class="hide_col2" data-src="/formhandler-data"></div>
+  <div class="hide_col" data-src="/formhandler-data"></div>
+
   <div class="cell_template1" data-src="/formhandler-data"></div>
   <div class="cell_template2" data-src="/formhandler-data"></div>
   <div class="cell_template3" data-src="/formhandler-data"></div>
@@ -88,6 +92,64 @@
           t.end()
         })
     })
+    tape('$().formhandler() hide options doesnot display the column', function(t) {
+      $('.hide_col')
+        .formhandler({
+          columns: [
+            {
+              name: 'Continent',
+              hide: true
+            }
+          ]
+        })
+        .on('load', function () {
+          t.equals($('body > div.hide_col > div.position-relative > div.formhandler > div.table > table > thead').text().trim(), "")
+          t.end()
+        })
+    })
+    tape('$().formhandler() hide options doesnot display the column (using multiple columns)', function(t) {
+      $('.hide_col2')
+        .formhandler({
+          columns: [
+            {
+              name: 'Continent',
+              hide: true
+            },
+            {
+              name: 'c1'
+            }
+          ],
+          pageSize: 3
+        })
+        .on('load', function () {
+          t.equals($("body > div.hide_col2 > div.position-relative > div.formhandler > div.table > table > thead > tr").length, 1)
+          t.ok($("body > div.hide_col2 > div.position-relative > div.formhandler > div.table > table > thead > tr").text().startsWith(" c1"))
+          t.end()
+        })
+    })
+    tape('$().formhandler() hide options doesnot display the column (using * all columns)', function(t) {
+      $('.hide_col3')
+        .formhandler({
+          columns: [
+            {
+              name: '*'
+            },
+            {
+              name: 'Continent',
+              hide: true
+            },
+            {
+              name: 'c1'
+            }
+          ],
+          pageSize: 3
+        })
+        .on('load', function () {
+          t.equals($('[data-col="Continent"]', $("body > div.hide_col3 > div.position-relative > div.formhandler > div.table > table > thead > tr")).length, 0)
+          t.ok($('[data-col]', $("body > div.hide_col3 > div.position-relative > div.formhandler > div.table > table > thead > tr")).length > 0)
+          t.end()
+        })
+    })
     tape('$().formhandler() uses option.src if no data-src exists', function (t) {
       $('.fh2')
         .formhandler({ src: 'formhandler-small.json' })