Bootstrap 5 createdRow not working with Editor

nanya

I'm trying Editor with Bootstrap 5.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/2.0.2/css/dataTables.bootstrap5.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/3.0.1/css/buttons.bootstrap5.css">
<link rel="stylesheet" href="https://cdn.datatables.net/select/2.0.0/css/select.bootstrap5.css">
<link rel="stylesheet" href="https://cdn.datatables.net/datetime/1.5.2/css/dataTables.dateTime.min.css">
<link rel="stylesheet" href="../css/editor.bootstrap5.css">

<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.datatables.net/2.0.2/js/dataTables.js"></script>
<script src="https://cdn.datatables.net/2.0.2/js/dataTables.bootstrap5.js"></script>
<script src="https://cdn.datatables.net/buttons/3.0.1/js/dataTables.buttons.js"></script>
<script src="https://cdn.datatables.net/buttons/3.0.1/js/buttons.bootstrap5.js"></script>
<script src="https://cdn.datatables.net/select/2.0.0/js/dataTables.select.js"></script>
<script src="https://cdn.datatables.net/select/2.0.0/js/select.bootstrap5.js"></script>
<script src="https://cdn.datatables.net/datetime/1.5.2/js/dataTables.dateTime.min.js"></script>
<script src="../js/dataTables.editor.js"></script>
<script src="../js/editor.bootstrap5.js"></script>

new DataTable('#example', {
    ajax: {
        url: '../controllers/joinLinkTable.php',
        type: 'POST'
    },
    columns: [
        { data: '...' }, and so on

Now, when I try to add class

createdRow: function( row, data, dataIndex ) {
$(row).addClass('text-nowrap');
if ( data[3] !== 'Completed' ) { $(row).addClass('table-warning');}

There are few problems:
1. $(row).addClass('text-nowrap'); this part works.
2. when I change to $(row).addClass('table-warning'); it adds the class table-warning but the color doesn't change.
3. this part if ( data[3] !== 'Completed' ) { $(row).addClass('table-warning');} doesn't add a class at all.
4. when I change to if ( data[3] !== 'Completed' ) { $('td', row).addClass('table-warning');} it adds class table-warning to all td, regardless. But the color not changing at all.

Can anyone help please? I want to change row color based on a cell value.
Thanks.

kthorngren

{ data: '...' }, and so on

It looks like you are using columns.data to define the columns. This suggests the row data is an object not an array. If, for example, you had this:

    columns: [
        { data: 'name' },
        { data: 'position' },
        { data: 'office' },
        { data: 'extn' },
        { data: 'start_date' },
        { data: 'salary' }
    ]

You would use data.extn !== 'Completed' for the forth column, instead of data[3] !== 'Completed.

it adds class table-warning to all td, regardless. But the color not changing at all.

We will need to see the problem to help debug. Please post a link to your page or test case replicating the issue so we can take a look.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

nanya

@kthorngren
Thank you Kevin

This works:

You would use data.extn !== 'Completed' for the forth column, instead of data[3] !== 'Completed.

The color still not changing. I will try to create a test case and provide the link.

nanya

Just a quick note before I provide a test case.
I try to manually define the css and I can change font sizes, style, etc.
But the color won't work. (Both color and background-color).

kthorngren

To investigate inspect the element tr or td that you ware trying to apply the styling to. You should be able to see if the style you are expecting is applied or if its overridden by something else. That's why we need a test case to do the same

Kevin

nanya

Please check
https://live.datatables.net/bovawako/1/edit

I found the problem. Not the solution though
When I change
<table id="example" class="display nowrap" width="100%">
into
<table id="example" class="table table-sm table-striped table-hover align-middle" style="width:100%">
then the color not working.

kthorngren

I found one issue. You need a more specific selector or possibly use !important for the background-color to work. Inspecting the row I see this:

Changing the selector to match what Datatables uses works:

table.table.dataTable > tbody > tr.cing {
  background-color: yellow;
  color: red;
  font-weight: bold;
}

https://live.datatables.net/bovawako/2/edit

I'm not sure why color: red isn't applied. Someone more familiar with CSS than me will need to look. Hopefully @allan can help.

Kevin

nanya

Thank you for that Kevin. But yes it partially work.
And that also means if I use standard bootstrap class "table-danger", etc to color it, definitely will not work, because I need to define more specific selector.
So, in short this is not fully bootstrap5 compatible at the moment.

allan

Setting a class on the row does work as far as I can see: https://live.datatables.net/varavebi/1/edit ?

The red colour isn't applying in Kevin's example due to this rule from Bootstrap:

.table > :not(caption) > * > * {
  color: var(--bs-table-color-state,var(--bs-table-color-type,var(--bs-table-color)));
}

So that one is expected. The override rule would just need to be specific enough to take priroty - https://live.datatables.net/bovawako/6/edit

Allan