Problem with Bootstrap5 and table Variants or Bug ?

Problem with Bootstrap5 and table Variants or Bug ?

franciscabrel2001franciscabrel2001 Posts: 8Questions: 1Answers: 0

Link to test case: https://jsfiddle.net/4L6pw1mb/6/

Just want to add classes like table-warning on a <tr> as explained on BS5-docs, but Datatables delete background-color...

Everyone can help me to solve this problem ?

Thanks

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    If you want it on the row, you can use createdRow, the example on that page is adding a class so that should get you going,

    Colin

  • franciscabrel2001franciscabrel2001 Posts: 8Questions: 1Answers: 0

    Hi
    I updated my test with your idea, but nothing change
    https://jsfiddle.net/qkdufmga/

    Any idea ?

    Thanks

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394

    Take another look at the example.
    $(row).addClass( ....); should contain the class name.

  • franciscabrel2001franciscabrel2001 Posts: 8Questions: 1Answers: 0

    In the test, I put the standard BS5 class name in the TD to use it in the $(row).addClass()...
    The class name is well recognized, but only applies to the hover

  • franciscabrel2001franciscabrel2001 Posts: 8Questions: 1Answers: 0

    I modified the test : https://jsfiddle.net/q2x4vrt7/4/

    If I have "none", I apply a text-end class on the line: Ok
    Otherwise I apply a graphic style with class name on the TD, some work but not all...

  • franciscabrel2001franciscabrel2001 Posts: 8Questions: 1Answers: 0

    And in https://jsfiddle.net/71hw5kL8/1/ I put the normal BS5 table below

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    I'm not sure what I'm looking at, sorry. The class is being added as expected - so I'm not clear what your issue is. Can you explain what you want to happen, and what is happening, please.

    Colin

  • franciscabrel2001franciscabrel2001 Posts: 8Questions: 1Answers: 0

    The classes are added, but DataTables seems to destroy the initial functioning of those.
    The first table uses BS5 and Datatables, the second BS5 only ... BS5 allowing with very specific classes to add color effects that Datatables visibly refuses to apply: we should have the same presentation on both tables (colors in particular)

  • franciscabrel2001franciscabrel2001 Posts: 8Questions: 1Answers: 0

    A new test with more comments : https://jsfiddle.net/7j2xev0h/

  • allanallan Posts: 61,444Questions: 1Answers: 10,053 Site admin

    Thank you - I agree. The issue is with how we are applying the row striping. Because we can insert rows (e.g. a child row or a grouping row) we can't rely just on :nth-child() selector in the same way that Bootstrap does. We also apply the background colour to the cell, rather than the row (honestly, I can't remember off the top of my head why that is!).

    My current plan to address this is to use an inner box-shadow for the striping rather than using a background colour. Then whatever background colour you are using will just work, and include striping.

    I don't have an immediate timeframe for that yet I'm afraid, but it is on my radar.

    Allan

  • franciscabrel2001franciscabrel2001 Posts: 8Questions: 1Answers: 0

    This will be fixed when this is fixed :)
    The main thing was to at least report the problem.

Sign In or Register to comment.