I need to change the border color of a datatable cell

Question

I need each cell in the first datatable column to change color as the table is scaled. The color will be defined as the table data is generated in the back-end.

Below is an example of how accurate:

On the left edge of the first column I need to define different colors for each data. This color will be defined as explained above.

Goes on as I’m calling the datatable:

 var st = $('#search_type').val();
 table = $('#ticket-table').DataTable({
  "dom" : "<'row'<'col-sm-12'tr>>" +
  "<'row'<'col-sm-5'i><'col-sm-7'p>>",
  "processing": true,
  "pagingType" : "full_numbers",
  "pageLength" : 15,
  "serverSide": false,
  "orderMulti": false,
  responsive: true,
  ordering: true,
  search:{
  smart: false,
  regex: true},
  order: [
  [5, 'asc'],
  [12, 'desc']
  ],
  columnDefs: [
  {
    'checkboxes': {
     'selectRow': true,
     selectAllPages: false,
   },
   'targets': [ 0 ],
   "render": function ( data, type, row, meta ) {
    return "<input type='checkbox' class='dt-checkboxes' name='selected_tickets' value='"+data+"'>";
  },
  orderable: false,
  "searchable": false
},
  { 
    className: "vertical-align-column nowrap-column", "targets": [0,1,2,11] 
  },
  { 
    className: 'vertical-align-column nowrap-column text-center', "targets": [3,4,5,6,7,8,9,10,13] 
  },
  { "targets": [2, 6], render: $.fn.dataTable.render.ellipsis( 20 , true, true) },
  { 
    "targets": [ 5, 8, 10, 12],
    "visible": false,
    "searchable": true
  },
  {
    orderData: 5,
    targets: [12]
  },
  { 
    "targets": [ 7 ],
    "orderable": false },
    { 
      "targets": [ 9 ],
      "orderable": false },
      { 
        "targets": [ 13 ],
        "orderable": false
      },
      { 
        "targets": [ 11 ],
        "orderable": false
      }
      ],

      'select': {
       'style': 'multi',
       'selector': 'td:first-child'
     }, 
     "language": {
      "sEmptyTable": "Nenhum registro encontrado",
      "sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros",
      "sInfoEmpty": "Mostrando 0 até 0 de 0 registros",
      "sInfoFiltered": "(Filtrados de _MAX_ registros)",
      "sInfoPostFix": "",
      "sInfoThousands": ".",
      "sLengthMenu": "Mostrar _MENU_ resultados por página",
      "sLoadingRecords": "Carregando...",
      "sProcessing": "Processando...",
      "sZeroRecords": "Nenhum registro encontrado",
      "sSearch": "Pesquisar: ",
      "oPaginate": {
        "sNext": "Próximo",
        "sPrevious": "Anterior",
        "sFirst": "Primeiro",
        "sLast": "Último"
      },
      "oAria": {
        "sSortAscending": ": Ordenar colunas de forma ascendente",
        "sSortDescending": ": Ordenar colunas de forma descendente"
      },
      buttons: {
        copy: 'Copiar',
        print: 'Imprimir',
        copyTitle: 'Copiado para área de transferência',
        copyKeys: 'Pressione <i>ctrl</i> ou <i>\u2318</i> + <i>C</i>  para copiar os dados da tabela para a área de transferência. <br><br>Para cancelar, clique sobre esta mensagem ou pressione Esc.',
        copySuccess: {
          _: '%d linhas copiadas',
          1: '1 linha copiada'
        }
      },
      select: {
        rows: {
          _: "%d linhas selecionadas",
          0: "",
          1: "Uma linha selecionada"
        }
      }
    },
    "ajax": {
      url : "<?php echo site_url("tick/tickpage/" . $page . "/" . $catid. "/" . $statusid. "/" . $situation. "/" . $date) ?>",
      type : 'GET',
      data : function ( d ) {
      }
    },
    "drawCallback": function(settings, json) {
      $('[data-toggle="tooltip"]').tooltip();
    }
  });
 $('#form-search-input').on('keyup change', function () {
  search_column = $('#search_type').val();
  if (search_column == 0) {
    table.search(this.value).draw();
  }else{
    table.columns(search_column).search(this.value).draw();
  }
});

Answer 1

I got the solution by adding inside columnDefs:

columnDefs: [
  { targets: 0,
   createdCell: function (td, cellData, rowData, row, col){
    $(td).css('border-radius', '4px');
    $(td).css('border-left', '4px solid '+rowData[14]);
  }
}]

The above code receives the color coming from column number 14 that is hidden and adds in the first column the style you needed.