4dc418cfa9a5ba0ca32f53590c229c14a27a7d39 New: Ability to give a custo…

…m class to the row selection checkbox

New: Bootstrap 5 integration makes use of this to style the checkboxes

Looks like only Bootstrap 5 will benefit from this at the moment. BS3/4,
Bulma and Semantic UI don't have a class to apply directly.

Sync to source repo @4dc418cfa9a5ba0ca32f53590c229c14a27a7d39

datatables.json

@@ -11,5 +11,5 @@
     ],
     "src-repo": "http://github.com/DataTables/Select",
     "last-tag": "2.0.1",
-    "last-sync": "0278c079772272387c3d8a3363fc4951740f6763"
+    "last-sync": "4dc418cfa9a5ba0ca32f53590c229c14a27a7d39"
 }

js/dataTables.select.js

@@ -52,6 +52,10 @@ var DataTable = $.fn.dataTable;
 // Version information for debugger
 DataTable.select = {};
 
+DataTable.select.classes = {
+	checkbox: 'dt-select-checkbox'
+};
+
 DataTable.select.version = '2.0.1';
 
 DataTable.select.init = function (dt) {
@@ -366,6 +370,18 @@ function cellRange(dt, idx, last) {
 	}
 }
 
+/**
+ * Get the class
+ * @returns 
+ */
+function checkboxClass(selector) {
+	var name = DataTable.select.classes.checkbox;
+
+	return selector
+		? name.replace(/ /g, '.')
+		: name;
+}
+
 /**
  * Disable mouse selection by removing the selectors
  *
@@ -594,7 +610,7 @@ function initCheckboxHeader( dt ) {
 			// If no checkbox yet, insert one
 			var input = $('<input>')
 				.attr({
-					class: 'dt-select-checkbox',
+					class: checkboxClass(true),
 					type: 'checkbox',
 					'aria-label': dt.i18n('select.aria.headerCheckbox') || 'Select all rows'
 				})
@@ -669,7 +685,7 @@ function init(ctx) {
 			if (d._select_selected) {
 				$(row)
 					.addClass(ctx._select.className)
-					.find('input.dt-select-checkbox').prop('checked', true);
+					.find('input.' + checkboxClass(true)).prop('checked', true);
 			}
 
 			// Cells and columns - if separated out, we would need to do two
@@ -1112,7 +1128,7 @@ apiRegisterPlural('rows().select()', 'row().select()', function (select) {
 
 				// Make sure the checkbox shows the right state
 				if (cells && cells[i]) {
-					$('input.dt-select-checkbox', cells[i]).prop('checked', true);
+					$('input.' + checkboxClass(true), cells[i]).prop('checked', true);
 				}
 
 				// Invalidate the sort data for this column, if not already done
@@ -1246,7 +1262,7 @@ apiRegisterPlural('rows().deselect()', 'row().deselect()', function () {
 
 				// Make sure the checkbox shows the right state
 				if (cells && cells[i]) {
-					$('input.dt-select-checkbox', dtData.anCells[i]).prop('checked', false);
+					$('input.' + checkboxClass(true), dtData.anCells[i]).prop('checked', false);
 				}
 
 				// Invalidate the sort data for this column, if not already done
@@ -1527,7 +1543,7 @@ DataTable.render.select = function (valueProp, nameProp) {
 			return $('<input>')
 				.attr({
 					'aria-label': ariaLabel,
-					class: 'dt-select-checkbox',
+					class: checkboxClass(),
 					name: nameFn ? nameFn(row) : null,
 					type: 'checkbox',
 					value: valueFn ? valueFn(row) : null,

js/dataTables.select.mjs

@@ -12,6 +12,10 @@ let $ = jQuery;
 // Version information for debugger
 DataTable.select = {};
 
+DataTable.select.classes = {
+	checkbox: 'dt-select-checkbox'
+};
+
 DataTable.select.version = '2.0.1';
 
 DataTable.select.init = function (dt) {
@@ -326,6 +330,18 @@ function cellRange(dt, idx, last) {
 	}
 }
 
+/**
+ * Get the class
+ * @returns 
+ */
+function checkboxClass(selector) {
+	var name = DataTable.select.classes.checkbox;
+
+	return selector
+		? name.replace(/ /g, '.')
+		: name;
+}
+
 /**
  * Disable mouse selection by removing the selectors
  *
@@ -554,7 +570,7 @@ function initCheckboxHeader( dt ) {
 			// If no checkbox yet, insert one
 			var input = $('<input>')
 				.attr({
-					class: 'dt-select-checkbox',
+					class: checkboxClass(true),
 					type: 'checkbox',
 					'aria-label': dt.i18n('select.aria.headerCheckbox') || 'Select all rows'
 				})
@@ -629,7 +645,7 @@ function init(ctx) {
 			if (d._select_selected) {
 				$(row)
 					.addClass(ctx._select.className)
-					.find('input.dt-select-checkbox').prop('checked', true);
+					.find('input.' + checkboxClass(true)).prop('checked', true);
 			}
 
 			// Cells and columns - if separated out, we would need to do two
@@ -1072,7 +1088,7 @@ apiRegisterPlural('rows().select()', 'row().select()', function (select) {
 
 				// Make sure the checkbox shows the right state
 				if (cells && cells[i]) {
-					$('input.dt-select-checkbox', cells[i]).prop('checked', true);
+					$('input.' + checkboxClass(true), cells[i]).prop('checked', true);
 				}
 
 				// Invalidate the sort data for this column, if not already done
@@ -1206,7 +1222,7 @@ apiRegisterPlural('rows().deselect()', 'row().deselect()', function () {
 
 				// Make sure the checkbox shows the right state
 				if (cells && cells[i]) {
-					$('input.dt-select-checkbox', dtData.anCells[i]).prop('checked', false);
+					$('input.' + checkboxClass(true), dtData.anCells[i]).prop('checked', false);
 				}
 
 				// Invalidate the sort data for this column, if not already done
@@ -1487,7 +1503,7 @@ DataTable.render.select = function (valueProp, nameProp) {
 			return $('<input>')
 				.attr({
 					'aria-label': ariaLabel,
-					class: 'dt-select-checkbox',
+					class: checkboxClass(),
 					name: nameFn ? nameFn(row) : null,
 					type: 'checkbox',
 					value: valueFn ? valueFn(row) : null,

types/types.d.ts

@@ -85,6 +85,16 @@ declare module 'datatables.net' {
 		 * Select static methods
 		 */
 		select: {
+			/**
+			 * Class names used by Select
+			 */
+			classes: {
+				/**
+				 * Class name(s) to use for the checkbox. Space separated.
+				 */
+				checkbox: string;
+			}
+
 			/**
 			 * Initialise Select (for use on tables which were not in the document
 			 * when they were initialised).