I have a Shiny app in which the text too long and gets truncated. Is there a way to "open" (expand) this text when clicking on it? Here is my reproducible example:

datatable(iris[c(1:20, 51:60, 101:120), ], options = list(columnDefs = list(list(
 targets = 5,
 render = JS(
 "function(data, type, row, meta) ",
 "return type === 'display' && data.length > 6 ?",
 "'<span title="' + data + '">' + data.substr(0, 6) + '...</span>' : data;",
 "")
))), callback = JS('table.page(3).draw(false);'))

Here is one way based on my previous answer. Please note if you open the table in the browser details_open.png will work but it doesn't work in the "RStudio viewer" and will appear as a question mark.

library(DT)
iris$Sepal.Width <- 'Verrrrrrrrry Looooooooooooooong Commmmmmment'

iris_upd <- cbind(' ' = '<img src="https://raw.githubusercontent.com/DataTables/DataTables/master/examples/resources/details_open.png"/>', iris)

datatable(
 iris_upd, 
 escape = -2,
 options = list(
 columnDefs = list(
 list(visible = FALSE, targets = c(0)),
 list(orderable = FALSE, className = 'details-control', targets = 1),
 list(
 targets = 3,
 render = JS(
 "function(data, type, row, meta) ",
 "return type === 'display' && data.length > 6 ?",
 "'<span title="' + data + '">' + data.substr(0, 6) + '...</span>' : data;",
 "")
 )
 )
 ),
 callback = JS("
 table.column(1).nodes().to$().css(cursor: 'pointer');
 var format = function(d) 
 return'<p>' + d[3] + '</p>';
 ;
 table.on('click', 'td.details-control', function() 
 var td = $(this), row = table.row(td.closest('tr'));
 if (row.child.isShown()) 
 row.child.hide();
 td.html('<img src="https://raw.githubusercontent.com/DataTables/DataTables/master/examples/resources/details_open.png"/>');
 else 
 row.child(format(row.data())).show();
 td.html('<img src="https://raw.githubusercontent.com/DataTables/DataTables/master/examples/resources/details_close.png"/>');
 
 );"
 ))

Using column names

JS("
 table.column(1).nodes().to$().css(cursor: 'pointer');
 var format = function(d, ind, tit) 
 out = '';
 for(i=0; i<ind.length; i++)
 out += tit[ind[i]] + ':' + '&ensp;' + d[ind[i]] + '<br>';
 
 return out;
 ;
 table.on('click', 'td.details-control', function() 
 var td = $(this), row = table.row(td.closest('tr'));
 var title = table.columns().header(); //Getting all column names 'headers' 
 title_names = [];
 for (i = 0; len = title.length, i < len; i++) 
 title_names.push(title[i].innerText);
 
 nms = ['Species','Sepal.Width']; //Define column names here 
 indices = [];
 for (i=0; i<nms.length; i++)
 indices.push(title_names.indexOf(nms[i]))
 
 if (row.child.isShown()) 
 row.child.hide();
 td.html('<img src="https://raw.githubusercontent.com/DataTables/DataTables/master/examples/resources/details_open.png"/>');
 else 
 row.child(format(row.data(), indices, title_names)).show();
 td.html('<img src="https://raw.githubusercontent.com/DataTables/DataTables/master/examples/resources/details_close.png"/>');
 
 );"
)