title: How to load a color strip to datatable instead of color code?
body: <p>what is the way to get the color code as a color strip to the datable? In the attached picture it shows how the color code pass to the datatable. I need to replace the code with the relavant color strip. Is it possibole and what is the correct way?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    $("#ServiceCreatorTable").DataTable
          ({
              "processing": true,
              "serverSide": true,
              "filter": true,
              "ajax": {
                  "url": window.ApiUrl + "/ServiceCreator/GetServiceDetails",
                  "type": "POST",
                  "datatype": "json"
              },
              "columnDefs": [{
                  "targets": [0],
                  "orderable": true,
  
              }, 
              {
                  "targets": [8],
                  "searchable": false,
                  "orderable": false
              }],
  
              "columns": [
                  { "data": "service_Creator_Id", "name": "Service ID", "autoWidth": true },
                  { "data": "service_Creator_Code", "name": "Service Code", "autoWidth": true },
                  { "data": "service_Creator_Name", "name": "Service Name", "autoWidth": true },
                  { "data": "service_Creator_Desc", "name": "Service Description", "autoWidth": true },
                  { "data": "service_Category_Name", "name": "Service Category ID", "autoWidth": true },
                  { "data": "service_Sub_Cat_Name", "name": "Sub Service Category ID", "autoWidth": true },
                  { "data": "no_of_Sub_Services", "name": "No of Services", "autoWidth": true },
                  { "data": "colour", "name": "Service Colour", "autoWidth": true },
  
                  {
                      'data': null,
                      'render': function (data, type, row) {
                          return '&lt;button class="btn btn-outline-danger btn-sm text-center" onclick="deleteservice(' + row.service_Creator_Id + ')"&gt;&lt;i class="fas fa-trash-alt"&gt;&lt;/i&gt;&lt;/button&gt;'
                      }
                  },
  
              ]
          });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table id="ServiceCreatorTable" class="table table-striped table-bordered table-responsive-sm" width="100%"&gt;
                                  &lt;thead&gt;
                                      &lt;tr&gt;
                                          &lt;th&gt;SN&lt;/th&gt;
                                          &lt;th&gt;Code&lt;/th&gt;
                                          &lt;th&gt;Service Name&lt;/th&gt;
                                          &lt;th&gt;Description&lt;/th&gt;
                                          &lt;th&gt;Service Category&lt;/th&gt;
                                          &lt;th&gt;Sub Service Category&lt;/th&gt;
                                          &lt;th&gt;No Of Sub Services&lt;/th&gt;
                                          &lt;th&gt;Colour&lt;/th&gt;
                                          &lt;th&gt;&lt;/th&gt;
                                      &lt;/tr&gt;
                                  &lt;/thead&gt;
                              &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://i.stack.imgur.com/kPRL7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kPRL7.png" alt="enter image description here" /></a></p>