title: How can I display the responsive datatable's expand/collapse icon in the right side of the first column's value?
body: <p>I'm using responsive datatable (<a href="https://www.datatables.net/extensions/responsive/examples/display-control/classes.html" rel="nofollow noreferrer">https://www.datatables.net/extensions/responsive/examples/display-control/classes.html</a>). but the expand/collapse icon is appearing in the left side of the first column's value.</p>
  
  <p>How can I change that to appear in the right side of first column's value.</p>
  
  <p>Also want to change the icon style to use Font Awesome's icon</p>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>$(document).ready( function () {
    var table = $('#example').DataTable({
      responsive: {
              details: {
                  type: 'column'
              }
          },
          columnDefs: [ {
              className: 'control',
              orderable: false,
              targets:   0
          } ],
          order: [ 1, 'asc' ]
    });
  } );
  </code></pre>
  
  <p><strong>HTML Code:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;       
    &lt;body&gt;
      &lt;div class="container"&gt;
        &lt;table id="example" class="display responsive" width="100%"&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th&gt;&lt;/th&gt;
              &lt;th&gt;Name&lt;/th&gt;
              &lt;th&gt;Position&lt;/th&gt;
              &lt;th&gt;Office&lt;/th&gt;
              &lt;th&gt;Age&lt;/th&gt;
              &lt;th&gt;Start date&lt;/th&gt;
              &lt;th&gt;Salary&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
  
          &lt;tfoot&gt;
            &lt;tr&gt;
              &lt;th&gt;&lt;/th&gt;
              &lt;th&gt;Name&lt;/th&gt;
              &lt;th&gt;Position&lt;/th&gt;
              &lt;th&gt;Office&lt;/th&gt;
              &lt;th&gt;Age&lt;/th&gt;
              &lt;th&gt;Start date&lt;/th&gt;
              &lt;th&gt;Salary&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/tfoot&gt;
  
          &lt;tbody&gt;
            &lt;tr&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;Tiger Nixon&lt;/td&gt;
              &lt;td&gt;System Architect&lt;/td&gt;
              &lt;td&gt;Edinburgh&lt;/td&gt;
              &lt;td&gt;61&lt;/td&gt;
              &lt;td&gt;2011/04/25&lt;/td&gt;
              &lt;td&gt;$3,120&lt;/td&gt;
            &lt;/tr&gt;
            &lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>