How to Change layout of dtr-control

bonaventure

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:
How can I change the design of the dtr.control td, so that following code is applied:

HTML (from render?):

         <td class="dtr-control" id="line-somelinenumber"> 
               <i id="icon-somelinenumber" class="fa fa-caret-down"></i>
         </td>   

my CSS (font awesome):

            .fa-caret-down{
              font-size: 1.8rem;
              color: green;
              transform: rotate(0deg);
              transition: transform 0.2s linear;
            }
            
            .fa-caret-down.open{
              font-size: 1.8rem;
              color: red;
              transform: rotate(-180deg);
              transition: transform 0.2s linear;
            }

my associated JS:

            var div = document.getElementById('line-somelinenumber'); 
              var icon = document.getElementById('icon-somelinenumber');
              var open = false;
              div.addEventListener('click', function(){
                if(open){
                  icon.className = 'fa fa-caret-down';  
                } else{
                  icon.className = 'fa fa-caret-down open';
                }
                open = !open;
              });

?
sorry, marking the code as such seems not to work correctly here in the editor :-/

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

allan

Remove the dtr-control class styles from your CSS file (or use a different class) and use columns.defaultContent for the column to have it render the i element (if you want the id to be dynamic, then you'd need to use a renderer).

Allan