datatables.net 2.1.8 → 2.2.1

package/js/dataTables.mjs

@@ -1,4 +1,4 @@
-/*! DataTables 2.1.8
+/*! DataTables 2.2.1
  * © SpryMedia Ltd - datatables.net/license
  */
 
@@ -376,7 +376,6 @@ var DataTable = function ( selector, options )
 			thead = $('<thead/>').appendTo($this);
 		}
 		oSettings.nTHead = thead[0];
-		$('tr', thead).addClass(oClasses.thead.row);
 		
 		var tbody = $this.children('tbody');
 		if ( tbody.length === 0 ) {
@@ -391,7 +390,6 @@ var DataTable = function ( selector, options )
 			tfoot = $('<tfoot/>').appendTo($this);
 		}
 		oSettings.nTFoot = tfoot[0];
-		$('tr', tfoot).addClass(oClasses.tfoot.row);
 		
 		// Copy the data index array
 		oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
@@ -2108,6 +2106,10 @@ function _fnColumnSizes ( settings )
 		var width = _fnColumnsSumWidth(settings, [i], false, false);
 
 		cols[i].colEl.css('width', width);
+
+		if (settings.oScroll.sX) {
+			cols[i].colEl.css('min-width', width);
+		}
 	}
 }
 
@@ -3175,9 +3177,13 @@ function _fnBuildHead( settings, side )
 
 		// Add the number of cells needed to make up to the number of columns
 		if (row.length === 1) {
-			var cells = $('td, th', row);
+			var cellCount = 0;
+			
+			$('td, th', row).each(function () {
+				cellCount += this.colSpan;
+			});
 
-			for ( i=cells.length, ien=columns.length ; i<ien ; i++ ) {
+			for ( i=cellCount, ien=columns.length ; i<ien ; i++ ) {
 				$('<th/>')
 					.html( columns[i][titleProp] || '' )
 					.appendTo( row );
@@ -3189,9 +3195,11 @@ function _fnBuildHead( settings, side )
 
 	if (side === 'header') {
 		settings.aoHeader = detected;
+		$('tr', target).addClass(classes.thead.row);
 	}
 	else {
 		settings.aoFooter = detected;
+		$('tr', target).addClass(classes.tfoot.row);
 	}
 
 	// Every cell needs to be passed through the renderer
@@ -4454,7 +4462,7 @@ function _fnFilterCustom( settings )
 		// So the array reference doesn't break set the results into the
 		// existing array
 		displayRows.length = 0;
-		displayRows.push.apply(displayRows, rows);
+		_fnArrayApply(displayRows, rows);
 	}
 }
 
@@ -5182,8 +5190,11 @@ function _fnScrollDraw ( settings )
 		// [].find, but it wasn't supported in Chrome until Sept 2015, and DT has 10 year
 		// browser support
 		var firstTr = null;
+		var start = _fnDataSource( settings ) !== 'ssp'
+			? settings._iDisplayStart
+			: 0;
 
-		for (i=settings._iDisplayStart ; i<settings.aiDisplay.length ; i++) {
+		for (i=start ; i<start + settings.aiDisplay.length ; i++) {
 			var idx = settings.aiDisplay[i];
 			var tr = settings.aoData[idx].nTr;
 
@@ -5198,7 +5209,7 @@ function _fnScrollDraw ( settings )
 				return {
 					idx: _fnVisibleToColumnIndex(settings, vis),
 					width: $(this).outerWidth()
-				}
+				};
 			});
 
 			// Check against what the colgroup > col is set to and correct if needed
@@ -5208,6 +5219,10 @@ function _fnScrollDraw ( settings )
 
 				if (colWidth !== colSizes[i].width) {
 					colEl.style.width = colSizes[i].width + 'px';
+
+					if (scroll.sX) {
+						colEl.style.minWidth = colSizes[i].width + 'px';
+					}
 				}
 			}
 		}
@@ -5300,6 +5315,14 @@ function _fnCalculateColumnWidths ( settings )
 		i, column, columnIdx;
 		
 	var styleWidth = table.style.width;
+	var containerWidth = _fnWrapperWidth(settings);
+
+	// Don't re-run for the same width as the last time
+	if (containerWidth === settings.containerWidth) {
+		return false;
+	}
+
+	settings.containerWidth = containerWidth;
 
 	// If there is no width applied as a CSS style or as an attribute, we assume that
 	// the width is intended to be 100%, which is usually is in CSS, but it is very
