How Can I set Background color of selected Headers only in table ?

How Can I set Background color of selected Headers only in table ?

Shivani VyasShivani Vyas Posts: 113Questions: 11Answers: 0

Hello, I would like to change the background color of specific column header which has complex headers. I found many example but all of them are for whole table headers. But I would like to only change One column header with child headers.
Basically I want to change single column's color with its header.

Here is what I done so far to change the cells color.

     <!-- CSS For Client Submission Columns -->
    <style>
        .pink {
        background-color: #d1cccc !important;
    }
    </style>


    <div class='container-fluid ms-7 w-auto'>
      <div class='card'>
        <div class='card-body'>
          <div id='phaseTable' class='content'>
            <table id='reportMatrix' class='stripe row-border order-column' style='width:100%'>
              <thead>

                <tr class=''>

                    <th class='text-center', rowspan="2">Procedure</th>
                    <th class='text-center', rowspan="2">All</th>
                    <th class='text-center', rowspan="2">Awaiting Install</th>
                    <th class='text-center', rowspan="2">Installed</th>
                    <th class='text-center', rowspan="2">PICO in Progress</th>
                    <th class='text-center', rowspan="2">PICO Received</th>

                    <th class='text-center', colspan="4">PICO Report Complete</th>
                    <th class='text-center', colspan="4">Client Submission</th>

                </tr>


                <tr class=''>

                    <th class='text-center'>P-MD</th>
                    <th class='text-center'>Pass</th>
                    <th class='text-center'>No Status</th>
                    <th class='text-center'>Fail</th>

                    <th class='text-center'>Reviewed</th>
                    <th class='text-center'>Reviewed as Noted</th>
                    <th class='text-center'>Rejected</th>
                    <th class='text-center'>In Review (Submitted)</th>

                </tr>
              </thead>
              <tbody>


    <script>
    $(document).ready(function() {

      var table = $('#reportMatrix').DataTable( { 
        dom: 'lBfrtip',
        processing: true,

        //TABLE WINDOW
        scrollY:        "65vh",
        scrollX:        true,
        scrollCollapse: true,
        paging:         true,

        stateSave: true,
        responsive: true,
        colReorder: true,


        //BUTTONS
          buttons: [],

        //PAGINATION OPTIONS
          pageLength: 50,
          lengthMenu: [[50, 100, 250, 500, -1], [50, 100, 250, 500, "All"]],


      });

      // Client Submission Colums - color
        table.rows().every( function ( rowIdx, tableLoop, rowLoop ) {       
            var cell = table.cell({ row: rowIdx, column: 10 }).node();
            var title = table.columns( cell ).header();  // Tried adding this line but its not working
            $(cell).addClass('pink');        
        });

        table.rows().every( function ( rowIdx, tableLoop, rowLoop ) {       
            var cell = table.cell({ row: rowIdx, column: 11 }).node();
            $(cell).addClass('pink');        
        });

        table.rows().every( function ( rowIdx, tableLoop, rowLoop ) {       
            var cell = table.cell({ row: rowIdx, column: 12 }).node();
            $(cell).addClass('pink');        
        });

        table.rows().every( function ( rowIdx, tableLoop, rowLoop ) {       
            var cell = table.cell({ row: rowIdx, column: 13 }).node();
            $(cell).addClass('pink');        
        });

Here is the picture of output: I am able to color column's data ( cells) but not headers.

This question has an accepted answers - jump to answer

Answers

  • Shivani VyasShivani Vyas Posts: 113Questions: 11Answers: 0

    Ok I found my mistake and did below changes still I am only able to color child headers. How do I color the header ' Client Submissions' ?

    Here is updated code:

        // Client Submission Colums - color
            table.rows().every( function ( rowIdx, tableLoop, rowLoop ) {       
                var cell = table.cell({ row: rowIdx, column: 10 }).node();
                var title = table.columns( cell ).header();
                $(cell).addClass('grey');  
                $(title).addClass('grey');      
            });
    
            table.rows().every( function ( rowIdx, tableLoop, rowLoop ) {       
                var cell = table.cell({ row: rowIdx, column: 11 }).node();
                var title = table.columns( cell ).header();
                $(cell).addClass('grey'); 
                $(title).addClass('grey');       
            });
    
            table.rows().every( function ( rowIdx, tableLoop, rowLoop ) {       
                var cell = table.cell({ row: rowIdx, column: 12 }).node();
                var title = table.columns( cell ).header();
                $(cell).addClass('grey');
                $(title).addClass('grey');        
            });
    
            table.rows().every( function ( rowIdx, tableLoop, rowLoop ) {       
                var cell = table.cell({ row: rowIdx, column: 13 }).node();
                var title = table.columns( cell ).header();
                $(cell).addClass('grey'); 
                $(title).addClass('grey');       
            });
    

    Here is output:

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794
    Answer ✓

    Datatables only knows about one header, the one that has the sorting event handlers. You can use standard jQuery, Javascript and CSS settings to apply the background to the other desired headers.

    Kevin

  • Shivani VyasShivani Vyas Posts: 113Questions: 11Answers: 0

    Thank you Kevin , I figure it out. I just simply added CSS class in to html <th> tag.
    Thank you.

Sign In or Register to comment.