diff --git a/docs/example-widget-column-selector.html b/docs/example-widget-column-selector.html
index 40c2731d..4f41ca12 100644
--- a/docs/example-widget-column-selector.html
+++ b/docs/example-widget-column-selector.html
@@ -137,7 +137,13 @@
 
 			// class name added to checked checkboxes - this fixes an issue with Chrome not updating FontAwesome
 			// applied icons; use this class name (input.checked) instead of input:checked
-			columnSelector_cssChecked : 'checked'
+			columnSelector_cssChecked : 'checked',
+
+			// class name added to rows that have a span (e.g. grouping widget & other rows inside the tbody)
+			columnSelector_classHasSpan : 'hasSpan',
+
+			// event triggered when columnSelector completes
+			columnSelector_updated : 'columnUpdate'
 		}
 	});
 
@@ -182,6 +188,7 @@
 		<h3><a href="#">Notes</a></h3>
 		<div>
 		<ul>
+			<li>In <span class="version">v2.29.0</span>, added a <code>columnSelector_classHasSpan</code> setting.</li>
 			<li>In <span class="version">v2.27.0</span>,
 				<ul>
 					<li>Added two new options: <code>columnSelector_maxVisible</code> and <code>columnSelector_minVisible</code>.</li>
@@ -526,6 +533,18 @@
 						</td>
 					</tr>
 
+					<tr id="column-selector-class-has-span">
+						<td><a href="#" class="permalink">columnSelector_classHasSpan</a></td>
+						<td>
+							Class name added to rows that have a span (e.g. grouping widget & other rows inside the tbody) (<span class="version">v2.29.0</span>)
+							<div class="collapsible">
+							<p>This was added to allow customizing the css name in case of conflicts.</p>
+							<p>The grouping widget accesses this value to ensure that group rows are not hidden when the first column is toggled.</p>
+							Default value: <code>'hasSpan'</code>
+							</div>
+						</td>
+					</tr>
+
 					<tr id="column-selector-updated">
 						<td><a href="#" class="permalink">columnSelector_updated</a></td>
 						<td>
diff --git a/js/widgets/widget-columnSelector.js b/js/widgets/widget-columnSelector.js
index c67ff369..8ec345e6 100644
--- a/js/widgets/widget-columnSelector.js
+++ b/js/widgets/widget-columnSelector.js
@@ -269,16 +269,16 @@
 				c.$table.triggerHandler(wo.columnSelector_updated);
 			}
 		},
-		addSelectors: function( prefix, column ) {
+		addSelectors: function( wo, prefix, column ) {
 			var array = [],
 				temp = ' col:nth-child(' + column + ')';
 			array.push(prefix + temp + ',' + prefix + '_extra_table' + temp);
-			temp = ' tr:not(.hasSpan) th[data-column="' + ( column - 1 ) + '"]';
+			temp = ' tr:not(.' + wo.columnSelector_classHasSpan + ') th[data-column="' + ( column - 1 ) + '"]';
 			array.push(prefix + temp + ',' + prefix + '_extra_table' + temp);
-			temp = ' tr:not(.hasSpan) td:nth-child(' + column + ')';
+			temp = ' tr:not(.' + wo.columnSelector_classHasSpan + ') td:nth-child(' + column + ')';
 			array.push(prefix + temp + ',' + prefix + '_extra_table' + temp);
 			// for other cells in colspan columns
-			temp = ' tr td:not(' + prefix + 'HasSpan)[data-column="' + (column - 1) + '"]';
+			temp = ' tr td:not(' + prefix + wo.columnSelector_classHasSpan + ')[data-column="' + (column - 1) + '"]';
 			array.push(prefix + temp + ',' + prefix + '_extra_table' + temp);
 			return array;
 		},
@@ -301,7 +301,7 @@
 					isHidden[ column + 1 ] = ts.getData( c.$headerIndexed[ column ], col, 'columnSelector' ) === 'false';
 					if ( isHidden[ column + 1 ] ) {
 						// hide columnSelector false column (in auto mode)
-						mediaAll = mediaAll.concat( tsColSel.addSelectors( prefix, column + 1 ) );
+						mediaAll = mediaAll.concat( tsColSel.addSelectors( wo, prefix, column + 1 ) );
 					}
 				}
 			}
@@ -313,7 +313,7 @@
 					column = parseInt($(this).attr('data-column'), 10) + 1;
 					// don't reveal columnSelector false columns
 					if ( !isHidden[ column ] ) {
-						breaks = breaks.concat( tsColSel.addSelectors( prefix, column ) );
+						breaks = breaks.concat( tsColSel.addSelectors( wo, prefix, column ) );
 					}
 				});
 				if (breaks.length) {
@@ -343,7 +343,7 @@
 			colSel.$container.find('input[data-column]').filter('[data-column!="auto"]').each(function(){
 				if (!this.checked) {
 					column = parseInt( $(this).attr('data-column'), 10 ) + 1;
-					styles = styles.concat( tsColSel.addSelectors( prefix, column ) );
+					styles = styles.concat( tsColSel.addSelectors( wo, prefix, column ) );
 				}
 				$(this).toggleClass( wo.columnSelector_cssChecked, this.checked );
 			});
@@ -373,10 +373,10 @@
 				if ( span > 1 ) {
 					hasSpans = true;
 					$cells.eq( index )
-						.addClass( c.namespace.slice( 1 ) + 'columnselectorHasSpan' )
+						.addClass( c.namespace.slice( 1 ) + 'columnselector' + wo.columnSelector_classHasSpan )
 						.attr( 'data-col-span', span );
 					// add data-column values
-					ts.computeColumnIndex( $cells.eq( index ).parent().addClass( 'hasSpan' ) );
+					ts.computeColumnIndex( $cells.eq( index ).parent().addClass( wo.columnSelector_classHasSpan ) );
 				}
 			}
 			// only add resize end if using media queries
@@ -533,6 +533,8 @@
 			// class name added to checked checkboxes - this fixes an issue with Chrome not updating FontAwesome
 			// applied icons; use this class name (input.checked) instead of input:checked
 			columnSelector_cssChecked : 'checked',
+			// class name added to rows that have a span (e.g. grouping widget & other rows inside the tbody)
+			columnSelector_classHasSpan : 'hasSpan',
 			// event triggered when columnSelector completes
 			columnSelector_updated : 'columnUpdate'
 		},
@@ -546,7 +548,8 @@
 			if ( csel.$popup ) { csel.$popup.empty(); }
 			csel.$style.remove();
 			csel.$breakpoints.remove();
-			$( c.namespace + 'columnselectorHasSpan' ).removeClass( wo.filter_filteredRow || 'filtered' );
+			$( c.namespace + 'columnselector' + wo.columnSelector_classHasSpan )
+				.removeClass( wo.filter_filteredRow || 'filtered' );
 			c.$table.find('[data-col-span]').each(function(indx, el) {
 				var $el = $(el);
 				console.log($el, $el.attr('data-col-span'));