@@ -5357,6 +5380,8 @@ function _fnCalculateColumnWidths ( settings )
 			// browser will collapse it. If this width is smaller than the
 			// width the column requires, then it will have no effect
 			if ( scrollX ) {
+				this.style.minWidth = width;
+
 				$( this ).append( $('<div/>').css( {
 					width: width,
 					margin: 0,
@@ -5425,15 +5450,15 @@ function _fnCalculateColumnWidths ( settings )
 
 		// If there is no width attribute or style, then allow the table to
 		// collapse
-		if ( tmpTable.width() < tableContainer.clientWidth && tableWidthAttr ) {
-			tmpTable.width( tableContainer.clientWidth );
+		if ( tmpTable.outerWidth() < tableContainer.clientWidth && tableWidthAttr ) {
+			tmpTable.outerWidth( tableContainer.clientWidth );
 		}
 	}
 	else if ( scrollY ) {
-		tmpTable.width( tableContainer.clientWidth );
+		tmpTable.outerWidth( tableContainer.clientWidth );
 	}
 	else if ( tableWidthAttr ) {
-		tmpTable.width( tableWidthAttr );
+		tmpTable.outerWidth( tableWidthAttr );
 	}
 
 	// Get the width of each column in the constructed table
@@ -5466,20 +5491,55 @@ function _fnCalculateColumnWidths ( settings )
 	}
 
 	if ( (tableWidthAttr || scrollX) && ! settings._reszEvt ) {
-		var bindResize = function () {
-			$(window).on('resize.DT-'+settings.sInstance, DataTable.util.throttle( function () {
-				if (! settings.bDestroying) {
-					_fnAdjustColumnSizing( settings );
+		var resize = DataTable.util.throttle( function () {
+			var newWidth = _fnWrapperWidth(settings);
+
+			// Don't do it if destroying or the container width is 0
+			if (! settings.bDestroying && newWidth !== 0) {
+				_fnAdjustColumnSizing( settings );
+			}
+		} );
+
+		// For browsers that support it (~2020 onwards for wide support) we can watch for the
+		// container changing width.
+		if (window.ResizeObserver) {
+			// This is a tricky beast - if the element is visible when `.observe()` is called,
+			// then the callback is immediately run. Which we don't want. If the element isn't
+			// visible, then it isn't run, but we want it to run when it is then made visible.
+			// This flag allows the above to be satisfied.
+			var first = $(settings.nTableWrapper).is(':visible');
+
+			settings.resizeObserver = new ResizeObserver(function (e) {
+				if (first) {
+					first = false;
 				}
-			} ) );
-		};
+				else {
+					resize();
+				}
+			});
 
-		bindResize();
+			settings.resizeObserver.observe(settings.nTableWrapper);
+		}
+		else {
+			// For old browsers, the best we can do is listen for a window resize
+			$(window).on('resize.DT-'+settings.sInstance, resize);
+		}
 
 		settings._reszEvt = true;
 	}
 }
 
+/**
+ * Get the width of the DataTables wrapper element
+ *
+ * @param {*} settings DataTables settings object
+ * @returns Width
+ */
+function _fnWrapperWidth(settings) {
+	return $(settings.nTableWrapper).is(':visible')
+		? $(settings.nTableWrapper).width()
+		: 0;
+}
 
 /**
  * Get the maximum strlen for each data column
@@ -6088,15 +6148,26 @@ function _fnSaveState ( settings )
 		return;
 	}
 
+	// Sort state saving uses [[idx, order]] structure.
+	var sorting = [];
+	_fnSortResolve(settings, sorting, settings.aaSorting );
+
 	/* Store the interesting variables */
+	var columns = settings.aoColumns;
 	var state = {
 		time:    +new Date(),
 		start:   settings._iDisplayStart,
 		length:  settings._iDisplayLength,
-		order:   $.extend( true, [], settings.aaSorting ),
+		order:   sorting.map(function (sort) {
+			// If a column name is available, use it
+			return columns[sort[0]] && columns[sort[0]].sName
+				? [ columns[sort[0]].sName, sort[1] ]
+				: sort.slice();
+		} ),
 		search:  $.extend({}, settings.oPreviousSearch),
 		columns: settings.aoColumns.map( function ( col, i ) {
 			return {
+				name: col.sName,
 				visible: col.bVisible,
 				search: $.extend({}, settings.aoPreSearchCols[i])
 			};
@@ -6144,6 +6215,8 @@ function _fnLoadState ( settings, init, callback )
 function _fnImplementState ( settings, s, callback) {
 	var i, ien;
 	var columns = settings.aoColumns;
+	var currentNames = _pluck(settings.aoColumns, 'sName');
+
 	settings._bLoadingState = true;
 
 	// When StateRestore was introduced the state could now be implemented at any time
@@ -6173,13 +6246,6 @@ function _fnImplementState ( settings, s, callback) {
 		return;
 	}
 
-	// Number of columns have changed - all bets are off, no restore of settings
-	if ( s.columns && columns.length !== s.columns.length ) {
-		settings._bLoadingState = false;
-		callback();
-		return;
-	}
-
 	// Store the saved state so it might be accessed at any time
 	settings.oLoadedState = $.extend( true, {}, s );
 
@@ -6213,10 +6279,23 @@ function _fnImplementState ( settings, s, callback) {
 	if ( s.order !== undefined ) {
 		settings.aaSorting = [];
 		$.each( s.order, function ( i, col ) {
-			settings.aaSorting.push( col[0] >= columns.length ?
-				[ 0, col[1] ] :
-				col
-			);
+			var set = [ col[0], col[1] ];
+
+			// A column name was stored and should be used for restore
+			if (typeof col[0] === 'string') {
+				var idx = currentNames.indexOf(col[0]);
+
+				// Find the name from the current list of column names, or fallback to index 0
+				set[0] = idx >= 0
+					? idx
+					: 0;
+			}
+			else if (set[0] >= columns.length) {
+				// If a column name, but it is out of bounds, set to 0
+				set[0] = 0;
+			}
+
+			settings.aaSorting.push(set);
 		} );
 	}
 
@@ -6227,31 +6306,65 @@ function _fnImplementState ( settings, s, callback) {
 
 	// Columns
 	if ( s.columns ) {
-		for ( i=0, ien=s.columns.length ; i<ien ; i++ ) {
-			var col = s.columns[i];
-
-			// Visibility
-			if ( col.visible !== undefined ) {
-				// If the api is defined, the table has been initialised so we need to use it rather than internal settings
-				if (api) {
-					// Don't redraw the columns on every iteration of this loop, we will do this at the end instead
-					api.column(i).visible(col.visible, false);
+		var set = s.columns;
+		var incoming = _pluck(s.columns, 'name');
+
+		// Check if it is a 2.2 style state object with a `name` property for the columns, and if
+		// the name was defined. If so, then create a new array that will map the state object
+		// given, to the current columns (don't bother if they are already matching tho).
+		if (incoming.join('').length && incoming.join('') !== currentNames.join('')) {
+			set = [];
+
+			// For each column, try to find the name in the incoming array
+			for (i=0 ; i<currentNames.length ; i++) {
+				if (currentNames[i] != '') {
+					var idx = incoming.indexOf(currentNames[i]);
+
+					if (idx >= 0) {
+						set.push(s.columns[idx]);
+					}
+					else {
+						// No matching column name in the state's columns, so this might be a new
+						// column and thus can't have a state already.
+						set.push({});
+					}
 				}
 				else {
-					columns[i].bVisible = col.visible;
+					// If no name, but other columns did have a name, then there is no knowing
+					// where this one came from originally so it can't be restored.
+					set.push({});
+				}
+			}
+		}
+
+		// If the number of columns to restore is different from current, then all bets are off.
+		if (set.length === columns.length) {
+			for ( i=0, ien=set.length ; i<ien ; i++ ) {
+				var col = set[i];
+
+				// Visibility
+				if ( col.visible !== undefined ) {
+					// If the api is defined, the table has been initialised so we need to use it rather than internal settings
+					if (api) {
+						// Don't redraw the columns on every iteration of this loop, we will do this at the end instead
+						api.column(i).visible(col.visible, false);
+					}
+					else {
+						columns[i].bVisible = col.visible;
+					}
+				}
+
+				// Search
+				if ( col.search !== undefined ) {
+					$.extend( settings.aoPreSearchCols[i], col.search );
 				}
 			}
 
-			// Search
-			if ( col.search !== undefined ) {
-				$.extend( settings.aoPreSearchCols[i], col.search );
+			// If the api is defined then we need to adjust the columns once the visibility has been changed
+			if (api) {
+				api.columns.adjust();
 			}
 		}
-		
-		// If the api is defined then we need to adjust the columns once the visibility has been changed
-		if (api) {
-			api.columns.adjust();
-		}
 	}
 
 	settings._bLoadingState = false;
@@ -6568,6 +6681,30 @@ function _fnMacros ( settings, str, entries )
 		replace(/_ENTRIES-TOTAL_/g, settings.api.i18n('entries', '', vis) );
 }
 
+/**
+ * Add elements to an array as quickly as possible, but stack stafe.
+ *
+ * @param {*} arr Array to add the data to
+ * @param {*} data Data array that is to be added
+ * @returns 
+ */
+function _fnArrayApply(arr, data) {
+	if (! data) {
+		return;
+	}
+
+	// Chrome can throw a max stack error if apply is called with
+	// too large an array, but apply is faster.
+	if (data.length < 10000) {
+		arr.push.apply(arr, data);
+	}
+	else {
+		for (i=0 ; i<data.length ; i++) {
+			arr.push(data[i]);
+		}
+	}
+}
+
 
 
 /**
@@ -6760,18 +6897,7 @@ _Api = function ( context, data )
 		: settings;
 
 	// Initial data
-	if ( data ) {
-		// Chrome can throw a max stack error if apply is called with
-		// too large an array, but apply is faster.
-		if (data.length < 10000) {
-			this.push.apply(this, data);
-		}
-		else {
-			for (i=0 ; i<data.length ; i++) {
-				this.push(data[i]);
-			}
-		}
-	}
+	_fnArrayApply(this, data);
 
 	// selector
 	this.selector = {
@@ -7152,7 +7278,7 @@ var __table_selector = function ( selector, a )
 		selector.forEach(function (sel) {
 			var inner = __table_selector(sel, a);
 
-			result.push.apply(result, inner);
+			_fnArrayApply(result, inner);
 		});
 
 		return result.filter( function (item) {
@@ -8006,7 +8132,7 @@ _api_register( 'rows.add()', function ( rows ) {
 	// Return an Api.rows() extended instance, so rows().nodes() etc can be used
 	var modRows = this.rows( -1 );
 	modRows.pop();
-	modRows.push.apply(modRows, newRows);
+	_fnArrayApply(modRows, newRows);
 
 	return modRows;
 } );
@@ -8519,7 +8645,10 @@ var __column_selector = function ( settings, selector, opts )
 			.map( function () {
 				return _fnColumnsFromHeader( this ); // `nodes` is column index complete and in order
 			} )
-			.toArray();
+			.toArray()
+			.sort(function (a, b) {
+				return a - b;
+			});
 
 		if ( jqResult.length || ! s.nodeName ) {
 			return jqResult;
@@ -8773,6 +8902,10 @@ _api_registerPlural( 'columns().indexes()', 'column().index()', function ( type
 
 _api_register( 'columns.adjust()', function () {
 	return this.iterator( 'table', function ( settings ) {
+		// Force a column sizing to happen with a manual call - otherwise it can skip
+		// if the size hasn't changed
+		settings.containerWidth = -1;
+
 		_fnAdjustColumnSizing( settings );
 	}, 1 );
 } );
@@ -9338,6 +9471,10 @@ _api_register( 'state.save()', function () {
 	} );
 } );
 
+// Can be assigned in DateTable.use() - note luxon and moment vars are in helpers.js
+var __bootstrap;
+var __foundation;
+
 /**
  * Set the libraries that DataTables uses, or the global objects.
  * Note that the arguments can be either way around (legacy support)
@@ -9371,6 +9508,14 @@ DataTable.use = function (arg1, arg2) {
 			case 'moment':
 				return __moment;
 
+			case 'bootstrap':
+				// Use local if set, otherwise try window, which could be undefined
+				return __bootstrap || window.bootstrap;
+
+			case 'foundation':
+				// Ditto
+				return __foundation || window.Foundation;
+
 			default:
 				return null;
 		}
@@ -9380,7 +9525,7 @@ DataTable.use = function (arg1, arg2) {
 	if (type === 'lib' || type === 'jq' || (module && module.fn && module.fn.jquery)) {
 		$ = module;
 	}
-	else if (type == 'win' || (module && module.document)) {
+	else if (type === 'win' || (module && module.document)) {
 		window = module;
 		document = module.document;
 	}
@@ -9393,6 +9538,14 @@ DataTable.use = function (arg1, arg2) {
 	else if (type === 'moment' || (module && module.isMoment)) {
 		__moment = module;
 	}
+	else if (type === 'bootstrap' || (module && module.Modal && module.Modal.NAME === 'modal'))
+	{
+		// This is currently for BS5 only. BS3/4 attach to jQuery, so no need to use `.use()`
+		__bootstrap = module;
+	}
+	else if (type === 'foundation' || (module && module.Reveal)) {
+		__foundation = module;
+	}
 }
 
 /**
@@ -9683,6 +9836,11 @@ _api_register( 'destroy()', function ( remove ) {
 			new _Api( settings ).columns().visible( true );
 		}
 
+		// Container width change listener
+		if (settings.resizeObserver) {
+			settings.resizeObserver.disconnect();
+		}
+
 		// Blitz all `DT` namespaced events (these are internal events, the
 		// lowercase, `dt` events are user subscribed and they are responsible
 		// for removing them
@@ -9801,7 +9959,7 @@ _api_register( 'i18n()', function ( token, def, plural ) {
  *  @type string
  *  @default Version number
  */
-DataTable.version = "2.1.8";
+DataTable.version = "2.2.1";
 
 /**
  * Private data store, containing all of the settings objects that are
@@ -11904,7 +12062,13 @@ DataTable.models.oSettings = {
 	deferLoading: null,
 
 	/** Allow auto type detection */
-	typeDetect: true
+	typeDetect: true,
+
+	/** ResizeObserver for the container div */
+	resizeObserver: null,
+
+	/** Keep a record of the last size of the container, so we can skip duplicates */
+	containerWidth: -1
 };
 
 /**
@@ -12046,8 +12210,8 @@ function __mld( dtLib, momentFn, luxonFn, dateFn, arg1 ) {
 
 
 var __mlWarning = false;
-var __luxon; // Can be assigned in DateTeble.use()
-var __moment; // Can be assigned in DateTeble.use()
+var __luxon; // Can be assigned in DateTable.use()
+var __moment; // Can be assigned in DateTable.use()
 
 /**
  * 
@@ -12083,7 +12247,7 @@ function __mldObj (d, format, locale) {
 			return null;
 		}
 
-		dt.setLocale(locale);
+		dt = dt.setLocale(locale);
 	}
 	else if (! format) {
 		// No format given, must be ISO
@@ -12466,6 +12630,13 @@ var __diacriticSort = function (a, b) {
 	});
 }
 
+var __diacriticHtmlSort = function (a, b) {
+	a = _stripHtml(a);
+	b = _stripHtml(b);
+
+	return __diacriticSort(a, b);
+}
+
 //
 // Built in data types
 //
@@ -12536,6 +12707,31 @@ DataTable.type('html', {
 });
 
 
+DataTable.type('html-utf8', {
+	detect: {
+		allOf: function ( d ) {
+			return _empty( d ) || (typeof d === 'string' && d.indexOf('<') !== -1);
+		},
+		oneOf: function ( d ) {
+			// At least one data point must contain a `<` and a non-ASCII character
+			// eslint-disable-next-line compat/compat
+			return navigator.languages &&
+				! _empty( d ) &&
+				typeof d === 'string' &&
+				d.indexOf('<') !== -1 &&
+				typeof d === 'string' && d.match(/[^\x00-\x7F]/);
+		}
+	},
+	order: {
+		asc: __diacriticHtmlSort,
+		desc: function (a, b) {
+			return __diacriticHtmlSort(a, b) * -1;
+		}
+	},
+	search: _filterString(true, true)
+});
+
+
 DataTable.type('date', {
 	className: 'dt-type-date',
 	detect: {
@@ -12746,6 +12942,7 @@ $.extend( true, DataTable.ext.renderer, {
 				var indexes = columns.indexes();
 				var sortDirs = columns.orderable(true).flatten();
 				var orderedColumns = _pluck(sorting, 'col');
+				var tabIndex = settings.iTabIndex;
 
 				cell
 					.removeClass(
@@ -12810,8 +13007,13 @@ $.extend( true, DataTable.ext.renderer, {
 
 				// Make the headers tab-able for keyboard navigation
 				if (orderable) {
-					cell.find('.dt-column-title').attr('role', 'button');
-					cell.attr('tabindex', 0)
+					var orderSpan = cell.find('.dt-column-order');
+					
+					orderSpan.attr('role', 'button');
+
+					if (tabIndex !== -1) {
+						orderSpan.attr('tabindex', tabIndex);
+					}
 				}
 			} );
 		}
@@ -12825,7 +13027,7 @@ $.extend( true, DataTable.ext.renderer, {
 				.addClass(items.className || classes.row)
 				.appendTo( container );
 
-			$.each( items, function (key, val) {
+			DataTable.ext.renderer.layout._forLayoutRow(items, function (key, val) {
 				if (key === 'id' || key === 'className') {
 					return;
 				}
@@ -12856,7 +13058,31 @@ $.extend( true, DataTable.ext.renderer, {
 					})
 					.append( val.contents )
 					.appendTo( row );
-			} );
+			});
+		},
+
+		// Shared for use by the styling frameworks
+		_forLayoutRow: function (items, fn) {
+			// As we are inserting dom elements, we need start / end in a
+			// specific order, this function is used for sorting the layout
+			// keys.
+			var layoutEnum = function (x) {
+				switch (x) {
+					case '': return 0;
+					case 'start': return 1;
+					case 'end': return 2;
+					default: return 3;
+				}
+			};
+
+			Object
+				.keys(items)
+				.sort(function (a, b) {
+					return layoutEnum(a) - layoutEnum(b);
+				})
+				.forEach(function (key) {
+					fn(key, items[key]);
+				});
 		}
 	}
 } );
@@ -13208,7 +13434,7 @@ function _pagingDraw(settings, host, opts) {
 			'data-dt-idx': button,
 			'tabIndex': btnInfo.disabled
 				? -1
-				: settings.iTabIndex
+				: settings.iTabIndex && btn.clicker[0].nodeName.toLowerCase() !== 'span'
 					? settings.iTabIndex
 					: null, // `0` doesn't need a tabIndex since it is the default
 		});
@@ -13242,12 +13468,16 @@ function _pagingDraw(settings, host, opts) {
 
 	// Responsive - check if the buttons are over two lines based on the
 	// height of the buttons and the container.
-	if (
-		buttonEls.length && // any buttons
-		opts.buttons > 1 && // prevent infinite
-		$(host).height() >= ($(buttonEls[0]).outerHeight() * 2) - 10
-	) {
-		_pagingDraw(settings, host, $.extend({}, opts, { buttons: opts.buttons - 2 }));
+	if (buttonEls.length) {
+		var outerHeight = $(buttonEls[0]).outerHeight();
+	
+		if (
+			opts.buttons > 1 && // prevent infinite
+			outerHeight > 0 && // will be 0 if hidden
+			$(host).height() >= (outerHeight * 2) - 10
+		) {
+			_pagingDraw(settings, host, $.extend({}, opts, { buttons: opts.buttons - 2 }));
+		}
 	}
 }
 
@@ -13271,7 +13501,6 @@ function _pagingButtonInfo(settings, button, page, pages) {
 	switch ( button ) {
 		case 'ellipsis':
 			o.display = '&#x2026;';
-			o.disabled = true;
 			break;
 
 		case 'first':
@@ -13458,7 +13687,7 @@ DataTable.feature.register( 'pageLength', function ( settings, opts ) {
 
 	// Save text node content for macro updating
 	var textNodes = [];
-	Array.from(div.find('label')[0].childNodes).forEach(function (el) {
+	Array.prototype.slice.call(div.find('label')[0].childNodes).forEach(function (el) {
 		if (el.nodeType === Node.TEXT_NODE) {
 			textNodes.push({
 				el: el,
@@ -13476,7 +13705,6 @@ DataTable.feature.register( 'pageLength', function ( settings, opts ) {
 
 	// Next, the select itself, along with the options
 	var select = $('<select/>', {
-		'name':          tableId+'_length',
 		'aria-controls': tableId,
 		'class':         classes.select
 	} );