title: Display multiple strings in a cell of a datatable that can be removed by clicking on them
body: <p>I have the shiny app below in which I convert the <code>d</code> dataframe to a dataframe in which the unique <code>items</code> will be summarized based on the <code>name</code> and a new column will be added with their <code>count</code>. Then I use <code>DT</code> package to display this dataframe. I wonder if <code>DT</code> or <code>shinywidgets</code> or maybe another method can be used in order to display the table like in the screenshot below in which the user will be able to display the different strings in the <code>items</code> column as separated words that he will be able to remove. Here is an example in the second column.</p>
  <p><a href="https://i.stack.imgur.com/JuYNV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JuYNV.png" alt="enter image description here" /></a></p>
  <pre><code>library(shiny)
  library(DT)
  library(jsonlite)
  
  selector &lt;- function(id, values, items = values){
    options &lt;- HTML(paste0(mapply(
      function(value, item){
        as.character(tags$option(value = value, item))
      }, c(&quot;&quot;, values), c(&quot;&quot;, items)
    ), collapse = &quot;&quot;))
    as.character(
      tags$select(
        id = id, class = &quot;form-control&quot;, multiple = &quot;multiple&quot;, options
      )
    )
  }
  
  name&lt;-c(&quot;Jack&quot;,&quot;Bob&quot;,&quot;Jack&quot;,&quot;Bob&quot;)
  item&lt;-c(&quot;apple&quot;,&quot;olive&quot;,&quot;banana&quot;,&quot;tomato&quot;)
  d&lt;-data.frame(name,item)
  
  words&lt;-tapply(d$item, d$name, I)
  
  
  nrows &lt;- length(words)
  
  js &lt;- c(
    &quot;function(settings) {&quot;,
    sprintf(&quot;var nrows = %d;&quot;, nrows),
    sprintf(&quot;var words = %s;&quot;, toJSON(words)),
    &quot;  var table = this.api().table();&quot;,
    &quot;  function selectize(i) {&quot;,
    &quot;    $('#slct' + i).selectize({&quot;,
    &quot;      items: words[i-1],&quot;,
    &quot;      onChange: function(value) {&quot;,
    &quot;        table.cell(i-1, 2).data(value.length);&quot;,
    &quot;      }&quot;,
    &quot;    });&quot;,
    &quot;  }&quot;,
    &quot;  for(var i = 1; i &lt;= nrows; i++) {&quot;,
    &quot;    selectize(i);&quot;,
    &quot;    Shiny.setInputValue('slct' + i, words[i-1]);&quot;,
    &quot;  }&quot;,
    &quot;}&quot;
  )
  
  ui &lt;- fluidPage(
    br(),
    DTOutput(&quot;table&quot;),
    div( # this is a hidden selectize input whose role is to make
      # available 'selectize.js'
      style = &quot;display: none;&quot;,
      selectInput(&quot;id&quot;, &quot;label&quot;, c(&quot;x&quot;, &quot;y&quot;))
    )
  )
  
  server &lt;- function(input, output, session) {
    
    output[[&quot;table&quot;]] &lt;- renderDT({
      dat &lt;- data.frame(
        FOO = c(unique(d$name)),
        Words = vapply(
          1:nrows,
          function(i){
            selector(paste0(&quot;slct&quot;, i), words[[i]])
          },
          character(1)
        ),
        Count = lengths(words),
        stringsAsFactors = FALSE
      )
      
      datatable(
        data = dat,
        selection = &quot;none&quot;,
        escape = FALSE,
        rownames = FALSE,
        options = list(
          initComplete = JS(js),
          preDrawCallback = JS(
            'function() { Shiny.unbindAll(this.api().table().node()); }'
          ),
          drawCallback = JS(
            'function() { Shiny.bindAll(this.api().table().node()); }'
          )
        )
      )
    }, server = FALSE)
    
    
  }
  
  shinyApp(ui, server)
  </code></pre>