Description of problem:
I'm trying to add an info icon to the first visible cell in each row.

Using columns.render works great, but means changes to column visibility via the built in col vis button make that cell go away and takes the info icon with it. I do like that I know I'm only changing the display orthogonal data with this function.

          aoColumns[1].render = function( data, type, row, meta ) {
                if (type === 'display') {
                        sInfoHtml = "** Extended info - click to open as dialog to copy-paste **\n";

                        for (var key in row) {
                                var sData = row[key];
                                if (sData != null)  {
                                        sData = sData.replace(/(<([^>]+)>)/ig,""); // we need to strip out tags so the hover will show everything
                                }
                                
                                 sInfoHtml += "   " + key + ": " + sData + "\n";
                        }
                        sInfoHtml += "";

                        return '<span class="ui-icon ui-icon-info hoverinfoicon noTableToolsRowSelect" title="' + sInfoHtml + '"></span>' + data;
                }

                return data;
        };

               $( "#mytable" ).DataTable({
                        columns: aoColumns,

Using DataTable.rowCallback is even cleaner - I use $('td:eq(0)', row).prepend(iconhtml) and the info icon now always goes on the leftmost column. But if the col vis button is used to change visibility and removes the leftmost column, the icon won't get added until the next table draw. (Which doesn't happen automatically after col vis changes.). I'm also not sure if I'm breaking the orthogonal data, or if at this point I'm only changing display values.

               $( "#mytable" ).DataTable({
                        "rowCallback": function (row, data) {
                                sInfoHtml = "** Extended info - click to open as dialog to copy-paste **\n";
        
                                for (var key in data) {
                                        var sData = data[key];
                                        if (sData != null)  {
                                                sData = sData.replace(/(<([^>]+)>)/ig,""); // we need to strip out tags so the hover will show everything
                                        }
                                        
                                         sInfoHtml += "   " + key + ": " + sData + "\n";
                                }
                                sInfoHtml += "";
        
                                // use the td:eq(0) selector so we always put the info icon on the first column, regardless of column visibility choices
                                $('td:eq(0)', row).prepend('<span class="ui-icon ui-icon-info hoverinfoicon noTableToolsRowSelect" title="' + sInfoHtml + '"></span>');
                        },

So I either need to use a different callback that does get called after the col vis button is changed, or find another way?