Editor table in child row, style inherited by parent table?

Tronik

Hi,

I'm using child rows in which a child editor table is displayed, as shown in this blog post https://datatables.net/blog/2019-01-11

It works great but I'm having some trouble with the styling on the child table.

It seems like the child tables inherits most of the css/styling from the parent table.

If the parent table have class=display, and the child table have no class, the child table will still use the display class from the parent.

It's not my enviroment that causes it, I tested on the blog post on the inspection tool, removing the class=display on the parent also affects the child.

Any suggestions on how to make the child tables "style-independent"?

Also, when debugging this I found that the draw events on the child table is not reflected in console as the child table draw, but the parent.

$('table').DataTable().on('draw', function() {
    console.log('table draw #+this.id);
  });

The above will output 'table draw #parent_table' even if its the child that is actually drawn

allan

Excellent point. Nearly all of the styles we use in DataTables are not immediate descendent specific, but rather a general cascade - e.g. here.

We should perhaps change that to stop this sort of bleed through. I've just created a bug in our internal tracker (DD-2361). I can't say for sure when that will get implemented though. At the moment you'll need to add some custom CSS to modify the styles you don't want on the child table.

Allan

Tronik

Thank you for the explanation.

I removed the striped rows and hover effect by adding

table.temp_table tbody tr { 
pointer-events: none; 
background-color: #FFFFFF !important;
} 

Tronik

Is it possible somehow to prevent the draw event of the main table when the child table is created/shown?
I dont know why it is done, but it is not necessary.

allan

The draw event bubbles up the document. So a draw from the child will bubble up through the document, through the parent table and right the way to the body and document.

If you want to be certain which table the event is coming from you will need to check the settings object which contains the data for the original table - e.g.

table.on('draw', function (e, settings) {
  if (table.table().node() !== settings.nTable) {
    return;
  }

  // else this is our table, do something
});

I know it isn't ideal, but that's how the dom events work at the moment.

Allan

Tronik

Ok, then I understand why the on.draw is fired, but it is possible to prevent/surpress the unneccesary re-draw of the parent table when the child table is (correctly) re-drawn?

allan

In the blog post we specifically tell the parent table to redraw (to update counts and anything else) as described in the "Updated the parent table" section.

If you don't want that, drop that block.

Allan

Tronik

I dont use that function.

My problem is that the parent row is already selected, and when the child table is shown the row of the parent table gets re-selected. (and then also re-drawn)

I have already told the parent table to not use select on that cell so its not that.
Everything works as long as the row is not selected before the child table is shown.

allan

I'm going to need a link to the page showing the issue to be able to help with this one I think. I'm not understanding what is causing the parent row to be reselected if there isn't code to do that.

Allan