Allow multiple rows inside single table

lib/componentFactory.js

@@ -13,7 +13,29 @@ module.exports = function(element) {
     // <column>
     case this.components.columns:
       return this.makeColumn(element, 'columns');
+
+    // <column2>  
+    case this.components.columns2:
+      return this.makeColumn2(element, 'columns2');
+
+    // <innerrow>  
+    case this.components.innerrow:
+      var classes = ['innerrow'];
+      if (element.attr('class')) {
+        classes = classes.concat(element.attr('class').split(' '));
+      }
+
+      return format('<tr class="%s">%s</tr>', classes.join(' '), inner);
+
+    // <row2>
+    case this.components.row2:
+      var classes = ['row2'];
+      if (element.attr('class')) {
+        classes = classes.concat(element.attr('class').split(' '));
+      }
 
+      return format('<table class="%s"><tbody>%s</tbody></table>', classes.join(' '), inner);
+
     // <row>
     case this.components.row:
       var classes = ['row'];

lib/inky.js

@@ -24,7 +24,10 @@ function Inky(options) {
     menuItem: 'item',
     center: 'center',
     spacer: 'spacer',
-    wrapper: 'wrapper'
+    wrapper: 'wrapper',
+    columns2: 'columns2',
+    innerrow: 'innerrow',
+    row2: 'row2'
   }, options.components || {});
 
   // Column count for grid
@@ -62,3 +65,5 @@ Inky.prototype.releaseTheKraken = function($) {
 Inky.prototype.componentFactory = require('./componentFactory');
 
 Inky.prototype.makeColumn = require('./makeColumn');
+
+Inky.prototype.makeColumn2 = require('./makeColumn2');

lib/makeColumn2.js

@@ -0,0 +1,57 @@
+var format = require('util').format;
+var multiline = require('multiline');
+var $ = require('cheerio');
+
+/**
+ * Returns output for column elements.
+ * @todo This could be refactored to handle both cols and subcols.
+ * @param {string} col - Column to format.
+ * @returns {string} Column HTML.
+ */
+module.exports = function(col) {
+  var output  = '';
+  var inner   = $(col).html();
+  var classes = [];
+  var expander = '';
+
+  // Add 1 to include current column
+  var colCount = $(col).siblings().length + 1;
+
+  // Inherit classes from the <column> tag
+  if ($(col).attr('class')) {
+    classes = classes.concat($(col).attr('class').split(' '));
+  }
+
+  // Check for sizes. If no attribute is provided, default to small-12. Divide evenly for large columns
+  var smallSize = $(col).attr('small') || this.columnCount;
+  var largeSize = $(col).attr('large') || $(col).attr('small') || Math.floor(this.columnCount / colCount);
+
+  classes.push(format('small-%s', smallSize));
+  classes.push(format('large-%s', largeSize));
+
+  // Add the basic "columns" class also
+  classes.push('columns');
+
+  // Determine if it's the first or last column, or both
+  if (!$(col).prev(this.components.columns).length) classes.push('first');
+  if (!$(col).next(this.components.columns).length) classes.push('last');
+
+  // If the column contains a nested row, the .expander class should not be used
+  // The == on the first check is because we're comparing a string pulled from $.attr() to a number
+  if (largeSize == this.columnCount && col.find('.innerrow, innerrow').length === 0) {
+    expander = '\n<th class="expander"></th>';
+  }
+
+  // Final HTML output
+  output = multiline(function() {/*
+    <th class="%s">
+      <table>
+        <tr>
+          <th>%s</th>%s
+        </tr>
+      </table>
+    </th>
+  */});
+
+  return format(output, classes.join(' '), inner, expander);
+}