ENH: FormHandler table format accepts object with cell data @tejesh.p

README.md

@@ -511,7 +511,11 @@ The full list of options is below. Simple options can be specified as `data-` at
     - `title`: for header display. Defaults to the same value as `name`
     - `type`: `text` (default) / `number` / `date`. Data type. Determines filters to be used
     - `format`: string / function that returns formatted value.
-      - function(row, data) returns formatted value
+      - function accepts an object with these keys:
+        - `name`: column name
+        - `value`: cell data value
+        - `row`: row data
+        - `data`: the dataset from `src`
       - strings specify a numeral.js format if the value is a number (you must include numeral.js)
       - strings specify a moment.js format if the value is a date (you must include moment.js)
     - `editable`: `true` (default) / `false`. When `true`, edit and save buttons appears at end of each row.

src/formhandler.template.html

@@ -122,7 +122,7 @@ Each template receives these variables:
                     val = row[colinfo.name],
                     isEditable = colinfo.editable === undefined ? true : colinfo.editable,
                     disp = fmt == "function" ?
-                              colinfo.format({row: row, data:data }) :
+                              colinfo.format({name: colinfo.name, value: val, row: row, data:data }) :
                             fmt === "string" && colinfo.type === "number" ?
                               numeral(val).format(colinfo.format) :
                             fmt === "string" && colinfo.type === "date" ?
@@ -318,7 +318,7 @@ Each template receives these variables:
             <% var fmt = typeof(colinfo.format),
                 val = row[colinfo.name],
                 disp = fmt == "function" ?
-                        colinfo.format(row, data) :
+                        colinfo.format({name: colinfo.name, value: val, row: row, data:data }) :
                       fmt === "string" && colinfo.type === "number" ?
                         numeral(val).format(colinfo.format) :
                       fmt === "string" && colinfo.type === "date" ?

test/formhandler-city.json

+[
+  {
+    "city": "KANDIVALI",
+    "AD": 60,
+    "LP": 60,
+    "PS": 60,
+    "PF": 30,
+    "DD": 60,
+    "RR": 60
+  },
+  {
+    "city": "AIROLI",
+    "AD": 50,
+    "LP": 50,
+    "PS": 50,
+    "PF": 30,
+    "DD": 50,
+    "RR": 50
+  },
+  {
+    "city": "SAHIBABAD",
+    "AD": 40,
+    "LP": 40,
+    "PS": 40,
+    "PF": 30,
+    "DD": 40,
+    "RR": 40
+  },
+  {
+    "city": "MANESAR",
+    "AD": 30,
+    "LP": 30,
+    "PS": 30,
+    "PF": 30,
+    "DD": 30,
+    "RR": 30
+  },
+  {
+    "city": "BANGALORE",
+    "AD": 20,
+    "LP": 20,
+    "PS": 20,
+    "PF": 30,
+    "DD": 20,
+    "RR": 20
+  },
+  {
+    "city": "CHENNAI",
+    "AD": 60,
+    "LP": 60,
+    "PS": 60,
+    "PF": 30,
+    "DD": 60,
+    "RR": 60
+  },
+  {
+    "city": "KOLKOTA",
+    "AD": 12,
+    "LP": 12,
+    "PS": 12,
+    "PF": 32,
+    "DD": 12,
+    "RR": 12
+  },
+  {
+    "city": "AHMEDABAD",
+    "AD": 2,
+    "LP": 2,
+    "PS": 2,
+    "PF": 3,
+    "DD": 2,
+    "RR": 2
+  }
+]

test/test-formhandler-single.html

@@ -27,6 +27,7 @@
   <script src="../node_modules/moment/min/moment.min.js"></script>
   <script src="../node_modules/numeral/min/numeral.min.js"></script>
   <script src="../dist/formhandler.min.js"></script>
+  <script src="../dist/scale.min.js"></script>
   <script src="../node_modules/d3/build/d3.js"></script>
   <script src="../node_modules/d3-scale-chromatic/dist/d3-scale-chromatic.js"></script>
   <script src="tape.js"></script>
@@ -38,7 +39,39 @@
     tape.onFinish(function () { window.renderComplete = true })
   </script>
   <div class="row_template1" data-table="grid" data-src="/formhandler-data"></div>
+  <div id="city_table">  </div>
+
   <script>
+    tape('$().formhandler() test format name argument and color scale', function (t) {
+      function colr_scale(arg) {
+        return g1.scale(arg.data, {
+          metric: arg.name,
+          scheme: 'RdYlGn'
+        })(arg.row)
+      }
+
+      $('#city_table').formhandler({
+        src: 'formhandler-city.json',
+        page: false,
+        columns: [
+          {
+            name: 'city'
+          },
+          {
+            name: '*',
+            format: function (arg) {
+              return '<svg height="20" width="20"><rect x="0" y="0" width="20" height="20" fill="' + colr_scale(arg) + '"></rect></svg>'
+            }
+          }
+        ]
+      }).on('load', function () {
+        // if arg.name was accessible, then any of rects rendered wont have black color as fill
+        // debugger
+        t.equals($('#city_table rect').length, $('#city_table rect').filter(function () { return this.getAttribute('fill') != 'rgb(0, 0, 0)' }).length)
+        t.end()
+      })
+    })
+
     tape('$().formhandler() renders rowTemplate as string', function (t) {
       $('.row_template1').formhandler({
         columns: [