Color extra info child rows

Color extra info child rows

Tripple DeltaTripple Delta Posts: 8Questions: 1Answers: 0

Link to test case: https://www.datatables.net/examples/api/row_details.html

When clicking on the arrow extra info is shown. But the background color is always white. Is there a way to change that color?

This question has an accepted answers - jump to answer

Answers

  • rf1234rf1234 Posts: 2,787Questions: 85Answers: 403

    I would just wrap this in a div-tag and add the style for the background color to that div.
    Maybe something like this could work (haven't tested it):

    // Formatting function for row details - modify as you need
    function format(d) {
        // `d` is the original data object for the row
        return (
           '<div style="background-color:lightblue"> +
            '<dl>' +
            '<dt>Full name:</dt>' +
            '<dd>' +
            d.name +
            '</dd>' +
            '<dt>Extension number:</dt>' +
            '<dd>' +
            d.extn +
            '</dd>' +
            '<dt>Extra info:</dt>' +
            '<dd>And any further details here (images etc)...</dd>' +
            '</dl>' + 
            '</div>
        );
    }
    
  • kthorngrenkthorngren Posts: 19,916Questions: 26Answers: 4,696
    Answer ✓

    @rf1234 has a good and simple answer. Another option is to use use CSS. If you inspect the parent row you will see the class dt-hasChild is applied when the child is shown. You can use a CSS like this:

    tr.dt-hasChild + tr {
      background-color: green!important;
    }
    

    https://live.datatables.net/nubiworo/1/edit

    Two options to choose from :smile:

    Kevin

  • Tripple DeltaTripple Delta Posts: 8Questions: 1Answers: 0

    Thanks a lot. But I had to change it like this to keep it alternating.

    tr.odd.dt-hasChild + tr {
        background-color: green !important;
    }
    
Sign In or Register to comment.