Add sections to columnar selector (to support join fields)

resources/frontend_client/app/query_builder/columnar_selector.react.js

@@ -9,25 +9,41 @@ export default React.createClass({
 
     render: function() {
         var columns = this.props.columns.map((column, columnIndex) => {
-            var title, items;
+            var sectionElements;
             if (column) {
                 var lastColumn = columnIndex === this.props.columns.length - 1;
-                title = column.title;
-                items = column.items.map((item, rowIndex) => {
-                    var itemClasses = cx({
-                        'ColumnarSelector-row': true,
-                        'ColumnarSelector-row--selected': item === column.selectedItem
+                var sections = column.sections || [column];
+                sectionElements = sections.map((section, sectionIndex) => {
+                    var title = section.title;
+                    var items = section.items.map((item, rowIndex) => {
+                        var itemClasses = cx({
+                            'ColumnarSelector-row': true,
+                            'ColumnarSelector-row--selected': item === column.selectedItem
+                        });
+                        var checkIcon = lastColumn ? <Icon name="check" width="14" height="14"/> : null;
+                        return (
+                            <li key={rowIndex} className={itemClasses} onClick={column.itemSelectFn.bind(null, item)}>
+                                {checkIcon}
+                                {column.itemTitleFn(item)}
+                            </li>
+                        );
                     });
-                    var checkIcon = lastColumn ? <Icon name="check" width="14" height="14"/> : null;
+                    var titleElement;
+                    if (title) {
+                        titleElement = <div className="ColumnarSelector-title">{title}</div>
+                    }
                     return (
-                        <li key={rowIndex} className={itemClasses} onClick={column.itemSelectFn.bind(null, item)}>{checkIcon}{column.itemTitleFn(item)}</li>
+                        <section key={sectionIndex}>
+                            {titleElement}
+                            <ul className="ColumnarSelector-rows">{items}</ul>
+                        </section>
                     );
                 });
             }
+
             return (
                 <div key={columnIndex} className="ColumnarSelector-column">
-                    <div className="ColumnarSelector-title">{title}</div>
-                    <ul className="ColumnarSelector-rows">{items}</ul>
+                    {sectionElements}
                 </div>
             );
         });