title: How to add select element with dynamic data into datatables.net table?
body: <p>I am trying to add a select dropdown to each of my rows in a dataTable from datables version 1.10.23. Both my table data and select data is coming from an API that returns JSON. I have a separate funtion that gets the select data, builds the selected element in JS and returns the whole element. Normally I can append this to a div no problem, but when trying to add to my data tabel I get: [object HTMLSelectElement] in my table instead of the actual select element.</p>
  <p>Code:</p>
  <pre class="lang-js prettyprint-override"><code>    async function buildRentalReturnTable() {
  
      // table data
      let rentalData = await getRentalDetails();
     
      if ($.fn.DataTable.isDataTable('#rentalReturnTable')) {
          $('#rentalReturnTable').DataTable().destroy();
      }
      // returns whole  selected element with options populated from API 
      let selectElement = await buildStatusDDL();  
  
      $(&quot;#rentalReturnTable&quot;).DataTable({
          &quot;destroy&quot;: true,
          &quot;data&quot;: rentalData,
          &quot;dom&quot;: '&lt;&quot;top&quot;i&lt;&quot;clear&quot;&gt;&gt;&lt;&quot;top d-flex justify-content-between pt-1&quot;lf&gt;rt&lt;&quot;bottom pt-2&quot;p&gt;',
          &quot;fixedHeader&quot;: true,
          &quot;scrollY&quot;: &quot;50vh&quot;,
          &quot;scrollCollapse&quot;: true,
          &quot;oLanguage&quot;: {
              &quot;sEmptyTable&quot;: &quot;No results found&quot;,
              &quot;sSearch&quot;: &quot;Filter Results:&quot;
          },
          &quot;columnDefs&quot;: [{
              &quot;targets&quot;: 0,
              &quot;orderable&quot;: false
          }],        
          &quot;order&quot;: [[1, 'asc']],
          &quot;columns&quot;: [
              {
                  &quot;data&quot;: function (data) {                    
                      return selectElement
                  }, &quot;title&quot;: &quot;Status&quot;
  
              },
              { &quot;data&quot;: &quot;RentalLPID&quot;, &quot;title&quot;: &quot;RentalLPID&quot; },
              { &quot;data&quot;: &quot;SKU&quot;, &quot;title&quot;: &quot;SKU&quot; },
              { &quot;data&quot;: &quot;Description1&quot;, &quot;title&quot;: &quot;Description1&quot; },
              { &quot;data&quot;: &quot;NextRentalDate&quot;, &quot;title&quot;: &quot;NextRentalDate&quot; },
          ],
          &quot;pagingType&quot;: &quot;full_numbers&quot;,
          &quot;lengthMenu&quot;: [
              [10, 25, 50, -1],
              [10, 25, 50, &quot;All&quot;]
          ],
          responsive: true
      });
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/bTMRr.png" rel="nofollow noreferrer">UI example</a></p>
  <p>Any suggestions?</p>