title: render dropdown for single column in DT shiny BUT loaded only on cell click and with replaceData()
body: <h1>Goal</h1>
  <ul>
  <li>To have select dropdown in DT datatables not at the building of the datatable but built on cell click, with <code>replaceData()</code> and with the datas on RDBMS (SQL Server).</li>
  <li>When I click on the selected option of the , for example <code>Ohio</code> I want to set my data (and the RDBMS) with the id <code>2</code>.</li>
  </ul>
  <h1>The issue</h1>
  <ul>
  <li><p>With <code>replaceData()</code></p>
  <ul>
  <li>the events of select are unbinded. It strange because only the cells where I've clicked are unbinded.</li>
  <li>the selected page is lost</li>
  <li><strong>Update of StateId works</strong> (but I cannot click again on if  I select an another raw and come back)</li>
  <li>and, it's a positive thing I think, the select are drawn at row select</li>
  </ul>
  </li>
  <li><p>Without <code>replaceData()</code></p>
  <ul>
  <li>all the events are binded but I cannot update StateId  in DT datatable</li>
  <li>neither in datas (and consequently not in RDMBS SQL update)</li>
  </ul>
  </li>
  </ul>
  <h1>Used yet</h1>
  <p>I used  this trick below to add checkbox in DT Table. It works very well but it's very slow at the building when there is lot of datas because the amount of html for each checkbox is very important.</p>
  <ul>
  <li><a href="https://stackoverflow.com/a/50178470/10489562">R Shiny, how to make datatable react to checkboxes in datatable</a> by Shrek Tan</li>
  </ul>
  <h1>Read yet, and inspired by</h1>
  <p>I used this trick below, similar to previous part, to write my code. But I try to build only on cell click because I know by the previous part that is slow</p>
  <ul>
  <li><a href="https://stackoverflow.com/a/57218361/10489562">render dropdown for single column in DT shiny</a> by GyD (and Yihu).</li>
  </ul>
  <h1>Here is my reprex</h1>
  <p>Thank you in advance for your help :)</p>
  <pre><code>library(shiny)
  library(DT)
  library(dplyr)
  library(shinyjs)
  library(DescTools)
  # inspired by https://stackoverflow.com/questions/57215607/render-dropdown-for-single-column-in-dt-shiny/57218361#57218361
  # 
  ui &lt;- fluidPage(
    useShinyjs(),
    tags$head(tags$script(
      HTML(&quot;
        Shiny.addCustomMessageHandler('unbindDT', function(id) {
          var $table = $('#'+id).find('table');
          if($table.length &gt; 0){
          
            Shiny.unbindAll($table.DataTable().table().node());
          }
        })&quot;)
    )),
    title = 'Selectinput column in a table',
    DT::dataTableOutput('foo_dt'),
    verbatimTextOutput('selection'),
    textInput(&quot;mypage&quot;,label = NULL,value =&quot;&quot; )
  )
  # in real case : Query on RDBMS SQL Server
  df_product &lt;- data.frame( Product = c(rep(&quot;Toaster&quot;, 3), rep(&quot;Radio&quot;, 3)),StateId = c(3,2,2,1,1,2), stringsAsFactors = FALSE)
  df_state &lt;- data.frame(StateId = c(1,2,3), State = c(&quot;Alabama&quot;,&quot;Ohio&quot;,&quot;WDC&quot;), stringsAsFactors = FALSE)
  
  df_datatable  &lt;- df_product %&gt;% left_join(.,df_state, by = c(&quot;StateId&quot;=&quot;StateId&quot;)) %&gt;% select (Product,State,StateId)
  
  myselected_vector &lt;- (which(colnames(df_datatable) %in% c(&quot;StateId&quot;))    )
  target_vector &lt;- (which(colnames(df_datatable) %in% c(&quot;State&quot;))    )
  
  
  df_state_select &lt;-df_state %&gt;% transmute   (value=StateId,label=State) %&gt;% unique()
  
  list_label_value=setNames(df_state_select$value,df_state_select$label)
  
  selectInputModel &lt;-gsub(&quot;[\r\n]&quot;, &quot;&quot;, as.character(
    selectInput(&quot;selectionXX&quot;, &quot;&quot;, choices = list_label_value, width = &quot;100px&quot;)
  ))
  
  server &lt;- function(input, output, session) {
    
    
    
    react &lt;- reactiveValues(
      foo_dt_page=NULL,
      # in real case : Query on RDBMS SQL Server
      datas = df_datatable,
      foo_dt_refresh= FALSE
    )  
    
    
    datas_react &lt;-reactive({
      input_evt=react$foo_dt_refresh
      isolate(react$datas)
    })
    
    proxy_foo_dt=dataTableProxy('foo_dt')
    
    
    output$foo_dt = DT::renderDataTable(
      datas_react(), escape = FALSE, selection='single',
      server = TRUE,
      editable = list(target = &quot;cell&quot;),
      options = list(
        ordering = FALSE,
        columnDefs = list(
          list(orderable = FALSE, className = 'details-control', targets = target_vector),
          list(width = '10px', targets = myselected_vector)
        ),
        stateSave = TRUE,
        pageLength = 2,
        lengthMenu = c(2,5,6),
        preDrawCallback = JS('function() { 
                                Shiny.unbindAll(this.api().table().node()); }'), 
        drawCallback = JS(&quot;function() { 
         
                          mypage = $('#mypage').val();        
                          if (typeof mypage !== 'undefined' &amp;&amp; mypage.trim().length!=0) {
                            if ( $('#foo_dt').find('.dataTable').DataTable().page()!=parseInt(mypage) ) {
                                $('#foo_dt').find('.dataTable').DataTable().page(parseInt(mypage)).draw(false);
                                $('#mypage').val('');
                            }
                          } 
  
                           Shiny.bindAll(this.api().table().node()); 
                           
  
  
                           } &quot;)
      ),
      
      callback = JS(paste0(&quot;
      
  
           table.on('click', 'td.details-control', function() {
               console.log('phil test')
          
               var td = $(this),
                   row = table.row(td.closest('tr'));
               myrow = row.data()[0];
               myselected = row.data()[&quot;,myselected_vector[1],&quot;];
  
               if ($('#selection' + myrow).length == 0) {
          
                   selectInputModel = '&quot;,selectInputModel[1],&quot;';
                   
                   selectInputModel = selectInputModel.replace('&lt;select id=\\\&quot;selectionXX\\\&quot;&gt;','&lt;select id=\\\&quot;selectionXX\\\&quot;  class=\\\&quot;shiny-bound-input\\\&quot;&gt;');
                   selectInputModel = selectInputModel.replace(/XX/g, myrow);
                   // selectInputModel = selectInputModel.replace('selected', '');
                   selectInputModel = selectInputModel.replace('value=\\\&quot;' + myselected + '\\\&quot;', 'value=\\\&quot;' + myselected + '\\\&quot; selected');
                   td.html(selectInputModel);
          
                   Shiny.unbindAll(table.table().node());
  
                   Shiny.bindAll(table.table().node());
               }
          
           })
                    
      &quot;))
    )
    
    output$selection = renderPrint({
      str(sapply(1:nrow(datas_react()), function(i) input[[paste0(&quot;selection&quot;, i)]]))
    })
    
    
    ReplaceData_foo_dtRefresh &lt;- function (react) {
      react$foo_dt_refresh &lt;- TRUE
      session$sendCustomMessage(&quot;unbindDT&quot;, &quot;foo_dt&quot;)
      replaceData(proxy_foo_dt,(datas_react()) , resetPaging = TRUE)
      
      
      react$foo_dt_refresh &lt;- FALSE
      
    }
    
    observeEvent(lapply(1:nrow(isolate(datas_react())), function(i) input[[paste0(&quot;selection&quot;, i)]]), {
      validate(
        need(!is.null(input$foo_dt_cell_clicked) , message = FALSE)
      )
      
  
      print(
        paste0(Sys.time() ,&quot; : &quot;, 
               as.character( input$foo_dt_cell_clicked$row),&quot; =&quot; ,
               input[[paste0(&quot;selection&quot;,  input$foo_dt_cell_clicked$row )]]
        )
      )
      
      if ( react$datas[input$foo_dt_cell_clicked$row,myselected_vector]!= input[[paste0(&quot;selection&quot;,  input$foo_dt_cell_clicked$row )]] ) {
        isolate(react$datas[input$foo_dt_cell_clicked$row,myselected_vector]&lt;- input[[paste0(&quot;selection&quot;,  input$foo_dt_cell_clicked$row )]] )
        isolate(react$datas[input$foo_dt_cell_clicked$row,target_vector]&lt;-(df_state %&gt;% filter(StateId==input[[paste0(&quot;selection&quot;,  input$foo_dt_cell_clicked$row )]]))$State)
        
        ReplaceData_foo_dtRefresh (react)
  
        updateTextInput(session,&quot;mypage&quot;,label = NULL,ceiling(input$foo_dt_cell_clicked$row / input$foo_dt_state$length)-1)
      }
      
      
    },ignoreNULL = TRUE)
    
    
  }
  
  shinyApp(ui, server)
  
  </code></pre>
  <p>xfun::session_info()</p>
  <pre><code>Package version:
    assertthat_0.2.1   backports_1.1.7    BH_1.72.0.3        callr_3.4.3        cli_2.0.2          colorspace_1.4.1   compiler_3.6.3     crayon_1.3.4      
    crosstalk_1.0.0    desc_1.2.0         digest_0.6.25      dplyr_1.0.0        DT_0.12.1          ellipsis_0.3.1     evaluate_0.14      fansi_0.4.1       
    farver_2.0.3       fastmap_1.0.1      generics_0.0.2     ggplot2_3.3.1      glue_1.4.1         graphics_3.6.3     grDevices_3.6.3    grid_3.6.3        
    gtable_0.3.0       htmltools_0.4.0    htmlwidgets_1.5.1  httpuv_1.5.2       isoband_0.2.1      jsonlite_1.6.1     labeling_0.3       later_1.0.0       
    lattice_0.20.38    lazyeval_0.2.2     lifecycle_0.2.0    magrittr_1.5       MASS_7.3.51.5      Matrix_1.2.17      methods_3.6.3      mgcv_1.8.31       
    mime_0.9           munsell_0.5.0      nlme_3.1.141       pillar_1.4.4       pkgbuild_1.0.8     pkgconfig_2.0.3    pkgload_1.1.0      praise_1.0.0      
    prettyunits_1.1.1  processx_3.4.2     promises_1.1.0     ps_1.3.3           purrr_0.3.4        R6_2.4.1           RColorBrewer_1.1.2 Rcpp_1.0.4.6      
    rlang_0.4.6        rprojroot_1.3.2    rstudioapi_0.11    scales_1.1.1       shiny_1.4.0        sourcetools_0.1.7  splines_3.6.3      stats_3.6.3       
    testthat_2.3.2     tibble_3.0.1       tidyselect_1.1.0   tools_3.6.3        utf8_1.1.4         utils_3.6.3        vctrs_0.3.1        viridisLite_0.3.0 
    withr_2.2.0        xfun_0.14          xtable_1.8-4       yaml_2.2.1        
  </code></pre>