matched part it's now highlighted to facilitate reading.

smash/web/static/js/smash.js

@@ -101,6 +101,29 @@ function createColumn(dataType, name, filter, visible, sortable, renderFunction)
     };
 }
 
+/*
+We use an auxiliary function to create the function due to the lack of block scope in JS.
+https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example
+*/
+function createRenderFunction(columnRow){
+    return function(data, type, row, meta){
+        /*
+        Fancy highlighting for the column matches.
+        */
+        if(columnRow.filter == 'string_filter'){
+            //obtain the input element by its placeholdername which matches the column name: e.g.: <input type="text" style="width:80px" placeholder="First name">
+            filter_value = $(`input[placeholder="${columnRow.name}"]`).val();
+            //if there is any filter, we highlight the matching part
+            if(filter_value != undefined && filter_value.length > 0){
+                //global and case insensitive replacement
+                return data.replace(RegExp(filter_value, 'gi'), `<span class="highlight_match">${filter_value}</span>`);
+            }
+        }
+
+        return data;
+    };
+}
+
 function getColumns(columns, getSubjectEditUrl) {
     var result = [];
     for (var i = 0; i < columns.length; i++) {
@@ -122,7 +145,7 @@ function getColumns(columns, getSubjectEditUrl) {
             result.push(createColumn(columnRow.type, columnRow.name, columnRow.filter, columnRow.visible, columnRow.sortable, renderFunction));
 
         } else {
-            result.push(createColumn(columnRow.type, columnRow.name, columnRow.filter, columnRow.visible, columnRow.sortable));
+            result.push(createColumn(columnRow.type, columnRow.name, columnRow.filter, columnRow.visible, columnRow.sortable, createRenderFunction(columnRow)));
         }
     }
     return result;

smash/web/templates/subjects/index.html

@@ -8,6 +8,10 @@
         .box-body {
             overflow-x: scroll;
         }
+        .highlight_match {
+            font-weight: bolder;
+            border-bottom: black 1px solid;
+        }
     </style>
 
 {% endblock styles %}