New version 3.1.5

GruntFile.js

@@ -105,14 +105,21 @@ module.exports = function (grunt) {
 				],
 				dest: "compiled/footable.state.js"
 			},
+			export_js: {
+				src: [
+					"src/js/components/export/**/*.js"
+				],
+				dest: "compiled/footable.export.js"
+			},
 			all_js: {
 				src: [
 					"compiled/footable.core.js",
 					"compiled/footable.filtering.js",
 					"compiled/footable.sorting.js",
 					"compiled/footable.paging.js",
 					"compiled/footable.editing.js",
-					"compiled/footable.state.js"
+					"compiled/footable.state.js",
+					"compiled/footable.export.js"
 				],
 				dest: "compiled/footable.js"
 			},
@@ -156,7 +163,8 @@ module.exports = function (grunt) {
 					'compiled/footable.sorting.min.js': [ "compiled/footable.sorting.js" ],
 					'compiled/footable.paging.min.js': [ "compiled/footable.paging.js" ],
 					'compiled/footable.editing.min.js': [ "compiled/footable.editing.js" ],
-					'compiled/footable.state.min.js': [ "compiled/footable.state.js" ]
+					'compiled/footable.state.min.js': [ "compiled/footable.state.js" ],
+					'compiled/footable.export.min.js': [ "compiled/footable.export.js" ]
 				}
 			}
 		},
@@ -259,7 +267,9 @@ module.exports = function (grunt) {
 						'footable.editing.js',
 						'footable.editing.min.js',
 						'footable.state.js',
-						'footable.state.min.js'
+						'footable.state.min.js',
+						'footable.export.js',
+						'footable.export.min.js'
 					],
 					dest: 'js/'
 				}]

README.md

