title: Jquery Datatables with MVC custom column
body: <p>I've searched a lot on the internet but I can't find a way to do this.
  I'm using Jquery datatables:</p>
  
  <pre><code>var oTable = $('#boardTable2').DataTable({
              "ajax": {
                  "url": '/Boards/GetBoards',
                  "type": "get",
                  "datatype": "json",
                  "dataSrc": function(json) {
                      return json;
                  }
              },
              "columns": [                  
                  { "data": "Name" },
                  { "data": "Description" },
                  { "data": "StartDate" },
                  { "data": "EndDate" }
              ]
          });
  </code></pre>
  
  <p>Table looks like this:
  <a href="https://i.stack.imgur.com/4z8dD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4z8dD.png" alt="Table"></a></p>
  
  <p>But I want another custom column like this:</p>
  
  <pre><code>            &lt;div class="btn-group"&gt;
                  &lt;button class="btn btn-sm dropdown-toggle" data-toggle="dropdown"&gt;
                      &lt;i class="fa fa-wrench"&gt;&lt;/i&gt; &lt;span class="caret"&gt;&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;ul class="dropdown-menu fa-pull-right"&gt;
                      &lt;li&gt;
                          &lt;a href="@Url.Action("Edit", new { id = item.ID })"&gt;
                              &lt;i class="fa fa-pencil"&gt;&lt;/i&gt; Edit
                          &lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a id="DeleteBoard" data_number="@item.ID"&gt;
                              &lt;i class="fa fa-trash"&gt;&lt;/i&gt; Delete
                          &lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="@Url.Action("Details", new { Id = item.ID })"&gt;
                              &lt;i class="fa fa-info-circle"&gt;&lt;/i&gt; Details
                          &lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>Actually, this exact code to be another row. How do I do that? Any suggestions? Maybe I missed a similar question? I'm just completely lost so I would be thankful with any type of help.</p>