How to expand wrapped text in a shiny datatable

Question

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);'))

Answer 1

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\"/>');
            }
            });"
)