@@ -8,11 +8,14 @@ Pull requests need to be made against the [develop branch](https://github.com/fo
 
 # Changelog #
 
-### 3.1.5 - Development
+### 3.1.5
 
+- Added two new events `expanded.ft.row` and `collapsed.ft.row` that occur after there complementary `expand.ft.row` and `collapse.ft.row` events.
+- Added a new `FooTable.Export` component which exposes two primary methods on the `FooTable.Table` object, `.toJSON()` and `.toCSV()`.
+- Added a new `array` column type to make rendering JavaScript arrays as cell contents easier.
 - Added a new `object` column type to make rendering JavaScript objects containing multiple properties as cell contents easier.
-- Added a new `container` option to the filtering component. This option allows you to provide a selector to specify where the filtering form is rendered. The selector should match only a single element but if multiple are found only the first is used.
-- Added a new `container` option to the paging component. This option allows you to provide a selector to specify where the paging UI is rendered. The selector should match only a single element but if multiple are found only the first is used.
+- Added a new `container` option to the filtering component. This option allows you to provide a selector to specify where the filtering form is rendered. The selector should match only a single element and if multiple are found only the first is used.
+- Added a new `container` option to the paging component. This option allows you to provide a selector to specify where the paging UI is rendered. The selector should match only a single element and if multiple are found only the first is used.
 - Added `redrawSelf` as an extra parameter to the `FooTable.Cell#val(value, redraw, redrawSelf)` and `FooTable.Row#val(value, redraw, redrawSelf)` methods. This parameter dictates whether the row or cell updates its' own DOM when a value is set.
 - Updated the `FooTable.Paging#pageSize` method to also accept string values. If the parameter is not supplied or is not a valid number the current page size is returned.
 - Updated the `FooTable.Filtering#filter` method to accept a single boolean param simply called `focus`, if supplied and true the default search input receives focus after the component performs a filter operation. This new param is used internally when auto applying a query after a user types in the search input, or clicks the search/clear buttons. This behavior can be disabled by setting the new `filtering.focus` option to `false`.
@@ -21,6 +24,7 @@ Pull requests need to be made against the [develop branch](https://github.com/fo
 - Fixed an issue in the sorting component where values in a number column supplied as strings were being sorted as such and not as numbers as they should.
 - Fixed an issue with the `FooTable.NumberColumn` where it was converting negative numbers to positive when parsing values directly from the DOM.
 - Fixed the `FooTable.Table#_construct` method which was not returning a promise as it should have been doing.
+- Fixes memory leak when destroying the table, properties that were holding onto references should now be cleared.
 
 ----------
 

compiled/footable.bootstrap.css

@@ -1,6 +1,6 @@
 /*
 * FooTable v3 - FooTable is a jQuery plugin that aims to make HTML tables on smaller devices look awesome.
-* @version 3.1.4
+* @version 3.1.5
 * @link http://fooplugins.com
 * @copyright Steven Usher & Brad Vincent 2015
 * @license Released under the GPLv3 license.

compiled/footable.core.bootstrap.css

@@ -1,6 +1,6 @@
 /*
 * FooTable v3 - FooTable is a jQuery plugin that aims to make HTML tables on smaller devices look awesome.
-* @version 3.1.4
+* @version 3.1.5
 * @link http://fooplugins.com
 * @copyright Steven Usher & Brad Vincent 2015
 * @license Released under the GPLv3 license.

compiled/footable.core.js

@@ -1,6 +1,6 @@
 /*
 * FooTable v3 - FooTable is a jQuery plugin that aims to make HTML tables on smaller devices look awesome.
-* @version 3.1.4
+* @version 3.1.5
 * @link http://fooplugins.com
 * @copyright Steven Usher & Brad Vincent 2015
 * @license Released under the GPLv3 license.
@@ -1295,6 +1295,14 @@
 			 * @default -1
 			 */
 			this.index = F.is.number(definition.index) ? definition.index : -1;
+			/**
+			 * Whether or not this in an internal only column.
+			 * @instance
+			 * @readonly
+			 * @type {boolean}
+			 * @description Internal columns or there cells will not be returned when calling methods such as `FooTable.Row#val`.
+			 */
+			this.internal = false;
 			this.define(definition);
 			this.$create();
 		},
@@ -1689,7 +1697,9 @@
 				if (!F.is.hash(this.value) || F.is.emptyObject(this.value)){
 					this.value = {};
 					F.arr.each(this.cells, function(cell){
-						self.value[cell.column.name] = cell.val();
+						if (!cell.column.internal){
+							self.value[cell.column.name] = cell.val();
+						}
 					});
 				}
 				return this.value;
@@ -1724,7 +1734,9 @@
 
 			redrawSelf = F.is.boolean(redrawSelf) ? redrawSelf : true;
 			F.arr.each(this.cells, function(cell){
-				if (F.is.defined(self.value[cell.column.name])) cell.val(self.value[cell.column.name], false, redrawSelf);
+				if (!cell.column.internal && F.is.defined(self.value[cell.column.name])){
+					cell.val(self.value[cell.column.name], false, redrawSelf);
+				}
 			});
 
 			if (this.created && redrawSelf){
@@ -1786,6 +1798,7 @@
 				self.$el.attr('data-expanded', true);
 				self.$toggle.removeClass('fooicon-plus').addClass('fooicon-minus');
 				self.expanded = true;
+				self.ft.raise('expanded.ft.row', [self]);
 			});
 		},
 		/**
@@ -1813,6 +1826,7 @@
 				self.$el.removeAttr('data-expanded');
 				self.$toggle.removeClass('fooicon-minus').addClass('fooicon-plus');
 				if (F.is.boolean(setExpanded) ? setExpanded : true) self.expanded = false;
+				self.ft.raise('collapsed.ft.row', [self]);
 			});
 		},
 		/**
@@ -2129,6 +2143,7 @@
 					if (F.is.hash(self.o.on)) self.$el.off(self.o.on);
 					$(window).off('resize.ft'+self.id, self._onWindowResize);
 					self.initialized = false;
+					F.instances[self.id] = null;
 				});
 			}).fail(function(err){
 				if (F.is.error(err)){
@@ -2315,6 +2330,61 @@
 		}
 	});
 
+})(jQuery, FooTable);
+(function($, F){
+
+	F.ArrayColumn = F.Column.extend(/** @lends FooTable.ArrayColumn */{
+		/**
+		 * @summary A column to handle Array values.
+		 * @constructs
+		 * @extends FooTable.Column
+		 * @param {FooTable.Table} instance -  The parent {@link FooTable.Table} this column belongs to.
+		 * @param {object} definition - An object containing all the properties to set for the column.
+		 */
+		construct: function(instance, definition) {
+			this._super(instance, definition, 'array');
+		},
+		/**
+		 * @summary Parses the supplied value or element to retrieve a column value.
+		 * @description This is supplied either the cell value or jQuery object to parse. This method will return either the Array containing the values or null.
+		 * @instance
+		 * @protected
+		 * @param {(*|jQuery)} valueOrElement - The value or jQuery cell object.
+		 * @returns {(array|null)}
+		 */
+		parser: function(valueOrElement){
+			if (F.is.element(valueOrElement) || F.is.jq(valueOrElement)){ // use jQuery to get the value
+				var $el = $(valueOrElement), data = $el.data('value'); // .data() will automatically convert a JSON string to an array
+				if (F.is.array(data)) return data;
+				data = $el.html();
+				try {
+					data = JSON.parse(data);
+				} catch(err) {
+					data = null;
+				}
+				return F.is.array(data) ? data : null; // if we have an array return it
+			}
+			if (F.is.array(valueOrElement)) return valueOrElement; // if we have an array return it
+			return null; // otherwise we have no value so return null
+		},
+		/**
+		 * @summary Formats the column value and creates the HTML seen within a cell.
+		 * @description This is supplied the value retrieved from the {@link FooTable.ArrayColumn#parser} function and must return a string, HTMLElement or jQuery object.
+		 * The return value from this function is what is displayed in the cell in the table.
+		 * @instance
+		 * @protected
+		 * @param {?Array} value - The value to format.
+		 * @param {object} options - The current plugin options.
+		 * @param {object} rowData - An object containing the current row data.
+		 * @returns {(string|HTMLElement|jQuery)}
+		 */
+		formatter: function(value, options, rowData){
+			return F.is.array(value) ? JSON.stringify(value) : '';
+		}
+	});
+
+	F.columns.register('array', F.ArrayColumn);
+
 })(jQuery, FooTable);
 (function($, F){
 
@@ -3432,6 +3502,7 @@
 				F.arr.each(self.array, function(row){
 					row.predraw(!self._fromHTML);
 				});
+				self.all = self.array = [];
 			});
 		},
 		/**

compiled/footable.core.standalone.css

@@ -1,6 +1,6 @@
 /*
 * FooTable v3 - FooTable is a jQuery plugin that aims to make HTML tables on smaller devices look awesome.
-* @version 3.1.4
+* @version 3.1.5
 * @link http://fooplugins.com
 * @copyright Steven Usher & Brad Vincent 2015
 * @license Released under the GPLv3 license.

compiled/footable.editing.css

@@ -1,6 +1,6 @@
 /*
 * FooTable v3 - FooTable is a jQuery plugin that aims to make HTML tables on smaller devices look awesome.
-* @version 3.1.4
+* @version 3.1.5
 * @link http://fooplugins.com
 * @copyright Steven Usher & Brad Vincent 2015
 * @license Released under the GPLv3 license.

compiled/footable.editing.js

@@ -1,6 +1,6 @@
 /*
 * FooTable v3 - FooTable is a jQuery plugin that aims to make HTML tables on smaller devices look awesome.
-* @version 3.1.4
+* @version 3.1.5
 * @link http://fooplugins.com
 * @copyright Steven Usher & Brad Vincent 2015
 * @license Released under the GPLv3 license.
@@ -524,6 +524,7 @@
 		construct: function(instance, editing, definition){
 			this._super(instance, definition, 'editing');
 			this.editing = editing;
+			this.internal = true;
 		},
 		/**
 		 * After the column has been defined this ensures that the $el property is a jQuery object by either creating or updating the current value.