17048ed12a967fac6abf1d2919646ad70d08d2a3 New: -feature div feature …

…which can be used to insert text or HTML in the DataTables controlled layout grid. It does not provide any information or control over the table itself.

Sync to source repo @17048ed12a967fac6abf1d2919646ad70d08d2a3

datatables.json

@@ -11,5 +11,5 @@
     ],
     "src-repo": "http://github.com/DataTables/DataTablesSrc",
     "last-tag": "2.0.8",
-    "last-sync": "1d5373e1276fa1ffe755d054027ca3acfb23f0e5"
+    "last-sync": "17048ed12a967fac6abf1d2919646ad70d08d2a3"
 }

js/dataTables.js

@@ -12836,7 +12836,7 @@
 		var n = $('<div>')[0];
 
 		_divProp(n, 'className', opts.className);
-		_divProp(n, 'id', opts.className);
+		_divProp(n, 'id', opts.id);
 		_divProp(n, 'innerHTML', opts.html);
 		_divProp(n, 'textContent', opts.text);
 

js/dataTables.mjs

@@ -12783,7 +12783,7 @@ DataTable.feature.register( 'div', function ( settings, opts ) {
 	var n = $('<div>')[0];
 
 	_divProp(n, 'className', opts.className);
-	_divProp(n, 'id', opts.className);
+	_divProp(n, 'id', opts.id);
 	_divProp(n, 'innerHTML', opts.html);
 	_divProp(n, 'textContent', opts.text);
 

types/types.d.ts

@@ -128,6 +128,21 @@ export interface DataType {
 }
 
 export interface Feature {
+    /** A simple `<div>` that can contain your own content */
+    div?: {
+        /** Class name for the div */
+        className?: string;
+
+        /** Id to give the div */
+        id?: string;
+
+        /** HTML content for the div (cannot be used as well as textContent) */
+        html?: string;
+
+        /** Text content for the div (cannot be used as well as innerHTML) */
+        text?: string;
+    }
+
     /** Table information display */
     info?: {
         /** Information display callback */
@@ -200,9 +215,20 @@ type LayoutKeys = `${LayoutSide}${LayoutNumber}${LayoutEdge}` | `${LayoutSide}${
 type LayoutFeatures = keyof Feature | Feature | Array<keyof Feature> | Feature[];
 
 type LayoutElement = {
-    id?: string;
+    /** Class to apply to the CELL in the layout grid */
     className?: string;
-    features: Array<LayoutFeatures>;
+
+    /** Id to apply to the CELL in the layout grid */
+    id?: string;
+
+    /** Class to apply to the ROW in the layout grid */
+    rowClass?: string;
+
+    /** Id to apply to the ROW in the layout grid */
+    rowId?: string;
+
+    /** List of features to show in this cell */
+    features: LayoutFeatures;
 }
 
 type Layout = Partial<Record<LayoutKeys, LayoutElement | LayoutFeatures | null>>;