title: Laravel Yajra datatables rendering custom html / column styling
body: <p>I have spent a fair few days researching datatables and yajra package, That said I am no closer to getting the result I need and would greatly appreciate a helping hand on this one if anyone with more knowledge than my novice approach!</p>
  
  <p>To help explain better I have attached two images, First image is of an application that already has this implemented and second is a quick mock I have thrown up to show the difference.</p>
  
  <hr>
  
  <p><strong>The desired outcome I am hoping to achieve...  <a href="https://i.stack.imgur.com/WEL1j.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WEL1j.jpg" alt="enter image description here"></a></strong></p>
  
  <hr>
  
  <p><strong>The present view I have...<a href="https://i.stack.imgur.com/x5R9U.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/x5R9U.jpg" alt="enter image description here"></a></strong></p>
  
  <hr>
  
  <p>I'm basically trying to add custom html to each column that requires the functionality.. I have managed to achieve some slight success by returning a custom array like so:</p>
  
  <pre><code>foreach ($tasks as $task) {
      $checkBox = '&lt;div class="checkbox"&gt;&lt;input type="checkbox" value="63"&gt;&lt;label&gt;&lt;/label&gt;&lt;/div&gt;';
      $taskPriority = '&lt;span class="text-info inline-block"&gt;Medium&lt;/span&gt;';
              ... so on ...
      $row = array(
          $checkBox,
          $taskPriority,
          ... so on ...
      );
      $rows[] = $row;
  }
  $list['data'] = $rows;
  return $list;
  </code></pre>
  
  <p>While this works I would not say its the best approach and one imagines there is some what a better and more elegant way of doing this?</p>
  
  <p>I understand yajra has the addColumn and editColumn methods, I have used these to add an action column as that is the only one that seems to render any html, Any other method other than addColumn('action', 'blah blah') seems not to want to render the html and instead displays it as raw text in the row.</p>
  
  <p>Just in case this is to help anyone, here is the Ajax call made to get the table data.</p>
  
  <pre><code>$('#taskstable').DataTable({
      "processing": true,
      "retrieve": true,
      "serverSide": true,
      'paginate': true,
      'searchDelay': 700,
      "bDeferRender": true,
      "responsive": true,
      "autoWidth": false,
      "pageLength": 5,
      "lengthMenu": [[5, 10, 25, 50, 100], [5, 10, 25, 50, 100]],
      ajax: '/tasks/get-tasks'
  });
  </code></pre>
  
  <p>Hopefully someone can help relieve the stress of being a novice! Thanks.</p>